npm - @maggioli-design-system/mds-input - Versions diffs - 7.7.0 → 7.7.1 - Mend

@maggioli-design-system/mds-input 7.7.0 → 7.7.1

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.

Files changed (21) hide show

package/dist/cjs/mds-input.cjs.entry.js +1 -1
package/dist/components/mds-input.js +1 -1
package/dist/documentation.json +1 -1
package/dist/esm/mds-input.entry.js +1 -1
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-65072ca2.system.entry.js +6 -0
package/dist/mds-input/p-83542c96.entry.js +6 -0
package/dist/stats.json +14 -14
package/documentation.json +11 -1
package/package.json +6 -6
package/src/fixtures/icons.json +12 -0
package/www/build/mds-input.esm.js +1 -1
package/www/build/p-3d99713e.system.js +1 -1
package/www/build/p-65072ca2.system.entry.js +6 -0
package/www/build/p-83542c96.entry.js +6 -0
package/dist/mds-input/p-55953c4e.entry.js +0 -6
package/dist/mds-input/p-875ea035.system.entry.js +0 -6
package/www/build/p-55953c4e.entry.js +0 -6
package/www/build/p-875ea035.system.entry.js +0 -6

package/dist/cjs/mds-input.cjs.entry.js CHANGED Viewed

@@ -1031,7 +1031,7 @@ function createInputValidationManager(type) {
     return inputManager;
 }
