@maggioli-design-system/mds-input-select 1.0.2 → 2.0.1

package/dist/collection/components/mds-input-select/mds-input-select.js

@@ -1,16 +1,23 @@
 import clsx from "clsx";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import { Host, h } from "@stencil/core";
+/**
+ * @part select - The select HTML element
+ */
 export class MdsInputSelect {
     constructor() {
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
-                this.selected = input.value !== '';
                 this.value = input.value;
-                // this.internals.setFormValue(input.value)
             }
         };
+        this.onBlur = () => {
+            this.hasFocus = false;
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+        };
         this.emptyOptions = () => {
             var _a;
             const select = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('select');
@@ -44,23 +51,47 @@ export class MdsInputSelect {
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
                 select === null || select === void 0 ? void 0 : select.appendChild(element.cloneNode(true));
             });
+            /**
+             * I found only this way to make the `select` element SEE the
+             * selected option that we wanted as a default
+             */
+            if (this.value) {
+                select === null || select === void 0 ? void 0 : select.querySelectorAll('option').forEach((element) => {
+                    element.selected = element.value === this.value;
+                });
+            }
         };
         this.selected = undefined;
+        this.hasFocus = false;
         this.autocomplete = undefined;
         this.autoFocus = undefined;
         this.placeholder = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.multiple = false;
+        this.size = 0;
         this.value = '';
+        this.variant = undefined;
     }
     /**
      * Emits the change event when the component value changes
      */
     valueChanged() {
         var _a;
+        this.selected = this.value !== '';
         this.changeEvent.emit({ value: this.value });
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
     }
