@maggioli-design-system/magma 1.10.6 → 1.10.8

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

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import { Host, h } from "@stencil/core";
 /**
@@ -6,6 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class MdsInputSelect {
     constructor() {
+        // @State() selected: boolean
         this.hasFocus = false;
         /**
          * If true, the element is displayed as disabled
@@ -56,10 +56,9 @@ export class MdsInputSelect {
             });
         };
         this.onSlotChangeHandler = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
-            const select = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('select');
-            const options = select === null || select === void 0 ? void 0 : select.querySelectorAll('option');
+            const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
             if (!options) {
                 return;
             }
@@ -70,19 +69,16 @@ export class MdsInputSelect {
                 this.emptyOptions();
             }
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
-                select === null || select === void 0 ? void 0 : select.appendChild(element.cloneNode(true));
+                var _a;
+                (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.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) => {
+            if (this.value && this.selectEl) {
+                this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
             else if (!this.placeholder) {
-                this.value = select === null || select === void 0 ? void 0 : select.querySelectorAll('option')[0].value;
+                this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
             }
         };
     }
@@ -91,7 +87,6 @@ export class MdsInputSelect {
      */
     valueChanged() {
         var _a, _b, _c;
-        this.selected = this.value !== '';
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
@@ -105,18 +100,45 @@ export class MdsInputSelect {
             this.internals.setFormValue(null);
         }
     }