-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(--variant-primary-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\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: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=\"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";
+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(--variant-primary-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\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: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=\"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";
 const MdsInputStyle0 = mdsInputCss;
 const MdsInput = class {

package/dist/components/mds-input.js CHANGED Viewed

@@ -1027,7 +1027,7 @@ function createInputValidationManager(type) {
     return inputManager;
 }
-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(--variant-primary-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\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: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=\"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";
+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(--variant-primary-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\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: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=\"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";
 const MdsInputStyle0 = mdsInputCss;
 const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLElement {

package/dist/documentation.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-04-22T07:10:28",
+  "timestamp": "2025-05-14T14:37:01",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",

package/dist/esm/mds-input.entry.js CHANGED Viewed

@@ -1027,7 +1027,7 @@ function createInputValidationManager(type) {
     return inputManager;
 }
-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(--variant-primary-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\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: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=\"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";
+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(--variant-primary-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\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: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=\"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";
 const MdsInputStyle0 = mdsInputCss;
 const MdsInput = class {

package/dist/esm-es5/mds-input.entry.js CHANGED Viewed

@@ -3,4 +3,4 @@ var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n ins
          * mustache.js - Logic-less {{mustache}} templates with JavaScript
          * http://github.com/janl/mustache.js
          */
-var n=Object.prototype.toString;var t=Array.isArray||function t(e){return n.call(e)==="[object Array]"};function e(n){return typeof n==="function"}function r(n){return t(n)?"array":typeof n}function i(n){return n.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function o(n,t){return n!=null&&typeof n==="object"&&t in n}function a(n,t){return n!=null&&typeof n!=="object"&&n.hasOwnProperty&&n.hasOwnProperty(t)}var s=RegExp.prototype.test;function d(n,t){return s.call(n,t)}var u=/\S/;function h(n){return!d(u,n)}var c={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};function l(n){return String(n).replace(/[&<>"'`=\/]/g,(function n(t){return c[t]}))}var p=/\s*/;var m=/\s+/;var f=/\s*=/;var b=/\s*\}/;var v=/#|\^|\/|>|\{|&|=|!/;function y(n,e){if(!n)return[];var r=false;var o=[];var a=[];var s=[];var d=false;var u=false;var c="";var l=0;function y(){if(d&&!u){while(s.length)delete a[s.pop()]}else{s=[]}d=false;u=false}var k,z,P;function I(n){if(typeof n==="string")n=n.split(m,2);if(!t(n)||n.length!==2)throw new Error("Invalid tags: "+n);k=new RegExp(i(n[0])+"\\s*");z=new RegExp("\\s*"+i(n[1]));P=new RegExp("\\s*"+i("}"+n[1]))}I(e||M.tags);var A=new x(n);var V,E,S,_,L,B;while(!A.eos()){V=A.pos;S=A.scanUntil(k);if(S){for(var C=0,$=S.length;C<$;++C){_=S.charAt(C);if(h(_)){s.push(a.length);c+=_}else{u=true;r=true;c+=" "}a.push(["text",_,V,V+1]);V+=1;if(_==="\n"){y();c="";l=0;r=false}}}if(!A.scan(k))break;d=true;E=A.scan(v)||"name";A.scan(p);if(E==="="){S=A.scanUntil(f);A.scan(f);A.scanUntil(z)}else if(E==="{"){S=A.scanUntil(P);A.scan(b);A.scanUntil(z);E="&"}else{S=A.scanUntil(z)}if(!A.scan(z))throw new Error("Unclosed tag at "+A.pos);if(E==">"){L=[E,S,V,A.pos,c,l,r]}else{L=[E,S,V,A.pos]}l++;a.push(L);if(E==="#"||E==="^"){o.push(L)}else if(E==="/"){B=o.pop();if(!B)throw new Error('Unopened section "'+S+'" at '+V);if(B[1]!==S)throw new Error('Unclosed section "'+B[1]+'" at '+V)}else if(E==="name"||E==="{"||E==="&"){u=true}else if(E==="="){I(S)}}y();B=o.pop();if(B)throw new Error('Unclosed section "'+B[1]+'" at '+A.pos);return w(g(a))}function g(n){var t=[];var e,r;for(var i=0,o=n.length;i<o;++i){e=n[i];if(e){if(e[0]==="text"&&r&&r[0]==="text"){r[1]+=e[1];r[3]=e[3]}else{t.push(e);r=e}}}return t}function w(n){var t=[];var e=t;var r=[];var i,o;for(var a=0,s=n.length;a<s;++a){i=n[a];switch(i[0]){case"#":case"^":e.push(i);r.push(i);e=i[4]=[];break;case"/":o=r.pop();o[5]=i[2];e=r.length>0?r[r.length-1][4]:t;break;default:e.push(i)}}return t}function x(n){this.string=n;this.tail=n;this.pos=0}x.prototype.eos=function n(){return this.tail===""};x.prototype.scan=function n(t){var e=this.tail.match(t);if(!e||e.index!==0)return"";var r=e[0];this.tail=this.tail.substring(r.length);this.pos+=r.length;return r};x.prototype.scanUntil=function n(t){var e=this.tail.search(t),r;switch(e){case-1:r=this.tail;this.tail="";break;case 0:r="";break;default:r=this.tail.substring(0,e);this.tail=this.tail.substring(e)}this.pos+=r.length;return r};function k(n,t){this.view=n;this.cache={".":this.view};this.parent=t}k.prototype.push=function n(t){return new k(t,this)};k.prototype.lookup=function n(t){var r=this.cache;var i;if(r.hasOwnProperty(t)){i=r[t]}else{var s=this,d,u,h,c=false;while(s){if(t.indexOf(".")>0){d=s.view;u=t.split(".");h=0;while(d!=null&&h<u.length){if(h===u.length-1)c=o(d,u[h])||a(d,u[h]);d=d[u[h++]]}}else{d=s.view[t];c=o(s.view,t)}if(c){i=d;break}s=s.parent}r[t]=i}if(e(i))i=i.call(this.view);return i};function z(){this.templateCache={_cache:{},set:function n(t,e){this._cache[t]=e},get:function n(t){return this._cache[t]},clear:function n(){this._cache={}}}}z.prototype.clearCache=function n(){if(typeof this.templateCache!=="undefined"){this.templateCache.clear()}};z.prototype.parse=function n(t,e){var r=this.templateCache;var i=t+":"+(e||M.tags).join(":");var o=typeof r!=="undefined";var a=o?r.get(i):undefined;if(a==undefined){a=y(t,e);o&&r.set(i,a)}return a};z.prototype.render=function n(t,e,r,i){var o=this.getConfigTags(i);var a=this.parse(t,o);var s=e instanceof k?e:new k(e,undefined);return this.renderTokens(a,s,r,t,i)};z.prototype.renderTokens=function n(t,e,r,i,o){var a="";var s,d,u;for(var h=0,c=t.length;h<c;++h){u=undefined;s=t[h];d=s[0];if(d==="#")u=this.renderSection(s,e,r,i,o);else if(d==="^")u=this.renderInverted(s,e,r,i,o);else if(d===">")u=this.renderPartial(s,e,r,o);else if(d==="&")u=this.unescapedValue(s,e);else if(d==="name")u=this.escapedValue(s,e,o);else if(d==="text")u=this.rawValue(s);if(u!==undefined)a+=u}return a};z.prototype.renderSection=function n(r,i,o,a,s){var d=this;var u="";var h=i.lookup(r[1]);function c(n){return d.render(n,i,o,s)}if(!h)return;if(t(h)){for(var l=0,p=h.length;l<p;++l){u+=this.renderTokens(r[4],i.push(h[l]),o,a,s)}}else if(typeof h==="object"||typeof h==="string"||typeof h==="number"){u+=this.renderTokens(r[4],i.push(h),o,a,s)}else if(e(h)){if(typeof a!=="string")throw new Error("Cannot use higher-order sections without the original template");h=h.call(i.view,a.slice(r[3],r[5]),c);if(h!=null)u+=h}else{u+=this.renderTokens(r[4],i,o,a,s)}return u};z.prototype.renderInverted=function n(e,r,i,o,a){var s=r.lookup(e[1]);if(!s||t(s)&&s.length===0)return this.renderTokens(e[4],r,i,o,a)};z.prototype.indentPartial=function n(t,e,r){var i=e.replace(/[^ \t]/g,"");var o=t.split("\n");for(var a=0;a<o.length;a++){if(o[a].length&&(a>0||!r)){o[a]=i+o[a]}}return o.join("\n")};z.prototype.renderPartial=function n(t,r,i,o){if(!i)return;var a=this.getConfigTags(o);var s=e(i)?i(t[1]):i[t[1]];if(s!=null){var d=t[6];var u=t[5];var h=t[4];var c=s;if(u==0&&h){c=this.indentPartial(s,h,d)}var l=this.parse(c,a);return this.renderTokens(l,r,i,c,o)}};z.prototype.unescapedValue=function n(t,e){var r=e.lookup(t[1]);if(r!=null)return r};z.prototype.escapedValue=function n(t,e,r){var i=this.getConfigEscape(r)||M.escape;var o=e.lookup(t[1]);if(o!=null)return typeof o==="number"&&i===M.escape?String(o):i(o)};z.prototype.rawValue=function n(t){return t[1]};z.prototype.getConfigTags=function n(e){if(t(e)){return e}else if(e&&typeof e==="object"){return e.tags}else{return undefined}};z.prototype.getConfigEscape=function n(e){if(e&&typeof e==="object"&&!t(e)){return e.escape}else{return undefined}};var M={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:undefined,escape:undefined,parse:undefined,render:undefined,Scanner:undefined,Context:undefined,Writer:undefined,set templateCache(n){P.templateCache=n},get templateCache(){return P.templateCache}};var P=new z;M.clearCache=function n(){return P.clearCache()};M.parse=function n(t,e){return P.parse(t,e)};M.render=function n(t,e,i,o){if(typeof t!=="string"){throw new TypeError('Invalid template! Template should be a "string" '+'but "'+r(t)+'" was given as the first '+"argument for mustache#render(template, view, partials)")}return P.render(t,e,i,o)};M.escape=l;M.Scanner=x;M.Context=k;M.Writer=z;return M}))})(mustache);var Locale=function(){function n(n){var t=this;this.rollbackLanguage="en";this.set=function(n){t.config=n};this.lang=function(n){t.element=n;t.closestElement=t.element.closest("[lang]");if(t.closestElement){if(t.closestElement.lang){t.language=t.closestElement.lang;return t.language}}t.language=t.rollbackLanguage;return t.language};this.update=function(n){var e=n!==null&&n!==void 0?n:t.element.shadowRoot;e&&e.querySelectorAll("*").forEach((function(n){if(n.tagName.toLowerCase().startsWith("mds-")){if(n&&"updateLang"in n){n.updateLang()}}}))};this.pluralize=function(n,e){var r=t.config[t.language]?t.config[t.language][n]:t.config[t.rollbackLanguage][n];var i=[];if(Array.isArray(r)){i.push(r[0]);i.push(r[1])}else{i.push(r);i.push(r)}var o=i[0];var a=o;var s=Object.keys(e);if(s.length>0){var d=s[0];if(typeof e[d]==="number"){if(e[d]!==1){a=i[1]}}}return mustache.exports.render(a,e)};this.get=function(n,e){if(e){return t.pluralize(n,e)}return t.config[t.language]?t.config[t.language][n]:t.config[t.rollbackLanguage][n]};if(n){this.set(n)}}return n}();var increase$3="Αύξηση";var decrease$3="Μείωση";var showPassword$3="Εμφάνιση Κωδικού";var hidePassword$3="Απόκρυψη Κωδικού";var localeEl={increase:increase$3,decrease:decrease$3,showPassword:showPassword$3,hidePassword:hidePassword$3};var increase$2="Increase";var decrease$2="Decrease";var showPassword$2="Show Password";var hidePassword$2="Hide Password";var localeEn={increase:increase$2,decrease:decrease$2,showPassword:showPassword$2,hidePassword:hidePassword$2};var increase$1="Aumentar";var decrease$1="Disminuir";var showPassword$1="Mostrar Contraseña";var hidePassword$1="Ocultar Contraseña";var localeEs={increase:increase$1,decrease:decrease$1,showPassword:showPassword$1,hidePassword:hidePassword$1};var increase="Aumenta";var decrease="Diminuisci";var showPassword="Visualizza password";var hidePassword="Nascondi password";var localeIt={increase:increase,decrease:decrease,showPassword:showPassword,hidePassword:hidePassword};var NullValidator=function(){return null};var requiredValidor=function(n){return n.length>0?null:{required:""}};var isbnValidatorFn=function(n){if(Number.isNaN(n.slice(0,-1))||n.length!==10&&n.length!==13)return{"isbn-error":"formato isbn non correto"};var t=n.split("").map((function(n){return n==="X"?10:Number(n)}));var e=0;if(n.length===10){var r=t.reduce((function(n,t,e){return n+(10-e)*t}),0);e=r%11}else{var r=t.reduce((function(n,t,e){var r=e%2===0?1:3;return n+t*r}),0);e=r%10}return e===0?null:{"isbn-error":"codice isbn non valido"}};var Validator=function(){function n(){this._validators=[];this._errors=null;this.isValid=true}n.prototype.addValidator=function(n){var t;if(Array.isArray(n)){(t=this._validators).push.apply(t,n)}else{this._validators.push(n)}};n.prototype._hasValidator=function(n,t){return Array.isArray(n)?n.includes(t):n===t};n.prototype.hasValidator=function(n){return n?this._hasValidator(this._validators,n):this._validators.length>0};n.prototype.removeValidator=function(n){var t=this;this._validators=this._validators.filter((function(e){return!t._hasValidator(n,e)}))};n.prototype.validate=function(n){var t=this._validators.map((function(t){return t(n)})).reduce((function(n,t){return Object.assign(Object.assign({},n),t)}),NullValidator);this._errors=Object.keys(t).length===0?null:t;this.isValid=!this._errors};Object.defineProperty(n.prototype,"errors",{get:function(){return this._errors},enumerable:false,configurable:true});return n}();var InputMaskPattern=function(){function n(){}return n}();InputMaskPattern.CF_Regex=/^(?:[A-Z][AEIOU][AEIOUX]|[AEIOU]X{2}|[B-DF-HJ-NP-TV-Z]{2}[A-Z]){2}(?:[\dLMNP-V]{2}(?:[A-EHLMPR-T](?:[04LQ][1-9MNP-V]|[15MR][\dLMNP-V]|[26NS][0-8LMNP-U])|[DHPS][37PT][0L]|[ACELMRT][37PT][01LM]|[AC-EHLMPR-T][26NS][9V])|(?:[02468LNQSU][048LQU]|[13579MPRTV][26NS])B[26NS][9V])(?:[A-MZ][1-9MNP-V][\dLMNP-V]{2}|[A-M][0L](?:[1-9MNP-V][\dLMNP-V]|[0L][1-9MNP-V]))[A-Z]$/i;InputMaskPattern.CF_MASK="A{6}(99|AA)A(99|AA)A(999|AAA)A";InputMaskPattern.CC_MASK="9999-9999-9999-9999";var InputValidationManager=function(){function n(n){this.validator=new Validator;this.pattern=n}n.prototype.mask=function(n){if(!this.pattern){throw new Error("no pattern found, set pattern before mask")}};n.prototype.isValid=function(n){this.validator.validate(n);return this.validator.isValid};return n}();function createInputValidationManager(n){var t;switch(n){case"tel":t=new InputValidationManager("");break;case"url":t=new InputValidationManager("");break;case"cc":t=new InputValidationManager(InputMaskPattern.CC_MASK);break;case"cf":t=new InputValidationManager(InputMaskPattern.CF_MASK);t.validator.addValidator((function(n){return InputMaskPattern.CF_Regex.test(n)?null:{"cf-regex":"Codice fiscale inserito non corretto"}}));t.validator.addValidator((function(n){return n.length===16?null:{"cf-length":"Codice fiscale deve essere lungo 16 caratteri"}}));break;case"isbn":t=new InputValidationManager;t.validator.addValidator(isbnValidatorFn);break;case"piva":t=new InputValidationManager("");break;default:t=new InputValidationManager("")}return t}var 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(--variant-primary-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\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: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="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';var MdsInputStyle0=mdsInputCss;var MdsInput=function(){function n(n){var t=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputChange",7);this.keyDownEvent=createEvent(this,"mdsInputKeydown",7);this.blurEvent=createEvent(this,"mdsInputBlur",7);this.focusEvent=createEvent(this,"mdsInputFocus",7);this.validationEvent=createEvent(this,"mdsInputValidation",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.hasFocus=false;this.countVariant="count-empty";this.isPasswordVisible=false;this.t=new Locale({el:localeEl,en:localeEn,es:localeEs,it:localeIt});this.autocomplete="off";this.autofocus=false;this.await=false;this.controlsLayout="vertical";this.controlsIcon="arrow";this.controlIncreaseLabel="Aumenta";this.controlDecreaseLabel="Riduci";this.disabled=false;this.readonly=false;this.required=false;this.type="text";this.typography="detail";this.value="";this.countMaxLength=function(){var n,e,r;if(!t.maxlength)return;if(t.value===undefined)return;t.currentLengthLabel="".concat((e=(n=t.value)===null||n===void 0?void 0:n.length)!==null&&e!==void 0?e:0," / ").concat(t.maxlength);var i=Math.round(t.value.length*100/t.maxlength);if(((r=t.value)===null||r===void 0?void 0:r.length)===t.maxlength){t.countVariant="count-full";return}if(i>=100){t.countVariant="count-full";return}if(i>=75){t.countVariant="count-almost-full";return}if(i>=50){t.countVariant="count-almost";return}if(i>=25){t.countVariant="count-incomplete";return}t.countVariant="count-empty"};this.onInput=function(n){var e=n.target;if(e){t.value=e.value;t.internals.setFormValue(t.value)}t.keyDownEvent.emit(n)};this.onBlur=function(){t.hasFocus=false;if(t.isValid)t.validateInput();t.blurEvent.emit()};this.onFocus=function(n){var e=n.target;t.hasFocus=true;t.focusEvent.emit();if(t.readonly){setTimeout((function(){e.select()}),10)}};this.stepUp=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepUp();t.value=t.nativeInput.value}};this.stepDown=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepDown();t.value=t.nativeInput.value}}}n.prototype.updateLang=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.language=this.t.lang(this.el);this.t.update();return[2]}))}))};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentWillLoad=function(){var n=this;var t;this.language=this.t.lang(this.el);if(this.el.hasAttribute("tabindex")){var e=this.el.getAttribute("tabindex");this.tabindex=e!==null?parseInt(e):undefined;this.el.removeAttribute("tabindex")}this.internals.setFormValue((t=this.value)!==null&&t!==void 0?t:null);this.maxLengthChanged(this.maxlength);this.el.focus=function(){var t;(t=n.nativeInput)===null||t===void 0?void 0:t.focus()}};n.prototype.componentDidLoad=function(){var n,t;this.inputValidation=createInputValidationManager(this.type);if(this.required){this.inputValidation.validator.addValidator(requiredValidor)}(n=this.nativeInput)===null||n===void 0?void 0:n.setAttribute("pattern",String(this.inputValidation.pattern));if(this.autofocus){(t=this.nativeInput)===null||t===void 0?void 0:t.focus()}};n.prototype.valueChanged=function(){var n;this.changeEvent.emit({value:this.value});this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null);if(this.maxlength!==undefined){this.countMaxLength()}if(!this.isValid)this.validateInput()};n.prototype.maxLengthChanged=function(n){if(n===undefined)return;if(n<=0){this.maxlength=undefined;return}this.countMaxLength()};n.prototype.addValidator=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.inputValidation.validator.addValidator(n);return[2,Promise.resolve()]}))}))};n.prototype.removeValidator=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.inputValidation.validator.removeValidator(n);return[2]}))}))};n.prototype.hasValidator=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.inputValidation.validator.hasValidator(n)]}))}))};n.prototype.getErrors=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){return[2,Promise.resolve(this.inputValidation.validator.errors)]}))}))};n.prototype.validateInput=function(){if(this.inputValidation.validator.hasValidator()){this.isValid=this.inputValidation.isValid(this.value);this.variant=this.isValid?"success":"error";this.validationEvent.emit(this.isValid)}return this.isValid};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};n.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};n.prototype.componentWillRender=function(){this.t.lang(this.el)};n.prototype.render=function(){var n=this;var t,e;return h(Host,{key:"7bcf91aca53feb18a28157e00ee4da810e010fa1"},this.type==="number"&&this.controlsLayout==="horizontal"&&h("mds-button",{key:"8b2dec6e8ea8f97a56860eb0dcad9906fca34db2",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"?h("textarea",{class:clsx("input",((t=this.icon)!==null&&t!==void 0?t:this.await)&&"has-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:function(t){return n.nativeInput=t},required:this.required,tabIndex:this.tabindex,value:this.value}):h("input",{class:clsx("input",((e=this.icon)!==null&&e!==void 0?e:this.await)&&"has-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.datalist&&"datalist",part:"field",placeholder:this.placeholder,readOnly:this.readonly,ref:function(t){return n.nativeInput=t},required:this.required,step:this.step,tabIndex:this.tabindex,type:this.type==="password"&&this.isPasswordVisible?"text":this.type,value:this.value}),this.type==="number"&&this.controlsLayout==="vertical"&&h("div",{key:"44152354d2e397d804a3cc1136d835893926637b",class:"counter counter--vertical"},h("mds-button",{key:"838e644c66e08177b4aebd5f73e83a1cc80cc514",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:"65bb7254cbca18664b6c41302da0da0e091b610e",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"&&this.controlsLayout==="horizontal"&&h("mds-button",{key:"b7aaf01c01071cca8a37084b4d2e41d0e1b84e4e",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"&&h("mds-button",{key:"b961439524106e40471302d24270176973eebcb7",class:"password-toggle-button",icon:this.isPasswordVisible?miBaselineVisibleOff:miBaselineVisible,onClick:function(){return n.isPasswordVisible=!n.isPasswordVisible},tabindex:"0",tone:"quiet",title:this.isPasswordVisible?this.t.get("hidePassword"):this.t.get("showPassword"),part:"password-toggle-button"}),h("mds-input-tip",{key:"a244562862771dde8f08020bbf44c63086b8f685",lang:this.language,position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"28fd9702190626d711d414086d5a61de34fe08b1",expanded:true,variant:"disabled"}),this.readonly&&h("mds-input-tip-item",{key:"64a95ac2e2d0ffee636bb5bfd55f45dcc9399a2c",expanded:true,variant:"readonly"}),this.required&&h("mds-input-tip-item",{key:"fa957185f104bec23eeebb1c4e98146ebc0789ab",expanded:this.hasFocus,variant:this.isValid?"required-success":"required"})),h("mds-input-tip",{key:"2a86141b562df5e7f1f4f28f5ccd55b04dea27c8",lang:this.language,position:"bottom",active:this.hasFocus},this.tip&&h("mds-input-tip-item",{key:"a258201f5d84b1d6556194c37a0e48dd0172088b",expanded:true,variant:"text"},this.tip),this.maxlength&&h("mds-input-tip-item",{key:"325f117d6dc5cca6e29575ef5e9f4fb6957f975c",part:"tip-count",expanded:true,variant:this.countVariant},this.currentLengthLabel)),this.datalist&&h("datalist",{key:"0b2d39716babb08b0363598eb9362e531dd7bcdd",id:"datalist",class:"datalist"},this.datalist.forEach((function(n){return h("option",{value:n})}))),this.icon&&!this.await&&h("mds-icon",{key:"a65f0a2ef1ab08c809b77e7e1384653fd88b1610",class:clsx("icon",this.variant),name:this.icon}),h("mds-spinner",{key:"20186147633cfb40ad5a27a3c5254810346e1dbf",running:this.await,class:clsx("await",this.variant)}))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],maxlength:["maxLengthChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}();MdsInput.style=MdsInputStyle0;export{MdsInput as mds_input};
+var n=Object.prototype.toString;var t=Array.isArray||function t(e){return n.call(e)==="[object Array]"};function e(n){return typeof n==="function"}function r(n){return t(n)?"array":typeof n}function i(n){return n.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function o(n,t){return n!=null&&typeof n==="object"&&t in n}function a(n,t){return n!=null&&typeof n!=="object"&&n.hasOwnProperty&&n.hasOwnProperty(t)}var s=RegExp.prototype.test;function d(n,t){return s.call(n,t)}var u=/\S/;function h(n){return!d(u,n)}var c={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};function l(n){return String(n).replace(/[&<>"'`=\/]/g,(function n(t){return c[t]}))}var p=/\s*/;var m=/\s+/;var f=/\s*=/;var b=/\s*\}/;var v=/#|\^|\/|>|\{|&|=|!/;function y(n,e){if(!n)return[];var r=false;var o=[];var a=[];var s=[];var d=false;var u=false;var c="";var l=0;function y(){if(d&&!u){while(s.length)delete a[s.pop()]}else{s=[]}d=false;u=false}var k,z,P;function I(n){if(typeof n==="string")n=n.split(m,2);if(!t(n)||n.length!==2)throw new Error("Invalid tags: "+n);k=new RegExp(i(n[0])+"\\s*");z=new RegExp("\\s*"+i(n[1]));P=new RegExp("\\s*"+i("}"+n[1]))}I(e||M.tags);var A=new x(n);var V,E,S,_,L,B;while(!A.eos()){V=A.pos;S=A.scanUntil(k);if(S){for(var C=0,$=S.length;C<$;++C){_=S.charAt(C);if(h(_)){s.push(a.length);c+=_}else{u=true;r=true;c+=" "}a.push(["text",_,V,V+1]);V+=1;if(_==="\n"){y();c="";l=0;r=false}}}if(!A.scan(k))break;d=true;E=A.scan(v)||"name";A.scan(p);if(E==="="){S=A.scanUntil(f);A.scan(f);A.scanUntil(z)}else if(E==="{"){S=A.scanUntil(P);A.scan(b);A.scanUntil(z);E="&"}else{S=A.scanUntil(z)}if(!A.scan(z))throw new Error("Unclosed tag at "+A.pos);if(E==">"){L=[E,S,V,A.pos,c,l,r]}else{L=[E,S,V,A.pos]}l++;a.push(L);if(E==="#"||E==="^"){o.push(L)}else if(E==="/"){B=o.pop();if(!B)throw new Error('Unopened section "'+S+'" at '+V);if(B[1]!==S)throw new Error('Unclosed section "'+B[1]+'" at '+V)}else if(E==="name"||E==="{"||E==="&"){u=true}else if(E==="="){I(S)}}y();B=o.pop();if(B)throw new Error('Unclosed section "'+B[1]+'" at '+A.pos);return w(g(a))}function g(n){var t=[];var e,r;for(var i=0,o=n.length;i<o;++i){e=n[i];if(e){if(e[0]==="text"&&r&&r[0]==="text"){r[1]+=e[1];r[3]=e[3]}else{t.push(e);r=e}}}return t}function w(n){var t=[];var e=t;var r=[];var i,o;for(var a=0,s=n.length;a<s;++a){i=n[a];switch(i[0]){case"#":case"^":e.push(i);r.push(i);e=i[4]=[];break;case"/":o=r.pop();o[5]=i[2];e=r.length>0?r[r.length-1][4]:t;break;default:e.push(i)}}return t}function x(n){this.string=n;this.tail=n;this.pos=0}x.prototype.eos=function n(){return this.tail===""};x.prototype.scan=function n(t){var e=this.tail.match(t);if(!e||e.index!==0)return"";var r=e[0];this.tail=this.tail.substring(r.length);this.pos+=r.length;return r};x.prototype.scanUntil=function n(t){var e=this.tail.search(t),r;switch(e){case-1:r=this.tail;this.tail="";break;case 0:r="";break;default:r=this.tail.substring(0,e);this.tail=this.tail.substring(e)}this.pos+=r.length;return r};function k(n,t){this.view=n;this.cache={".":this.view};this.parent=t}k.prototype.push=function n(t){return new k(t,this)};k.prototype.lookup=function n(t){var r=this.cache;var i;if(r.hasOwnProperty(t)){i=r[t]}else{var s=this,d,u,h,c=false;while(s){if(t.indexOf(".")>0){d=s.view;u=t.split(".");h=0;while(d!=null&&h<u.length){if(h===u.length-1)c=o(d,u[h])||a(d,u[h]);d=d[u[h++]]}}else{d=s.view[t];c=o(s.view,t)}if(c){i=d;break}s=s.parent}r[t]=i}if(e(i))i=i.call(this.view);return i};function z(){this.templateCache={_cache:{},set:function n(t,e){this._cache[t]=e},get:function n(t){return this._cache[t]},clear:function n(){this._cache={}}}}z.prototype.clearCache=function n(){if(typeof this.templateCache!=="undefined"){this.templateCache.clear()}};z.prototype.parse=function n(t,e){var r=this.templateCache;var i=t+":"+(e||M.tags).join(":");var o=typeof r!=="undefined";var a=o?r.get(i):undefined;if(a==undefined){a=y(t,e);o&&r.set(i,a)}return a};z.prototype.render=function n(t,e,r,i){var o=this.getConfigTags(i);var a=this.parse(t,o);var s=e instanceof k?e:new k(e,undefined);return this.renderTokens(a,s,r,t,i)};z.prototype.renderTokens=function n(t,e,r,i,o){var a="";var s,d,u;for(var h=0,c=t.length;h<c;++h){u=undefined;s=t[h];d=s[0];if(d==="#")u=this.renderSection(s,e,r,i,o);else if(d==="^")u=this.renderInverted(s,e,r,i,o);else if(d===">")u=this.renderPartial(s,e,r,o);else if(d==="&")u=this.unescapedValue(s,e);else if(d==="name")u=this.escapedValue(s,e,o);else if(d==="text")u=this.rawValue(s);if(u!==undefined)a+=u}return a};z.prototype.renderSection=function n(r,i,o,a,s){var d=this;var u="";var h=i.lookup(r[1]);function c(n){return d.render(n,i,o,s)}if(!h)return;if(t(h)){for(var l=0,p=h.length;l<p;++l){u+=this.renderTokens(r[4],i.push(h[l]),o,a,s)}}else if(typeof h==="object"||typeof h==="string"||typeof h==="number"){u+=this.renderTokens(r[4],i.push(h),o,a,s)}else if(e(h)){if(typeof a!=="string")throw new Error("Cannot use higher-order sections without the original template");h=h.call(i.view,a.slice(r[3],r[5]),c);if(h!=null)u+=h}else{u+=this.renderTokens(r[4],i,o,a,s)}return u};z.prototype.renderInverted=function n(e,r,i,o,a){var s=r.lookup(e[1]);if(!s||t(s)&&s.length===0)return this.renderTokens(e[4],r,i,o,a)};z.prototype.indentPartial=function n(t,e,r){var i=e.replace(/[^ \t]/g,"");var o=t.split("\n");for(var a=0;a<o.length;a++){if(o[a].length&&(a>0||!r)){o[a]=i+o[a]}}return o.join("\n")};z.prototype.renderPartial=function n(t,r,i,o){if(!i)return;var a=this.getConfigTags(o);var s=e(i)?i(t[1]):i[t[1]];if(s!=null){var d=t[6];var u=t[5];var h=t[4];var c=s;if(u==0&&h){c=this.indentPartial(s,h,d)}var l=this.parse(c,a);return this.renderTokens(l,r,i,c,o)}};z.prototype.unescapedValue=function n(t,e){var r=e.lookup(t[1]);if(r!=null)return r};z.prototype.escapedValue=function n(t,e,r){var i=this.getConfigEscape(r)||M.escape;var o=e.lookup(t[1]);if(o!=null)return typeof o==="number"&&i===M.escape?String(o):i(o)};z.prototype.rawValue=function n(t){return t[1]};z.prototype.getConfigTags=function n(e){if(t(e)){return e}else if(e&&typeof e==="object"){return e.tags}else{return undefined}};z.prototype.getConfigEscape=function n(e){if(e&&typeof e==="object"&&!t(e)){return e.escape}else{return undefined}};var M={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:undefined,escape:undefined,parse:undefined,render:undefined,Scanner:undefined,Context:undefined,Writer:undefined,set templateCache(n){P.templateCache=n},get templateCache(){return P.templateCache}};var P=new z;M.clearCache=function n(){return P.clearCache()};M.parse=function n(t,e){return P.parse(t,e)};M.render=function n(t,e,i,o){if(typeof t!=="string"){throw new TypeError('Invalid template! Template should be a "string" '+'but "'+r(t)+'" was given as the first '+"argument for mustache#render(template, view, partials)")}return P.render(t,e,i,o)};M.escape=l;M.Scanner=x;M.Context=k;M.Writer=z;return M}))})(mustache);var Locale=function(){function n(n){var t=this;this.rollbackLanguage="en";this.set=function(n){t.config=n};this.lang=function(n){t.element=n;t.closestElement=t.element.closest("[lang]");if(t.closestElement){if(t.closestElement.lang){t.language=t.closestElement.lang;return t.language}}t.language=t.rollbackLanguage;return t.language};this.update=function(n){var e=n!==null&&n!==void 0?n:t.element.shadowRoot;e&&e.querySelectorAll("*").forEach((function(n){if(n.tagName.toLowerCase().startsWith("mds-")){if(n&&"updateLang"in n){n.updateLang()}}}))};this.pluralize=function(n,e){var r=t.config[t.language]?t.config[t.language][n]:t.config[t.rollbackLanguage][n];var i=[];if(Array.isArray(r)){i.push(r[0]);i.push(r[1])}else{i.push(r);i.push(r)}var o=i[0];var a=o;var s=Object.keys(e);if(s.length>0){var d=s[0];if(typeof e[d]==="number"){if(e[d]!==1){a=i[1]}}}return mustache.exports.render(a,e)};this.get=function(n,e){if(e){return t.pluralize(n,e)}return t.config[t.language]?t.config[t.language][n]:t.config[t.rollbackLanguage][n]};if(n){this.set(n)}}return n}();var increase$3="Αύξηση";var decrease$3="Μείωση";var showPassword$3="Εμφάνιση Κωδικού";var hidePassword$3="Απόκρυψη Κωδικού";var localeEl={increase:increase$3,decrease:decrease$3,showPassword:showPassword$3,hidePassword:hidePassword$3};var increase$2="Increase";var decrease$2="Decrease";var showPassword$2="Show Password";var hidePassword$2="Hide Password";var localeEn={increase:increase$2,decrease:decrease$2,showPassword:showPassword$2,hidePassword:hidePassword$2};var increase$1="Aumentar";var decrease$1="Disminuir";var showPassword$1="Mostrar Contraseña";var hidePassword$1="Ocultar Contraseña";var localeEs={increase:increase$1,decrease:decrease$1,showPassword:showPassword$1,hidePassword:hidePassword$1};var increase="Aumenta";var decrease="Diminuisci";var showPassword="Visualizza password";var hidePassword="Nascondi password";var localeIt={increase:increase,decrease:decrease,showPassword:showPassword,hidePassword:hidePassword};var NullValidator=function(){return null};var requiredValidor=function(n){return n.length>0?null:{required:""}};var isbnValidatorFn=function(n){if(Number.isNaN(n.slice(0,-1))||n.length!==10&&n.length!==13)return{"isbn-error":"formato isbn non correto"};var t=n.split("").map((function(n){return n==="X"?10:Number(n)}));var e=0;if(n.length===10){var r=t.reduce((function(n,t,e){return n+(10-e)*t}),0);e=r%11}else{var r=t.reduce((function(n,t,e){var r=e%2===0?1:3;return n+t*r}),0);e=r%10}return e===0?null:{"isbn-error":"codice isbn non valido"}};var Validator=function(){function n(){this._validators=[];this._errors=null;this.isValid=true}n.prototype.addValidator=function(n){var t;if(Array.isArray(n)){(t=this._validators).push.apply(t,n)}else{this._validators.push(n)}};n.prototype._hasValidator=function(n,t){return Array.isArray(n)?n.includes(t):n===t};n.prototype.hasValidator=function(n){return n?this._hasValidator(this._validators,n):this._validators.length>0};n.prototype.removeValidator=function(n){var t=this;this._validators=this._validators.filter((function(e){return!t._hasValidator(n,e)}))};n.prototype.validate=function(n){var t=this._validators.map((function(t){return t(n)})).reduce((function(n,t){return Object.assign(Object.assign({},n),t)}),NullValidator);this._errors=Object.keys(t).length===0?null:t;this.isValid=!this._errors};Object.defineProperty(n.prototype,"errors",{get:function(){return this._errors},enumerable:false,configurable:true});return n}();var InputMaskPattern=function(){function n(){}return n}();InputMaskPattern.CF_Regex=/^(?:[A-Z][AEIOU][AEIOUX]|[AEIOU]X{2}|[B-DF-HJ-NP-TV-Z]{2}[A-Z]){2}(?:[\dLMNP-V]{2}(?:[A-EHLMPR-T](?:[04LQ][1-9MNP-V]|[15MR][\dLMNP-V]|[26NS][0-8LMNP-U])|[DHPS][37PT][0L]|[ACELMRT][37PT][01LM]|[AC-EHLMPR-T][26NS][9V])|(?:[02468LNQSU][048LQU]|[13579MPRTV][26NS])B[26NS][9V])(?:[A-MZ][1-9MNP-V][\dLMNP-V]{2}|[A-M][0L](?:[1-9MNP-V][\dLMNP-V]|[0L][1-9MNP-V]))[A-Z]$/i;InputMaskPattern.CF_MASK="A{6}(99|AA)A(99|AA)A(999|AAA)A";InputMaskPattern.CC_MASK="9999-9999-9999-9999";var InputValidationManager=function(){function n(n){this.validator=new Validator;this.pattern=n}n.prototype.mask=function(n){if(!this.pattern){throw new Error("no pattern found, set pattern before mask")}};n.prototype.isValid=function(n){this.validator.validate(n);return this.validator.isValid};return n}();function createInputValidationManager(n){var t;switch(n){case"tel":t=new InputValidationManager("");break;case"url":t=new InputValidationManager("");break;case"cc":t=new InputValidationManager(InputMaskPattern.CC_MASK);break;case"cf":t=new InputValidationManager(InputMaskPattern.CF_MASK);t.validator.addValidator((function(n){return InputMaskPattern.CF_Regex.test(n)?null:{"cf-regex":"Codice fiscale inserito non corretto"}}));t.validator.addValidator((function(n){return n.length===16?null:{"cf-length":"Codice fiscale deve essere lungo 16 caratteri"}}));break;case"isbn":t=new InputValidationManager;t.validator.addValidator(isbnValidatorFn);break;case"piva":t=new InputValidationManager("");break;default:t=new InputValidationManager("")}return t}var 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(--variant-primary-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\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: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="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';var MdsInputStyle0=mdsInputCss;var MdsInput=function(){function n(n){var t=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputChange",7);this.keyDownEvent=createEvent(this,"mdsInputKeydown",7);this.blurEvent=createEvent(this,"mdsInputBlur",7);this.focusEvent=createEvent(this,"mdsInputFocus",7);this.validationEvent=createEvent(this,"mdsInputValidation",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.hasFocus=false;this.countVariant="count-empty";this.isPasswordVisible=false;this.t=new Locale({el:localeEl,en:localeEn,es:localeEs,it:localeIt});this.autocomplete="off";this.autofocus=false;this.await=false;this.controlsLayout="vertical";this.controlsIcon="arrow";this.controlIncreaseLabel="Aumenta";this.controlDecreaseLabel="Riduci";this.disabled=false;this.readonly=false;this.required=false;this.type="text";this.typography="detail";this.value="";this.countMaxLength=function(){var n,e,r;if(!t.maxlength)return;if(t.value===undefined)return;t.currentLengthLabel="".concat((e=(n=t.value)===null||n===void 0?void 0:n.length)!==null&&e!==void 0?e:0," / ").concat(t.maxlength);var i=Math.round(t.value.length*100/t.maxlength);if(((r=t.value)===null||r===void 0?void 0:r.length)===t.maxlength){t.countVariant="count-full";return}if(i>=100){t.countVariant="count-full";return}if(i>=75){t.countVariant="count-almost-full";return}if(i>=50){t.countVariant="count-almost";return}if(i>=25){t.countVariant="count-incomplete";return}t.countVariant="count-empty"};this.onInput=function(n){var e=n.target;if(e){t.value=e.value;t.internals.setFormValue(t.value)}t.keyDownEvent.emit(n)};this.onBlur=function(){t.hasFocus=false;if(t.isValid)t.validateInput();t.blurEvent.emit()};this.onFocus=function(n){var e=n.target;t.hasFocus=true;t.focusEvent.emit();if(t.readonly){setTimeout((function(){e.select()}),10)}};this.stepUp=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepUp();t.value=t.nativeInput.value}};this.stepDown=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepDown();t.value=t.nativeInput.value}}}n.prototype.updateLang=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.language=this.t.lang(this.el);this.t.update();return[2]}))}))};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentWillLoad=function(){var n=this;var t;this.language=this.t.lang(this.el);if(this.el.hasAttribute("tabindex")){var e=this.el.getAttribute("tabindex");this.tabindex=e!==null?parseInt(e):undefined;this.el.removeAttribute("tabindex")}this.internals.setFormValue((t=this.value)!==null&&t!==void 0?t:null);this.maxLengthChanged(this.maxlength);this.el.focus=function(){var t;(t=n.nativeInput)===null||t===void 0?void 0:t.focus()}};n.prototype.componentDidLoad=function(){var n,t;this.inputValidation=createInputValidationManager(this.type);if(this.required){this.inputValidation.validator.addValidator(requiredValidor)}(n=this.nativeInput)===null||n===void 0?void 0:n.setAttribute("pattern",String(this.inputValidation.pattern));if(this.autofocus){(t=this.nativeInput)===null||t===void 0?void 0:t.focus()}};n.prototype.valueChanged=function(){var n;this.changeEvent.emit({value:this.value});this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null);if(this.maxlength!==undefined){this.countMaxLength()}if(!this.isValid)this.validateInput()};n.prototype.maxLengthChanged=function(n){if(n===undefined)return;if(n<=0){this.maxlength=undefined;return}this.countMaxLength()};n.prototype.addValidator=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.inputValidation.validator.addValidator(n);return[2,Promise.resolve()]}))}))};n.prototype.removeValidator=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.inputValidation.validator.removeValidator(n);return[2]}))}))};n.prototype.hasValidator=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.inputValidation.validator.hasValidator(n)]}))}))};n.prototype.getErrors=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){return[2,Promise.resolve(this.inputValidation.validator.errors)]}))}))};n.prototype.validateInput=function(){if(this.inputValidation.validator.hasValidator()){this.isValid=this.inputValidation.isValid(this.value);this.variant=this.isValid?"success":"error";this.validationEvent.emit(this.isValid)}return this.isValid};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};n.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};n.prototype.componentWillRender=function(){this.t.lang(this.el)};n.prototype.render=function(){var n=this;var t,e;return h(Host,{key:"7bcf91aca53feb18a28157e00ee4da810e010fa1"},this.type==="number"&&this.controlsLayout==="horizontal"&&h("mds-button",{key:"8b2dec6e8ea8f97a56860eb0dcad9906fca34db2",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"?h("textarea",{class:clsx("input",((t=this.icon)!==null&&t!==void 0?t:this.await)&&"has-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:function(t){return n.nativeInput=t},required:this.required,tabIndex:this.tabindex,value:this.value}):h("input",{class:clsx("input",((e=this.icon)!==null&&e!==void 0?e:this.await)&&"has-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.datalist&&"datalist",part:"field",placeholder:this.placeholder,readOnly:this.readonly,ref:function(t){return n.nativeInput=t},required:this.required,step:this.step,tabIndex:this.tabindex,type:this.type==="password"&&this.isPasswordVisible?"text":this.type,value:this.value}),this.type==="number"&&this.controlsLayout==="vertical"&&h("div",{key:"44152354d2e397d804a3cc1136d835893926637b",class:"counter counter--vertical"},h("mds-button",{key:"838e644c66e08177b4aebd5f73e83a1cc80cc514",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:"65bb7254cbca18664b6c41302da0da0e091b610e",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"&&this.controlsLayout==="horizontal"&&h("mds-button",{key:"b7aaf01c01071cca8a37084b4d2e41d0e1b84e4e",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"&&h("mds-button",{key:"b961439524106e40471302d24270176973eebcb7",class:"password-toggle-button",icon:this.isPasswordVisible?miBaselineVisibleOff:miBaselineVisible,onClick:function(){return n.isPasswordVisible=!n.isPasswordVisible},tabindex:"0",tone:"quiet",title:this.isPasswordVisible?this.t.get("hidePassword"):this.t.get("showPassword"),part:"password-toggle-button"}),h("mds-input-tip",{key:"a244562862771dde8f08020bbf44c63086b8f685",lang:this.language,position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"28fd9702190626d711d414086d5a61de34fe08b1",expanded:true,variant:"disabled"}),this.readonly&&h("mds-input-tip-item",{key:"64a95ac2e2d0ffee636bb5bfd55f45dcc9399a2c",expanded:true,variant:"readonly"}),this.required&&h("mds-input-tip-item",{key:"fa957185f104bec23eeebb1c4e98146ebc0789ab",expanded:this.hasFocus,variant:this.isValid?"required-success":"required"})),h("mds-input-tip",{key:"2a86141b562df5e7f1f4f28f5ccd55b04dea27c8",lang:this.language,position:"bottom",active:this.hasFocus},this.tip&&h("mds-input-tip-item",{key:"a258201f5d84b1d6556194c37a0e48dd0172088b",expanded:true,variant:"text"},this.tip),this.maxlength&&h("mds-input-tip-item",{key:"325f117d6dc5cca6e29575ef5e9f4fb6957f975c",part:"tip-count",expanded:true,variant:this.countVariant},this.currentLengthLabel)),this.datalist&&h("datalist",{key:"0b2d39716babb08b0363598eb9362e531dd7bcdd",id:"datalist",class:"datalist"},this.datalist.forEach((function(n){return h("option",{value:n})}))),this.icon&&!this.await&&h("mds-icon",{key:"a65f0a2ef1ab08c809b77e7e1384653fd88b1610",class:clsx("icon",this.variant),name:this.icon}),h("mds-spinner",{key:"20186147633cfb40ad5a27a3c5254810346e1dbf",running:this.await,class:clsx("await",this.variant)}))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],maxlength:["maxLengthChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}();MdsInput.style=MdsInputStyle0;export{MdsInput as mds_input};

package/dist/mds-input/mds-input.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{p as a,b as e}from"./p-eb25c22c.js";export{s as setNonce}from"./p-eb25c22c.js";import{g as t}from"./p-e1255160.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-~~55953c4e~~",[[65,"mds-input",{autocomplete:[513],autofocus:[516],await:[516],controlsLayout:[513,"controls-layout"],controlsIcon:[513,"controls-icon"],controlIncreaseLabel:[513,"control-increase-label"],controlDecreaseLabel:[513,"control-decrease-label"],datalist:[16],disabled:[516],icon:[513],max:[513],maxlength:[1538],min:[520],minlength:[514],name:[513],pattern:[513],placeholder:[513],readonly:[516],required:[516],variant:[1537],tip:[513],step:[513],type:[513],typography:[513],value:[1537],hasFocus:[32],language:[32],currentLengthLabel:[32],countVariant:[32],isPasswordVisible:[32],updateLang:[64],addValidator:[64],removeValidator:[64],hasValidator:[64],getErrors:[64],setFocus:[64],getInputElement:[64]},null,{value:["valueChanged"],maxlength:["maxLengthChanged"],disabled:["disabledChanged"]}]]]],a))));
1	+ import{p as a,b as e}from"./p-eb25c22c.js";export{s as setNonce}from"./p-eb25c22c.js";import{g as t}from"./p-e1255160.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-83542c96",[[65,"mds-input",{autocomplete:[513],autofocus:[516],await:[516],controlsLayout:[513,"controls-layout"],controlsIcon:[513,"controls-icon"],controlIncreaseLabel:[513,"control-increase-label"],controlDecreaseLabel:[513,"control-decrease-label"],datalist:[16],disabled:[516],icon:[513],max:[513],maxlength:[1538],min:[520],minlength:[514],name:[513],pattern:[513],placeholder:[513],readonly:[516],required:[516],variant:[1537],tip:[513],step:[513],type:[513],typography:[513],value:[1537],hasFocus:[32],language:[32],currentLengthLabel:[32],countVariant:[32],isPasswordVisible:[32],updateLang:[64],addValidator:[64],removeValidator:[64],hasValidator:[64],getErrors:[64],setFocus:[64],getInputElement:[64]},null,{value:["valueChanged"],maxlength:["maxLengthChanged"],disabled:["disabledChanged"]}]]]],a))));