@maggioli-design-system/mds-input-select 3.1.1 → 3.2.0
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 +1 -1
- package/dist/collection/common/floating-controller.js +3 -3
- package/dist/collection/common/slot.js +10 -1
- package/dist/collection/common/string.js +30 -0
- package/dist/collection/components/mds-input-select/mds-input-select.css +119 -0
- package/dist/collection/dictionary/keyboard.js +84 -0
- package/dist/collection/type/keyboard.js +1 -0
- package/dist/components/mds-input-select.js +1 -1
- package/dist/documentation.json +1 -1
- package/dist/esm/mds-input-select.entry.js +1 -1
- 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-0a525bf3.entry.js → p-4a33e3f5.entry.js} +1 -1
- package/dist/mds-input-select/p-595037e8.system.js +1 -1
- package/dist/mds-input-select/{p-792c07a9.system.entry.js → p-5aa7dd02.system.entry.js} +1 -1
- package/dist/stats.json +22 -16
- package/dist/types/common/slot.d.ts +2 -1
- package/dist/types/common/string.d.ts +4 -0
- package/dist/types/dictionary/keyboard.d.ts +2 -0
- package/dist/types/type/keyboard.d.ts +12 -0
- package/documentation.json +21 -1
- package/package.json +3 -3
- package/src/common/floating-controller.ts +6 -6
- package/src/common/slot.ts +11 -0
- package/src/common/string.ts +42 -0
- package/src/components/mds-input-select/mds-input-select.css +1 -0
- package/src/dictionary/keyboard.ts +87 -0
- package/src/fixtures/icons.json +18 -1
- package/src/meta/keyboard/keys.json +83 -0
- package/src/tailwind/components.css +11 -0
- package/src/tailwind/fouc.css +118 -0
- package/src/type/keyboard.ts +93 -0
- package/www/build/mds-input-select.esm.js +1 -1
- package/www/build/{p-0a525bf3.entry.js → p-4a33e3f5.entry.js} +1 -1
- package/www/build/p-595037e8.system.js +1 -1
- package/www/build/{p-792c07a9.system.entry.js → p-5aa7dd02.system.entry.js} +1 -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:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
12
12
|
const MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
13
13
|
|
|
14
14
|
const MdsInputSelect = class {
|
|
@@ -143,12 +143,12 @@ export class FloatingController {
|
|
|
143
143
|
}
|
|
144
144
|
export class Backdrop {
|
|
145
145
|
constructor(backdropId) {
|
|
146
|
-
this.defaultBackdropId = '
|
|
146
|
+
this.defaultBackdropId = 'magma-backdrop';
|
|
147
147
|
this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
|
|
148
148
|
this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
|
|
149
149
|
this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
|
|
150
|
-
this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
|
|
151
|
-
this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
|
|
150
|
+
this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`;
|
|
151
|
+
this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`;
|
|
152
152
|
}
|
|
153
153
|
attachBackdrop() {
|
|
154
154
|
if (!this.backdropEl) {
|
|
@@ -16,4 +16,13 @@ const hasSlottedNodes = (el, name) => {
|
|
|
16
16
|
}
|
|
17
17
|
return false;
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
const hasSlotted = (el, name) => {
|
|
20
|
+
var _a;
|
|
21
|
+
const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
|
|
22
|
+
const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
|
|
23
|
+
if (slot) {
|
|
24
|
+
return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0;
|
|
25
|
+
}
|
|
26
|
+
return false;
|
|
27
|
+
};
|
|
28
|
+
export { hasSlottedElements, hasSlottedNodes, hasSlotted, };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const levenshteinDistance = (a, b) => {
|
|
2
|
+
const dp = Array.from({ length: a.length + 1 }, (_, i) =>
|
|
3
|
+
// eslint-disable-next-line no-nested-ternary
|
|
4
|
+
Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)));
|
|
5
|
+
for (let i = 1; i <= a.length; i++) {
|
|
6
|
+
for (let j = 1; j <= b.length; j++) {
|
|
7
|
+
if (a[i - 1] === b[j - 1]) {
|
|
8
|
+
dp[i][j] = dp[i - 1][j - 1];
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return dp[a.length][b.length];
|
|
16
|
+
};
|
|
17
|
+
const closest = (input, validCodes) => {
|
|
18
|
+
let [closest] = validCodes;
|
|
19
|
+
let minDistance = levenshteinDistance(input, closest);
|
|
20
|
+
for (const code of validCodes) {
|
|
21
|
+
const distance = levenshteinDistance(input, code);
|
|
22
|
+
if (distance < minDistance) {
|
|
23
|
+
minDistance = distance;
|
|
24
|
+
closest = code;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return closest;
|
|
28
|
+
};
|
|
29
|
+
const firstLetterUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
|
|
30
|
+
export { closest, firstLetterUppercase, levenshteinDistance, };
|
|
@@ -374,3 +374,122 @@
|
|
|
374
374
|
}
|
|
375
375
|
|
|
376
376
|
|
|
377
|
+
:host(:not(:is([hydrated], .hydrated))) {
|
|
378
|
+
animation-duration: 0s;
|
|
379
|
+
border-color: transparent;
|
|
380
|
+
box-shadow: 0 0 0 transparent;
|
|
381
|
+
opacity: 0;
|
|
382
|
+
outline-color: transparent;
|
|
383
|
+
transition-delay: 0s;
|
|
384
|
+
transition-duration: 0s;
|
|
385
|
+
visibility: hidden;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
|
|
389
|
+
|
|
390
|
+
mds-accordion:not(:is([hydrated], .hydrated)),
|
|
391
|
+
mds-accordion-item:not(:is([hydrated], .hydrated)),
|
|
392
|
+
mds-accordion-timer:not(:is([hydrated], .hydrated)),
|
|
393
|
+
mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
|
|
394
|
+
mds-author:not(:is([hydrated], .hydrated)),
|
|
395
|
+
mds-avatar:not(:is([hydrated], .hydrated)),
|
|
396
|
+
mds-badge:not(:is([hydrated], .hydrated)),
|
|
397
|
+
mds-banner:not(:is([hydrated], .hydrated)),
|
|
398
|
+
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
|
|
399
|
+
mds-bibliography:not(:is([hydrated], .hydrated)),
|
|
400
|
+
mds-breadcrumb:not(:is([hydrated], .hydrated)),
|
|
401
|
+
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
|
|
402
|
+
mds-button:not(:is([hydrated], .hydrated)),
|
|
403
|
+
mds-card:not(:is([hydrated], .hydrated)),
|
|
404
|
+
mds-card-content:not(:is([hydrated], .hydrated)),
|
|
405
|
+
mds-card-footer:not(:is([hydrated], .hydrated)),
|
|
406
|
+
mds-card-header:not(:is([hydrated], .hydrated)),
|
|
407
|
+
mds-card-media:not(:is([hydrated], .hydrated)),
|
|
408
|
+
mds-chip:not(:is([hydrated], .hydrated)),
|
|
409
|
+
mds-details:not(:is([hydrated], .hydrated)),
|
|
410
|
+
mds-dropdown:not(:is([hydrated], .hydrated)),
|
|
411
|
+
mds-entity:not(:is([hydrated], .hydrated)),
|
|
412
|
+
mds-file:not(:is([hydrated], .hydrated)),
|
|
413
|
+
mds-file-preview:not(:is([hydrated], .hydrated)),
|
|
414
|
+
mds-filter:not(:is([hydrated], .hydrated)),
|
|
415
|
+
mds-filter-item:not(:is([hydrated], .hydrated)),
|
|
416
|
+
mds-header:not(:is([hydrated], .hydrated)),
|
|
417
|
+
mds-header-bar:not(:is([hydrated], .hydrated)),
|
|
418
|
+
mds-help:not(:is([hydrated], .hydrated)),
|
|
419
|
+
mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
|
|
420
|
+
mds-hr:not(:is([hydrated], .hydrated)),
|
|
421
|
+
mds-icon:not(:is([hydrated], .hydrated)),
|
|
422
|
+
mds-img:not(:is([hydrated], .hydrated)),
|
|
423
|
+
mds-input:not(:is([hydrated], .hydrated)),
|
|
424
|
+
mds-input-field:not(:is([hydrated], .hydrated)),
|
|
425
|
+
mds-input-range:not(:is([hydrated], .hydrated)),
|
|
426
|
+
mds-input-select:not(:is([hydrated], .hydrated)),
|
|
427
|
+
mds-input-switch:not(:is([hydrated], .hydrated)),
|
|
428
|
+
mds-input-tip:not(:is([hydrated], .hydrated)),
|
|
429
|
+
mds-input-tip-item:not(:is([hydrated], .hydrated)),
|
|
430
|
+
mds-input-upload:not(:is([hydrated], .hydrated)),
|
|
431
|
+
mds-keyboard:not(:is([hydrated], .hydrated)),
|
|
432
|
+
mds-keyboard-key:not(:is([hydrated], .hydrated)),
|
|
433
|
+
mds-kpi:not(:is([hydrated], .hydrated)),
|
|
434
|
+
mds-kpi-item:not(:is([hydrated], .hydrated)),
|
|
435
|
+
mds-label:not(:is([hydrated], .hydrated)),
|
|
436
|
+
mds-list:not(:is([hydrated], .hydrated)),
|
|
437
|
+
mds-list-item:not(:is([hydrated], .hydrated)),
|
|
438
|
+
mds-modal:not(:is([hydrated], .hydrated)),
|
|
439
|
+
mds-note:not(:is([hydrated], .hydrated)),
|
|
440
|
+
mds-notification:not(:is([hydrated], .hydrated)),
|
|
441
|
+
mds-paginator:not(:is([hydrated], .hydrated)),
|
|
442
|
+
mds-paginator-item:not(:is([hydrated], .hydrated)),
|
|
443
|
+
mds-pref:not(:is([hydrated], .hydrated)),
|
|
444
|
+
mds-pref-animation:not(:is([hydrated], .hydrated)),
|
|
445
|
+
mds-pref-consumption:not(:is([hydrated], .hydrated)),
|
|
446
|
+
mds-pref-contrast:not(:is([hydrated], .hydrated)),
|
|
447
|
+
mds-pref-language:not(:is([hydrated], .hydrated)),
|
|
448
|
+
mds-pref-language-item:not(:is([hydrated], .hydrated)),
|
|
449
|
+
mds-pref-theme:not(:is([hydrated], .hydrated)),
|
|
450
|
+
mds-price-table:not(:is([hydrated], .hydrated)),
|
|
451
|
+
mds-price-table-features:not(:is([hydrated], .hydrated)),
|
|
452
|
+
mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
|
|
453
|
+
mds-price-table-features-row:not(:is([hydrated], .hydrated)),
|
|
454
|
+
mds-price-table-header:not(:is([hydrated], .hydrated)),
|
|
455
|
+
mds-price-table-list:not(:is([hydrated], .hydrated)),
|
|
456
|
+
mds-price-table-list-item:not(:is([hydrated], .hydrated)),
|
|
457
|
+
mds-progress:not(:is([hydrated], .hydrated)),
|
|
458
|
+
mds-push-notification:not(:is([hydrated], .hydrated)),
|
|
459
|
+
mds-push-notifications:not(:is([hydrated], .hydrated)),
|
|
460
|
+
mds-quote:not(:is([hydrated], .hydrated)),
|
|
461
|
+
mds-separator:not(:is([hydrated], .hydrated)),
|
|
462
|
+
mds-spinner:not(:is([hydrated], .hydrated)),
|
|
463
|
+
mds-stepper-bar:not(:is([hydrated], .hydrated)),
|
|
464
|
+
mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
|
|
465
|
+
mds-tab:not(:is([hydrated], .hydrated)),
|
|
466
|
+
mds-tab-bar:not(:is([hydrated], .hydrated)),
|
|
467
|
+
mds-tab-bar-item:not(:is([hydrated], .hydrated)),
|
|
468
|
+
mds-tab-item:not(:is([hydrated], .hydrated)),
|
|
469
|
+
mds-table:not(:is([hydrated], .hydrated)),
|
|
470
|
+
mds-table-body:not(:is([hydrated], .hydrated)),
|
|
471
|
+
mds-table-cell:not(:is([hydrated], .hydrated)),
|
|
472
|
+
mds-table-footer:not(:is([hydrated], .hydrated)),
|
|
473
|
+
mds-table-header:not(:is([hydrated], .hydrated)),
|
|
474
|
+
mds-table-header-cell:not(:is([hydrated], .hydrated)),
|
|
475
|
+
mds-table-row:not(:is([hydrated], .hydrated)),
|
|
476
|
+
mds-text:not(:is([hydrated], .hydrated)),
|
|
477
|
+
mds-toast:not(:is([hydrated], .hydrated)),
|
|
478
|
+
mds-tooltip:not(:is([hydrated], .hydrated)),
|
|
479
|
+
mds-tree:not(:is([hydrated], .hydrated)),
|
|
480
|
+
mds-tree-item:not(:is([hydrated], .hydrated)),
|
|
481
|
+
mds-url-view:not(:is([hydrated], .hydrated)),
|
|
482
|
+
mds-usage:not(:is([hydrated], .hydrated)),
|
|
483
|
+
mds-video-wall:not(:is([hydrated], .hydrated)),
|
|
484
|
+
mds-zero:not(:is([hydrated], .hydrated))
|
|
485
|
+
{
|
|
486
|
+
animation-duration: 0s;
|
|
487
|
+
border-color: transparent;
|
|
488
|
+
box-shadow: 0 0 0 transparent;
|
|
489
|
+
opacity: 0;
|
|
490
|
+
outline-color: transparent;
|
|
491
|
+
transition-delay: 0s;
|
|
492
|
+
transition-duration: 0s;
|
|
493
|
+
visibility: hidden;
|
|
494
|
+
}
|
|
495
|
+
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
const keyboardKeyNameDictionary = [
|
|
2
|
+
'0',
|
|
3
|
+
'1',
|
|
4
|
+
'2',
|
|
5
|
+
'3',
|
|
6
|
+
'4',
|
|
7
|
+
'5',
|
|
8
|
+
'6',
|
|
9
|
+
'7',
|
|
10
|
+
'8',
|
|
11
|
+
'9',
|
|
12
|
+
'a',
|
|
13
|
+
'alt',
|
|
14
|
+
'altleft',
|
|
15
|
+
'altright',
|
|
16
|
+
'arrowdown',
|
|
17
|
+
'arrowleft',
|
|
18
|
+
'arrowright',
|
|
19
|
+
'arrowup',
|
|
20
|
+
'b',
|
|
21
|
+
'backspace',
|
|
22
|
+
'c',
|
|
23
|
+
'capslock',
|
|
24
|
+
'command',
|
|
25
|
+
'commandleft',
|
|
26
|
+
'commandright',
|
|
27
|
+
'control',
|
|
28
|
+
'controlleft',
|
|
29
|
+
'controlright',
|
|
30
|
+
'd',
|
|
31
|
+
'delete',
|
|
32
|
+
'e',
|
|
33
|
+
'end',
|
|
34
|
+
'enter',
|
|
35
|
+
'escape',
|
|
36
|
+
'f',
|
|
37
|
+
'f1',
|
|
38
|
+
'f10',
|
|
39
|
+
'f11',
|
|
40
|
+
'f12',
|
|
41
|
+
'f2',
|
|
42
|
+
'f3',
|
|
43
|
+
'f4',
|
|
44
|
+
'f5',
|
|
45
|
+
'f6',
|
|
46
|
+
'f7',
|
|
47
|
+
'f8',
|
|
48
|
+
'f9',
|
|
49
|
+
'g',
|
|
50
|
+
'h',
|
|
51
|
+
'home',
|
|
52
|
+
'i',
|
|
53
|
+
'j',
|
|
54
|
+
'k',
|
|
55
|
+
'l',
|
|
56
|
+
'm',
|
|
57
|
+
'n',
|
|
58
|
+
'o',
|
|
59
|
+
'option',
|
|
60
|
+
'optionleft',
|
|
61
|
+
'optionright',
|
|
62
|
+
'p',
|
|
63
|
+
'pagedown',
|
|
64
|
+
'pageup',
|
|
65
|
+
'q',
|
|
66
|
+
'r',
|
|
67
|
+
's',
|
|
68
|
+
'shift',
|
|
69
|
+
'shiftleft',
|
|
70
|
+
'shiftright',
|
|
71
|
+
'space',
|
|
72
|
+
't',
|
|
73
|
+
'tab',
|
|
74
|
+
'u',
|
|
75
|
+
'v',
|
|
76
|
+
'w',
|
|
77
|
+
'windows',
|
|
78
|
+
'windowsleft',
|
|
79
|
+
'windowsright',
|
|
80
|
+
'x',
|
|
81
|
+
'y',
|
|
82
|
+
'z',
|
|
83
|
+
];
|
|
84
|
+
export { keyboardKeyNameDictionary, };
|
|
@@ -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:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
8
8
|
const MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
9
9
|
|
|
10
10
|
const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect extends HTMLElement {
|
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:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host{\n\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n --mds-input-select-variant-color: var(--tone-neutral-01);\n --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n --mds-input-select-arrow-icon-blur-background-color: transparent;\n --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n color: rgb(var(--tone-neutral-02));\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
|
|
8
8
|
const MdsInputSelectStyle0 = mdsInputSelectCss;
|
|
9
9
|
|
|
10
10
|
const MdsInputSelect = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-5182e090.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var 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>';var mdsInputSelectCss='@tailwind components;\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 -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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';var MdsInputSelectStyle0=mdsInputSelectCss;var MdsInputSelect=function(){function n(n){var r=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.hasFocus=false;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.onInput=function(n){var t=n.target;if(t){r.value=t.value}};this.onBlur=function(){r.hasFocus=false};this.onFocus=function(){r.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=r.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var o=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!o){return}o.forEach((function(n,t){if(!r.placeholder){n.remove()}if(r.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,o;var e=(t=(n=r.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var i=(o=r.host.shadowRoot)===null||o===void 0?void 0:o.querySelector("select");var s=i===null||i===void 0?void 0:i.querySelectorAll("option");if(!s){return}if(!r.placeholder&&s.length>0){r.emptyOptions()}if(r.placeholder&&s.length>1){r.emptyOptions()}e===null||e===void 0?void 0:e.forEach((function(n){i===null||i===void 0?void 0:i.appendChild(n.cloneNode(true))}));if(r.value){i===null||i===void 0?void 0:i.querySelectorAll("option").forEach((function(n){n.selected=n.value===r.value}))}else if(!r.placeholder){r.value=i===null||i===void 0?void 0:i.querySelectorAll("option")[0].value}}}n.prototype.valueChanged=function(){var n,r,t;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((t=(r=this.value)===null||r===void 0?void 0:r.toString())!==null&&t!==void 0?t:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){return h(Host,{key:"4530b7a0bc9da6176b222477f7cf41aceaf380f3"},h("select",{key:"6f190cc6924b5f0da6f9703c10eec1e0c55e3360",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:"fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6",value:"",disabled:true,selected:true},this.placeholder)),h("div",{key:"557463d7c2cc90f451fd9d18a9df7745352c29dd",class:"icon-container"},h("i",{key:"3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c",class:"icon",innerHTML:miBaselineKeyboardArrowDown})),h("div",{key:"c341322713f8b8e739cb3e5d6a9f1b0a163cfadd",class:"option-container"},h("slot",{key:"bffb6b7b0a0be6f2f006f2776e03021fd5f59964",onSlotchange:this.onSlotChangeHandler})),h("mds-input-tip",{key:"b8af860a3f766e829fc811fd8b3aba9f5e33394b",position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb",expanded:true,variant:"disabled"}),this.required&&h("mds-input-tip-item",{key:"459e3ba038297693d650405b7af577d4a44505a8",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}();MdsInputSelect.style=MdsInputSelectStyle0;export{MdsInputSelect as mds_input_select};
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-5182e090.js";function r(n){var t,e,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(e=r(n[t]))&&(o&&(o+=" "),o+=e)}else for(e in n)n[e]&&(o&&(o+=" "),o+=e);return o}function clsx(){for(var n,t,e=0,o="",a=arguments.length;e<a;e++)(n=arguments[e])&&(t=r(n))&&(o&&(o+=" "),o+=t);return o}var 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>';var mdsInputSelectCss='@tailwind components;\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 -webkit-transform: translate(0.375rem, 0.375rem);\n transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n --mds-input-select-variant-color: var(--variant-primary-03);\n --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n min-height: 3rem;\n\n width: 100%;\n\n border-radius: 0.5rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n padding-left: 1rem;\n\n padding-right: 3rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n background-color: rgb(var(--tone-neutral));\n border: 0;\n -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-05));\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n transition-property: background-color, border-color, box-shadow, color, fill;\n transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-09));\n opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n fill: rgb(var(--tone-neutral-06));\n -webkit-transform: translate(0.625rem, 0.5rem);\n transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n right: 1rem;\n\n height: 3rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n color: inherit;\n display: -ms-flexbox;\n display: flex;\n pointer-events: none;\n position: absolute;\n}\n\n.icon{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.icon svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n\n.icon{\n\n border-radius: 9999px;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n -webkit-transition-property: background-color, fill;\n transition-property: background-color, fill;\n}\n\n.option-container {\n display: none;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n@tailwind utilities;\n\n:host {\n\n --mds-input-select-icon-color: var(--variant-primary-03);\n --mds-input-select-variant-color: 0 0 0;\n --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n --mds-input-select-variant-color: var(--variant-primary-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(--variant-primary-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(--variant-primary-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@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:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n';var MdsInputSelectStyle0=mdsInputSelectCss;var MdsInputSelect=function(){function n(n){var t=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.hasFocus=false;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.onInput=function(n){var r=n.target;if(r){t.value=r.value}};this.onBlur=function(){t.hasFocus=false};this.onFocus=function(){t.hasFocus=true};this.emptyOptions=function(){var n;var r=(n=t.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var e=r===null||r===void 0?void 0:r.querySelectorAll("option");if(!e){return}e.forEach((function(n,r){if(!t.placeholder){n.remove()}if(t.placeholder&&r>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,r,e;var o=(r=(n=t.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||r===void 0?void 0:r.assignedNodes();var a=(e=t.host.shadowRoot)===null||e===void 0?void 0:e.querySelector("select");var i=a===null||a===void 0?void 0:a.querySelectorAll("option");if(!i){return}if(!t.placeholder&&i.length>0){t.emptyOptions()}if(t.placeholder&&i.length>1){t.emptyOptions()}o===null||o===void 0?void 0:o.forEach((function(n){a===null||a===void 0?void 0:a.appendChild(n.cloneNode(true))}));if(t.value){a===null||a===void 0?void 0:a.querySelectorAll("option").forEach((function(n){n.selected=n.value===t.value}))}else if(!t.placeholder){t.value=a===null||a===void 0?void 0:a.querySelectorAll("option")[0].value}}}n.prototype.valueChanged=function(){var n,t,r;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((r=(t=this.value)===null||t===void 0?void 0:t.toString())!==null&&r!==void 0?r:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){return h(Host,{key:"4530b7a0bc9da6176b222477f7cf41aceaf380f3"},h("select",{key:"6f190cc6924b5f0da6f9703c10eec1e0c55e3360",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:"fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6",value:"",disabled:true,selected:true},this.placeholder)),h("div",{key:"557463d7c2cc90f451fd9d18a9df7745352c29dd",class:"icon-container"},h("i",{key:"3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c",class:"icon",innerHTML:miBaselineKeyboardArrowDown})),h("div",{key:"c341322713f8b8e739cb3e5d6a9f1b0a163cfadd",class:"option-container"},h("slot",{key:"bffb6b7b0a0be6f2f006f2776e03021fd5f59964",onSlotchange:this.onSlotChangeHandler})),h("mds-input-tip",{key:"b8af860a3f766e829fc811fd8b3aba9f5e33394b",position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb",expanded:true,variant:"disabled"}),this.required&&h("mds-input-tip-item",{key:"459e3ba038297693d650405b7af577d4a44505a8",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}();MdsInputSelect.style=MdsInputSelectStyle0;export{MdsInputSelect as mds_input_select};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-ff420541.js";export{s as setNonce}from"./p-ff420541.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-
|
|
1
|
+
import{p as e,b as a}from"./p-ff420541.js";export{s as setNonce}from"./p-ff420541.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-4a33e3f5",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"],disabled:["disabledChanged"]}]]]],e))));
|