@maggioli-design-system/mds-input-select 2.0.5 → 3.0.0

package/dist/types/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ThemeStatusVariantType } from "@type/variant";
-import { InputValue } from "@interface/input-value";
-export { ThemeStatusVariantType } from "@type/variant";
-export { InputValue } from "@interface/input-value";
+import { ThemeStatusVariantType } from "./type/variant";
+import { MdsInputEventDetail } from "./type/input";
+export { ThemeStatusVariantType } from "./type/variant";
+export { MdsInputEventDetail } from "./type/input";
 export namespace Components {
     interface MdsInputSelect {
         /**
@@ -59,7 +59,7 @@ export interface MdsInputSelectCustomEvent<T> extends CustomEvent<T> {
 }
 declare global {
     interface HTMLMdsInputSelectElementEventMap {
-        "mdsInputSelectChange": InputValue;
+        "mdsInputSelectChange": MdsInputEventDetail;
     }
     interface HTMLMdsInputSelectElement extends Components.MdsInputSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMdsInputSelectElementEventMap>(type: K, listener: (this: HTMLMdsInputSelectElement, ev: MdsInputSelectCustomEvent<HTMLMdsInputSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -104,7 +104,7 @@ declare namespace LocalJSX {
         /**
           * Emits an InputChangeEventDetail when the value of the input element changes
          */
-        "onMdsInputSelectChange"?: (event: MdsInputSelectCustomEvent<InputValue>) => void;
+        "onMdsInputSelectChange"?: (event: MdsInputSelectCustomEvent<MdsInputEventDetail>) => void;
         /**
           * Specifies a short hint that describes the expected value of the element
          */

package/dist/types/dictionary/file-extensions.d.ts

@@ -1,9 +1,10 @@
+import { FileFormat } from "../type/variant-file-format";
 interface FileExtenstion {
     [key: string]: ExtensionInfo;
 }
 interface ExtensionInfo {
     preview?: boolean;
-    format: string;
+    format: FileFormat;
     description: string;
 }
 declare const fileExtensionsDictionary: FileExtenstion;

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

@@ -5,8 +5,9 @@ declare const themeFullVariantDictionary: string[];
 declare const themeFullVariantAvatarDictionary: string[];
 declare const themeLabelVariantDictionary: string[];
 declare const toneVariantDictionary: string[];
+declare const themeVariantChipDictionary: string[];
 declare const toneActionVariantDictionary: string[];
 declare const toneSimpleVariantDictionary: string[];
 declare const toneSmartVariantDictionary: string[];
 declare const toneMinimalVariantDictionary: string[];
-export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
+export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, themeVariantChipDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };

package/dist/types/stencil-public-runtime.d.ts

@@ -1015,6 +1015,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;
@@ -1564,6 +1566,10 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
+        onBeforeToggle?: (event: Event) => void;
+        onBeforeToggleCapture?: (event: Event) => void;
+        onToggle?: (event: Event) => void;
+        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

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

@@ -1,2 +1,2 @@
-export type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
+export type AutocompleteType = 'additional-name' | 'address' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'cc-additional-name' | 'cc-csc' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country' | 'country-name' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization' | 'organization-title' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
 export type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';

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

@@ -2,4 +2,4 @@ export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
 export type ButtonTargetType = 'self' | 'blank';
 export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonIconPositionType = 'left' | 'right';
-export type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export type ButtonVariantType = 'primary' | 'secondary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';

package/dist/types/type/header-bar.d.ts

@@ -0,0 +1,2 @@
+export type HeaderBarMenuType = 'all' | 'desktop' | 'mobile' | 'none';
+export type HeaderBarNavType = 'all' | 'desktop' | 'mobile' | 'none';

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

@@ -2,3 +2,6 @@ export type InputControlsLayoutType = 'horizontal' | 'vertical';
 export type InputControlsIconType = 'arrow' | 'arithmetic';
 export type InputValueType = null | number | string | undefined;
 export type InputTextType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+export interface MdsInputEventDetail {
+    value?: File | string | FormData | null;
+}

package/dist/types/type/variant-file-format.d.ts

@@ -1,11 +1,11 @@
+import { ThemeFullVariantType } from "./variant";
+type FileFormat = 'archive' | 'attachment' | 'audio' | 'code' | 'data' | 'document' | 'email' | 'executable' | 'image' | 'markup' | 'slide' | 'spreadsheet' | 'text' | 'vector' | 'video';
 interface FileFormatVariant {
-    color: string;
     icon: string;
-    iconBackground: string;
-    variant: string;
+    variant: ThemeFullVariantType;
 }
 interface FileFormatVariants {
     [key: string]: FileFormatVariant;
 }
 declare const fileFormatsVariant: FileFormatVariants;
-export { fileFormatsVariant, FileFormatVariant, FileFormatVariants, };
+export { fileFormatsVariant, FileFormat, FileFormatVariant, FileFormatVariants, };

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

@@ -5,8 +5,9 @@ export type ThemeFullVariantAvatarType = 'amaranth' | 'aqua' | 'blue' | 'error'
 export type ThemeLuminanceVariantType = 'dark' | 'light';
 export type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
 export type ActionVariantType = 'primary' | 'dark' | 'light';
+export type ChipVariantType = 'primary' | 'secondary' | 'dark' | 'error' | 'info' | 'success' | 'warning';
 export type StateVariantType = 'disabled' | 'focused' | 'readonly';
-export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
+export type ToneActionVariantType = 'primary' | 'secondary' | 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
 export type ToneSimpleVariantType = 'quiet' | 'strong' | 'weak';
 export type ToneMinimalVariantType = 'strong' | 'weak';

package/documentation.json

@@ -1,17 +1,17 @@
 {
-  "timestamp": "2024-10-04T08:31:53",
+  "timestamp": "2024-11-25T16:00:58",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.21.0",
-    "typescriptVersion": "5.5.3"
+    "version": "4.22.2",
+    "typescriptVersion": "5.5.4"
   },
   "components": [
     {
       "filePath": "src/components/mds-input-select/mds-input-select.tsx",
       "encapsulation": "shadow",
       "tag": "mds-input-select",
-      "readme": "# mds-input-select\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.\n",
-      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
+      "readme": "# mds-input-select\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.\n",
+      "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.",
       "docsTags": [
         {
           "name": "part",
@@ -296,16 +296,16 @@
       "events": [
         {
           "event": "mdsInputSelectChange",
-          "detail": "InputValue",
+          "detail": "MdsInputEventDetail",
           "bubbles": true,
           "complexType": {
-            "original": "InputValue",
-            "resolved": "InputValue",
+            "original": "MdsInputEventDetail",
+            "resolved": "MdsInputEventDetail",
             "references": {
-              "InputValue": {
+              "MdsInputEventDetail": {
                 "location": "import",
-                "path": "@interface/input-value",
-                "id": "src/interface/input-value.ts::InputValue"
+                "path": "@type/input",
+                "id": "src/type/input.ts::MdsInputEventDetail"
               }
             }
           },
@@ -356,6 +356,11 @@
       "docstring": "",
       "path": "src/components/mds-accordion-item/meta/event-detail.ts"
     },
+    "src/components/mds-accordion-timer/meta/event-detail.ts::MdsAccordionTimerEventDetail": {
+      "declaration": "export interface MdsAccordionTimerEventDetail {\n  index: number;\n}",
+      "docstring": "",
+      "path": "src/components/mds-accordion-timer/meta/event-detail.ts"
+    },
     "src/components/mds-accordion-timer-item/meta/event-detail.ts::MdsAccordionTimerItemEventDetail": {
       "declaration": "export interface MdsAccordionTimerItemEventDetail {\n  selected: boolean;\n  uuid: number;\n}",
       "docstring": "",
@@ -442,7 +447,7 @@
       "path": "src/type/button.ts"
     },
     "src/type/button.ts::ButtonVariantType": {
-      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
       "path": "src/type/button.ts"
     },
@@ -456,6 +461,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/variant.ts::ChipVariantType": {
+      "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "docstring": "",
+      "path": "src/type/variant.ts"
+    },
     "src/components/mds-chip/meta/interface.ts::MdsChipEvent": {
       "declaration": "interface MdsChipEvent {\n  event: Event\n  element: HTMLMdsChipElement\n}",
       "docstring": "",
@@ -497,7 +507,7 @@
       "path": "src/type/text.ts"
     },
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
-      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFileElement\n}",
+      "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
       "path": "src/components/mds-file-preview/meta/event-detail.ts"
     },
@@ -511,10 +521,15 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-header-bar/meta/types.ts::MenuType": {
-      "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+    "src/type/header-bar.ts::HeaderBarMenuType": {
+      "declaration": "export type HeaderBarMenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
-      "path": "src/components/mds-header-bar/meta/types.ts"
+      "path": "src/type/header-bar.ts"
+    },
+    "src/type/header-bar.ts::HeaderBarNavType": {
+      "declaration": "export type HeaderBarNavType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
+      "docstring": "",
+      "path": "src/type/header-bar.ts"
     },
     "src/components/mds-header/meta/event-detail.ts::MdsHeaderEventDetail": {
       "declaration": "export interface MdsHeaderEventDetail {\n  bar: HTMLMdsHeaderBarElement\n}",
@@ -552,7 +567,7 @@
       "path": "src/components/mds-img/meta/event-detail.ts"
     },
     "src/type/autocomplete.ts::AutocompleteType": {
-      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
+      "declaration": "export type AutocompleteType =\n  | 'additional-name'\n  | 'address'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country'\n  | 'country-name'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization'\n  | 'organization-title'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'",
       "docstring": "",
       "path": "src/type/autocomplete.ts"
     },
@@ -581,10 +596,10 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
-    "src/components/mds-input/meta/event-detail.ts::MdsInputEventDetail": {
-      "declaration": "export interface MdsInputEventDetail {\n  value?: string\n}",
+    "src/type/input.ts::MdsInputEventDetail": {
+      "declaration": "export interface MdsInputEventDetail {\n  value?: File | string | FormData | null\n}",
       "docstring": "",
-      "path": "src/components/mds-input/meta/event-detail.ts"
+      "path": "src/type/input.ts"
     },
     "src/components/mds-input-field/meta/types.ts::InputFieldType": {
       "declaration": "export type InputFieldType =\n  | 'date'\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'textarea'\n  | 'time'\n  | 'url'\n  | 'cc'\n  | 'cf'\n  | 'isbn'\n  | 'piva'",
@@ -601,11 +616,6 @@
       "docstring": "",
       "path": "src/components/mds-input-field/meta/validators.ts"
     },
-    "src/interface/input-value.ts::InputValue": {
-      "declaration": "export interface InputValue {\n  value: InputValueType\n}",
-      "docstring": "",
-      "path": "src/interface/input-value.ts"
-    },
     "src/components/mds-input-switch/meta/types.ts::InputSwitchSizeType": {
       "declaration": "export type InputSwitchSizeType =\n  | 'sm'\n  | 'md'\n  | 'lg'",
       "docstring": "",
@@ -652,7 +662,12 @@
       "path": "src/type/typography.ts"
     },
     "src/components/mds-modal/meta/types.ts::ModalPositionType": {
-      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'",
+      "declaration": "export type ModalPositionType =\n  | 'bottom'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'center'\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'top-left'\n  | 'top-right'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
+    "src/components/mds-modal/meta/types.ts::ModalAnimationStateType": {
+      "declaration": "export type ModalAnimationStateType =\n  | 'intro'\n  | 'none'\n  | 'outro'",
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
@@ -691,21 +706,11 @@
       "docstring": "",
       "path": "src/components/mds-pref-contrast/meta/types.ts"
     },
-    "src/type/language.ts::PrefLanguageType": {
-      "declaration": "export type PrefLanguageType =\n  | 'auto'\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/event-detail/language.ts::MdsPrefLanguageEventDetail": {
-      "declaration": "export interface MdsPrefLanguageEventDetail {\n  language?: LanguageType\n}",
+      "declaration": "export interface MdsPrefLanguageEventDetail {\n  /* A string representing the language version as defined in {@link https://datatracker.ietf.org/doc/html/rfc5646 RFC 5646: Tags for Identifying Languages (also known as BCP 47)}.\n   *\n   * `Examples of valid language codes include \"en\", \"en-US\", \"fr\", \"fr-FR\", \"es-ES\", etc.`\n   */\n  language?: string\n}",
       "docstring": "",
       "path": "src/event-detail/language.ts"
     },
-    "src/type/language.ts::LanguageType": {
-      "declaration": "export type LanguageType =\n  | `${Lowercase<string>}${Lowercase<string>}`\n  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`",
-      "docstring": "",
-      "path": "src/type/language.ts"
-    },
     "src/components/mds-pref-theme/meta/types.ts::ThemeModeType": {
       "declaration": "export type ThemeModeType =\n  | 'light'\n  | 'dark'\n  | 'system'",
       "docstring": "",
@@ -776,6 +781,11 @@
       "docstring": "",
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
+    "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
+      "declaration": "export type SortDirectionType =\n  | 'asc'\n  | 'desc'\n  | 'none'",
+      "docstring": "",
+      "path": "src/components/mds-table-header-cell/meta/types.ts"
+    },
     "src/components/mds-text/meta/types.ts::TextAnimationType": {
       "declaration": "export type TextAnimationType =\n  | 'none'\n  | 'yugop'",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maggioli-design-system/mds-input-select",
-  "version": "2.0.5",
-  "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 JavaScirpt framework you are using.",
+  "version": "3.0.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",
   "es2015": "dist/esm/index.mjs",
@@ -24,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "15.3.2",
-    "@maggioli-design-system/mds-input-tip": "1.1.3",
-    "@stencil/core": "4.21.0",
+    "@maggioli-design-system/styles": "15.5.0",
+    "@maggioli-design-system/mds-input-tip": "1.2.1",
+    "@stencil/core": "4.22.2",
     "clsx": "2.1.0"
   },
   "license": "MIT",

package/readme.md

@@ -2,7 +2,7 @@
 
 
 
-This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
+This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.
 
 <!-- Auto Generated Below -->
 
@@ -25,9 +25,9 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Events
 
-| Event                  | Description                                                                 | Type                      |
-| ---------------------- | --------------------------------------------------------------------------- | ------------------------- |
-| `mdsInputSelectChange` | Emits an InputChangeEventDetail when the value of the input element changes | `CustomEvent<InputValue>` |
+| Event                  | Description                                                                 | Type                               |
+| ---------------------- | --------------------------------------------------------------------------- | ---------------------------------- |
+| `mdsInputSelectChange` | Emits an InputChangeEventDetail when the value of the input element changes | `CustomEvent<MdsInputEventDetail>` |
 
 
 ## Shadow Parts

package/src/common/file.ts

@@ -1,11 +1,10 @@
 import { fileExtensionsDictionary, ExtensionInfo } from '@dictionary/file-extensions'
 import { fileFormatsVariant } from '@type/variant-file-format'
+import { ThemeFullVariantType } from '@type/variant'
 
 interface FileFormatsVariants {
-  color: string
   icon: string
-  iconBackground: string
-  variant: string
+  variant: ThemeFullVariantType
 }
 
 const sanitizeFilename = (filename: string, error: string = 'Attribute "filename" is undefined.') => {

package/src/common/locale.ts

@@ -1,4 +1,4 @@
-import Handlebars from 'handlebars'
+import { render } from 'mustache'
 
 type LocaleConfig = {
   el?: Record<string, string | string[]>
@@ -12,6 +12,7 @@ export class Locale {
   language: string
   config: LocaleConfig
   closestElement:HTMLElement
+  element: HTMLElement
 
   constructor (configData?: LocaleConfig) {
     if (configData) {
@@ -23,8 +24,9 @@ export class Locale {
     this.config = configData
   }
 
-  lang = (element: HTMLElement): string => {
-    this.closestElement = element.closest('[lang]') as HTMLElement
+  lang = (el: HTMLElement): string => {
+    this.element = el
+    this.closestElement = this.element.closest('[lang]') as HTMLElement
 
     if (this.closestElement) {
       if (this.closestElement.lang) {
@@ -37,11 +39,24 @@ export class Locale {
     return this.language
   }
 
+  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()
+        }
+      }
+    })
+  }
+
   private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
 
     const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
     const phrases: string[] = []
-    
+
     if (Array.isArray(languagePhrase)) {
       phrases.push(languagePhrase[0])
       phrases.push(languagePhrase[1])
@@ -63,8 +78,7 @@ export class Locale {
       }
     }
 
-    const template = Handlebars.compile(translatePhrase)
-    return template(context)
+    return render(translatePhrase, context)
   }
 
   get = (tag: string | string[], context?: Record<string, string | number>): string => {

package/src/common/unit.ts

@@ -23,7 +23,7 @@ const cssSizeToNumber = (size: string, defaultValue = 0): number => {
   if (size.includes('em')) {
     return Number(size.replace('em', '')) * 16
   }
-  
+
   return defaultValue
 }
 

package/src/components/mds-input-select/.gitlab-ci.yml

@@ -2,24 +2,19 @@
   variables:
     COMPONENT: mds-input-select
 
-# ISOLATE
-input-select-isolate:
-  extends: [.base-isolate, .base-input-select]
-  dependencies: [base-stencil-build]
-
 # TEST
 input-select-publish-test:
   extends: [.base-stencil-publish-test, .base-input-select]
-  dependencies: [base-stencil-build, input-select-isolate]
+  dependencies: [base-stencil-build, base-isolate]
 
 # PUBLISH
 input-select-publish:
   extends: [.base-stencil-publish, .base-input-select]
-  dependencies: [base-stencil-build, input-select-isolate]
-  needs: [base-stencil-build, input-select-isolate, input-select-publish-test]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, input-select-publish-test]
 
 # INSTALL TEST
 input-select-install-test:
   extends: [.base-stencil-install-test, .base-input-select]
-  dependencies: [base-stencil-build, input-select-isolate]
-  needs: [base-stencil-build, input-select-isolate, input-select-publish]
+  dependencies: [base-stencil-build, base-isolate]
+  needs: [base-stencil-build, base-isolate, input-select-publish]

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

@@ -5,7 +5,7 @@
 
     --mds-input-select-ring: theme('boxShadow.outline-50');
     --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);
-    --mds-input-select-arrow-icon-blur-background-color: theme('colors.brand-maggioli-05');
+    --mds-input-select-arrow-icon-blur-background-color: theme('colors.variant-primary-05');
     --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
     --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);
     --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));
@@ -24,7 +24,7 @@
 
       --mds-input-select-ring: theme('boxShadow.outline-50');
       --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);
-      --mds-input-select-arrow-icon-blur-background-color: theme('colors.brand-maggioli-05');
+      --mds-input-select-arrow-icon-blur-background-color: theme('colors.variant-primary-05');
       --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));
       --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);
       --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));

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