+    /**
+     * 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
+     */
+    placeholderChanged(newValue, oldValue) {
+        if (newValue && !oldValue) {
+            let defaultOption = document.querySelector('.placeholder-option');
+            if (defaultOption)
+                defaultOption.remove();
+            defaultOption = document.createElement('option');
+            this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
+            defaultOption.value = '';
+            defaultOption.text = newValue;
+            if (!this.defaultValue)
+                defaultOption.selected = true;
+            if (this.required)
+                defaultOption.disabled = true;
+        }
+    }
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    componentWillLoad() {
+        // needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
+        if (this.defaultValue) {
+            this.value = this.defaultValue;
+        }
+    }
     componentDidLoad() {
         if (this.value) {
-            this.selected = true;
             this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (h(Host, { key: '42c8c47d40f44d64c3c522591f196109258ee584' }, h("select", { key: '89d1929e9bed34a874094274da2b3897bd48a5fb', 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: '01c84e11e4504e467865657e46419c6e9904beac', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '466cba766c7bcfa2b7e8a2e3e383f059fd0fb6e4', class: "icon-container" }, h("i", { key: 'fc9f64a92325e1ec116c99f46c6865755bb0d1b8', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'c53f11b9715c9f6fd8d2e0f434da498365d5f101', class: "option-container" }, h("slot", { key: 'c3135009efad92a8a0be5cd4797422203a87c8b7', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '236ebb4498a6b3f16cc241fb33a9a7b26c4166f1', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'e027575cb716fd8c638ffeb1c09e13c0698c3cc0', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '8a3458aa14e4b3fba95e1f924816632197fb632d', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: '2f4a0c12b02e735f13102477b670de1d305d4e74' }, h("select", { key: 'af74a6d8be051aa97efe469f02c634b5afb17090', class: 'input', 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", ref: el => this.selectEl = el }, h("option", { key: 'eed3a91bff7759bf8861dbf8ac2d2ea133e16a55', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '17d85258b38d73baff10b052676fa12e3c07a57e', class: "icon-container" }, h("i", { key: 'a205484c8af4681f9d40c04769220898ebc3bf77', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '8f61e86c19b7a7e8ed9ae9a50e31daa4784a4455', class: "option-container" }, h("slot", { key: '425f44dd0376cb0dc9155c9090d2faffaa18a9df', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '0c2cbe8bec30637844b408242be54c471a221e30', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '60bb927f181184b04e6cc703c445f516f77104e0', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '575b39745f3ecd81165dbf4b3c82ad64b5227403', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -309,6 +331,25 @@ export class MdsInputSelect {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "defaultValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number | null",
+                    "resolved": "null | number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the default value of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-value",
+                "reflect": true
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -338,7 +379,6 @@ export class MdsInputSelect {
     }
     static get states() {
         return {
-            "selected": {},
             "hasFocus": {}
         };
     }
@@ -374,6 +414,9 @@ export class MdsInputSelect {
             }, {
                 "propName": "disabled",
                 "methodName": "disabledChanged"
+            }, {
+                "propName": "placeholder",
+                "methodName": "placeholderChanged"
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

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

@@ -74,6 +74,7 @@ export const Required = {
     render: Template,
     args: {
         required: true,
+        placeholder: 'Seleziona un film...',
     },
 };
 export const Disabled = {

package/dist/collection/components/mds-table-row/mds-table-row.js

@@ -46,19 +46,20 @@ export class MdsTableRow {
         this.observer.observe(this.actions);
     }
     disconnectedCallback() {
-        this.observer.disconnect();
+        if (this.observer)
+            this.observer.disconnect();
     }
     render() {
-        return (h(Host, { key: '234d7bbd1cc849745e980aa6520c753c751155d7', role: "row" }, this.selectable &&
-            h("mds-table-cell", { key: 'f4072cc5c445f094c8ba7c3198d5cb923eb973de', class: "selection-cell" }, h("div", { key: 'dd68ceda9b2c70df2c761b6ab71c29c2a216601b', class: "checkbox-wrapper" }, h("mds-input-switch", { key: 'bf93ec7b274d075f71eabdccd0963c9dfc51885b', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), h("slot", { key: '7fdb8aa28b685f9f26c8607705d7250afbd2ead1' }), this.hasActions && isSafari() &&
-            h("mds-table-cell", { key: 'b7666e3715adac753175f7ed9bd2a4a077aa1193', class: "actions-cell actions-cell--disable" }, h("div", { key: '2d2824b774434ac154b6a747896b6bd91407a0c4', class: "actions" }, h("slot", { key: 'fb2bb9e8c437fc4fc971779ac3e38bc2332c2ff9', name: "action" }))), this.hasActions && !isSafari() &&
-            h("mds-table-cell", { key: '7f889b921dea7083a6d7e0ad050529964e81b8a2', class: "actions-cell" }, h("div", { key: 'cbd0bd0c80f802cb4d0bbecb0c5346f4dc99a220', class: "actions-sizer", style: {
+        return (h(Host, { key: 'c0e67a5763f47d180b02a5a3ca85f7164708a60f', role: "row" }, this.selectable &&
+            h("mds-table-cell", { key: '0f55b635bf14f1a5051a4f5438e06424dbf33573', class: "selection-cell" }, h("div", { key: 'bf032a097ae262c64c60cca5d0459726229592c5', class: "checkbox-wrapper" }, h("mds-input-switch", { key: '76b8caf51030115bbda38f71ce237d8f9bfbcf02', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), h("slot", { key: '5e1bdd763f5eec6cb7df2a84775284403c54bdee' }), this.hasActions && isSafari() &&
+            h("mds-table-cell", { key: '5496b73c5e1c84f52209f06f8615b35ec72c02fd', class: "actions-cell actions-cell--disable" }, h("div", { key: '49a200874c6f7183b0aea31b6f781132f5e71f9f', class: "actions" }, h("slot", { key: 'd1819cf376deba84c2e92d4c942b40744bcf9cc9', name: "action" }))), this.hasActions && !isSafari() &&
+            h("mds-table-cell", { key: '0e8a947018302174747d53d0343592698ec84b04', class: "actions-cell" }, h("div", { key: 'fe19579e1d1f937f784415221414def39a77bcec', class: "actions-sizer", style: {
                     minHeight: '1px',
                     maxWidth: this.sizerWidth,
                     minWidth: this.sizerWidth,
-                } }), h("div", { key: '5e1fb7d8b156375fd600a58d4c5460af008510b5', class: "actions-view" }, h("div", { key: '270dc894489e7e55b7c80c37f0bccc05aabb9b32', class: "actions", ref: el => this.actions = el, style: {
+                } }), h("div", { key: 'cd0c5cf2da7ea6252a68d0a093f6abdb3b2dd90d', class: "actions-view" }, h("div", { key: 'c6b731c14457f0f36b114d1d258e75efc6842f06', class: "actions", ref: el => this.actions = el, style: {
                     marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
-                } }, h("slot", { key: '234867194163d5a56ed1465a25c738cb9ffac67f', name: "action" }))))));
+                } }, h("slot", { key: '8c6c55a4d759fb04d1f0ae13a6263bb01dc4878e', name: "action" }))))));
     }
     static get is() { return "mds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
 import { m as miBaselineKeyboardArrowDown } from './keyboard-arrow-down.js';
 import { d as defineCustomElement$4 } from './mds-input-tip2.js';
 import { d as defineCustomElement$3 } from './mds-input-tip-item2.js';
 import { d as defineCustomElement$2 } from './mds-text2.js';
 
-const mdsInputSelectCss = "@tailwind components;\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  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  --mds-input-select-variant-color: var(--variant-primary-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-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  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\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  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\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  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\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(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\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    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host(:hover),\n:host(:focus-within) {\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\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  --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  --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  --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  --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  --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  --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  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .input,\n  :host-context(.pref-animation-system) .input:hover,\n  :host-context(.pref-animation-system) .input:focus,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n  }\n\n  :host-context(.pref-theme-system) .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n  color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  :host-context(.pref-contrast-system) .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsInputSelectCss = "@tailwind components;\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  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  --mds-input-select-variant-color: var(--variant-primary-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-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-02));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\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:host([required]:not([required=\"false\"])) .input {\n  color: rgb(var(--tone-neutral-05));\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  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\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  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\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(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\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    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host(:hover),\n:host(:focus-within) {\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"info\"]) {\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  --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  --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  --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  --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  --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  --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  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .input,\n  :host-context(.pref-animation-system) .input:hover,\n  :host-context(.pref-animation-system) .input:focus,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-04));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n  }\n\n  :host-context(.pref-theme-system) .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n  color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  :host-context(.pref-contrast-system) .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
 const MdsInputSelectStyle0 = mdsInputSelectCss;
 
 const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect extends HTMLElement {
@@ -15,6 +14,7 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         this.__attachShadow();
         this.changeEvent = createEvent(this, "mdsInputSelectChange", 7);
         this.internals = this.attachInternals();
+        // @State() selected: boolean
         this.hasFocus = false;
         /**
          * If true, the element is displayed as disabled
@@ -65,10 +65,9 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
             });
         };
         this.onSlotChangeHandler = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
-            const select = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('select');
-            const options = select === null || select === void 0 ? void 0 : select.querySelectorAll('option');
+            const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
             if (!options) {
                 return;
             }
@@ -79,19 +78,16 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
                 this.emptyOptions();
             }
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
-                select === null || select === void 0 ? void 0 : select.appendChild(element.cloneNode(true));
+                var _a;
+                (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.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) => {
+            if (this.value && this.selectEl) {
+                this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
             else if (!this.placeholder) {
-                this.value = select === null || select === void 0 ? void 0 : select.querySelectorAll('option')[0].value;
+                this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
             }
         };
     }
@@ -100,7 +96,6 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
      */
     valueChanged() {
         var _a, _b, _c;
-        this.selected = this.value !== '';
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
@@ -114,24 +109,52 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
             this.internals.setFormValue(null);
         }
     }
+    /**
+     * 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
+     */
+    placeholderChanged(newValue, oldValue) {
+        if (newValue && !oldValue) {
+            let defaultOption = document.querySelector('.placeholder-option');
+            if (defaultOption)
+                defaultOption.remove();
+            defaultOption = document.createElement('option');
+            this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
+            defaultOption.value = '';
+            defaultOption.text = newValue;
+            if (!this.defaultValue)
+                defaultOption.selected = true;
+            if (this.required)
+                defaultOption.disabled = true;
+        }
+    }
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    componentWillLoad() {
+        // needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
+        if (this.defaultValue) {
+            this.value = this.defaultValue;
+        }
+    }
     componentDidLoad() {
         if (this.value) {
-            this.selected = true;
             this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (h(Host, { key: '42c8c47d40f44d64c3c522591f196109258ee584' }, h("select", { key: '89d1929e9bed34a874094274da2b3897bd48a5fb', 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: '01c84e11e4504e467865657e46419c6e9904beac', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '466cba766c7bcfa2b7e8a2e3e383f059fd0fb6e4', class: "icon-container" }, h("i", { key: 'fc9f64a92325e1ec116c99f46c6865755bb0d1b8', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'c53f11b9715c9f6fd8d2e0f434da498365d5f101', class: "option-container" }, h("slot", { key: 'c3135009efad92a8a0be5cd4797422203a87c8b7', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '236ebb4498a6b3f16cc241fb33a9a7b26c4166f1', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'e027575cb716fd8c638ffeb1c09e13c0698c3cc0', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '8a3458aa14e4b3fba95e1f924816632197fb632d', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: '2f4a0c12b02e735f13102477b670de1d305d4e74' }, h("select", { key: 'af74a6d8be051aa97efe469f02c634b5afb17090', class: 'input', 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", ref: el => this.selectEl = el }, h("option", { key: 'eed3a91bff7759bf8861dbf8ac2d2ea133e16a55', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '17d85258b38d73baff10b052676fa12e3c07a57e', class: "icon-container" }, h("i", { key: 'a205484c8af4681f9d40c04769220898ebc3bf77', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '8f61e86c19b7a7e8ed9ae9a50e31daa4784a4455', class: "option-container" }, h("slot", { key: '425f44dd0376cb0dc9155c9090d2faffaa18a9df', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '0c2cbe8bec30637844b408242be54c471a221e30', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '60bb927f181184b04e6cc703c445f516f77104e0', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '575b39745f3ecd81165dbf4b3c82ad64b5227403', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "value": ["valueChanged"],
-        "disabled": ["disabledChanged"]
+        "disabled": ["disabledChanged"],
+        "placeholder": ["placeholderChanged"]
     }; }
     static get style() { return MdsInputSelectStyle0; }
 }, [65, "mds-input-select", {
@@ -144,12 +167,13 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         "multiple": [516],
         "size": [514],
         "value": [520],
+        "defaultValue": [520, "default-value"],
         "variant": [513],
-        "selected": [32],
         "hasFocus": [32]
     }, undefined, {
         "value": ["valueChanged"],
-        "disabled": ["disabledChanged"]
+        "disabled": ["disabledChanged"],
+        "placeholder": ["placeholderChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/mds-table-row.js

@@ -76,19 +76,20 @@ const MdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class MdsTableRow extends
         this.observer.observe(this.actions);
     }
     disconnectedCallback() {
-        this.observer.disconnect();
+        if (this.observer)
+            this.observer.disconnect();
     }
     render() {
-        return (h(Host, { key: '234d7bbd1cc849745e980aa6520c753c751155d7', role: "row" }, this.selectable &&
-            h("mds-table-cell", { key: 'f4072cc5c445f094c8ba7c3198d5cb923eb973de', class: "selection-cell" }, h("div", { key: 'dd68ceda9b2c70df2c761b6ab71c29c2a216601b', class: "checkbox-wrapper" }, h("mds-input-switch", { key: 'bf93ec7b274d075f71eabdccd0963c9dfc51885b', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), h("slot", { key: '7fdb8aa28b685f9f26c8607705d7250afbd2ead1' }), this.hasActions && isSafari() &&
-            h("mds-table-cell", { key: 'b7666e3715adac753175f7ed9bd2a4a077aa1193', class: "actions-cell actions-cell--disable" }, h("div", { key: '2d2824b774434ac154b6a747896b6bd91407a0c4', class: "actions" }, h("slot", { key: 'fb2bb9e8c437fc4fc971779ac3e38bc2332c2ff9', name: "action" }))), this.hasActions && !isSafari() &&
-            h("mds-table-cell", { key: '7f889b921dea7083a6d7e0ad050529964e81b8a2', class: "actions-cell" }, h("div", { key: 'cbd0bd0c80f802cb4d0bbecb0c5346f4dc99a220', class: "actions-sizer", style: {
+        return (h(Host, { key: 'c0e67a5763f47d180b02a5a3ca85f7164708a60f', role: "row" }, this.selectable &&
+            h("mds-table-cell", { key: '0f55b635bf14f1a5051a4f5438e06424dbf33573', class: "selection-cell" }, h("div", { key: 'bf032a097ae262c64c60cca5d0459726229592c5', class: "checkbox-wrapper" }, h("mds-input-switch", { key: '76b8caf51030115bbda38f71ce237d8f9bfbcf02', title: this.t.get(this.selected ? 'unselectRow' : 'selectRow'), lang: this.language, type: "checkbox", checked: this.selected, onMdsInputSwitchChange: this.handleSelectionChange }))), h("slot", { key: '5e1bdd763f5eec6cb7df2a84775284403c54bdee' }), this.hasActions && isSafari() &&
+            h("mds-table-cell", { key: '5496b73c5e1c84f52209f06f8615b35ec72c02fd', class: "actions-cell actions-cell--disable" }, h("div", { key: '49a200874c6f7183b0aea31b6f781132f5e71f9f', class: "actions" }, h("slot", { key: 'd1819cf376deba84c2e92d4c942b40744bcf9cc9', name: "action" }))), this.hasActions && !isSafari() &&
+            h("mds-table-cell", { key: '0e8a947018302174747d53d0343592698ec84b04', class: "actions-cell" }, h("div", { key: 'fe19579e1d1f937f784415221414def39a77bcec', class: "actions-sizer", style: {
                     minHeight: '1px',
                     maxWidth: this.sizerWidth,
                     minWidth: this.sizerWidth,
-                } }), h("div", { key: '5e1fb7d8b156375fd600a58d4c5460af008510b5', class: "actions-view" }, h("div", { key: '270dc894489e7e55b7c80c37f0bccc05aabb9b32', class: "actions", ref: el => this.actions = el, style: {
+                } }), h("div", { key: 'cd0c5cf2da7ea6252a68d0a093f6abdb3b2dd90d', class: "actions-view" }, h("div", { key: 'c6b731c14457f0f36b114d1d258e75efc6842f06', class: "actions", ref: el => this.actions = el, style: {
                     marginRight: `calc(${this.sizerWidth} + var(--mds-table-cell-padding))`,
-                } }, h("slot", { key: '234867194163d5a56ed1465a25c738cb9ffac67f', name: "action" }))))));
+                } }, h("slot", { key: '8c6c55a4d759fb04d1f0ae13a6263bb01dc4878e', name: "action" }))))));
     }
     get host() { return this; }
     static get style() { return MdsTableRowStyle0; }

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-01T11:04:54",
+  "timestamp": "2026-01-07T09:13:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -12680,6 +12680,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",