@maggioli-design-system/mds-input-select 2.0.3 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/mds-input-select.cjs.entry.js +6 -3
- package/dist/collection/common/date.js +13 -0
- package/dist/collection/common/locale.js +8 -2
- package/dist/collection/components/mds-input-select/mds-input-select.css +12 -0
- package/dist/collection/components/mds-input-select/mds-input-select.js +5 -2
- package/dist/collection/components/mds-input-select/test/mds-input-select.stories.js +12 -0
- package/dist/collection/dictionary/button.js +6 -1
- package/dist/collection/dictionary/variant.js +6 -1
- package/dist/collection/type/date.js +1 -0
- package/dist/components/mds-input-select.js +6 -3
- package/dist/documentation.json +1 -1
- package/dist/esm/mds-input-select.entry.js +6 -3
- package/dist/esm-es5/mds-input-select.entry.js +1 -1
- package/dist/mds-input-select/mds-input-select.esm.js +1 -1
- package/dist/mds-input-select/p-750f66cc.system.js +1 -1
- package/dist/mds-input-select/{p-ad1eb960.system.entry.js → p-7ab40018.system.entry.js} +1 -1
- package/dist/mds-input-select/p-e743c791.entry.js +1 -0
- package/dist/stats.json +21 -17
- package/dist/types/common/date.d.ts +4 -0
- package/dist/types/common/locale.d.ts +3 -2
- package/dist/types/components/mds-input-select/test/mds-input-select.stories.d.ts +2 -0
- package/dist/types/dictionary/button.d.ts +2 -1
- package/dist/types/dictionary/variant.d.ts +2 -1
- package/dist/types/type/date.d.ts +5 -0
- package/dist/types/type/language.d.ts +2 -1
- package/dist/types/type/variant.d.ts +1 -1
- package/documentation.json +25 -10
- package/package.json +2 -2
- package/src/common/date.ts +21 -0
- package/src/common/locale.ts +10 -4
- package/src/components/mds-input-select/mds-input-select.tsx +2 -0
- package/src/components/mds-input-select/test/mds-input-select.stories.tsx +25 -0
- package/src/dictionary/button.ts +7 -0
- package/src/dictionary/variant.ts +7 -0
- package/src/fixtures/icons.json +24 -0
- package/src/fixtures/iconsauce.json +22 -0
- package/src/type/date.ts +10 -0
- package/src/type/language.ts +4 -0
- package/src/type/variant.ts +1 -1
- package/www/build/mds-input-select.esm.js +1 -1
- package/www/build/p-750f66cc.system.js +1 -1
- package/www/build/{p-ad1eb960.system.entry.js → p-7ab40018.system.entry.js} +1 -1
- package/www/build/p-e743c791.entry.js +1 -0
- package/dist/mds-input-select/p-b7cb51b4.entry.js +0 -1
- package/www/build/p-b7cb51b4.entry.js +0 -1
|
@@ -8,7 +8,7 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
|
|
|
8
8
|
|
|
9
9
|
const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
|
|
10
10
|
|
|
11
|
-
const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n --tw-translate-y: 0.375rem;\n\n --tw-translate-x: 0.375rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n --tw-translate-y: 0.5rem;\n\n --tw-translate-x: 0.625rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--brand-maggioli-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--brand-maggioli-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\n\n.visible{\n\n visibility: visible;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n";
|
|
11
|
+
const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n --tw-translate-y: 0.375rem;\n\n --tw-translate-x: 0.375rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n --tw-translate-y: 0.5rem;\n\n --tw-translate-x: 0.625rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--brand-maggioli-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--brand-maggioli-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\n\n.visible{\n\n visibility: visible;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.flex{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.gap-x-400{\n\n -moz-column-gap: 1rem;\n\n -webkit-column-gap: 1rem;\n\n column-gap: 1rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n";
|
|
12
12
|
const MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
13
13
|
|
|
14
14
|
const MdsInputSelect = class {
|
|
@@ -76,6 +76,9 @@ const MdsInputSelect = class {
|
|
|
76
76
|
element.selected = element.value === this.value;
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
+
else if (!this.placeholder) {
|
|
80
|
+
this.value = select === null || select === void 0 ? void 0 : select.querySelectorAll('option')[0].value;
|
|
81
|
+
}
|
|
79
82
|
};
|
|
80
83
|
this.selected = undefined;
|
|
81
84
|
this.hasFocus = false;
|
|
@@ -106,8 +109,8 @@ const MdsInputSelect = class {
|
|
|
106
109
|
}
|
|
107
110
|
}
|
|
108
111
|
render() {
|
|
109
|
-
return (index.h(index.Host, { key: '
|
|
110
|
-
index.h("mds-input-tip-item", { key: '
|
|
112
|
+
return (index.h(index.Host, { key: 'd46653b843b54f01df7bfdd50b01fc6d9eeb051f' }, index.h("select", { key: 'd15111f4a32cc58a2ae199868dfda722cd04857f', 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 && index.h("option", { key: 'f9e417ceeaf4894328865140411e4568b4578c47', value: "", disabled: true, selected: true }, this.placeholder)), index.h("div", { key: 'd50c4755426ef6bd54a54a80a07cc44390493e3d', class: "icon-container" }, index.h("i", { key: 'ba3287b543e7f39489eba7066763805e054138d3', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), index.h("div", { key: '70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb', class: "option-container" }, index.h("slot", { key: '7c63d09662ff18ecbc5e3c7222ff63553e5165fa', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: 'e40bdd6ee45206329e48d1d8ab3410b1a7988c2a', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '09e2b09522c70af6deee9a7d7cb28a586786c4a1', expanded: true, variant: "disabled" }), this.required &&
|
|
113
|
+
index.h("mds-input-tip-item", { key: '78d0c80d7a3bdf721ec5c755304dce207512c74b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
111
114
|
}
|
|
112
115
|
static get formAssociated() { return true; }
|
|
113
116
|
get host() { return index.getElement(this); }
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// ISO 8601 date regex allowing optional components (month, day, time)
|
|
2
|
+
const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$';
|
|
3
|
+
const isISO8601Date = (dateString) => {
|
|
4
|
+
const ISO8601Regex = new RegExp(ISO8601RegexString);
|
|
5
|
+
return ISO8601Regex.test(dateString);
|
|
6
|
+
};
|
|
7
|
+
const sanitizeISO8601Date = (dateString) => {
|
|
8
|
+
if (isISO8601Date(dateString)) {
|
|
9
|
+
return dateString;
|
|
10
|
+
}
|
|
11
|
+
return new Date(dateString).toISOString();
|
|
12
|
+
};
|
|
13
|
+
export { sanitizeISO8601Date, isISO8601Date, };
|
|
@@ -2,15 +2,19 @@ import Handlebars from "handlebars";
|
|
|
2
2
|
export class Locale {
|
|
3
3
|
constructor(configData) {
|
|
4
4
|
this.rollbackLanguage = 'en';
|
|
5
|
+
this.set = (configData) => {
|
|
6
|
+
this.config = configData;
|
|
7
|
+
};
|
|
5
8
|
this.lang = (element) => {
|
|
6
9
|
this.closestElement = element.closest('[lang]');
|
|
7
10
|
if (this.closestElement) {
|
|
8
11
|
if (this.closestElement.lang) {
|
|
9
12
|
this.language = this.closestElement.lang;
|
|
10
|
-
return;
|
|
13
|
+
return this.language;
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
16
|
this.language = this.rollbackLanguage;
|
|
17
|
+
return this.language;
|
|
14
18
|
};
|
|
15
19
|
this.pluralize = (tag, context) => {
|
|
16
20
|
const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
|
|
@@ -43,6 +47,8 @@ export class Locale {
|
|
|
43
47
|
}
|
|
44
48
|
return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
|
|
45
49
|
};
|
|
46
|
-
|
|
50
|
+
if (configData) {
|
|
51
|
+
this.set(configData);
|
|
52
|
+
}
|
|
47
53
|
}
|
|
48
54
|
}
|
|
@@ -60,6 +60,9 @@ export class MdsInputSelect {
|
|
|
60
60
|
element.selected = element.value === this.value;
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
+
else if (!this.placeholder) {
|
|
64
|
+
this.value = select === null || select === void 0 ? void 0 : select.querySelectorAll('option')[0].value;
|
|
65
|
+
}
|
|
63
66
|
};
|
|
64
67
|
this.selected = undefined;
|
|
65
68
|
this.hasFocus = false;
|
|
@@ -90,8 +93,8 @@ export class MdsInputSelect {
|
|
|
90
93
|
}
|
|
91
94
|
}
|
|
92
95
|
render() {
|
|
93
|
-
return (h(Host, { key: '
|
|
94
|
-
h("mds-input-tip-item", { key: '
|
|
96
|
+
return (h(Host, { key: 'd46653b843b54f01df7bfdd50b01fc6d9eeb051f' }, h("select", { key: 'd15111f4a32cc58a2ae199868dfda722cd04857f', 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: 'f9e417ceeaf4894328865140411e4568b4578c47', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: 'd50c4755426ef6bd54a54a80a07cc44390493e3d', class: "icon-container" }, h("i", { key: 'ba3287b543e7f39489eba7066763805e054138d3', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb', class: "option-container" }, h("slot", { key: '7c63d09662ff18ecbc5e3c7222ff63553e5165fa', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e40bdd6ee45206329e48d1d8ab3410b1a7988c2a', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '09e2b09522c70af6deee9a7d7cb28a586786c4a1', expanded: true, variant: "disabled" }), this.required &&
|
|
97
|
+
h("mds-input-tip-item", { key: '78d0c80d7a3bdf721ec5c755304dce207512c74b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
95
98
|
}
|
|
96
99
|
static get is() { return "mds-input-select"; }
|
|
97
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -49,6 +49,13 @@ export default {
|
|
|
49
49
|
},
|
|
50
50
|
};
|
|
51
51
|
const Template = args => h("mds-input-select", Object.assign({}, args), h("option", { value: "1" }, "First contact"), h("option", { value: "2" }, "Second impact"), h("option", { value: "3" }, "The Third Man"), h("option", { value: "4" }, "The Fourth Emendament"));
|
|
52
|
+
const TemplateForm = args => h("form", { class: "flex gap-x-400", action: '#', onSubmit: event => {
|
|
53
|
+
var _a;
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
// eslint-disable-next-line no-console
|
|
56
|
+
console.log('Form submitted via mds-button', (_a = event.target) === null || _a === void 0 ? void 0 : _a[0].value);
|
|
57
|
+
return false;
|
|
58
|
+
} }, h("mds-input-select", Object.assign({}, args), h("option", { value: "1" }, "First contact"), h("option", { value: "2" }, "Second impact"), h("option", { value: "3" }, "The Third Man"), h("option", { value: "4" }, "The Fourth Emendament")), h("mds-button", null, "Submit"));
|
|
52
59
|
export const Default = Template.bind({});
|
|
53
60
|
Default.args = {
|
|
54
61
|
placeholder: 'Seleziona un film...',
|
|
@@ -65,3 +72,8 @@ export const Disabled = Template.bind({});
|
|
|
65
72
|
Disabled.args = {
|
|
66
73
|
disabled: true,
|
|
67
74
|
};
|
|
75
|
+
export const FormIntegrationWithPlaceholder = TemplateForm.bind({});
|
|
76
|
+
FormIntegrationWithPlaceholder.args = {
|
|
77
|
+
placeholder: 'Seleziona un film...',
|
|
78
|
+
};
|
|
79
|
+
export const FormIntegration = TemplateForm.bind({});
|
|
@@ -27,4 +27,9 @@ const buttonIconPositionDictionary = [
|
|
|
27
27
|
'left',
|
|
28
28
|
'right',
|
|
29
29
|
];
|
|
30
|
-
|
|
30
|
+
const buttonTypeDictionary = [
|
|
31
|
+
'button',
|
|
32
|
+
'submit',
|
|
33
|
+
'reset',
|
|
34
|
+
];
|
|
35
|
+
export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
|
|
@@ -83,8 +83,13 @@ const toneSimpleVariantDictionary = [
|
|
|
83
83
|
'weak',
|
|
84
84
|
'quiet',
|
|
85
85
|
];
|
|
86
|
+
const toneSmartVariantDictionary = [
|
|
87
|
+
'strong',
|
|
88
|
+
'weak',
|
|
89
|
+
'ghost',
|
|
90
|
+
];
|
|
86
91
|
const toneMinimalVariantDictionary = [
|
|
87
92
|
'strong',
|
|
88
93
|
'weak',
|
|
89
94
|
];
|
|
90
|
-
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
|
|
95
|
+
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -4,7 +4,7 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
|
|
|
4
4
|
|
|
5
5
|
const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
|
|
6
6
|
|
|
7
|
-
const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n --tw-translate-y: 0.375rem;\n\n --tw-translate-x: 0.375rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n --tw-translate-y: 0.5rem;\n\n --tw-translate-x: 0.625rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--brand-maggioli-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--brand-maggioli-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\n\n.visible{\n\n visibility: visible;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n";
|
|
7
|
+
const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n --tw-translate-y: 0.375rem;\n\n --tw-translate-x: 0.375rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n --tw-translate-y: 0.5rem;\n\n --tw-translate-x: 0.625rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--brand-maggioli-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--brand-maggioli-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\n\n.visible{\n\n visibility: visible;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.flex{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.gap-x-400{\n\n -moz-column-gap: 1rem;\n\n -webkit-column-gap: 1rem;\n\n column-gap: 1rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n";
|
|
8
8
|
const MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
9
9
|
|
|
10
10
|
const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect extends HTMLElement {
|
|
@@ -68,6 +68,9 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
|
|
|
68
68
|
element.selected = element.value === this.value;
|
|
69
69
|
});
|
|
70
70
|
}
|
|
71
|
+
else if (!this.placeholder) {
|
|
72
|
+
this.value = select === null || select === void 0 ? void 0 : select.querySelectorAll('option')[0].value;
|
|
73
|
+
}
|
|
71
74
|
};
|
|
72
75
|
this.selected = undefined;
|
|
73
76
|
this.hasFocus = false;
|
|
@@ -98,8 +101,8 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
|
|
|
98
101
|
}
|
|
99
102
|
}
|
|
100
103
|
render() {
|
|
101
|
-
return (h(Host, { key: '
|
|
102
|
-
h("mds-input-tip-item", { key: '
|
|
104
|
+
return (h(Host, { key: 'd46653b843b54f01df7bfdd50b01fc6d9eeb051f' }, h("select", { key: 'd15111f4a32cc58a2ae199868dfda722cd04857f', 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: 'f9e417ceeaf4894328865140411e4568b4578c47', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: 'd50c4755426ef6bd54a54a80a07cc44390493e3d', class: "icon-container" }, h("i", { key: 'ba3287b543e7f39489eba7066763805e054138d3', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb', class: "option-container" }, h("slot", { key: '7c63d09662ff18ecbc5e3c7222ff63553e5165fa', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e40bdd6ee45206329e48d1d8ab3410b1a7988c2a', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '09e2b09522c70af6deee9a7d7cb28a586786c4a1', expanded: true, variant: "disabled" }), this.required &&
|
|
105
|
+
h("mds-input-tip-item", { key: '78d0c80d7a3bdf721ec5c755304dce207512c74b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
103
106
|
}
|
|
104
107
|
static get formAssociated() { return true; }
|
|
105
108
|
get host() { return this; }
|
package/dist/documentation.json
CHANGED
|
@@ -4,7 +4,7 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
|
|
|
4
4
|
|
|
5
5
|
const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
|
|
6
6
|
|
|
7
|
-
const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n --tw-translate-y: 0.375rem;\n\n --tw-translate-x: 0.375rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n --tw-translate-y: 0.5rem;\n\n --tw-translate-x: 0.625rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--brand-maggioli-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--brand-maggioli-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\n\n.visible{\n\n visibility: visible;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n";
|
|
7
|
+
const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n\n\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n\n --tw-contain-size: ;\n\n --tw-contain-layout: ;\n\n --tw-contain-paint: ;\n\n --tw-contain-style: ;\n}\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host( [required]:not([required=\"false\"]):focus-within ) .icon{\n\n --tw-translate-y: 0.375rem;\n\n --tw-translate-x: 0.375rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon{\n\n --tw-translate-y: 0.5rem;\n\n --tw-translate-x: 0.625rem;\n\n -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--brand-maggioli-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--brand-maggioli-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n --mds-input-select-icon-color: var(--status-info-05);\n --mds-input-select-tip-background: var(--status-info-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-info-04);\n --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n --mds-input-select-icon-color: var(--status-success-05);\n --mds-input-select-tip-background: var(--status-success-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-success-04);\n --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n --mds-input-select-icon-color: var(--status-warning-05);\n --mds-input-select-tip-background: var(--status-warning-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-warning-04);\n --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n --mds-input-select-icon-color: var(--status-error-05);\n --mds-input-select-tip-background: var(--status-error-05);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .input,\n .input:hover,\n .input:focus,\n .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n }\n\n .input {\n color: rgb(var(--tone-neutral-03));\n }\n }\n}\n\n.visible{\n\n visibility: visible;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.flex{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.gap-x-400{\n\n -moz-column-gap: 1rem;\n\n -webkit-column-gap: 1rem;\n\n column-gap: 1rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n .input {\n color: rgb(var(--tone-neutral-01));\n }\n }\n}\n\n\n";
|
|
8
8
|
const MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
9
9
|
|
|
10
10
|
const MdsInputSelect = class {
|
|
@@ -72,6 +72,9 @@ const MdsInputSelect = class {
|
|
|
72
72
|
element.selected = element.value === this.value;
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
|
+
else if (!this.placeholder) {
|
|
76
|
+
this.value = select === null || select === void 0 ? void 0 : select.querySelectorAll('option')[0].value;
|
|
77
|
+
}
|
|
75
78
|
};
|
|
76
79
|
this.selected = undefined;
|
|
77
80
|
this.hasFocus = false;
|
|
@@ -102,8 +105,8 @@ const MdsInputSelect = class {
|
|
|
102
105
|
}
|
|
103
106
|
}
|
|
104
107
|
render() {
|
|
105
|
-
return (h(Host, { key: '
|
|
106
|
-
h("mds-input-tip-item", { key: '
|
|
108
|
+
return (h(Host, { key: 'd46653b843b54f01df7bfdd50b01fc6d9eeb051f' }, h("select", { key: 'd15111f4a32cc58a2ae199868dfda722cd04857f', 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: 'f9e417ceeaf4894328865140411e4568b4578c47', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: 'd50c4755426ef6bd54a54a80a07cc44390493e3d', class: "icon-container" }, h("i", { key: 'ba3287b543e7f39489eba7066763805e054138d3', class: "svg icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb', class: "option-container" }, h("slot", { key: '7c63d09662ff18ecbc5e3c7222ff63553e5165fa', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e40bdd6ee45206329e48d1d8ab3410b1a7988c2a', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '09e2b09522c70af6deee9a7d7cb28a586786c4a1', expanded: true, variant: "disabled" }), this.required &&
|
|
109
|
+
h("mds-input-tip-item", { key: '78d0c80d7a3bdf721ec5c755304dce207512c74b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
107
110
|
}
|
|
108
111
|
static get formAssociated() { return true; }
|
|
109
112
|
get host() { return getElement(this); }
|