@maggioli-design-system/mds-input 7.8.2 → 7.8.3
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.cjs.entry.js +10 -10
- package/dist/collection/components/mds-input/mds-input.js +9 -9
- package/dist/components/mds-input.js +10 -10
- package/dist/documentation.json +9 -1
- package/dist/esm/mds-input.entry.js +10 -10
- package/dist/esm-es5/mds-input.entry.js +1 -1
- package/dist/mds-input/mds-input.esm.js +1 -1
- package/dist/mds-input/p-3d99713e.system.js +1 -1
- package/dist/mds-input/p-701ba8d9.entry.js +6 -0
- package/dist/mds-input/p-8e057974.system.entry.js +6 -0
- package/dist/stats.json +16 -14
- package/dist/types/components/mds-input/test/mds-input.stories.d.ts +1 -1
- package/dist/types/dictionary/icon.d.ts +1 -1
- package/documentation.json +9 -1
- package/package.json +4 -4
- package/src/components/mds-input/mds-input.tsx +4 -2
- package/src/components/mds-input/readme.md +2 -0
- package/www/build/mds-input.esm.js +1 -1
- package/www/build/p-3d99713e.system.js +1 -1
- package/www/build/p-701ba8d9.entry.js +6 -0
- package/www/build/p-8e057974.system.entry.js +6 -0
- package/dist/mds-input/p-602b856a.system.entry.js +0 -6
- package/dist/mds-input/p-6a36cef1.entry.js +0 -6
- package/src/fixtures/icons.json +0 -474
- package/www/build/p-602b856a.system.entry.js +0 -6
- package/www/build/p-6a36cef1.entry.js +0 -6
|
@@ -1130,7 +1130,7 @@ const hashRandomValue = (value) => {
|
|
|
1130
1130
|
return hash(randomValue.toString());
|
|
1131
1131
|
};
|
|
1132
1132
|
|
|
1133
|
-
const mdsInputCss = "/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-textarea-field-sizing: content;\n --mds-input-textarea-resize: none;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-min-height: 6rem;\n --mds-input-tip-background: 84 84 84;\n --mds-input-variant-color: 0 0 0;\n /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0rem;\n border-radius: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n max-width: 100%;\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -moz-transition-property: color;\n transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\n resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n left: 0.75rem;\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button {\n height: 1.5rem;\n width: 1.75rem;\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n height: 3rem;\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n.password-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.mic-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.toggle-button--error {\n cursor: help;\n fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n.mic-toggle-button--recording {\n -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n /* required to avoid input number buttons on firefox go be shown always */\n\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -moz-appearance: textfield;\n padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n --mds-input-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-icon-color: var(--variant-primary-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n --mds-input-icon-color: var(--variant-ai-05);\n --mds-input-tip-background: var(--variant-ai-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n --mds-input-icon-color: var(--variant-ai-04);\n --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n }\n\n :host-context(.pref-theme-system) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n }\n\n :host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\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";
|
|
1133
|
+
const mdsInputCss = "\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-textarea-field-sizing: content;\n --mds-input-textarea-resize: none;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-min-height: 6rem;\n --mds-input-tip-background: 84 84 84;\n --mds-input-variant-color: 0 0 0;\n /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0rem;\n border-radius: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n max-width: 100%;\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -moz-transition-property: color;\n transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\n resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n left: 0.75rem;\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button {\n height: 1.5rem;\n width: 1.75rem;\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n height: 3rem;\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n.password-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.mic-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.toggle-button--error {\n cursor: help;\n fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n.mic-toggle-button--recording {\n -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n /* required to avoid input number buttons on firefox go be shown always */\n\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -moz-appearance: textfield;\n padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n --mds-input-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-icon-color: var(--variant-primary-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n --mds-input-icon-color: var(--variant-ai-05);\n --mds-input-tip-background: var(--variant-ai-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n --mds-input-icon-color: var(--variant-ai-04);\n --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n }\n\n :host-context(.pref-theme-system) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n }\n\n :host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\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";
|
|
1134
1134
|
const MdsInputStyle0 = mdsInputCss;
|
|
1135
1135
|
|
|
1136
1136
|
const MdsInput = class {
|
|
@@ -1495,21 +1495,21 @@ const MdsInput = class {
|
|
|
1495
1495
|
}
|
|
1496
1496
|
render() {
|
|
1497
1497
|
var _a, _b;
|
|
1498
|
-
return (index.h(index.Host, { key: '
|
|
1498
|
+
return (index.h(index.Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
|
|
1499
1499
|
&& this.controlsLayout === 'horizontal'
|
|
1500
|
-
&& index.h("mds-button", { key: '
|
|
1500
|
+
&& index.h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
|
|
1501
1501
|
? index.h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
1502
1502
|
: index.h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
|
|
1503
1503
|
&& this.controlsLayout === 'vertical'
|
|
1504
|
-
&& index.h("div", { key: '
|
|
1504
|
+
&& index.h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, index.h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
|
|
1505
1505
|
&& this.controlsLayout === 'horizontal'
|
|
1506
|
-
&& index.h("mds-button", { key: '
|
|
1507
|
-
&& index.h("mds-button", { key: '
|
|
1508
|
-
&& index.h("mds-button", { key: '
|
|
1509
|
-
index.h("mds-input-tip-item", { key: '
|
|
1510
|
-
index.h("datalist", { key: '
|
|
1506
|
+
&& index.h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
|
|
1507
|
+
&& index.h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
|
|
1508
|
+
&& index.h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), index.h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && index.h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
|
|
1509
|
+
index.h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && index.h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
|
|
1510
|
+
index.h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
|
|
1511
1511
|
return index.h("option", { key: i, value: element });
|
|
1512
|
-
})), this.icon && !this.await && index.h("mds-icon", { key: '
|
|
1512
|
+
})), this.icon && !this.await && index.h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
|
|
1513
1513
|
}
|
|
1514
1514
|
static get formAssociated() { return true; }
|
|
1515
1515
|
get el() { return index.getElement(this); }
|
|
@@ -366,21 +366,21 @@ export class MdsInput {
|
|
|
366
366
|
}
|
|
367
367
|
render() {
|
|
368
368
|
var _a, _b;
|
|
369
|
-
return (h(Host, { key: '
|
|
369
|
+
return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
|
|
370
370
|
&& this.controlsLayout === 'horizontal'
|
|
371
|
-
&& h("mds-button", { key: '
|
|
371
|
+
&& h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
|
|
372
372
|
? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
373
373
|
: h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
|
|
374
374
|
&& this.controlsLayout === 'vertical'
|
|
375
|
-
&& h("div", { key: '
|
|
375
|
+
&& h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
|
|
376
376
|
&& this.controlsLayout === 'horizontal'
|
|
377
|
-
&& h("mds-button", { key: '
|
|
378
|
-
&& h("mds-button", { key: '
|
|
379
|
-
&& h("mds-button", { key: '
|
|
380
|
-
h("mds-input-tip-item", { key: '
|
|
381
|
-
h("datalist", { key: '
|
|
377
|
+
&& h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
|
|
378
|
+
&& h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
|
|
379
|
+
&& h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
|
|
380
|
+
h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
|
|
381
|
+
h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
|
|
382
382
|
return h("option", { key: i, value: element });
|
|
383
|
-
})), this.icon && !this.await && h("mds-icon", { key: '
|
|
383
|
+
})), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
|
|
384
384
|
}
|
|
385
385
|
static get is() { return "mds-input"; }
|
|
386
386
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1126,7 +1126,7 @@ const hashRandomValue = (value) => {
|
|
|
1126
1126
|
return hash(randomValue.toString());
|
|
1127
1127
|
};
|
|
1128
1128
|
|
|
1129
|
-
const mdsInputCss = "\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-textarea-field-sizing: content;\n --mds-input-textarea-resize: none;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-min-height: 6rem;\n --mds-input-tip-background: 84 84 84;\n --mds-input-variant-color: 0 0 0;\n /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0rem;\n border-radius: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n max-width: 100%;\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -moz-transition-property: color;\n transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\n resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n left: 0.75rem;\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button {\n height: 1.5rem;\n width: 1.75rem;\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n height: 3rem;\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n.password-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.mic-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.toggle-button--error {\n cursor: help;\n fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n.mic-toggle-button--recording {\n -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n /* required to avoid input number buttons on firefox go be shown always */\n\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -moz-appearance: textfield;\n padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n --mds-input-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-icon-color: var(--variant-primary-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n --mds-input-icon-color: var(--variant-ai-05);\n --mds-input-tip-background: var(--variant-ai-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n --mds-input-icon-color: var(--variant-ai-04);\n --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n }\n\n :host-context(.pref-theme-system) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n }\n\n :host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\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";
|
|
1129
|
+
const mdsInputCss = "/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-textarea-field-sizing: content;\n --mds-input-textarea-resize: none;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-min-height: 6rem;\n --mds-input-tip-background: 84 84 84;\n --mds-input-variant-color: 0 0 0;\n /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0rem;\n border-radius: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n max-width: 100%;\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -moz-transition-property: color;\n transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\n resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n left: 0.75rem;\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button {\n height: 1.5rem;\n width: 1.75rem;\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n height: 3rem;\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n.password-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.mic-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.toggle-button--error {\n cursor: help;\n fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n.mic-toggle-button--recording {\n -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n /* required to avoid input number buttons on firefox go be shown always */\n\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -moz-appearance: textfield;\n padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n --mds-input-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-icon-color: var(--variant-primary-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n --mds-input-icon-color: var(--variant-ai-05);\n --mds-input-tip-background: var(--variant-ai-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n --mds-input-icon-color: var(--variant-ai-04);\n --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n }\n\n :host-context(.pref-theme-system) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n }\n\n :host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\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";
|
|
1130
1130
|
const MdsInputStyle0 = mdsInputCss;
|
|
1131
1131
|
|
|
1132
1132
|
const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLElement {
|
|
@@ -1487,21 +1487,21 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
|
|
|
1487
1487
|
}
|
|
1488
1488
|
render() {
|
|
1489
1489
|
var _a, _b;
|
|
1490
|
-
return (h(Host, { key: '
|
|
1490
|
+
return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
|
|
1491
1491
|
&& this.controlsLayout === 'horizontal'
|
|
1492
|
-
&& h("mds-button", { key: '
|
|
1492
|
+
&& h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
|
|
1493
1493
|
? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
1494
1494
|
: h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
|
|
1495
1495
|
&& this.controlsLayout === 'vertical'
|
|
1496
|
-
&& h("div", { key: '
|
|
1496
|
+
&& h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
|
|
1497
1497
|
&& this.controlsLayout === 'horizontal'
|
|
1498
|
-
&& h("mds-button", { key: '
|
|
1499
|
-
&& h("mds-button", { key: '
|
|
1500
|
-
&& h("mds-button", { key: '
|
|
1501
|
-
h("mds-input-tip-item", { key: '
|
|
1502
|
-
h("datalist", { key: '
|
|
1498
|
+
&& h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
|
|
1499
|
+
&& h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
|
|
1500
|
+
&& h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
|
|
1501
|
+
h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
|
|
1502
|
+
h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
|
|
1503
1503
|
return h("option", { key: i, value: element });
|
|
1504
|
-
})), this.icon && !this.await && h("mds-icon", { key: '
|
|
1504
|
+
})), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
|
|
1505
1505
|
}
|
|
1506
1506
|
static get formAssociated() { return true; }
|
|
1507
1507
|
get el() { return this; }
|
package/dist/documentation.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "
|
|
2
|
+
"timestamp": "2026-01-16T14:57:17",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.27.2",
|
|
@@ -1234,9 +1234,17 @@
|
|
|
1234
1234
|
"name": "password-toggle-button",
|
|
1235
1235
|
"docs": ""
|
|
1236
1236
|
},
|
|
1237
|
+
{
|
|
1238
|
+
"name": "tip-bottom",
|
|
1239
|
+
"docs": ""
|
|
1240
|
+
},
|
|
1237
1241
|
{
|
|
1238
1242
|
"name": "tip-count",
|
|
1239
1243
|
"docs": ""
|
|
1244
|
+
},
|
|
1245
|
+
{
|
|
1246
|
+
"name": "tip-top",
|
|
1247
|
+
"docs": ""
|
|
1240
1248
|
}
|
|
1241
1249
|
],
|
|
1242
1250
|
"dependents": [],
|
|
@@ -1126,7 +1126,7 @@ const hashRandomValue = (value) => {
|
|
|
1126
1126
|
return hash(randomValue.toString());
|
|
1127
1127
|
};
|
|
1128
1128
|
|
|
1129
|
-
const mdsInputCss = "/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-textarea-field-sizing: content;\n --mds-input-textarea-resize: none;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-min-height: 6rem;\n --mds-input-tip-background: 84 84 84;\n --mds-input-variant-color: 0 0 0;\n /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0rem;\n border-radius: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n max-width: 100%;\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -moz-transition-property: color;\n transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\n resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n left: 0.75rem;\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button {\n height: 1.5rem;\n width: 1.75rem;\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n height: 3rem;\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n.password-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.mic-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.toggle-button--error {\n cursor: help;\n fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n.mic-toggle-button--recording {\n -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n /* required to avoid input number buttons on firefox go be shown always */\n\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -moz-appearance: textfield;\n padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n --mds-input-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-icon-color: var(--variant-primary-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n --mds-input-icon-color: var(--variant-ai-05);\n --mds-input-tip-background: var(--variant-ai-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n --mds-input-icon-color: var(--variant-ai-04);\n --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n }\n\n :host-context(.pref-theme-system) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n }\n\n :host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\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";
|
|
1129
|
+
const mdsInputCss = "\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n --mds-input-textarea-field-sizing: content;\n --mds-input-textarea-resize: none;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-min-height: 6rem;\n --mds-input-tip-background: 84 84 84;\n --mds-input-variant-color: 0 0 0;\n /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n container-type: inline-size;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n min-height: 1.5rem;\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0rem;\n border-radius: 0.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n background-color: var(--mds-input-background);\n border: 0;\n -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: rgb(var(--tone-neutral-02));\n max-width: 100%;\n min-height: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n width: 100%;\n}\n\n.input::-moz-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -moz-transition-property: color;\n transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -ms-transition-property: color;\n transition-property: color;\n}\n\n.input::placeholder {\n -webkit-transition-duration: 300ms;\n transition-duration: 300ms;\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n color: var(--mds-input-placeholder-default-color);\n -webkit-transition-property: color;\n transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n border-bottom-right-radius: 0;\n\n field-sizing: var(--mds-input-textarea-field-sizing);\n max-height: var(--mds-input-textarea-max-height);\n min-height: var(--mds-input-textarea-min-height);\n overflow: auto;\n resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n\n --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n left: 0.75rem;\n top: 0.75rem;\n\n fill: rgb(var(--mds-input-icon-color));\n position: absolute;\n}\n\n.await {\n color: rgb(var(--mds-input-icon-color));\n height: 24px;\n width: 24px;\n}\n\n.counter {\n border-left: var(--mds-input-controls-border);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 0;\n position: absolute;\n right: 0;\n}\n\n.counter-button {\n height: 1.5rem;\n width: 1.75rem;\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n\n border: 0;\n fill: var(--mds-input-controls-color);\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n height: 3rem;\n width: 3rem;\n\n bottom: 0;\n position: absolute;\n top: 0;\n}\n\n.counter-button--decrease {\n border-bottom-right-radius: 0;\n border-right: var(--mds-input-controls-border);\n border-top-right-radius: 0;\n left: 0;\n}\n\n.counter-button--increase {\n border-bottom-left-radius: 0;\n border-left: var(--mds-input-controls-border);\n border-top-left-radius: 0;\n right: 0;\n}\n\n.password-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.mic-toggle-button {\n top: 0.375rem;\n right: 0.375rem;\n\n fill: var(--mds-input-controls-color);\n position: absolute;\n}\n\n.toggle-button--error {\n cursor: help;\n fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n\n.mic-toggle-button--recording {\n -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n /* required to avoid input number buttons on firefox go be shown always */\n\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -moz-appearance: textfield;\n padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n font-size: 3rem;\n max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n min-height: 1.5rem;\n font-family: 'Roboto Mono', 'Courier New', monospace;\n font-size: 1rem;\n line-height: 1.5rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n --mds-input-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\n --mds-input-icon-color: var(--variant-primary-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n --mds-input-icon-color: var(--variant-ai-05);\n --mds-input-tip-background: var(--variant-ai-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n --mds-input-icon-color: var(--variant-ai-04);\n --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n --mds-input-icon-color: var(--status-info-05);\n --mds-input-tip-background: var(--status-info-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n --mds-input-icon-color: var(--status-info-04);\n --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n --mds-input-icon-color: var(--status-success-05);\n --mds-input-tip-background: var(--status-success-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n --mds-input-icon-color: var(--status-success-04);\n --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n --mds-input-icon-color: var(--status-warning-05);\n --mds-input-tip-background: var(--status-warning-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n --mds-input-icon-color: var(--status-warning-04);\n --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n --mds-input-icon-color: var(--status-error-05);\n --mds-input-tip-background: var(--status-error-05);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system) .input {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n }\n\n :host-context(.pref-theme-system) .counter-button:hover {\n --mds-button-background: rgb(var(--tone-neutral-08));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n --mds-input-background: rgb(var(--tone-neutral-09));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n }\n\n :host-context(.pref-contrast-more) .input::-moz-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n color: rgb(var(--tone-neutral-03));\n }\n\n :host-context(.pref-contrast-more) .input::placeholder {\n color: rgb(var(--tone-neutral-03));\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";
|
|
1130
1130
|
const MdsInputStyle0 = mdsInputCss;
|
|
1131
1131
|
|
|
1132
1132
|
const MdsInput = class {
|
|
@@ -1491,21 +1491,21 @@ const MdsInput = class {
|
|
|
1491
1491
|
}
|
|
1492
1492
|
render() {
|
|
1493
1493
|
var _a, _b;
|
|
1494
|
-
return (h(Host, { key: '
|
|
1494
|
+
return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
|
|
1495
1495
|
&& this.controlsLayout === 'horizontal'
|
|
1496
|
-
&& h("mds-button", { key: '
|
|
1496
|
+
&& h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
|
|
1497
1497
|
? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
|
|
1498
1498
|
: h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
|
|
1499
1499
|
&& this.controlsLayout === 'vertical'
|
|
1500
|
-
&& h("div", { key: '
|
|
1500
|
+
&& h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
|
|
1501
1501
|
&& this.controlsLayout === 'horizontal'
|
|
1502
|
-
&& h("mds-button", { key: '
|
|
1503
|
-
&& h("mds-button", { key: '
|
|
1504
|
-
&& h("mds-button", { key: '
|
|
1505
|
-
h("mds-input-tip-item", { key: '
|
|
1506
|
-
h("datalist", { key: '
|
|
1502
|
+
&& h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
|
|
1503
|
+
&& h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
|
|
1504
|
+
&& h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
|
|
1505
|
+
h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
|
|
1506
|
+
h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
|
|
1507
1507
|
return h("option", { key: i, value: element });
|
|
1508
|
-
})), this.icon && !this.await && h("mds-icon", { key: '
|
|
1508
|
+
})), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
|
|
1509
1509
|
}
|
|
1510
1510
|
static get formAssociated() { return true; }
|
|
1511
1511
|
get el() { return getElement(this); }
|