Merge branch 'v1/contrib' into bugfix/imports

Author: JesmoDev

package-lock.json

@@ -67,13 +67,13 @@
     "@lerna-lite/version": "2.5.1",
     "@open-wc/testing": "3.2.0",
     "@rollup/plugin-node-resolve": "15.1.0",
-    "@storybook/addon-a11y": "7.2.2",
-    "@storybook/addon-actions": "7.2.2",
-    "@storybook/addon-essentials": "7.2.2",
-    "@storybook/addon-links": "7.2.2",
-    "@storybook/blocks": "7.2.2",
-    "@storybook/web-components": "7.2.2",
-    "@storybook/web-components-vite": "7.2.2",
+    "@storybook/addon-a11y": "7.4.5",
+    "@storybook/addon-actions": "7.4.5",
+    "@storybook/addon-essentials": "7.4.5",
+    "@storybook/addon-links": "7.4.5",
+    "@storybook/blocks": "7.4.5",
+    "@storybook/web-components": "7.4.5",
+    "@storybook/web-components-vite": "7.4.5",
     "@types/chai": "4.3.5",
     "@typescript-eslint/eslint-plugin": "6.6.0",
     "@typescript-eslint/parser": "6.0.0",
@@ -86,21 +86,21 @@
     "element-internals-polyfill": "1.3.5",
     "esbuild": "0.17.18",
     "eslint": "8.45.0",
-    "eslint-config-prettier": "8.9.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-lit": "1.8.3",
     "eslint-plugin-lit-a11y": "4.1.0",
-    "eslint-plugin-storybook": "0.6.13",
+    "eslint-plugin-storybook": "0.6.14",
     "eslint-plugin-wc": "1.5.0",
     "github-markdown-css": "5.2.0",
     "glob": "8.1.0",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
     "npm-check-updates": "16.10.16",
     "plop": "3.1.2",
-    "postcss": "8.4.26",
+    "postcss": "8.4.31",
     "postcss-advanced-variables": "3.0.1",
     "postcss-cli": "10.1.0",
     "postcss-color-function": "4.1.0",
@@ -123,7 +123,7 @@
     "rollup-plugin-import-css": "3.3.1",
     "rollup-plugin-minify-html-literals": "1.2.6",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "7.2.2",
+    "storybook": "7.4.5",
     "tsc-files": "1.1.4",
     "turbo": "^1.10.12",
     "typescript": "5.2.2",

package.json

@@ -58,6 +58,8 @@ export class UUIInputElement extends FormControlMixin(
           var(--uui-input-border-color, var(--uui-color-border));
 
         --uui-button-height: 100%;
+        --auto-width-text-margin-right: 0;
+        --auto-width-text-margin-left: 0;
       }
 
       #control {
@@ -75,6 +77,8 @@ export class UUIInputElement extends FormControlMixin(
         z-index: -1;
         height: 0px;
         padding: 0 var(--uui-size-space-3);
+        margin: 0 var(--auto-width-text-margin-right) 0
+          var(--auto-width-text-margin-left);
       }
 
       :host([auto-width]) #input {
@@ -407,7 +411,7 @@ export class UUIInputElement extends FormControlMixin(
   }
 
   private renderInputWithAutoWidth() {
-    html`<div id="control">
+    return html`<div id="control">
       ${this.renderInput()}${this.renderAutoWidthBackground()}
     </div>`;
   }

packages/uui-input/lib/uui-input.element.ts

@@ -314,7 +314,7 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
       </uui-input>
       <br /><br />
       <uui-input
@@ -329,15 +329,31 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
         <uui-input
           slot="prepend"
           placeholder="Prepend auto-width"
-          .autoWidth=${props.autoWidth}></uui-input>
+          ?auto-width=${props.autoWidth}></uui-input>
         <uui-input
           slot="append"
           placeholder="Append auto-width false"></uui-input>
-      </uui-input>`,
+      </uui-input>
+
+      <br /><br />
+      <uui-input
+        .min=${props.min}
+        .max=${props.max}
+        .step=${props.step}
+        .disabled=${props.disabled}
+        .readonly=${props.readonly}
+        .error=${props.error}
+        .label=${props.label}
+        .type=${props.type}
+        .name=${props.name}
+        style="--auto-width-text-margin-right: 50px"
+        placeholder="--auto-width-text-margin-right: 50px"
+        .value=${props.value}
+        ?auto-width=${props.autoWidth}></uui-input>`,
   args: {
     autoWidth: true,
     placeholder: 'Start typing...',

packages/uui-input/lib/uui-input.story.ts

@@ -18,11 +18,11 @@ export class UUIModalElement extends LitElement {
 
   private _transitionDuration = 250;
 
-  @property()
+  @property({ type: Number, attribute: 'transition-duration' })
   public get transitionDuration() {
     return this._transitionDuration;
   }
-  public set transitionDuration(value) {
+  public set transitionDuration(value: number) {
     this._transitionDuration = value;
     this.style.setProperty(
       '--uui-modal-transition-duration',
@@ -45,7 +45,6 @@ export class UUIModalElement extends LitElement {
     event?.stopImmediatePropagation();
 
     const openEvent = new CustomEvent('open', {
-      bubbles: true,
       cancelable: true,
     });
 
@@ -60,7 +59,6 @@ export class UUIModalElement extends LitElement {
     event?.stopImmediatePropagation();
 
     const closeEvent = new CustomEvent('close', {
-      bubbles: true,
       cancelable: true,
     });
     this.dispatchEvent(closeEvent);
@@ -80,6 +78,9 @@ export class UUIModalElement extends LitElement {
     this.isClosing = true;
     this.isOpen = false;
     this._dialogElement?.close();
+
+    this.dispatchEvent(new CustomEvent('close-end'));
+
     this.remove();
   }
 

packages/uui-modal/lib/uui-modal.element.ts

@@ -91,6 +91,10 @@ Dispatched on first render. This will set open to true and show the modal. Can b
 Dispatched when the modal is closed. Can be cancelled if you want to prevent the modal from closing. But then you'll have to manually call `_closeModal()` when you want to close the modal.
 This is used in the `uui-modal-sidebar` to wait for the animation to finish before removing the modal from the DOM.
 
+#### `close-end`
+
+This event is triggered before removing the component from the DOM, either after animations or delays or when `_closeModal()` is manually invoked.
+
 ### CSS Variables
 
 ---

packages/uui-modal/lib/uui-modal.mdx

@@ -40,7 +40,7 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
         min-height: var(--uui-size-12);
         min-width: 70px;
         padding: var(--uui-size-2)
-          var(--uui-tab-padding-horizontal, var(--uui-size-4));
+          var(--uui-tab-padding-horizontal, var(--uui-size-5));
         border: none;
         font-size: inherit;
         background: none;