@maggioli-design-system/mds-input-select 3.4.5 → 3.5.0

package/dist/stats.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-06-23T14:13:40",
+  "timestamp": "2025-12-03T10:39:24",
   "compiler": {
     "name": "node",
-    "version": "22.11.0"
+    "version": "22.15.0"
   },
   "app": {
     "namespace": "MdsInputSelect",
@@ -88,19 +88,19 @@
         "files": 42,
         "generatedFiles": [
           "./dist/cjs/app-globals-3a1e7e63.js",
-          "./dist/cjs/index-648a2952.js",
+          "./dist/cjs/index-18f29026.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-input-select.cjs.entry.js",
           "./dist/cjs/mds-input-select.cjs.js",
           "./dist/esm-es5/app-globals-0f993ce5.js",
-          "./dist/esm-es5/index-e1f2fe2a.js",
+          "./dist/esm-es5/index-60887c04.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-input-select.entry.js",
           "./dist/esm-es5/mds-input-select.js",
           "./dist/esm/app-globals-0f993ce5.js",
-          "./dist/esm/index-e1f2fe2a.js",
+          "./dist/esm/index-60887c04.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-input-select.entry.js",
@@ -110,24 +110,24 @@
           "./dist/mds-input-select/index.esm.js",
           "./dist/mds-input-select/mds-input-select.esm.js",
           "./dist/mds-input-select/mds-input-select.js",
+          "./dist/mds-input-select/p-0760aca1.system.entry.js",
+          "./dist/mds-input-select/p-39d143a4.system.js",
+          "./dist/mds-input-select/p-41875927.js",
           "./dist/mds-input-select/p-50ea2036.system.js",
           "./dist/mds-input-select/p-56ba5cbf.system.js",
-          "./dist/mds-input-select/p-5f2a815f.system.js",
-          "./dist/mds-input-select/p-6c484f11.entry.js",
-          "./dist/mds-input-select/p-bf3133aa.js",
-          "./dist/mds-input-select/p-c5f708cb.system.entry.js",
-          "./dist/mds-input-select/p-cbce7086.system.js",
+          "./dist/mds-input-select/p-9758de3c.entry.js",
+          "./dist/mds-input-select/p-db5fddbf.system.js",
           "./dist/mds-input-select/p-e1255160.js",
           "./www/build/index.esm.js",
           "./www/build/mds-input-select.esm.js",
           "./www/build/mds-input-select.js",
+          "./www/build/p-0760aca1.system.entry.js",
+          "./www/build/p-39d143a4.system.js",
+          "./www/build/p-41875927.js",
           "./www/build/p-50ea2036.system.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-5f2a815f.system.js",
-          "./www/build/p-6c484f11.entry.js",
-          "./www/build/p-bf3133aa.js",
-          "./www/build/p-c5f708cb.system.entry.js",
-          "./www/build/p-cbce7086.system.js",
+          "./www/build/p-9758de3c.entry.js",
+          "./www/build/p-db5fddbf.system.js",
           "./www/build/p-e1255160.js"
         ]
       },
@@ -161,12 +161,12 @@
         "components": [
           "mds-input-select"
         ],
-        "bundleId": "p-6c484f11",
-        "fileName": "p-6c484f11.entry.js",
+        "bundleId": "p-9758de3c",
+        "fileName": "p-9758de3c.entry.js",
         "imports": [
-          "p-bf3133aa.js"
+          "p-41875927.js"
         ],
-        "originalByteSize": 24154
+        "originalByteSize": 24811
       }
     ],
     "esm": [
@@ -178,9 +178,9 @@
         "bundleId": "mds-input-select",
         "fileName": "mds-input-select.entry.js",
         "imports": [
-          "index-e1f2fe2a.js"
+          "index-60887c04.js"
         ],
-        "originalByteSize": 24158
+        "originalByteSize": 24815
       }
     ],
     "es5": [
@@ -192,9 +192,9 @@
         "bundleId": "mds-input-select",
         "fileName": "mds-input-select.entry.js",
         "imports": [
-          "index-e1f2fe2a.js"
+          "index-60887c04.js"
         ],
-        "originalByteSize": 24158
+        "originalByteSize": 24815
       }
     ],
     "system": [
@@ -203,12 +203,12 @@
         "components": [
           "mds-input-select"
         ],
-        "bundleId": "p-c5f708cb.system",
-        "fileName": "p-c5f708cb.system.entry.js",
+        "bundleId": "p-0760aca1.system",
+        "fileName": "p-0760aca1.system.entry.js",
         "imports": [
-          "p-cbce7086.system.js"
+          "p-db5fddbf.system.js"
         ],
-        "originalByteSize": 25211
+        "originalByteSize": 26006
       }
     ],
     "commonjs": [
@@ -220,9 +220,9 @@
         "bundleId": "mds-input-select.cjs",
         "fileName": "mds-input-select.cjs.entry.js",
         "imports": [
-          "index-648a2952.js"
+          "index-18f29026.js"
         ],
-        "originalByteSize": 24253
+        "originalByteSize": 24910
       }
     ]
   },