+    componentDidLoad() {
+        if (this.value) {
+            this.selected = true;
+            this.internals.setFormValue(this.value);
+        }
+    }
     render() {
-        return (h(Host, null, h("select", { class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this) }, this.placeholder && h("option", { value: "", disabled: true, selected: true }, this.placeholder)), h("div", { class: "icon-container" }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { class: "option-container" }, h("slot", { onSlotchange: this.onSlotChangeHandler }))));
+        return (h(Host, { key: 'ea2542be96ac1e1fb7df7f0ed57341842827fcde' }, h("select", { key: 'ebd4810a2eb6b85b85feca18037b0419905276e4', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: '8e071e326a0e46f19931616099d6114ff5453609', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: 'e081b71128730e9c2396e9ff5f4fae5c8f3707fb', class: "icon-container" }, h("i", { key: '24c6ff4d6d6dcb1cadfe66666a971e8cef8835b9', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'f21d4aeca656dd95081fe37e963e10de42cddc2a', class: "option-container" }, h("slot", { key: '5e2d5bce08d8e8b0283c866956873092c6e0f715', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'd4f14b01158d9aef1b3c4c7319d3077a8ad5a154', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'e3a21178db5726df5f91bf9213836f4388baf51e', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '614d37e64de08213f58a89d4f9e02508341614f3', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -128,6 +159,95 @@ export class MdsInputSelect {
                 "attribute": "placeholder",
                 "reflect": true
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is needed to reference the form data after the form is submitted"
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the element is displayed as disabled"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies that the element must be filled out before submitting the form"
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the select should allow multiple options to be selected in the list"
+                },
+                "attribute": "multiple",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When `multiple` is set to `true`, represents the number or rows in the list that should be visible"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "0"
+            },
             "value": {
                 "type": "any",
                 "mutable": false,
@@ -140,17 +260,41 @@ export class MdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the value of the element"
+                    "text": "Specifies the value of the component"
                 },
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeStatusVariantType",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "ThemeStatusVariantType": {
+                            "location": "import",
+                            "path": "@type/variant",
+                            "id": "src/type/variant.ts::ThemeStatusVariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the variant of the component"
+                },
+                "attribute": "variant",
+                "reflect": true
             }
         };
     }
     static get states() {
         return {
-            "selected": {}
+            "selected": {},
+            "hasFocus": {}
         };
     }
     static get events() {

package/dist/collection/components/mds-input-select/test/mds-input-select.stories.js

@@ -1,11 +1,16 @@
 import { citiesDictionary } from "../../../fixtures/cities";
 import { autoCompleteDictionary } from "../../../dictionary/autocomplete";
+import { themeStatusVariantDictionary } from "../../../dictionary/variant";
 import { h } from "@stencil/core";
 const cities = {};
 citiesDictionary.map((element, index) => { cities[index] = element; });
 export default {
     title: 'Form / Select',
     argTypes: {
+        value: {
+            type: { name: 'string' },
+            description: 'The selected value of the select',
+        },
         autocomplete: {
             description: 'Specifies whether the element should have autocomplete enabled',
             options: autoCompleteDictionary,
@@ -19,6 +24,28 @@ export default {
             type: { name: 'string' },
             description: 'Specifies a short hint that describes the expected value of the element',
         },
+        required: {
+            type: { name: 'boolean' },
+            description: 'Specifies that the element must be filled out before submitting the form',
+        },
+        disabled: {
+            type: { name: 'boolean' },
+            description: 'If true, the element is displayed as disabled',
+        },
+        multiple: {
+            type: { name: 'boolean' },
+            description: 'If true, the element allows multiple options to be selected in the list',
+        },
+        size: {
+            type: { name: 'number' },
+            description: 'When multiple is set to true, represents the number of rows in the list that should be visible',
+        },
+        variant: {
+            type: { name: 'string' },
+            options: themeStatusVariantDictionary,
+            control: { type: 'select' },
+            description: 'Sets the variant of the component',
+        },
     },
 };
 const Template = args => h("mds-input-select", Object.assign({}, args), h("option", { value: "1" }, "First contact"), h("option", { value: "2" }, "Second impact"), h("option", { value: "3" }, "The Third Man"), h("option", { value: "4" }, "The Fourth Emendament"));
@@ -26,3 +53,15 @@ export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Seleziona un film...',
 };
+export const Multiple = Template.bind({});
+Multiple.args = {
+    multiple: true,
+};
+export const Required = Template.bind({});
+Required.args = {
+    required: true,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};

package/dist/collection/type/preference.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/variant-file-format.js

@@ -4,6 +4,15 @@ import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
 import baselineTerminal from "@icon/mi/baseline/terminal.svg";
 import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
 import mdiHardDisk from "@icon/mdi/harddisk.svg";
+import baselineEmail from "@icon/mi/baseline/email.svg";
+import baselineWysiwyg from "@icon/mi/baseline/wysiwyg.svg";
+import baselinePanorama from "@icon/mi/baseline/panorama.svg";
+import baselineWeb from "@icon/mi/baseline/web.svg";
+import baselineTV from "@icon/mi/baseline/tv.svg";
+import baselineBorderAll from "@icon/mi/baseline/border-all.svg";
+import baselineDescription from "@icon/mi/baseline/description.svg";
+import mdiVectorCurve from "@icon/mdi/vector-curve.svg";
+import baselineVideocam from "@icon/mi/baseline/videocam.svg";
 const fileFormatsVariant = {
     archive: {
         color: 'fill-label-amaranth-04 text-label-amaranth-04',
@@ -43,67 +52,67 @@ const fileFormatsVariant = {
     },
     email: {
         color: 'fill-label-blue-04 text-label-blue-04',
-        icon: 'mi/baseline/email',
+        icon: baselineEmail,
         iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     executable: {
         color: 'fill-label-amaranth-04 text-label-amaranth-04',
-        icon: 'mi/baseline/wysiwyg',
+        icon: baselineWysiwyg,
         iconBackground: 'bg-label-amaranth-10',
         variant: 'amaranth',
     },
     image: {
         color: 'fill-label-green-04 text-label-green-04',
-        icon: 'mi/baseline/panorama',
+        icon: baselinePanorama,
         iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     imageRaster: {
         color: 'fill-label-green-04 text-label-green-04',
-        icon: 'mi/baseline/panorama',
+        icon: baselinePanorama,
         iconBackground: 'bg-label-green-10',
         variant: 'green',
     },
     markup: {
         color: 'fill-label-yellow-04 text-label-yellow-04',
-        icon: 'mi/baseline/web',
+        icon: baselineWeb,
         iconBackground: 'bg-label-yellow-10',
         variant: 'yellow',
     },
     slide: {
         color: 'fill-label-orchid-04 text-label-orchid-04',
-        icon: 'mi/baseline/tv',
+        icon: baselineTV,
         iconBackground: 'bg-label-orchid-10',
         variant: 'orchid',
     },
     spreadsheet: {
         color: 'fill-label-lime-04 text-label-lime-04',
-        icon: 'mi/baseline/border-all',
+        icon: baselineBorderAll,
         iconBackground: 'bg-label-lime-10',
         variant: 'lime',
     },
     text: {
         color: 'fill-label-blue-04 text-label-blue-04',
-        icon: 'mi/baseline/description',
+        icon: baselineDescription,
         iconBackground: 'bg-label-blue-10',
         variant: 'blue',
     },
     vectorImage: {
         color: 'fill-label-aqua-04 text-label-aqua-04',
-        icon: 'mdi/vector-curve',
+        icon: mdiVectorCurve,
         iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     vector: {
         color: 'fill-label-aqua-04 text-label-aqua-04',
-        icon: 'mdi/vector-curve',
+        icon: mdiVectorCurve,
         iconBackground: 'bg-label-aqua-10',
         variant: 'aqua',
     },
     video: {
         color: 'fill-label-violet-04 text-label-violet-04',
-        icon: 'mi/baseline/videocam',
+        icon: baselineVideocam,
         iconBackground: 'bg-label-violet-10',
         variant: 'violet',
     },

package/dist/components/mds-input-select.js

@@ -4,7 +4,8 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
 
-const mdsInputSelectCss = "@tailwind components; *,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-ms-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1/1;height:100%;width:100%}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.bg-label-amaranth-10{--tw-bg-opacity:1;background-color:rgb(var(--label-amaranth-10) / var(--tw-bg-opacity))}.bg-label-aqua-10{--tw-bg-opacity:1;background-color:rgb(var(--label-aqua-10) / var(--tw-bg-opacity))}.bg-label-blue-10{--tw-bg-opacity:1;background-color:rgb(var(--label-blue-10) / var(--tw-bg-opacity))}.bg-label-green-10{--tw-bg-opacity:1;background-color:rgb(var(--label-green-10) / var(--tw-bg-opacity))}.bg-label-lime-10{--tw-bg-opacity:1;background-color:rgb(var(--label-lime-10) / var(--tw-bg-opacity))}.bg-label-orange-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orange-10) / var(--tw-bg-opacity))}.bg-label-orchid-10{--tw-bg-opacity:1;background-color:rgb(var(--label-orchid-10) / var(--tw-bg-opacity))}.bg-label-violet-10{--tw-bg-opacity:1;background-color:rgb(var(--label-violet-10) / var(--tw-bg-opacity))}.bg-label-yellow-10{--tw-bg-opacity:1;background-color:rgb(var(--label-yellow-10) / var(--tw-bg-opacity))}.bg-tone-neutral-10{--tw-bg-opacity:1;background-color:rgb(var(--tone-neutral-10) / var(--tw-bg-opacity))}.fill-label-amaranth-04{fill:rgb(var(--label-amaranth-04))}.fill-label-aqua-04{fill:rgb(var(--label-aqua-04))}.fill-label-blue-04{fill:rgb(var(--label-blue-04))}.fill-label-green-04{fill:rgb(var(--label-green-04))}.fill-label-lime-04{fill:rgb(var(--label-lime-04))}.fill-label-orange-04{fill:rgb(var(--label-orange-04))}.fill-label-orchid-04{fill:rgb(var(--label-orchid-04))}.fill-label-violet-04{fill:rgb(var(--label-violet-04))}.fill-label-yellow-04{fill:rgb(var(--label-yellow-04))}.fill-tone-neutral-04{fill:rgb(var(--tone-neutral-04))}.text-label-amaranth-04{--tw-text-opacity:1;color:rgb(var(--label-amaranth-04) / var(--tw-text-opacity))}.text-label-aqua-04{--tw-text-opacity:1;color:rgb(var(--label-aqua-04) / var(--tw-text-opacity))}.text-label-blue-04{--tw-text-opacity:1;color:rgb(var(--label-blue-04) / var(--tw-text-opacity))}.text-label-green-04{--tw-text-opacity:1;color:rgb(var(--label-green-04) / var(--tw-text-opacity))}.text-label-lime-04{--tw-text-opacity:1;color:rgb(var(--label-lime-04) / var(--tw-text-opacity))}.text-label-orange-04{--tw-text-opacity:1;color:rgb(var(--label-orange-04) / var(--tw-text-opacity))}.text-label-orchid-04{--tw-text-opacity:1;color:rgb(var(--label-orchid-04) / var(--tw-text-opacity))}.text-label-violet-04{--tw-text-opacity:1;color:rgb(var(--label-violet-04) / var(--tw-text-opacity))}.text-label-yellow-04{--tw-text-opacity:1;color:rgb(var(--label-yellow-04) / var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgb(var(--tone-neutral-04) / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--mds-input-select-variant-color:var(--tone-neutral-01);--mds-input-select-ring:0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);--mds-input-select-shadow:0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);color:rgb(var(--tone-neutral-02));display:-ms-flexbox;display:flex;position:relative}.input{font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0rem;min-height:3rem;width:100%;border-radius:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:3rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgb(var(--tone-neutral));border:0;-webkit-box-shadow:var(--mds-input-select-ring), var(--mds-input-select-shadow);box-shadow:var(--mds-input-select-ring), var(--mds-input-select-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:rgb(var(--tone-neutral-05));cursor:pointer;overflow:hidden;text-overflow:ellipsis}.input:hover,.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-select-variant-color:var(--brand-maggioli-04);--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);color:rgb(var(--tone-neutral-03))}:host([value]:not([value=\"\"])) .input{color:rgb(var(--tone-neutral-03))}.input--mds-input-select-selected{color:rgb(var(--tone-neutral-02))}.icon-container{right:1rem;height:3rem;-ms-flex-align:center;align-items:center;color:inherit;display:-ms-flexbox;display:flex;pointer-events:none;position:absolute}.icon{border-radius:9999px;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:200ms;transition-duration:200ms;background-color:transparent;fill:rgb(var(--brand-maggioli-04))}.input:focus+.icon-container .icon,.input:hover+.icon-container .icon{background-color:rgb(var(--tone-neutral-09));fill:rgb(var(--brand-maggioli-02))}.option-container{display:none}";
+const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --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);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
+const MdsInputSelectStyle0 = mdsInputSelectCss;
 
 const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect extends HTMLElement {
     constructor() {
@@ -16,11 +17,15 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
-                this.selected = input.value !== '';
                 this.value = input.value;
-                // this.internals.setFormValue(input.value)
             }
         };
+        this.onBlur = () => {
+            this.hasFocus = false;
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+        };
         this.emptyOptions = () => {
             var _a;
             const select = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('select');
@@ -54,36 +59,67 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
                 select === null || select === void 0 ? void 0 : select.appendChild(element.cloneNode(true));
             });
+            /**
+             * I found only this way to make the `select` element SEE the
+             * selected option that we wanted as a default
+             */
+            if (this.value) {
+                select === null || select === void 0 ? void 0 : select.querySelectorAll('option').forEach((element) => {
+                    element.selected = element.value === this.value;
+                });
+            }
         };
         this.selected = undefined;
+        this.hasFocus = false;
         this.autocomplete = undefined;
         this.autoFocus = undefined;
         this.placeholder = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.multiple = false;
+        this.size = 0;
         this.value = '';
+        this.variant = undefined;
     }
     /**
      * Emits the change event when the component value changes
      */
     valueChanged() {
         var _a;
+        this.selected = this.value !== '';
         this.changeEvent.emit({ value: this.value });
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
     }
+    componentDidLoad() {
+        if (this.value) {
+            this.selected = true;
+            this.internals.setFormValue(this.value);
+        }
+    }
     render() {
-        return (h(Host, null, h("select", { class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this) }, this.placeholder && h("option", { value: "", disabled: true, selected: true }, this.placeholder)), h("div", { class: "icon-container" }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { class: "option-container" }, h("slot", { onSlotchange: this.onSlotChangeHandler }))));
+        return (h(Host, { key: 'ea2542be96ac1e1fb7df7f0ed57341842827fcde' }, h("select", { key: 'ebd4810a2eb6b85b85feca18037b0419905276e4', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: '8e071e326a0e46f19931616099d6114ff5453609', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: 'e081b71128730e9c2396e9ff5f4fae5c8f3707fb', class: "icon-container" }, h("i", { key: '24c6ff4d6d6dcb1cadfe66666a971e8cef8835b9', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'f21d4aeca656dd95081fe37e963e10de42cddc2a', class: "option-container" }, h("slot", { key: '5e2d5bce08d8e8b0283c866956873092c6e0f715', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'd4f14b01158d9aef1b3c4c7319d3077a8ad5a154', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'e3a21178db5726df5f91bf9213836f4388baf51e', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '614d37e64de08213f58a89d4f9e02508341614f3', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }
-    static get style() { return mdsInputSelectCss; }
+    static get style() { return MdsInputSelectStyle0; }
 }, [65, "mds-input-select", {
         "autocomplete": [513],
         "autoFocus": [516, "auto-focus"],
         "placeholder": [513],
+        "name": [513],
+        "disabled": [516],
+        "required": [516],
+        "multiple": [516],
+        "size": [514],
         "value": [520],
-        "selected": [32]
+        "variant": [513],
+        "selected": [32],
+        "hasFocus": [32]
     }, undefined, {
         "value": ["valueChanged"]
     }]);

package/dist/documentation.d.ts

@@ -347,10 +347,26 @@ export interface JsonDocsEvent {
   deprecation?: string;
   detail: string;
 }
+/**
+ * Type describing a CSS Style, as described by a JSDoc-style comment
+ */
 export interface JsonDocsStyle {
+  /**
+   * The name of the style
+   */
   name: string;
+  /**
+   * The type/description associated with the style
+   */
   docs: string;
+  /**
+   * The annotation used in the JSDoc of the style (e.g. `@prop`)
+   */
   annotation: string;
+  /**
+   * The mode associated with the style
+   */
+  mode: string | undefined;
 }
 export interface JsonDocsListener {
   event: string;
@@ -389,10 +405,28 @@ export interface JsonDocsPart {
    */
   docs: string;
 }
+/**
+ * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
+ */
 export interface StyleDoc {
+  /**
+   * The name of the CSS property
+   */
   name: string;
+  /**
+   * The user-defined description of the CSS property
+   */
   docs: string;
+  /**
+   * The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment.
+   * Used to inform Stencil where the start of a new property's description starts (and where the previous description
+   * ends).
+   */
   annotation: "prop";
+  /**
+   * The Stencil style-mode that is associated with this property.
+   */
+  mode: string | undefined;
 }
 
 export {};