@maggioli-design-system/magma 1.10.6 → 1.10.7

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/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/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-01T11:04:54",
+  "timestamp": "2025-12-03T10:30:27",
   "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",

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"mds-input-upload\",[[65,\"mds-input-upload\",{\"accept\":[513],\"maxFileSize\":[514,\"max-file-size\"],\"maxFiles\":[514,\"max-files\"],\"sort\":[513],\"language\":[32],\"actionTitle\":[32],\"files\":[32],\"progress\":[32],\"animateText\":[32],\"updateLang\":[64],\"getFiles\":[64],\"getFilesError\":[64],\"reset\":[64]},null,{\"maxFiles\":[\"updateActionTitle\"]}]]],[\"mds-input-date\",[[1,\"mds-input-date\",{\"value\":[513],\"variant\":[1537],\"min\":[1537],\"max\":[1537],\"delay\":[514],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"isValid\":[32],\"language\":[32],\"touched\":[32],\"calendarKey\":[32],\"dropdownRef\":[32],\"hasFocus\":[32],\"updateLang\":[64],\"focusInput\":[64],\"setValue\":[64]},null,{\"value\":[\"handleValue\"]}]]],[\"mds-policy-ai\",[[1,\"mds-policy-ai\",{\"headline\":[513],\"description\":[513],\"variant\":[513],\"href\":[513],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-avatar-stack\",[[1,\"mds-avatar-stack\",{\"size\":[513],\"total\":[514]}]]],[\"mds-input-date-range\",[[1,\"mds-input-date-range\",{\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"min\":[513],\"max\":[513],\"delay\":[514],\"calendarKey\":[32],\"internalStartDate\":[32],\"internalEndDate\":[32],\"dropdownRef\":[32],\"hasPreselection\":[32],\"language\":[32],\"updateLang\":[64],\"preselect\":[64]}]]],[\"mds-input-otp\",[[65,\"mds-input-otp\",{\"length\":[2],\"autosubmit\":[516],\"value\":[1537]}]]],[\"mds-pref-language\",[[1,\"mds-pref-language\",{\"size\":[513],\"set\":[1537],\"showDropdown\":[32],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-table-header\",[[1,\"mds-table-header\",{\"selectable\":[4],\"selectAll\":[32],\"hasActions\":[32],\"indeterminate\":[32],\"hasSelection\":[32],\"language\":[32],\"updateLang\":[64],\"setSelection\":[64]}]]],[\"mds-entity\",[[1,\"mds-entity\",{\"await\":[516],\"icon\":[513],\"src\":[513],\"initials\":[513],\"tone\":[513],\"variant\":[513]}]]],[\"mds-pref-animation\",[[1,\"mds-pref-animation\",{\"size\":[513],\"mode\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-pref-consumption\",[[1,\"mds-pref-consumption\",{\"size\":[513],\"mode\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-pref-contrast\",[[1,\"mds-pref-contrast\",{\"size\":[513],\"mode\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-pref-theme\",[[1,\"mds-pref-theme\",{\"size\":[513],\"mode\":[1537],\"transition\":[1537],\"language\":[32],\"disabled\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-push-notification-item\",[[1,\"mds-push-notification-item\",{\"datetime\":[1537],\"dateFormat\":[513,\"date-format\"],\"deletable\":[1540],\"icon\":[513],\"initials\":[1537],\"message\":[513],\"preview\":[513],\"src\":[513],\"subject\":[513],\"tone\":[513],\"variant\":[513],\"language\":[32],\"updateLang\":[64]},null,{\"deletable\":[\"handleDeletableChange\"]}]]],[\"mds-button-dropdown\",[[1,\"mds-button-dropdown\",{\"label\":[1],\"autoFocus\":[4,\"auto-focus\"],\"icon\":[1537],\"type\":[513],\"variant\":[513],\"tone\":[513],\"size\":[513],\"active\":[1540],\"disabled\":[1540],\"await\":[1540],\"href\":[513],\"target\":[1],\"truncate\":[513]}]]],[\"mds-header\",[[1,\"mds-header\",{\"appearance\":[1537],\"appearanceSet\":[513,\"appearance-set\"],\"autoHide\":[514,\"auto-hide\"],\"backdrop\":[516],\"menu\":[513],\"nav\":[513],\"threshold\":[514],\"visibility\":[1537],\"hasMenu\":[32],\"isOpened\":[32],\"setOpened\":[64]},null,{\"menu\":[\"onMenuChangedHandler\"],\"nav\":[\"onNavChangedHandler\"],\"appearanceSet\":[\"onAppearanceSetChangedHandler\"],\"visibility\":[\"handleVisibilityChange\"]}]]],[\"mds-keyboard\",[[1,\"mds-keyboard\",{\"test\":[1537],\"try\":[516],\"language\":[32],\"testPassed\":[32],\"updateLang\":[64]},null,{\"try\":[\"handleTryProperty\"]}]]],[\"mds-radial-menu-item\",[[1,\"mds-radial-menu-item\",{\"tooltip\":[513],\"icon\":[1537],\"tone\":[513],\"variant\":[513],\"size\":[513]}]]],[\"mds-status-bar\",[[1,\"mds-status-bar\",{\"description\":[513],\"overflow\":[513],\"visible\":[1540],\"hide\":[64]},null,{\"visible\":[\"handleVisbilityProp\"]}]]],[\"mds-breadcrumb\",[[1,\"mds-breadcrumb\",{\"back\":[4],\"language\":[32],\"updateLang\":[64]},[[0,\"mdsBreadcrumbItemSelect\",\"activedEventHandler\"]]]]],[\"mds-header-bar\",[[1,\"mds-header-bar\",{\"menu\":[513],\"nav\":[513],\"isOpened\":[32],\"setOpened\":[64]}]]],[\"mds-horizontal-scroll\",[[1,\"mds-horizontal-scroll\",{\"controls\":[1537],\"navigation\":[513],\"snap\":[513],\"hasCompatibility\":[32],\"showForward\":[32],\"showBack\":[32]},null,{\"navigation\":[\"watchNavigation\"]}]]],[\"mds-input-date-range-preselection\",[[1,\"mds-input-date-range-preselection\",{\"selected\":[1540],\"start\":[513],\"end\":[513]}]]],[\"mds-label\",[[1,\"mds-label\",{\"labelAction\":[1,\"label-action\"],\"variant\":[513],\"tone\":[513],\"truncate\":[513],\"typography\":[1],\"deletable\":[4],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-note\",[[1,\"mds-note\",{\"deletable\":[4],\"variant\":[513],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-pref-language-item\",[[1,\"mds-pref-language-item\",{\"code\":[513],\"selected\":[516],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-push-notification\",[[1,\"mds-push-notification\",{\"visible\":[1540],\"behavior\":[1],\"show\":[64],\"hide\":[64],\"removeNotification\":[64]},null,{\"visible\":[\"visibleChanged\"]}]]],[\"mds-radial-menu\",[[1,\"mds-radial-menu\",{\"angleStart\":[514,\"angle-start\"],\"angleEnd\":[514,\"angle-end\"],\"radius\":[514],\"direction\":[513],\"opened\":[1540],\"disc\":[1540],\"backdrop\":[516],\"interaction\":[513],\"icon\":[1537],\"variant\":[513],\"tone\":[513],\"size\":[513]},null,{\"disc\":[\"onDiscChanged\"],\"backdrop\":[\"backdropChanged\"],\"interaction\":[\"onInteractionChange\"],\"angleStart\":[\"onAngleStartChange\"],\"angleEnd\":[\"onAngleEndChange\"],\"radius\":[\"onRadiusChange\"],\"size\":[\"onSizeChange\"],\"opened\":[\"onOpenedChange\"]}]]],[\"mds-stepper-bar-item\",[[1,\"mds-stepper-bar-item\",{\"label\":[1],\"step\":[4],\"badge\":[1540],\"icon\":[1],\"iconChecked\":[1,\"icon-checked\"],\"done\":[516],\"current\":[1540],\"value\":[513],\"typography\":[1],\"isDone\":[32],\"isCurrent\":[32],\"index\":[32]},null,{\"done\":[\"selectedHandler\"],\"current\":[\"currentHandler\"]}]]],[\"mds-table-row\",[[1,\"mds-table-row\",{\"interactive\":[516],\"overlayActions\":[516,\"overlay-actions\"],\"selectable\":[516],\"selected\":[1540],\"value\":[520],\"sizerWidth\":[32],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-tree-item\",[[1,\"mds-tree-item\",{\"actions\":[513],\"async\":[516],\"depth\":[514],\"label\":[1],\"toggle\":[513],\"expanded\":[1540],\"truncate\":[513],\"icon\":[1],\"hasActions\":[32],\"hasChildren\":[32],\"currentToggleIcon\":[32],\"await\":[32],\"language\":[32],\"updateLang\":[64],\"expand\":[64]},null,{\"toggle\":[\"handleIconChange\"],\"expanded\":[\"handleExpandedChange\"]}]]],[\"mds-url-view\",[[1,\"mds-url-view\",{\"icon\":[513],\"label\":[513],\"src\":[513],\"loading\":[513],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-file\",[[1,\"mds-file\",{\"suffix\":[513],\"description\":[1],\"filename\":[1],\"preview\":[1],\"showDownloadedIcon\":[4,\"show-downloaded-icon\"],\"format\":[1537],\"language\":[32],\"wasDownloaded\":[32],\"updateLang\":[64]},null,{\"filename\":[\"handleFilename\"]}]]],[\"mds-filter\",[[1,\"mds-filter\",{\"autoReset\":[516,\"auto-reset\"],\"label\":[1],\"multiple\":[516],\"reset\":[516],\"active\":[32],\"itemsSelected\":[32]},[[0,\"mdsFilterItemSelect\",\"activeEventHandler\"]]]]],[\"mds-input-select\",[[65,\"mds-input-select\",{\"autocomplete\":[513],\"autoFocus\":[516,\"auto-focus\"],\"placeholder\":[513],\"name\":[513],\"disabled\":[516],\"required\":[516],\"multiple\":[516],\"size\":[514],\"value\":[520],\"variant\":[513],\"selected\":[32],\"hasFocus\":[32]},null,{\"value\":[\"valueChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"mds-paginator\",[[1,\"mds-paginator\",{\"pages\":[2],\"currentPage\":[1538,\"current-page\"]}]]],[\"mds-accordion-timer-item\",[[1,\"mds-accordion-timer-item\",{\"typography\":[1],\"selected\":[516],\"description\":[1],\"duration\":[514],\"progress\":[2],\"uuid\":[2]},null,{\"selected\":[\"handleSelected\"]}]]],[\"mds-benchmark-bar\",[[1,\"mds-benchmark-bar\",{\"alias\":[1],\"typography\":[1],\"value\":[2],\"variant\":[513]}]]],[\"mds-keyboard-key\",[[1,\"mds-keyboard-key\",{\"name\":[513],\"pressed\":[516],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-kpi-item\",[[1,\"mds-kpi-item\",{\"label\":[1],\"description\":[1],\"threshold\":[2],\"icon\":[1],\"isIntersecting\":[32]}]]],[\"mds-list-item\",[[1,\"mds-list-item\",{\"typography\":[513],\"variant\":[1],\"icon\":[1]}]]],[\"mds-mention\",[[1,\"mds-mention\",{\"icon\":[513],\"label\":[513],\"size\":[513]}]]],[\"mds-tab-bar-item\",[[1,\"mds-tab-bar-item\",{\"icon\":[1],\"selected\":[1540],\"typography\":[1],\"isSelected\":[32]},null,{\"selected\":[\"validateSelected\"]}]]],[\"mds-usage\",[[1,\"mds-usage\",{\"variant\":[1],\"alias\":[1],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-accordion-item\",[[1,\"mds-accordion-item\",{\"typography\":[1],\"selected\":[1540],\"label\":[1]}]]],[\"mds-bibliography\",[[1,\"mds-bibliography\",{\"format\":[1],\"author\":[1],\"name\":[1],\"publisher\":[1],\"date\":[1],\"location\":[1],\"rel\":[1],\"typography\":[1],\"variant\":[1],\"url\":[1]}]]],[\"mds-breadcrumb-item\",[[1,\"mds-breadcrumb-item\",{\"selected\":[1540]}]]],[\"mds-input-field\",[[65,\"mds-input-field\",{\"label\":[1025],\"message\":[1025],\"variant\":[1537]}]]],[\"mds-input-range\",[[65,\"mds-input-range\",{\"formatValue\":[16],\"max\":[2],\"min\":[2],\"step\":[2],\"disabled\":[1540],\"value\":[1538],\"progress\":[32]},null,{\"disabled\":[\"disabledChanged\"],\"value\":[\"valueChanged\"],\"min\":[\"minChanged\"],\"max\":[\"maxChanged\"],\"step\":[\"stepChanged\"]}]]],[\"mds-notification\",[[1,\"mds-notification\",{\"target\":[1],\"value\":[1538],\"visible\":[1540],\"strategy\":[1537],\"max\":[514]},null,{\"strategy\":[\"strategyHandler\"]}]]],[\"mds-pref\",[[1,\"mds-pref\",{\"size\":[513],\"controller\":[1540],\"showReload\":[32],\"language\":[32],\"updateLang\":[64]},null,{\"controller\":[\"handleControllerChange\"],\"size\":[\"handleSizeChange\"]}]]],[\"mds-price-table-features\",[[1,\"mds-price-table-features\",{\"label\":[1]}]]],[\"mds-price-table-features-cell\",[[1,\"mds-price-table-features-cell\",{\"type\":[513]}]]],[\"mds-price-table-list\",[[1,\"mds-price-table-list\",{\"hasItems\":[32]}]]],[\"mds-price-table-list-item\",[[1,\"mds-price-table-list-item\",{\"supported\":[516],\"typography\":[513]}]]],[\"mds-quote\",[[1,\"mds-quote\",{\"typography\":[1],\"tag\":[1]}]]],[\"mds-toast\",[[1,\"mds-toast\",{\"duration\":[1538],\"visible\":[1540],\"variant\":[513],\"tone\":[513],\"position\":[1537]},null,{\"visible\":[\"visibleChanged\"],\"duration\":[\"durationChanged\"]}]]],[\"mds-accordion\",[[1,\"mds-accordion\",{\"multiple\":[4],\"closable\":[4]},[[0,\"mdsAccordionItemSelect\",\"selectedEventHandler\"],[0,\"mdsAccordionItemUnselect\",\"unselectedEventHandler\"]]]]],[\"mds-accordion-timer\",[[1,\"mds-accordion-timer\",{\"duration\":[514],\"paused\":[516],\"time\":[32]},[[0,\"mdsAccordionTimerItemClickSelect\",\"onClickSelect\"],[0,\"mdsAccordionTimerItemSelect\",\"onSelect\"],[0,\"mdsAccordionTimerItemMouseEnterSelect\",\"onMouseEnterSelect\"],[0,\"mdsAccordionTimerItemMouseLeaveSelect\",\"onMouseLeaveSelect\"]],{\"paused\":[\"handlePaused\"]}]]],[\"mds-author\",[[1,\"mds-author\"]]],[\"mds-button-group\",[[1,\"mds-button-group\"]]],[\"mds-card\",[[1,\"mds-card\",{\"autoGrid\":[516,\"auto-grid\"],\"layout\":[32]}]]],[\"mds-card-content\",[[1,\"mds-card-content\"]]],[\"mds-card-footer\",[[1,\"mds-card-footer\"]]],[\"mds-card-header\",[[1,\"mds-card-header\"]]],[\"mds-card-media\",[[1,\"mds-card-media\"]]],[\"mds-details\",[[1,\"mds-details\",{\"opened\":[1540],\"isOpened\":[32]},null,{\"opened\":[\"validateOpened\"]}]]],[\"mds-emoji\",[[1,\"mds-emoji\",{\"name\":[513],\"agree\":[64],\"disagree\":[64],\"startThinking\":[64],\"stopThinking\":[64],\"startBlinking\":[64],\"stopBlinking\":[64],\"stopFollowMouse\":[64],\"startFollowMouse\":[64]}]]],[\"mds-hr\",[[1,\"mds-hr\"]]],[\"mds-kpi\",[[1,\"mds-kpi\"]]],[\"mds-list\",[[1,\"mds-list\"]]],[\"mds-price-table\",[[1,\"mds-price-table\"]]],[\"mds-price-table-features-row\",[[1,\"mds-price-table-features-row\",{\"cellPercWidth\":[32]}]]],[\"mds-price-table-header\",[[1,\"mds-price-table-header\"]]],[\"mds-stepper-bar\",[[1,\"mds-stepper-bar\",{\"itemsDone\":[2,\"items-done\"],\"currentItem\":[32]},[[0,\"mdsStepperBarItemDone\",\"changeEventHandler\"]],{\"itemsDone\":[\"itemDone\"]}]]],[\"mds-tab-bar\",[[1,\"mds-tab-bar\",null,[[0,\"mdsTabBarItemSelect\",\"changeEventHandler\"]]]]],[\"mds-table\",[[1,\"mds-table\",{\"interactive\":[4],\"selectable\":[4],\"selection\":[1540],\"selectedRows\":[32],\"updateSelection\":[64],\"selectAll\":[64]},null,{\"interactive\":[\"onTableInteractive\"],\"selectable\":[\"onTableSelectable\"]}]]],[\"mds-table-body\",[[1,\"mds-table-body\",{\"interactive\":[516],\"selection\":[516]}]]],[\"mds-table-footer\",[[1,\"mds-table-footer\"]]],[\"mds-tree\",[[1,\"mds-tree\",{\"appearance\":[513],\"async\":[516],\"label\":[1],\"toggle\":[513],\"togglePosition\":[513,\"toggle-position\"],\"expanded\":[1540],\"truncate\":[513],\"actions\":[513]},null,{\"expanded\":[\"handleExpandedChange\"],\"toggle\":[\"handleToggleChange\"],\"truncate\":[\"handleTruncateChange\"]}]]],[\"mds-video-wall\",[[1,\"mds-video-wall\",{\"autoplay\":[4],\"loop\":[4],\"muted\":[4],\"noise\":[1],\"poster\":[1],\"preload\":[1],\"src\":[1]}]]],[\"mds-zero\",[[1,\"mds-zero\"]]],[\"mds-text\",[[1,\"mds-text\",{\"animation\":[1],\"tag\":[1537],\"text\":[513],\"truncate\":[513],\"typography\":[513],\"variant\":[513]},null,{\"text\":[\"textHandler\"]}]]],[\"mds-img\",[[1,\"mds-img\",{\"alt\":[1537],\"crossorigin\":[1],\"height\":[1],\"loading\":[1],\"referrerpolicy\":[1],\"sizes\":[1],\"src\":[1],\"srcset\":[1],\"srcsetConsumption\":[1,\"srcset-consumption\"],\"width\":[1],\"imageConsumptionLoaded\":[32],\"imageError\":[32],\"language\":[32],\"updateLang\":[64]},null,{\"srcsetConsumption\":[\"srcsetConsumptionHandler\"],\"src\":[\"srcHandler\"]}]]],[\"mds-avatar-stack-item\",[[1,\"mds-avatar-stack-item\",{\"count\":[514],\"initials\":[1537],\"src\":[513],\"tone\":[513],\"variant\":[513]}]]],[\"mds-badge\",[[1,\"mds-badge\",{\"variant\":[513],\"tone\":[513],\"typography\":[1],\"typographyVariant\":[1,\"typography-variant\"]}]]],[\"mds-file-preview\",[[1,\"mds-file-preview\",{\"deletable\":[516],\"downloadable\":[516],\"description\":[513],\"filename\":[513],\"filesize\":[513],\"message\":[513],\"truncate\":[513],\"src\":[513],\"suffix\":[513],\"icon\":[513],\"variant\":[513],\"format\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"filename\":[\"handleFilename\"],\"downloadable\":[\"handleDownloadable\"]}]]],[\"mds-tooltip\",[[1,\"mds-tooltip\",{\"arrow\":[4],\"arrowPadding\":[2,\"arrow-padding\"],\"autoPlacement\":[516,\"auto-placement\"],\"flip\":[4],\"target\":[513],\"offset\":[2],\"placement\":[513],\"typography\":[1],\"shift\":[4],\"shiftPadding\":[2,\"shift-padding\"],\"strategy\":[513],\"visible\":[1540]},null,{\"arrow\":[\"arrowChanged\"],\"autoPlacement\":[\"autoPlacementChanged\"],\"flip\":[\"flipChanged\"],\"offset\":[\"offsetChanged\"],\"placement\":[\"placementChanged\"],\"shift\":[\"shiftChanged\"],\"shiftPadding\":[\"shiftPaddingChanged\"],\"strategy\":[\"strategyChanged\"],\"visible\":[\"visibleChanged\"],\"target\":[\"targetChanged\"]}]]],[\"mds-progress\",[[1,\"mds-progress\",{\"progress\":[2],\"direction\":[513],\"variant\":[513],\"steps\":[1],\"currentStep\":[32]},null,{\"progress\":[\"progressChanged\"],\"steps\":[\"stepsChanged\"]}]]],[\"mds-dropdown\",[[1,\"mds-dropdown\",{\"arrow\":[516],\"arrowPadding\":[2,\"arrow-padding\"],\"autoPlacement\":[4,\"auto-placement\"],\"backdrop\":[516],\"flip\":[4],\"interaction\":[513],\"target\":[1],\"offset\":[2],\"placement\":[1],\"shift\":[4],\"shiftPadding\":[2,\"shift-padding\"],\"smooth\":[4],\"strategy\":[1],\"visible\":[1540],\"zIndex\":[2,\"z-index\"]},null,{\"arrow\":[\"arrowChanged\"],\"arrowPadding\":[\"arrowPaddingChanged\"],\"autoPlacement\":[\"autoPlacementChanged\"],\"backdrop\":[\"backdropChanged\"],\"flip\":[\"flipChanged\"],\"offset\":[\"offsetChanged\"],\"placement\":[\"placementChanged\"],\"shift\":[\"shiftChanged\"],\"shiftPadding\":[\"shiftPaddingChanged\"],\"strategy\":[\"strategyChanged\"],\"target\":[\"targetChanged\"],\"visible\":[\"visibleChanged\"]}]]],[\"mds-input-tip_2\",[[1,\"mds-input-tip-item\",{\"variant\":[513],\"expanded\":[1540],\"language\":[32],\"updateLang\":[64]},null,{\"expanded\":[\"handleEcpandedChanged\"]}],[1,\"mds-input-tip\",{\"active\":[516],\"position\":[513]}]]],[\"mds-button_3\",[[65,\"mds-button\",{\"autoFocus\":[4,\"auto-focus\"],\"hasText\":[1540,\"has-text\"],\"icon\":[1537],\"iconPosition\":[1,\"icon-position\"],\"type\":[513],\"variant\":[513],\"tone\":[513],\"size\":[513],\"active\":[1540],\"disabled\":[1540],\"await\":[1540],\"href\":[513],\"target\":[1],\"truncate\":[513]},null,{\"disabled\":[\"disabledChanged\"],\"await\":[\"awaitChanged\",\"handleAwaitChange\"],\"type\":[\"handleTypeChange\"],\"variant\":[\"handleVariantChange\"]}],[1,\"mds-spinner\",{\"running\":[1540]},null,{\"running\":[\"handleRunning\"]}],[1,\"mds-icon\",{\"name\":[513],\"svgHTML\":[32],\"_iconHref\":[32],\"setSvgPath\":[64]},null,{\"name\":[\"updateIcon\"]}]]],[\"mds-input\",[[65,\"mds-input\",{\"autocomplete\":[513],\"autofocus\":[516],\"await\":[516],\"controlsLayout\":[513,\"controls-layout\"],\"controlsIcon\":[513,\"controls-icon\"],\"controlIncreaseLabel\":[513,\"control-increase-label\"],\"controlDecreaseLabel\":[513,\"control-decrease-label\"],\"datalist\":[16],\"disabled\":[516],\"icon\":[1537],\"max\":[520],\"maxlength\":[1538],\"mic\":[516],\"min\":[520],\"minlength\":[514],\"name\":[513],\"pattern\":[513],\"placeholder\":[513],\"readonly\":[516],\"required\":[516],\"variant\":[1537],\"tip\":[513],\"step\":[513],\"type\":[513],\"typography\":[513],\"value\":[1537],\"hasFocus\":[32],\"language\":[32],\"isRecording\":[32],\"currentLengthLabel\":[32],\"countVariant\":[32],\"isPasswordVisible\":[32],\"updateLang\":[64],\"addValidator\":[64],\"removeValidator\":[64],\"hasValidator\":[64],\"getErrors\":[64],\"setFocus\":[64],\"getInputElement\":[64]},null,{\"value\":[\"valueChanged\"],\"variant\":[\"variantChanged\"],\"maxlength\":[\"maxLengthChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"mds-table-header-cell\",[[1,\"mds-table-header-cell\",{\"sortable\":[516],\"label\":[513],\"direction\":[1537],\"isAscending\":[32]},null,{\"sortable\":[\"sortableHandler\"],\"direction\":[\"directionHandler\"]}]]],[\"mds-filter-item\",[[1,\"mds-filter-item\",{\"selected\":[1540],\"label\":[513],\"icon\":[513],\"value\":[513],\"count\":[513],\"disabled\":[516]}]]],[\"mds-paginator-item\",[[1,\"mds-paginator-item\",{\"icon\":[513],\"selected\":[516],\"disabled\":[516]}]]],[\"mds-separator\",[[1,\"mds-separator\"]]],[\"mds-modal\",[[1,\"mds-modal\",{\"opened\":[1540],\"backdrop\":[1540],\"position\":[1537],\"animating\":[1537],\"animation\":[513],\"overflow\":[513],\"close\":[64]},null,{\"opened\":[\"handleOpenProp\"],\"backdrop\":[\"handleBackdropProp\"]}]]],[\"mds-banner_3\",[[1,\"mds-banner\",{\"variant\":[513],\"tone\":[513],\"cockade\":[516],\"deletable\":[4],\"headline\":[1],\"icon\":[1],\"language\":[32],\"updateLang\":[64]}],[1,\"mds-chip\",{\"clickable\":[1540],\"deletable\":[4],\"disabled\":[4],\"icon\":[1],\"label\":[513],\"selected\":[1540],\"selectable\":[516],\"variant\":[513],\"tone\":[513],\"language\":[32],\"updateLang\":[64]},null,{\"selectable\":[\"handleSelectableProp\"],\"clickable\":[\"handleClickableProp\"],\"deletable\":[\"handleDeletableProp\"],\"selected\":[\"handleSelectedProp\"]}],[1,\"mds-help\",{\"icon\":[1],\"autoPlacement\":[516,\"auto-placement\"],\"placement\":[513]}]]],[\"mds-avatar\",[[1,\"mds-avatar\",{\"icon\":[513],\"initials\":[1537],\"count\":[1538],\"src\":[513],\"tone\":[513],\"variant\":[1537],\"fallback\":[32],\"loaded\":[32]},null,{\"initials\":[\"initialsHandler\"],\"count\":[\"countHandler\"],\"src\":[\"srcHandler\"],\"icon\":[\"iconHandler\"]}]]],[\"mds-input-switch_2\",[[65,\"mds-input-switch\",{\"autofocus\":[516],\"checked\":[1540],\"disabled\":[1540],\"explicit\":[516],\"icon\":[513],\"indeterminate\":[1540],\"name\":[513],\"size\":[513],\"type\":[513],\"typography\":[513],\"variant\":[513],\"value\":[1537],\"dirty\":[32],\"hasText\":[32],\"language\":[32],\"updateLang\":[64]},null,{\"disabled\":[\"disabledChanged\"],\"checked\":[\"checkedChanged\"],\"explicit\":[\"explicitChanged\"]}],[1,\"mds-table-cell\",{\"value\":[520]}]]],[\"mds-calendar_2\",[[1,\"mds-calendar\",{\"rangePicker\":[4,\"range-picker\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"min\":[513],\"max\":[513],\"hasPreselection\":[32],\"currentDate\":[32],\"weekDaysinMonth\":[32],\"weekdays\":[32],\"startDateIdentifier\":[32],\"endDateIdentifier\":[32],\"isFirstClick\":[32],\"currentView\":[32],\"selectedYear\":[32],\"language\":[32],\"internalStartDate\":[32],\"internalEndDate\":[32],\"updateLang\":[64],\"updateCurrentDate\":[64]},null,{\"startDate\":[\"handleStartDate\"],\"endDate\":[\"handleEndDate\"]}],[1,\"mds-calendar-cell\",{\"month\":[513],\"date\":[513],\"orientation\":[513],\"preview\":[516],\"selection\":[513],\"disabled\":[516],\"today\":[516]}]]],[\"mds-tab_2\",[[1,\"mds-tab-item\",{\"await\":[516],\"selected\":[1540],\"disabled\":[1540],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"],\"type\":[1],\"size\":[513],\"value\":[513],\"href\":[513],\"isSelected\":[32],\"hasText\":[32]},null,{\"selected\":[\"validateActive\"]}],[1,\"mds-tab\",{\"direction\":[1537],\"scrollbar\":[1540],\"animation\":[513],\"fill\":[1540],\"overflow\":[1540],\"size\":[1537],\"sliderWidth\":[32],\"sliderHeight\":[32],\"sliderOffsetX\":[32],\"sliderOffsetY\":[32],\"overflowLeft\":[32],\"overflowRight\":[32]},[[0,\"mdsTabItemSelect\",\"changeEventHandler\"],[0,\"mdsTabItemFocus\",\"focusEventHandler\"]],{\"animation\":[\"handleAnimationChange\"],\"scrollbar\":[\"handleScrollbarChange\"],\"fill\":[\"handleFillChange\"],\"overflow\":[\"handleOverflowChange\"],\"size\":[\"handleSizeChange\"]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"mds-input-upload\",[[65,\"mds-input-upload\",{\"accept\":[513],\"maxFileSize\":[514,\"max-file-size\"],\"maxFiles\":[514,\"max-files\"],\"sort\":[513],\"language\":[32],\"actionTitle\":[32],\"files\":[32],\"progress\":[32],\"animateText\":[32],\"updateLang\":[64],\"getFiles\":[64],\"getFilesError\":[64],\"reset\":[64]},null,{\"maxFiles\":[\"updateActionTitle\"]}]]],[\"mds-input-date\",[[1,\"mds-input-date\",{\"value\":[513],\"variant\":[1537],\"min\":[1537],\"max\":[1537],\"delay\":[514],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"isValid\":[32],\"language\":[32],\"touched\":[32],\"calendarKey\":[32],\"dropdownRef\":[32],\"hasFocus\":[32],\"updateLang\":[64],\"focusInput\":[64],\"setValue\":[64]},null,{\"value\":[\"handleValue\"]}]]],[\"mds-policy-ai\",[[1,\"mds-policy-ai\",{\"headline\":[513],\"description\":[513],\"variant\":[513],\"href\":[513],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-avatar-stack\",[[1,\"mds-avatar-stack\",{\"size\":[513],\"total\":[514]}]]],[\"mds-input-date-range\",[[1,\"mds-input-date-range\",{\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"min\":[513],\"max\":[513],\"delay\":[514],\"calendarKey\":[32],\"internalStartDate\":[32],\"internalEndDate\":[32],\"dropdownRef\":[32],\"hasPreselection\":[32],\"language\":[32],\"updateLang\":[64],\"preselect\":[64]}]]],[\"mds-input-otp\",[[65,\"mds-input-otp\",{\"length\":[2],\"autosubmit\":[516],\"value\":[1537]}]]],[\"mds-pref-language\",[[1,\"mds-pref-language\",{\"size\":[513],\"set\":[1537],\"showDropdown\":[32],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-table-header\",[[1,\"mds-table-header\",{\"selectable\":[4],\"selectAll\":[32],\"hasActions\":[32],\"indeterminate\":[32],\"hasSelection\":[32],\"language\":[32],\"updateLang\":[64],\"setSelection\":[64]}]]],[\"mds-entity\",[[1,\"mds-entity\",{\"await\":[516],\"icon\":[513],\"src\":[513],\"initials\":[513],\"tone\":[513],\"variant\":[513]}]]],[\"mds-pref-animation\",[[1,\"mds-pref-animation\",{\"size\":[513],\"mode\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-pref-consumption\",[[1,\"mds-pref-consumption\",{\"size\":[513],\"mode\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-pref-contrast\",[[1,\"mds-pref-contrast\",{\"size\":[513],\"mode\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-pref-theme\",[[1,\"mds-pref-theme\",{\"size\":[513],\"mode\":[1537],\"transition\":[1537],\"language\":[32],\"disabled\":[32],\"updateLang\":[64]},null,{\"mode\":[\"modeChanged\"]}]]],[\"mds-push-notification-item\",[[1,\"mds-push-notification-item\",{\"datetime\":[1537],\"dateFormat\":[513,\"date-format\"],\"deletable\":[1540],\"icon\":[513],\"initials\":[1537],\"message\":[513],\"preview\":[513],\"src\":[513],\"subject\":[513],\"tone\":[513],\"variant\":[513],\"language\":[32],\"updateLang\":[64]},null,{\"deletable\":[\"handleDeletableChange\"]}]]],[\"mds-button-dropdown\",[[1,\"mds-button-dropdown\",{\"label\":[1],\"autoFocus\":[4,\"auto-focus\"],\"icon\":[1537],\"type\":[513],\"variant\":[513],\"tone\":[513],\"size\":[513],\"active\":[1540],\"disabled\":[1540],\"await\":[1540],\"href\":[513],\"target\":[1],\"truncate\":[513]}]]],[\"mds-header\",[[1,\"mds-header\",{\"appearance\":[1537],\"appearanceSet\":[513,\"appearance-set\"],\"autoHide\":[514,\"auto-hide\"],\"backdrop\":[516],\"menu\":[513],\"nav\":[513],\"threshold\":[514],\"visibility\":[1537],\"hasMenu\":[32],\"isOpened\":[32],\"setOpened\":[64]},null,{\"menu\":[\"onMenuChangedHandler\"],\"nav\":[\"onNavChangedHandler\"],\"appearanceSet\":[\"onAppearanceSetChangedHandler\"],\"visibility\":[\"handleVisibilityChange\"]}]]],[\"mds-keyboard\",[[1,\"mds-keyboard\",{\"test\":[1537],\"try\":[516],\"language\":[32],\"testPassed\":[32],\"updateLang\":[64]},null,{\"try\":[\"handleTryProperty\"]}]]],[\"mds-radial-menu-item\",[[1,\"mds-radial-menu-item\",{\"tooltip\":[513],\"icon\":[1537],\"tone\":[513],\"variant\":[513],\"size\":[513]}]]],[\"mds-status-bar\",[[1,\"mds-status-bar\",{\"description\":[513],\"overflow\":[513],\"visible\":[1540],\"hide\":[64]},null,{\"visible\":[\"handleVisbilityProp\"]}]]],[\"mds-breadcrumb\",[[1,\"mds-breadcrumb\",{\"back\":[4],\"language\":[32],\"updateLang\":[64]},[[0,\"mdsBreadcrumbItemSelect\",\"activedEventHandler\"]]]]],[\"mds-header-bar\",[[1,\"mds-header-bar\",{\"menu\":[513],\"nav\":[513],\"isOpened\":[32],\"setOpened\":[64]}]]],[\"mds-horizontal-scroll\",[[1,\"mds-horizontal-scroll\",{\"controls\":[1537],\"navigation\":[513],\"snap\":[513],\"hasCompatibility\":[32],\"showForward\":[32],\"showBack\":[32]},null,{\"navigation\":[\"watchNavigation\"]}]]],[\"mds-input-date-range-preselection\",[[1,\"mds-input-date-range-preselection\",{\"selected\":[1540],\"start\":[513],\"end\":[513]}]]],[\"mds-label\",[[1,\"mds-label\",{\"labelAction\":[1,\"label-action\"],\"variant\":[513],\"tone\":[513],\"truncate\":[513],\"typography\":[1],\"deletable\":[4],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-note\",[[1,\"mds-note\",{\"deletable\":[4],\"variant\":[513],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-pref-language-item\",[[1,\"mds-pref-language-item\",{\"code\":[513],\"selected\":[516],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-push-notification\",[[1,\"mds-push-notification\",{\"visible\":[1540],\"behavior\":[1],\"show\":[64],\"hide\":[64],\"removeNotification\":[64]},null,{\"visible\":[\"visibleChanged\"]}]]],[\"mds-radial-menu\",[[1,\"mds-radial-menu\",{\"angleStart\":[514,\"angle-start\"],\"angleEnd\":[514,\"angle-end\"],\"radius\":[514],\"direction\":[513],\"opened\":[1540],\"disc\":[1540],\"backdrop\":[516],\"interaction\":[513],\"icon\":[1537],\"variant\":[513],\"tone\":[513],\"size\":[513]},null,{\"disc\":[\"onDiscChanged\"],\"backdrop\":[\"backdropChanged\"],\"interaction\":[\"onInteractionChange\"],\"angleStart\":[\"onAngleStartChange\"],\"angleEnd\":[\"onAngleEndChange\"],\"radius\":[\"onRadiusChange\"],\"size\":[\"onSizeChange\"],\"opened\":[\"onOpenedChange\"]}]]],[\"mds-stepper-bar-item\",[[1,\"mds-stepper-bar-item\",{\"label\":[1],\"step\":[4],\"badge\":[1540],\"icon\":[1],\"iconChecked\":[1,\"icon-checked\"],\"done\":[516],\"current\":[1540],\"value\":[513],\"typography\":[1],\"isDone\":[32],\"isCurrent\":[32],\"index\":[32]},null,{\"done\":[\"selectedHandler\"],\"current\":[\"currentHandler\"]}]]],[\"mds-table-row\",[[1,\"mds-table-row\",{\"interactive\":[516],\"overlayActions\":[516,\"overlay-actions\"],\"selectable\":[516],\"selected\":[1540],\"value\":[520],\"sizerWidth\":[32],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-tree-item\",[[1,\"mds-tree-item\",{\"actions\":[513],\"async\":[516],\"depth\":[514],\"label\":[1],\"toggle\":[513],\"expanded\":[1540],\"truncate\":[513],\"icon\":[1],\"hasActions\":[32],\"hasChildren\":[32],\"currentToggleIcon\":[32],\"await\":[32],\"language\":[32],\"updateLang\":[64],\"expand\":[64]},null,{\"toggle\":[\"handleIconChange\"],\"expanded\":[\"handleExpandedChange\"]}]]],[\"mds-url-view\",[[1,\"mds-url-view\",{\"icon\":[513],\"label\":[513],\"src\":[513],\"loading\":[513],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-file\",[[1,\"mds-file\",{\"suffix\":[513],\"description\":[1],\"filename\":[1],\"preview\":[1],\"showDownloadedIcon\":[4,\"show-downloaded-icon\"],\"format\":[1537],\"language\":[32],\"wasDownloaded\":[32],\"updateLang\":[64]},null,{\"filename\":[\"handleFilename\"]}]]],[\"mds-filter\",[[1,\"mds-filter\",{\"autoReset\":[516,\"auto-reset\"],\"label\":[1],\"multiple\":[516],\"reset\":[516],\"active\":[32],\"itemsSelected\":[32]},[[0,\"mdsFilterItemSelect\",\"activeEventHandler\"]]]]],[\"mds-input-select\",[[65,\"mds-input-select\",{\"autocomplete\":[513],\"autoFocus\":[516,\"auto-focus\"],\"placeholder\":[513],\"name\":[513],\"disabled\":[516],\"required\":[516],\"multiple\":[516],\"size\":[514],\"value\":[520],\"defaultValue\":[520,\"default-value\"],\"variant\":[513],\"hasFocus\":[32]},null,{\"value\":[\"valueChanged\"],\"disabled\":[\"disabledChanged\"],\"placeholder\":[\"placeholderChanged\"]}]]],[\"mds-paginator\",[[1,\"mds-paginator\",{\"pages\":[2],\"currentPage\":[1538,\"current-page\"]}]]],[\"mds-accordion-timer-item\",[[1,\"mds-accordion-timer-item\",{\"typography\":[1],\"selected\":[516],\"description\":[1],\"duration\":[514],\"progress\":[2],\"uuid\":[2]},null,{\"selected\":[\"handleSelected\"]}]]],[\"mds-benchmark-bar\",[[1,\"mds-benchmark-bar\",{\"alias\":[1],\"typography\":[1],\"value\":[2],\"variant\":[513]}]]],[\"mds-keyboard-key\",[[1,\"mds-keyboard-key\",{\"name\":[513],\"pressed\":[516],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-kpi-item\",[[1,\"mds-kpi-item\",{\"label\":[1],\"description\":[1],\"threshold\":[2],\"icon\":[1],\"isIntersecting\":[32]}]]],[\"mds-list-item\",[[1,\"mds-list-item\",{\"typography\":[513],\"variant\":[1],\"icon\":[1]}]]],[\"mds-mention\",[[1,\"mds-mention\",{\"icon\":[513],\"label\":[513],\"size\":[513]}]]],[\"mds-tab-bar-item\",[[1,\"mds-tab-bar-item\",{\"icon\":[1],\"selected\":[1540],\"typography\":[1],\"isSelected\":[32]},null,{\"selected\":[\"validateSelected\"]}]]],[\"mds-usage\",[[1,\"mds-usage\",{\"variant\":[1],\"alias\":[1],\"language\":[32],\"updateLang\":[64]}]]],[\"mds-accordion-item\",[[1,\"mds-accordion-item\",{\"typography\":[1],\"selected\":[1540],\"label\":[1]}]]],[\"mds-bibliography\",[[1,\"mds-bibliography\",{\"format\":[1],\"author\":[1],\"name\":[1],\"publisher\":[1],\"date\":[1],\"location\":[1],\"rel\":[1],\"typography\":[1],\"variant\":[1],\"url\":[1]}]]],[\"mds-breadcrumb-item\",[[1,\"mds-breadcrumb-item\",{\"selected\":[1540]}]]],[\"mds-input-field\",[[65,\"mds-input-field\",{\"label\":[1025],\"message\":[1025],\"variant\":[1537]}]]],[\"mds-input-range\",[[65,\"mds-input-range\",{\"formatValue\":[16],\"max\":[2],\"min\":[2],\"step\":[2],\"disabled\":[1540],\"value\":[1538],\"progress\":[32]},null,{\"disabled\":[\"disabledChanged\"],\"value\":[\"valueChanged\"],\"min\":[\"minChanged\"],\"max\":[\"maxChanged\"],\"step\":[\"stepChanged\"]}]]],[\"mds-notification\",[[1,\"mds-notification\",{\"target\":[1],\"value\":[1538],\"visible\":[1540],\"strategy\":[1537],\"max\":[514]},null,{\"strategy\":[\"strategyHandler\"]}]]],[\"mds-pref\",[[1,\"mds-pref\",{\"size\":[513],\"controller\":[1540],\"showReload\":[32],\"language\":[32],\"updateLang\":[64]},null,{\"controller\":[\"handleControllerChange\"],\"size\":[\"handleSizeChange\"]}]]],[\"mds-price-table-features\",[[1,\"mds-price-table-features\",{\"label\":[1]}]]],[\"mds-price-table-features-cell\",[[1,\"mds-price-table-features-cell\",{\"type\":[513]}]]],[\"mds-price-table-list\",[[1,\"mds-price-table-list\",{\"hasItems\":[32]}]]],[\"mds-price-table-list-item\",[[1,\"mds-price-table-list-item\",{\"supported\":[516],\"typography\":[513]}]]],[\"mds-quote\",[[1,\"mds-quote\",{\"typography\":[1],\"tag\":[1]}]]],[\"mds-toast\",[[1,\"mds-toast\",{\"duration\":[1538],\"visible\":[1540],\"variant\":[513],\"tone\":[513],\"position\":[1537]},null,{\"visible\":[\"visibleChanged\"],\"duration\":[\"durationChanged\"]}]]],[\"mds-accordion\",[[1,\"mds-accordion\",{\"multiple\":[4],\"closable\":[4]},[[0,\"mdsAccordionItemSelect\",\"selectedEventHandler\"],[0,\"mdsAccordionItemUnselect\",\"unselectedEventHandler\"]]]]],[\"mds-accordion-timer\",[[1,\"mds-accordion-timer\",{\"duration\":[514],\"paused\":[516],\"time\":[32]},[[0,\"mdsAccordionTimerItemClickSelect\",\"onClickSelect\"],[0,\"mdsAccordionTimerItemSelect\",\"onSelect\"],[0,\"mdsAccordionTimerItemMouseEnterSelect\",\"onMouseEnterSelect\"],[0,\"mdsAccordionTimerItemMouseLeaveSelect\",\"onMouseLeaveSelect\"]],{\"paused\":[\"handlePaused\"]}]]],[\"mds-author\",[[1,\"mds-author\"]]],[\"mds-button-group\",[[1,\"mds-button-group\"]]],[\"mds-card\",[[1,\"mds-card\",{\"autoGrid\":[516,\"auto-grid\"],\"layout\":[32]}]]],[\"mds-card-content\",[[1,\"mds-card-content\"]]],[\"mds-card-footer\",[[1,\"mds-card-footer\"]]],[\"mds-card-header\",[[1,\"mds-card-header\"]]],[\"mds-card-media\",[[1,\"mds-card-media\"]]],[\"mds-details\",[[1,\"mds-details\",{\"opened\":[1540],\"isOpened\":[32]},null,{\"opened\":[\"validateOpened\"]}]]],[\"mds-emoji\",[[1,\"mds-emoji\",{\"name\":[513],\"agree\":[64],\"disagree\":[64],\"startThinking\":[64],\"stopThinking\":[64],\"startBlinking\":[64],\"stopBlinking\":[64],\"stopFollowMouse\":[64],\"startFollowMouse\":[64]}]]],[\"mds-hr\",[[1,\"mds-hr\"]]],[\"mds-kpi\",[[1,\"mds-kpi\"]]],[\"mds-list\",[[1,\"mds-list\"]]],[\"mds-price-table\",[[1,\"mds-price-table\"]]],[\"mds-price-table-features-row\",[[1,\"mds-price-table-features-row\",{\"cellPercWidth\":[32]}]]],[\"mds-price-table-header\",[[1,\"mds-price-table-header\"]]],[\"mds-stepper-bar\",[[1,\"mds-stepper-bar\",{\"itemsDone\":[2,\"items-done\"],\"currentItem\":[32]},[[0,\"mdsStepperBarItemDone\",\"changeEventHandler\"]],{\"itemsDone\":[\"itemDone\"]}]]],[\"mds-tab-bar\",[[1,\"mds-tab-bar\",null,[[0,\"mdsTabBarItemSelect\",\"changeEventHandler\"]]]]],[\"mds-table\",[[1,\"mds-table\",{\"interactive\":[4],\"selectable\":[4],\"selection\":[1540],\"selectedRows\":[32],\"updateSelection\":[64],\"selectAll\":[64]},null,{\"interactive\":[\"onTableInteractive\"],\"selectable\":[\"onTableSelectable\"]}]]],[\"mds-table-body\",[[1,\"mds-table-body\",{\"interactive\":[516],\"selection\":[516]}]]],[\"mds-table-footer\",[[1,\"mds-table-footer\"]]],[\"mds-tree\",[[1,\"mds-tree\",{\"appearance\":[513],\"async\":[516],\"label\":[1],\"toggle\":[513],\"togglePosition\":[513,\"toggle-position\"],\"expanded\":[1540],\"truncate\":[513],\"actions\":[513]},null,{\"expanded\":[\"handleExpandedChange\"],\"toggle\":[\"handleToggleChange\"],\"truncate\":[\"handleTruncateChange\"]}]]],[\"mds-video-wall\",[[1,\"mds-video-wall\",{\"autoplay\":[4],\"loop\":[4],\"muted\":[4],\"noise\":[1],\"poster\":[1],\"preload\":[1],\"src\":[1]}]]],[\"mds-zero\",[[1,\"mds-zero\"]]],[\"mds-text\",[[1,\"mds-text\",{\"animation\":[1],\"tag\":[1537],\"text\":[513],\"truncate\":[513],\"typography\":[513],\"variant\":[513]},null,{\"text\":[\"textHandler\"]}]]],[\"mds-img\",[[1,\"mds-img\",{\"alt\":[1537],\"crossorigin\":[1],\"height\":[1],\"loading\":[1],\"referrerpolicy\":[1],\"sizes\":[1],\"src\":[1],\"srcset\":[1],\"srcsetConsumption\":[1,\"srcset-consumption\"],\"width\":[1],\"imageConsumptionLoaded\":[32],\"imageError\":[32],\"language\":[32],\"updateLang\":[64]},null,{\"srcsetConsumption\":[\"srcsetConsumptionHandler\"],\"src\":[\"srcHandler\"]}]]],[\"mds-avatar-stack-item\",[[1,\"mds-avatar-stack-item\",{\"count\":[514],\"initials\":[1537],\"src\":[513],\"tone\":[513],\"variant\":[513]}]]],[\"mds-badge\",[[1,\"mds-badge\",{\"variant\":[513],\"tone\":[513],\"typography\":[1],\"typographyVariant\":[1,\"typography-variant\"]}]]],[\"mds-file-preview\",[[1,\"mds-file-preview\",{\"deletable\":[516],\"downloadable\":[516],\"description\":[513],\"filename\":[513],\"filesize\":[513],\"message\":[513],\"truncate\":[513],\"src\":[513],\"suffix\":[513],\"icon\":[513],\"variant\":[513],\"format\":[1537],\"language\":[32],\"updateLang\":[64]},null,{\"filename\":[\"handleFilename\"],\"downloadable\":[\"handleDownloadable\"]}]]],[\"mds-tooltip\",[[1,\"mds-tooltip\",{\"arrow\":[4],\"arrowPadding\":[2,\"arrow-padding\"],\"autoPlacement\":[516,\"auto-placement\"],\"flip\":[4],\"target\":[513],\"offset\":[2],\"placement\":[513],\"typography\":[1],\"shift\":[4],\"shiftPadding\":[2,\"shift-padding\"],\"strategy\":[513],\"visible\":[1540]},null,{\"arrow\":[\"arrowChanged\"],\"autoPlacement\":[\"autoPlacementChanged\"],\"flip\":[\"flipChanged\"],\"offset\":[\"offsetChanged\"],\"placement\":[\"placementChanged\"],\"shift\":[\"shiftChanged\"],\"shiftPadding\":[\"shiftPaddingChanged\"],\"strategy\":[\"strategyChanged\"],\"visible\":[\"visibleChanged\"],\"target\":[\"targetChanged\"]}]]],[\"mds-progress\",[[1,\"mds-progress\",{\"progress\":[2],\"direction\":[513],\"variant\":[513],\"steps\":[1],\"currentStep\":[32]},null,{\"progress\":[\"progressChanged\"],\"steps\":[\"stepsChanged\"]}]]],[\"mds-dropdown\",[[1,\"mds-dropdown\",{\"arrow\":[516],\"arrowPadding\":[2,\"arrow-padding\"],\"autoPlacement\":[4,\"auto-placement\"],\"backdrop\":[516],\"flip\":[4],\"interaction\":[513],\"target\":[1],\"offset\":[2],\"placement\":[1],\"shift\":[4],\"shiftPadding\":[2,\"shift-padding\"],\"smooth\":[4],\"strategy\":[1],\"visible\":[1540],\"zIndex\":[2,\"z-index\"]},null,{\"arrow\":[\"arrowChanged\"],\"arrowPadding\":[\"arrowPaddingChanged\"],\"autoPlacement\":[\"autoPlacementChanged\"],\"backdrop\":[\"backdropChanged\"],\"flip\":[\"flipChanged\"],\"offset\":[\"offsetChanged\"],\"placement\":[\"placementChanged\"],\"shift\":[\"shiftChanged\"],\"shiftPadding\":[\"shiftPaddingChanged\"],\"strategy\":[\"strategyChanged\"],\"target\":[\"targetChanged\"],\"visible\":[\"visibleChanged\"]}]]],[\"mds-input-tip_2\",[[1,\"mds-input-tip-item\",{\"variant\":[513],\"expanded\":[1540],\"language\":[32],\"updateLang\":[64]},null,{\"expanded\":[\"handleEcpandedChanged\"]}],[1,\"mds-input-tip\",{\"active\":[516],\"position\":[513]}]]],[\"mds-button_3\",[[65,\"mds-button\",{\"autoFocus\":[4,\"auto-focus\"],\"hasText\":[1540,\"has-text\"],\"icon\":[1537],\"iconPosition\":[1,\"icon-position\"],\"type\":[513],\"variant\":[513],\"tone\":[513],\"size\":[513],\"active\":[1540],\"disabled\":[1540],\"await\":[1540],\"href\":[513],\"target\":[1],\"truncate\":[513]},null,{\"disabled\":[\"disabledChanged\"],\"await\":[\"awaitChanged\",\"handleAwaitChange\"],\"type\":[\"handleTypeChange\"],\"variant\":[\"handleVariantChange\"]}],[1,\"mds-spinner\",{\"running\":[1540]},null,{\"running\":[\"handleRunning\"]}],[1,\"mds-icon\",{\"name\":[513],\"svgHTML\":[32],\"_iconHref\":[32],\"setSvgPath\":[64]},null,{\"name\":[\"updateIcon\"]}]]],[\"mds-input\",[[65,\"mds-input\",{\"autocomplete\":[513],\"autofocus\":[516],\"await\":[516],\"controlsLayout\":[513,\"controls-layout\"],\"controlsIcon\":[513,\"controls-icon\"],\"controlIncreaseLabel\":[513,\"control-increase-label\"],\"controlDecreaseLabel\":[513,\"control-decrease-label\"],\"datalist\":[16],\"disabled\":[516],\"icon\":[1537],\"max\":[520],\"maxlength\":[1538],\"mic\":[516],\"min\":[520],\"minlength\":[514],\"name\":[513],\"pattern\":[513],\"placeholder\":[513],\"readonly\":[516],\"required\":[516],\"variant\":[1537],\"tip\":[513],\"step\":[513],\"type\":[513],\"typography\":[513],\"value\":[1537],\"hasFocus\":[32],\"language\":[32],\"isRecording\":[32],\"currentLengthLabel\":[32],\"countVariant\":[32],\"isPasswordVisible\":[32],\"updateLang\":[64],\"addValidator\":[64],\"removeValidator\":[64],\"hasValidator\":[64],\"getErrors\":[64],\"setFocus\":[64],\"getInputElement\":[64]},null,{\"value\":[\"valueChanged\"],\"variant\":[\"variantChanged\"],\"maxlength\":[\"maxLengthChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"mds-table-header-cell\",[[1,\"mds-table-header-cell\",{\"sortable\":[516],\"label\":[513],\"direction\":[1537],\"isAscending\":[32]},null,{\"sortable\":[\"sortableHandler\"],\"direction\":[\"directionHandler\"]}]]],[\"mds-filter-item\",[[1,\"mds-filter-item\",{\"selected\":[1540],\"label\":[513],\"icon\":[513],\"value\":[513],\"count\":[513],\"disabled\":[516]}]]],[\"mds-paginator-item\",[[1,\"mds-paginator-item\",{\"icon\":[513],\"selected\":[516],\"disabled\":[516]}]]],[\"mds-separator\",[[1,\"mds-separator\"]]],[\"mds-modal\",[[1,\"mds-modal\",{\"opened\":[1540],\"backdrop\":[1540],\"position\":[1537],\"animating\":[1537],\"animation\":[513],\"overflow\":[513],\"close\":[64]},null,{\"opened\":[\"handleOpenProp\"],\"backdrop\":[\"handleBackdropProp\"]}]]],[\"mds-banner_3\",[[1,\"mds-banner\",{\"variant\":[513],\"tone\":[513],\"cockade\":[516],\"deletable\":[4],\"headline\":[1],\"icon\":[1],\"language\":[32],\"updateLang\":[64]}],[1,\"mds-chip\",{\"clickable\":[1540],\"deletable\":[4],\"disabled\":[4],\"icon\":[1],\"label\":[513],\"selected\":[1540],\"selectable\":[516],\"variant\":[513],\"tone\":[513],\"language\":[32],\"updateLang\":[64]},null,{\"selectable\":[\"handleSelectableProp\"],\"clickable\":[\"handleClickableProp\"],\"deletable\":[\"handleDeletableProp\"],\"selected\":[\"handleSelectedProp\"]}],[1,\"mds-help\",{\"icon\":[1],\"autoPlacement\":[516,\"auto-placement\"],\"placement\":[513]}]]],[\"mds-avatar\",[[1,\"mds-avatar\",{\"icon\":[513],\"initials\":[1537],\"count\":[1538],\"src\":[513],\"tone\":[513],\"variant\":[1537],\"fallback\":[32],\"loaded\":[32]},null,{\"initials\":[\"initialsHandler\"],\"count\":[\"countHandler\"],\"src\":[\"srcHandler\"],\"icon\":[\"iconHandler\"]}]]],[\"mds-input-switch_2\",[[65,\"mds-input-switch\",{\"autofocus\":[516],\"checked\":[1540],\"disabled\":[1540],\"explicit\":[516],\"icon\":[513],\"indeterminate\":[1540],\"name\":[513],\"size\":[513],\"type\":[513],\"typography\":[513],\"variant\":[513],\"value\":[1537],\"dirty\":[32],\"hasText\":[32],\"language\":[32],\"updateLang\":[64]},null,{\"disabled\":[\"disabledChanged\"],\"checked\":[\"checkedChanged\"],\"explicit\":[\"explicitChanged\"]}],[1,\"mds-table-cell\",{\"value\":[520]}]]],[\"mds-calendar_2\",[[1,\"mds-calendar\",{\"rangePicker\":[4,\"range-picker\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"min\":[513],\"max\":[513],\"hasPreselection\":[32],\"currentDate\":[32],\"weekDaysinMonth\":[32],\"weekdays\":[32],\"startDateIdentifier\":[32],\"endDateIdentifier\":[32],\"isFirstClick\":[32],\"currentView\":[32],\"selectedYear\":[32],\"language\":[32],\"internalStartDate\":[32],\"internalEndDate\":[32],\"updateLang\":[64],\"updateCurrentDate\":[64]},null,{\"startDate\":[\"handleStartDate\"],\"endDate\":[\"handleEndDate\"]}],[1,\"mds-calendar-cell\",{\"month\":[513],\"date\":[513],\"orientation\":[513],\"preview\":[516],\"selection\":[513],\"disabled\":[516],\"today\":[516]}]]],[\"mds-tab_2\",[[1,\"mds-tab-item\",{\"await\":[516],\"selected\":[1540],\"disabled\":[1540],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"],\"type\":[1],\"size\":[513],\"value\":[513],\"href\":[513],\"isSelected\":[32],\"hasText\":[32]},null,{\"selected\":[\"validateActive\"]}],[1,\"mds-tab\",{\"direction\":[1537],\"scrollbar\":[1540],\"animation\":[513],\"fill\":[1540],\"overflow\":[1540],\"size\":[1537],\"sliderWidth\":[32],\"sliderHeight\":[32],\"sliderOffsetX\":[32],\"sliderOffsetY\":[32],\"overflowLeft\":[32],\"overflowRight\":[32]},[[0,\"mdsTabItemSelect\",\"changeEventHandler\"],[0,\"mdsTabItemFocus\",\"focusEventHandler\"]],{\"animation\":[\"handleAnimationChange\"],\"scrollbar\":[\"handleScrollbarChange\"],\"fill\":[\"handleFillChange\"],\"overflow\":[\"handleOverflowChange\"],\"size\":[\"handleSizeChange\"]}]]]]"), options);
 };
 
 export { defineCustomElements };