@@ -476,6 +476,27 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "defaultValue",
+          "type": "any",
+          "attribute": "default-value",
+          "reflect": true,
+          "mutable": false,
+          "required": false,
+          "optional": true,
+          "complexType": {
+            "original": "string | number | null",
+            "resolved": "null | number | string | undefined",
+            "references": {}
+          },
+          "docs": {
+            "tags": [],
+            "text": "Specifies the default value of the component"
+          },
+          "internal": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "variant",
           "type": "string",
@@ -506,9 +527,6 @@
       ],
       "shadowDelegatesFocus": false,
       "states": [
-        {
-          "name": "selected"
-        },
         {
           "name": "hasFocus"
         }
@@ -723,6 +741,27 @@
               "getter": false,
               "setter": false
             },
+            {
+              "name": "defaultValue",
+              "type": "any",
+              "attribute": "default-value",
+              "reflect": true,
+              "mutable": false,
+              "required": false,
+              "optional": true,
+              "complexType": {
+                "original": "string | number | null",
+                "resolved": "null | number | string | undefined",
+                "references": {}
+              },
+              "docs": {
+                "tags": [],
+                "text": "Specifies the default value of the component"
+              },
+              "internal": false,
+              "getter": false,
+              "setter": false
+            },
             {
               "name": "variant",
               "type": "string",
@@ -753,9 +792,6 @@
           ],
           "virtualProperties": [],
           "states": [
-            {
-              "name": "selected"
-            },
             {
               "name": "hasFocus"
             }
@@ -795,6 +831,10 @@
             {
               "propName": "disabled",
               "methodName": "disabledChanged"
+            },
+            {
+              "propName": "placeholder",
+              "methodName": "placeholderChanged"
             }
           ],
           "styles": [
@@ -828,7 +868,7 @@
           "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/.build/mds-input-select/src/components/mds-input-select/mds-input-select.tsx",
           "sourceMapPath": null,
           "hasAttributeChangedCallbackFn": false,
-          "hasComponentWillLoadFn": false,
+          "hasComponentWillLoadFn": true,
           "hasComponentDidLoadFn": true,
           "hasComponentShouldUpdateFn": false,
           "hasComponentWillUpdateFn": false,
@@ -867,7 +907,7 @@
           "hasVdomKey": true,
           "hasVdomListener": true,
           "hasVdomPropOrAttr": true,
-          "hasVdomRef": false,
+          "hasVdomRef": true,
           "hasVdomRender": true,
           "hasVdomStyle": false,
           "hasVdomText": true,
@@ -885,6 +925,7 @@
             "multiple",
             "size",
             "part",
+            "ref",
             "value",
             "selected",
             "innerHTML",
@@ -895,8 +936,8 @@
             "variant"
           ],
           "htmlTagNames": [
-            "select",
             "option",
+            "select",
             "div",
             "i",
             "slot",
@@ -922,7 +963,7 @@
   ],
   "componentGraph": {
     "sc-mds-input-select": [
-      "p-bf3133aa.js"
+      "p-41875927.js"
     ]
   },
   "sourceGraph": {
@@ -967,8 +1008,7 @@
     "./src/dictionary/file-extensions.ts": [],
     "./src/dictionary/floating-ui.ts": [],
     "./src/dictionary/icon.ts": [
-      "./src/fixtures/icons.json",
-      "./src/fixtures/iconsauce.json"
+      "./src/fixtures/icons.json"
     ],
     "./src/dictionary/input.ts": [],
     "./src/dictionary/keyboard.ts": [],

package/dist/types/common/slot.d.ts

@@ -1,4 +1,5 @@
 declare const hasSlottedElements: (el: HTMLElement, name?: string) => boolean;
 declare const hasSlottedNodes: (el: HTMLElement, name?: string) => boolean;
 declare const hasSlotted: (el: HTMLElement, name?: string) => boolean;
-export { hasSlottedElements, hasSlottedNodes, hasSlotted, };
+declare const hasSlottedContent: (el: HTMLElement, name?: string) => boolean;
+export { hasSlottedElements, hasSlottedNodes, hasSlottedContent, hasSlotted, };

package/dist/types/components/mds-input-select/mds-input-select.d.ts

@@ -5,8 +5,8 @@ import { ThemeStatusVariantType } from "../../type/variant";
  * @part select - The select HTML element
  */
 export declare class MdsInputSelect {
+    private selectEl;
     host: HTMLMdsInputSelectElement;
-    selected: boolean;
     hasFocus: boolean;
     internals: ElementInternals;
     /**
@@ -45,6 +45,10 @@ export declare class MdsInputSelect {
      * Specifies the value of the component
      */
     value?: string | number | null;
+    /**
+     * Specifies the default value of the component
+     */
+    defaultValue?: string | number | null;
     /**
      * Sets the variant of the component
      */
@@ -58,7 +62,16 @@ export declare class MdsInputSelect {
      */
     protected valueChanged(): void;
     protected disabledChanged(newValue: boolean): void;
+    /**
+     * This is for the react component because placeholder is valued after didload
+     * and therefore the placeholder option is drawn as the last option.
+     * Here the option is brought back to the first position
+     * @param newValue placeholder new value
+     * @param oldValue placeholder old value
+     */
+    protected placeholderChanged(newValue: string | undefined, oldValue: string | undefined): void;
     formResetCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private onInput;
     private onBlur;

package/dist/types/components/mds-input-select/test/mds-input-select.stories.d.ts

@@ -63,9 +63,37 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: any;
-export declare const Multiple: any;
-export declare const Required: any;
-export declare const Disabled: any;
-export declare const FormIntegrationWithPlaceholder: any;
-export declare const FormIntegration: any;
+export declare const Default: {
+    render: (args: any) => any;
+    args: {
+        placeholder: string;
+    };
+};
+export declare const Multiple: {
+    render: (args: any) => any;
+    args: {
+        multiple: boolean;
+    };
+};
+export declare const Required: {
+    render: (args: any) => any;
+    args: {
+        required: boolean;
+        placeholder: string;
+    };
+};
+export declare const Disabled: {
+    render: (args: any) => any;
+    args: {
+        disabled: boolean;
+    };
+};
+export declare const FormIntegrationWithPlaceholder: {
+    render: (args: any) => any;
+    args: {
+        placeholder: string;
+    };
+};
+export declare const FormIntegration: {
+    render: (args: any) => any;
+};

package/dist/types/components.d.ts

@@ -19,6 +19,10 @@ export namespace Components {
           * Specifies a short hint that describes the expected value of the element
          */
         "autocomplete"?: 'on';
+        /**
+          * Specifies the default value of the component
+         */
+        "defaultValue"?: string | number | null;
         /**
           * If true, the element is displayed as disabled
          */
@@ -89,6 +93,10 @@ declare namespace LocalJSX {
           * Specifies a short hint that describes the expected value of the element
          */
         "autocomplete"?: 'on';
+        /**
+          * Specifies the default value of the component
+         */
+        "defaultValue"?: string | number | null;
         /**
           * If true, the element is displayed as disabled
          */

package/dist/types/dictionary/button.d.ts

@@ -4,6 +4,7 @@ declare const buttonToneVariantDictionary: string[];
 declare const buttonToneMinimalVariantDictionary: string[];
 declare const buttonTargetDictionary: string[];
 declare const buttonSizeDictionary: string[];
+declare const tabSizeDictionary: string[];
 declare const buttonIconPositionDictionary: string[];
 declare const buttonTypeDictionary: string[];
-export { buttonDropdownVariantDictionary, buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneMinimalVariantDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
+export { buttonDropdownVariantDictionary, buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneMinimalVariantDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, tabSizeDictionary, };

package/dist/types/dictionary/icon.d.ts

@@ -1,4 +1,4 @@
-declare const iconsDictionary: string[];
+declare const iconsDictionary: any;
 declare const mggIconsDictionary: string[];
 declare const svgIconsDictionary: string[];
 export { iconsDictionary, mggIconsDictionary, svgIconsDictionary, };

package/dist/types/type/button.d.ts

@@ -1,6 +1,7 @@
 export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
 export type ButtonTargetType = 'self' | 'blank';
 export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
+export type TabSizeType = 'sm' | 'md';
 export type ButtonIconPositionType = 'left' | 'right';
 export type ButtonVariantType = 'ai' | 'apple' | 'dark' | 'error' | 'google' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';
 export type ButtonDropdownVariantType = 'ai' | 'dark' | 'error' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-23T13:28:32",
+  "timestamp": "2025-12-03T09:57:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -73,6 +73,38 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "defaultValue",
+          "type": "null | number | string | undefined",
+          "complexType": {
+            "original": "string | number | null",
+            "resolved": "null | number | string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "default-value",
+          "reflectToAttr": true,
+          "docs": "Specifies the default value of the component",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "null"
+            },
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean | undefined",
@@ -522,7 +554,7 @@
       "path": "src/type/variant.ts"
     },
     "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
-      "declaration": "interface MdsChipEvent {\n  event: Event\n  element: HTMLMdsChipElement\n}",
+      "declaration": "interface MdsChipEvent {\n  event: Event\n  selected?: boolean\n  element: HTMLMdsChipElement\n}",
       "docstring": "",
       "path": "src/components/mds-chip/meta/interface.ts"
     },
@@ -776,6 +808,11 @@
       "docstring": "",
       "path": "src/components/mds-policy-ai/meta/types.ts"
     },
+    "src/type/button.ts::TabSizeType": {
+      "declaration": "export type TabSizeType =\n  | 'sm'\n  | 'md'",
+      "docstring": "",
+      "path": "src/type/button.ts"
+    },
     "src/components/mds-pref-animation/meta/types.ts::AnimationModeType": {
       "declaration": "export type AnimationModeType =\n  | 'reduce'\n  | 'no-preference'\n  | 'system'",
       "docstring": "",
@@ -856,6 +893,11 @@
       "docstring": "",
       "path": "src/components/mds-radial-menu/meta/types.ts"
     },
+    "src/components.d.ts::ModalOverflowType": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/components.d.ts"
+    },
     "src/components/mds-stepper-bar/meta/event-detail.ts::MdsStepperBarEventDetail": {
       "declaration": "export interface MdsStepperBarEventDetail {\n  step: number\n  value: string\n}",
       "docstring": "",
@@ -866,6 +908,11 @@
       "docstring": "",
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
+    "src/components/mds-tab/meta/type.ts::DirectionType": {
+      "declaration": "export type DirectionType =\n  | 'horizontal'\n  | 'vertical'",
+      "docstring": "",
+      "path": "src/components/mds-tab/meta/type.ts"
+    },
     "src/type/animation.ts::HorizontalActionsAnimationType": {
       "declaration": "export type HorizontalActionsAnimationType =\n  | 'fade'\n  | 'slide'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-select",
-  "version": "3.4.5",
+  "version": "3.5.0",
   "description": "mds-input-select is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -9,18 +9,19 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Properties
 
-| Property       | Attribute      | Description                                                                                        | Type                                                       | Default     |
-| -------------- | -------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
-| `autoFocus`    | `auto-focus`   | Specifies a short hint that describes the expected value of the element                            | `boolean \| undefined`                                     | `undefined` |
-| `autocomplete` | `autocomplete` | Specifies a short hint that describes the expected value of the element                            | `"on" \| undefined`                                        | `undefined` |
-| `disabled`     | `disabled`     | If true, the element is displayed as disabled                                                      | `boolean \| undefined`                                     | `false`     |
-| `multiple`     | `multiple`     | Specifies if the select should allow multiple options to be selected in the list                   | `boolean \| undefined`                                     | `false`     |
-| `name`         | `name`         | Is needed to reference the form data after the form is submitted                                   | `string \| undefined`                                      | `undefined` |
-| `placeholder`  | `placeholder`  | Specifies a short hint that describes the expected value of the element                            | `string \| undefined`                                      | `undefined` |
-| `required`     | `required`     | Specifies that the element must be filled out before submitting the form                           | `boolean \| undefined`                                     | `false`     |
-| `size`         | `size`         | When `multiple` is set to `true`, represents the number or rows in the list that should be visible | `number \| undefined`                                      | `0`         |
-| `value`        | `value`        | Specifies the value of the component                                                               | `null \| number \| string \| undefined`                    | `''`        |
-| `variant`      | `variant`      | Sets the variant of the component                                                                  | `"error" \| "info" \| "success" \| "warning" \| undefined` | `undefined` |
+| Property       | Attribute       | Description                                                                                        | Type                                                       | Default     |
+| -------------- | --------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
+| `autoFocus`    | `auto-focus`    | Specifies a short hint that describes the expected value of the element                            | `boolean \| undefined`                                     | `undefined` |
+| `autocomplete` | `autocomplete`  | Specifies a short hint that describes the expected value of the element                            | `"on" \| undefined`                                        | `undefined` |
+| `defaultValue` | `default-value` | Specifies the default value of the component                                                       | `null \| number \| string \| undefined`                    | `undefined` |
+| `disabled`     | `disabled`      | If true, the element is displayed as disabled                                                      | `boolean \| undefined`                                     | `false`     |
+| `multiple`     | `multiple`      | Specifies if the select should allow multiple options to be selected in the list                   | `boolean \| undefined`                                     | `false`     |
+| `name`         | `name`          | Is needed to reference the form data after the form is submitted                                   | `string \| undefined`                                      | `undefined` |
+| `placeholder`  | `placeholder`   | Specifies a short hint that describes the expected value of the element                            | `string \| undefined`                                      | `undefined` |
+| `required`     | `required`      | Specifies that the element must be filled out before submitting the form                           | `boolean \| undefined`                                     | `false`     |
+| `size`         | `size`          | When `multiple` is set to `true`, represents the number or rows in the list that should be visible | `number \| undefined`                                      | `0`         |
+| `value`        | `value`         | Specifies the value of the component                                                               | `null \| number \| string \| undefined`                    | `''`        |
+| `variant`      | `variant`       | Sets the variant of the component                                                                  | `"error" \| "info" \| "success" \| "warning" \| undefined` | `undefined` |
 
 
 ## Events

package/src/common/locale.ts

@@ -41,15 +41,17 @@ export class Locale {
 
   update = (doc?: Document | ShadowRoot): void => {
     const context = doc ?? this.element.shadowRoot
-    context && context.querySelectorAll('*').forEach(el => {
-      if (el.tagName.toLowerCase().startsWith('mds-')) {
-        // eslint-disable-next-line no-restricted-syntax
-        if (el && 'updateLang' in el) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (el as any).updateLang()
+    if (context) {
+      context.querySelectorAll('*').forEach(el => {
+        if (el.tagName.toLowerCase().startsWith('mds-')) {
+          // eslint-disable-next-line no-restricted-syntax
+          if (el && 'updateLang' in el) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (el as any).updateLang()
+          }
         }
-      }
-    })
+      })
+    }
   }
 
   private pluralize = (tag: string | string[], context: Record<string, string | number | boolean>): string => {

package/src/common/slot.ts

@@ -28,8 +28,20 @@ const hasSlotted = (el: HTMLElement, name?: string): boolean => {
   return false
 }
 
+const hasSlottedContent = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (!slot) return false
+
+  const assignedNodes = slot.assignedNodes({ flatten: true })
+  return assignedNodes.some(node =>
+    node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '',
+  )
+}
+
 export {
   hasSlottedElements,
   hasSlottedNodes,
+  hasSlottedContent,
   hasSlotted,
 }

package/src/components/mds-input-select/mds-input-select.css

@@ -54,7 +54,7 @@
   border: 0;
   box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);
   box-sizing: border-box;
-  color: theme('colors.tone-neutral-05');
+  color: theme('colors.tone-neutral-02');
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -75,8 +75,8 @@
   color: theme('colors.tone-neutral-03');
 }
 
-.input--mds-input-select-selected {
-  color: theme('colors.tone-neutral-02');
+:host([required]:not([required="false"])) .input {
+  color: theme('colors.tone-neutral-05');
 }
 
 .input:disabled {