@@ -2,18 +2,18 @@
 
 :host {
 
-  --mds-input-select-icon-color: var(--brand-maggioli-03);
+  --mds-input-select-icon-color: var(--variant-primary-03);
   --mds-input-select-variant-color: 0 0 0;
-  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));
-  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));
-  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));
-  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));
+  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));
+  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));
+  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));
+  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));
 }
 
 :host( :hover ),
 :host( :focus-within ) {
 
-  --mds-input-select-variant-color: var(--brand-maggioli-04);
+  --mds-input-select-variant-color: var(--variant-primary-04);
 }
 
 :host( [variant="info"] ) {

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

@@ -1,8 +1,5 @@
 @import '~@maggioli-design-system/styles/dist/tailwind/typography.css';
 @import '../../tailwind/components.css';
-
-
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -26,14 +23,14 @@
   user-select: none;
 }
 
-:host( [required]:not([required="false"]):focus-within ) .icon {
-  @apply translate-y-150 translate-x-150;
+:host([required]:not([required="false"]):focus-within) .icon {
+  transform: translate(theme('spacing.150'), theme('spacing.150'));
 }
 
-:host( :hover ),
-:host( :focus-within ) {
+:host(:hover),
+:host(:focus-within) {
 
-  --mds-input-select-variant-color: var(--brand-maggioli-03);
+  --mds-input-select-variant-color: var(--variant-primary-03);
   --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);
   --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);
   --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);
@@ -51,7 +48,6 @@
     py-300
     rounded-lg
     text-info-detail
-    transition-cosmetic
     w-full;
 
   appearance: none;
@@ -63,6 +59,7 @@
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition-property: background-color, border-color, box-shadow, color, fill;
 }
 
 .input:hover,
@@ -70,8 +67,7 @@
   @apply
     duration-300
     ease-out-expo
-    outline-none
-    transition-cosmetic;
+    outline-none;
 
   color: theme('colors.tone-neutral-03');
 }
@@ -98,9 +94,8 @@
 }
 
 :host([disabled]:not([disabled="false"])) .icon {
-  @apply translate-y-200 translate-x-250;
-
   fill: theme('colors.tone-neutral-06');
+  transform: translate(theme('spacing.250'), theme('spacing.200'));
 }
 
 .icon-container {
@@ -119,10 +114,11 @@
   @apply
     duration-200
     rounded-full
-    transition-cosmetic;
+    svg;
 
-  background-color: var(--mds-input-select-arrow-icon-background-color, theme('colors.brand-maggioli-09'));
-  fill: var(--mds-input-select-arrow-icon-color, theme('colors.brand-maggioli-04'));
+  background-color: var(--mds-input-select-arrow-icon-background-color, theme('colors.variant-primary-09'));
+  fill: var(--mds-input-select-arrow-icon-color, theme('colors.variant-primary-04'));
+  transition-property: background-color, fill;
 }
 
 .option-container {
@@ -143,7 +139,7 @@
 
   :host {
 
-    --mds-input-select-background: theme('colors.brand-maggioli-07');
+    --mds-input-select-background: theme('colors.variant-primary-07');
   }
 }