@maggioli-design-system/mds-input 7.8.3 → 7.8.5

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

@@ -1130,7 +1130,7 @@ const hashRandomValue = (value) => {
     return hash(randomValue.toString());
 };
 
-const mdsInputCss = "\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n  --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n  --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n  --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n  --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n  --mds-input-textarea-field-sizing: content;\n  --mds-input-textarea-resize: none;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-variant-color: 0 0 0;\n  /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n  min-height: 1.5rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  margin: 0rem;\n  border-radius: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    background-color: var(--mds-input-background);\n    border: 0;\n    -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    color: rgb(var(--tone-neutral-02));\n    max-width: 100%;\n    min-height: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n    width: 100%;\n}\n\n.input::-moz-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -moz-transition-property: color;\n  transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n          appearance: none;\n  display: none;\n  margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n  border-bottom-right-radius: 0;\n\n  field-sizing: var(--mds-input-textarea-field-sizing);\n  max-height: var(--mds-input-textarea-max-height);\n  min-height: var(--mds-input-textarea-min-height);\n  overflow: auto;\n  resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n\n  --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n  --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n  padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n  padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n  left: 0.75rem;\n  top: 0.75rem;\n\n  fill: rgb(var(--mds-input-icon-color));\n  position: absolute;\n}\n\n.await {\n  color: rgb(var(--mds-input-icon-color));\n  height: 24px;\n  width: 24px;\n}\n\n.counter {\n  border-left: var(--mds-input-controls-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  gap: 0;\n  position: absolute;\n  right: 0;\n}\n\n.counter-button {\n  height: 1.5rem;\n  width: 1.75rem;\n  border-radius: 0.5rem;\n\n  --mds-button-background: transparent;\n\n  border: 0;\n  fill: var(--mds-input-controls-color);\n  min-height: 0;\n  padding: 0;\n}\n\n.counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n  height: 3rem;\n  width: 3rem;\n\n  bottom: 0;\n  position: absolute;\n  top: 0;\n}\n\n.counter-button--decrease {\n  border-bottom-right-radius: 0;\n  border-right: var(--mds-input-controls-border);\n  border-top-right-radius: 0;\n  left: 0;\n}\n\n.counter-button--increase {\n  border-bottom-left-radius: 0;\n  border-left: var(--mds-input-controls-border);\n  border-top-left-radius: 0;\n  right: 0;\n}\n\n.password-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.mic-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.toggle-button--error {\n  cursor: help;\n  fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n.mic-toggle-button--recording {\n  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n  /* required to avoid input number buttons on firefox go be shown always */\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -moz-appearance: textfield;\n  padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n  left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n  padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n    --mds-input-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-icon-color: var(--variant-primary-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n  --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n  --mds-input-icon-color: var(--variant-ai-05);\n  --mds-input-tip-background: var(--variant-ai-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n  --mds-input-icon-color: var(--variant-ai-04);\n  --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n  --mds-input-icon-color: var(--status-info-05);\n  --mds-input-tip-background: var(--status-info-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n  --mds-input-icon-color: var(--status-success-05);\n  --mds-input-tip-background: var(--status-success-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n  --mds-input-icon-color: var(--status-warning-05);\n  --mds-input-tip-background: var(--status-warning-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n  --mds-input-icon-color: var(--status-error-05);\n  --mds-input-tip-background: var(--status-error-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system) .input {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n  }\n\n  :host-context(.pref-theme-system) .counter-button:hover {\n    --mds-button-background: rgb(var(--tone-neutral-08));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n  }\n\n  :host-context(.pref-contrast-more) .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsInputCss = ":host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color);--mds-input-ring:0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);--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);--mds-input-textarea-field-sizing:content;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:16rem;--mds-input-textarea-min-height:6rem;--mds-input-tip-background:84 84 84;--mds-input-variant-color:0 0 0;--mds-input-controls-border:2px solid rgb(var(--tone-neutral-09));--mds-input-controls-color:rgb(var(--tone-neutral-03));min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;container-type:inline-size;display:-ms-flexbox;display:flex;position:relative}:host([typography=\"detail\"]) .input{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}:host([typography=\"snippet\"]) .input{min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.input{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;margin:0rem;border-radius:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);border:0;-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:rgb(var(--tone-neutral-02));max-width:100%;min-height:3rem;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:100%}.input::-moz-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-moz-transition-property:color;transition-property:color}.input::-webkit-input-placeholder{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-webkit-transition-property:color;transition-property:color}.input:-ms-input-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-ms-transition-property:color;transition-property:color}.input::-ms-input-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-ms-transition-property:color;transition-property:color}.input::placeholder{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-webkit-transition-property:color;transition-property:color}.input:hover::-moz-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::-webkit-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover:-ms-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::-ms-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::placeholder{color:var(--mds-input-placeholder-hover-color)}.input:focus::-moz-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::-webkit-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus:-ms-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::-ms-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::placeholder{color:var(--mds-input-placeholder-focus-color)}.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}:host textarea.input,:host([typography]) textarea.input{border-bottom-right-radius:0;field-sizing:var(--mds-input-textarea-field-sizing);max-height:var(--mds-input-textarea-max-height);min-height:var(--mds-input-textarea-min-height);overflow:auto;resize:var(--mds-input-textarea-resize)}.input:focus{outline:2px solid transparent;outline-offset:2px;--mds-input-ring:0 0 0 3px rgb(var(--mds-input-variant-color) / 1);--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)}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.input.has-icon{padding-left:2.75rem}.input.has-right-icon{padding-right:2.75rem}.await,.icon{left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color));position:absolute}.await{color:rgb(var(--mds-input-icon-color));height:24px;width:24px}.counter{border-left:var(--mds-input-controls-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0;position:absolute;right:0}.counter-button{height:1.5rem;width:1.75rem;border-radius:0.5rem;--mds-button-background:transparent;border:0;fill:var(--mds-input-controls-color);min-height:0;padding:0}.counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-09))}.counter .counter-button:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.counter .counter-button:last-child{border-bottom-left-radius:0;border-top-left-radius:0;border-top-right-radius:0}.counter-button--horizontal{height:3rem;width:3rem;bottom:0;position:absolute;top:0}.counter-button--decrease{border-bottom-right-radius:0;border-right:var(--mds-input-controls-border);border-top-right-radius:0;left:0}.counter-button--increase{border-bottom-left-radius:0;border-left:var(--mds-input-controls-border);border-top-left-radius:0;right:0}.password-toggle-button{top:0.375rem;right:0.375rem;fill:var(--mds-input-controls-color);position:absolute}.mic-toggle-button{top:0.375rem;right:0.375rem;fill:var(--mds-input-controls-color);position:absolute}.toggle-button--error{cursor:help;fill:rgb(var(--tone-neutral-06))}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.mic-toggle-button--recording{-webkit-animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}:host([type=\"number\"]) .input{-moz-appearance:textfield;padding-right:2rem}:host([type=\"number\"][controls-layout=\"horizontal\"]) .input{padding-left:3.5rem;padding-right:3.5rem;text-align:center}:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input{padding-left:6rem;text-align:left}:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon{left:3.75rem}:host([type=\"password\"]) .input{padding-right:2.5rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"cf\"]) .input{min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase}:host{--mds-input-icon-color:var(--variant-primary-03);--mds-input-variant-color:0 0 0}:host(:focus){--mds-input-variant-color:var(--variant-primary-04)}:host([variant=\"ai\"]){--mds-input-icon-color:var(--variant-ai-05);--mds-input-tip-background:var(--variant-ai-05);--mds-input-variant-color:0 0 0}:host([variant=\"ai\"]:focus){--mds-input-icon-color:var(--variant-ai-04);--mds-input-variant-color:var(--variant-ai-05)}:host([variant=\"info\"]){--mds-input-icon-color:var(--status-info-05);--mds-input-tip-background:var(--status-info-05);--mds-input-variant-color:0 0 0}:host([variant=\"info\"]:focus){--mds-input-icon-color:var(--status-info-04);--mds-input-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-icon-color:var(--status-success-05);--mds-input-tip-background:var(--status-success-05);--mds-input-variant-color:0 0 0}:host([variant=\"success\"]:focus){--mds-input-icon-color:var(--status-success-04);--mds-input-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-icon-color:var(--status-warning-05);--mds-input-tip-background:var(--status-warning-05);--mds-input-variant-color:0 0 0}:host([variant=\"warning\"]:focus){--mds-input-icon-color:var(--status-warning-04);--mds-input-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-icon-color:var(--status-error-05);--mds-input-tip-background:var(--status-error-05);--mds-input-variant-color:0 0 0}:host([variant=\"error\"]:focus){--mds-input-icon-color:var(--status-error-04);--mds-input-variant-color:var(--status-error-05)}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsInputStyle0 = mdsInputCss;
 
 const MdsInput = class {
@@ -1376,10 +1376,6 @@ const MdsInput = class {
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
         this.isValid = !(this.required && this.value === '');
-        this.el.focus = () => {
-            var _a;
-            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-        };
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -1495,21 +1491,21 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
+        return (index.h(index.Host, { key: '37a82d87e412a45a2d7564860f7d595764fee556' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && index.h("mds-button", { key: '6bd04aec103d606aac4c172a31be7fb2b341563d', 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'
             ? index.h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : index.h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && index.h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, index.h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && index.h("div", { key: '2ce0de98e1f0547b5daa743189a13080d73cba31', class: "counter counter--vertical" }, index.h("mds-button", { key: '9ec2a7d8019366e70a8aebf488ec807716aac352', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { key: '55f008a250a94496113e22a02e7ca2eeb4f7867f', 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'
-            && index.h("mds-button", { key: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && index.h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
-            && index.h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), index.h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && index.h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
-            index.h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && index.h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            index.h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && index.h("mds-button", { key: 'fbb1723f79b1b17dceafb543b0524a9bc457f76b', 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'
+            && index.h("mds-button", { key: 'cbd5545565544f2bedbf29d8746240790d8db257', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && index.h("mds-button", { key: '805f84eb8e0079d938c441f9f028648dcf8efcab', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), index.h("mds-input-tip", { key: 'a94febae08842c64ee0f573738e4962b653ca539', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && index.h("mds-input-tip-item", { key: '33319e21a25524b0f4304ea736ccc20a7286edf3', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '20d3641f406da2b33ea64b4dac9e990041952e3a', expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { key: '85a47f7e5948246165dfa291e54286704fa1b3fe', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), index.h("mds-input-tip", { key: '1263940f43227eb5d5d051d3d0502aaa815a3636', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && index.h("mds-input-tip-item", { key: '2857a15bdd167a3c96dd1bc29b05dc4367c60b02', expanded: true, variant: "text" }, this.tip), this.maxlength && index.h("mds-input-tip-item", { key: '5d648cccc76697d7f5b2e43b866c083a2e1f6fb5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            index.h("datalist", { key: '61ed22d7c6244498362c15bc42853c0e8cb6ec76', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
                 return index.h("option", { key: i, value: element });
-            })), this.icon && !this.await && index.h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && index.h("mds-icon", { key: '606f8240dd93ff3bf05cdf96785d56aec5bfa2f5', class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { key: '133b80f0f07120b30485846d93bb9d963ca1112f', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/collection/components/mds-input/mds-input.css

@@ -340,7 +340,7 @@
   text-transform: uppercase;
 }
 
-@container (max-width: 210px) {
+/* @container (max-width: 210px) {
   :host .tip__content,
   :host(:focus-within) .tip__content {
     grid-template-columns: 0fr;
@@ -353,9 +353,9 @@
   }
 
   :host {
-    --mds-input-background: rgb(var(--variant-primary-07));
+    --mds-input-background: theme('colors.variant-primary-07');
   }
-}
+} */
 
 :host {
   --mds-input-icon-color: var(--variant-primary-03);

package/dist/collection/components/mds-input/mds-input.js

@@ -247,10 +247,6 @@ export class MdsInput {
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
         this.isValid = !(this.required && this.value === '');
-        this.el.focus = () => {
-            var _a;
-            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-        };
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -366,21 +362,21 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
+        return (h(Host, { key: '37a82d87e412a45a2d7564860f7d595764fee556' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '6bd04aec103d606aac4c172a31be7fb2b341563d', 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', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: '2ce0de98e1f0547b5daa743189a13080d73cba31', class: "counter counter--vertical" }, h("mds-button", { key: '9ec2a7d8019366e70a8aebf488ec807716aac352', 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: '55f008a250a94496113e22a02e7ca2eeb4f7867f', 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: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
-            && h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && h("mds-button", { key: 'fbb1723f79b1b17dceafb543b0524a9bc457f76b', 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: 'cbd5545565544f2bedbf29d8746240790d8db257', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && h("mds-button", { key: '805f84eb8e0079d938c441f9f028648dcf8efcab', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: 'a94febae08842c64ee0f573738e4962b653ca539', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '33319e21a25524b0f4304ea736ccc20a7286edf3', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '20d3641f406da2b33ea64b4dac9e990041952e3a', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '85a47f7e5948246165dfa291e54286704fa1b3fe', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '1263940f43227eb5d5d051d3d0502aaa815a3636', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: '2857a15bdd167a3c96dd1bc29b05dc4367c60b02', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '5d648cccc76697d7f5b2e43b866c083a2e1f6fb5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '61ed22d7c6244498362c15bc42853c0e8cb6ec76', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
                 return h("option", { key: i, value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '606f8240dd93ff3bf05cdf96785d56aec5bfa2f5', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '133b80f0f07120b30485846d93bb9d963ca1112f', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/mds-input.js

@@ -1126,7 +1126,7 @@ const hashRandomValue = (value) => {
     return hash(randomValue.toString());
 };
 
-const mdsInputCss = "/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n  --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n  --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n  --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n  --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n  --mds-input-textarea-field-sizing: content;\n  --mds-input-textarea-resize: none;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-variant-color: 0 0 0;\n  /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n  min-height: 1.5rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  margin: 0rem;\n  border-radius: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    background-color: var(--mds-input-background);\n    border: 0;\n    -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    color: rgb(var(--tone-neutral-02));\n    max-width: 100%;\n    min-height: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n    width: 100%;\n}\n\n.input::-moz-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -moz-transition-property: color;\n  transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n          appearance: none;\n  display: none;\n  margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n  border-bottom-right-radius: 0;\n\n  field-sizing: var(--mds-input-textarea-field-sizing);\n  max-height: var(--mds-input-textarea-max-height);\n  min-height: var(--mds-input-textarea-min-height);\n  overflow: auto;\n  resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n\n  --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n  --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n  padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n  padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n  left: 0.75rem;\n  top: 0.75rem;\n\n  fill: rgb(var(--mds-input-icon-color));\n  position: absolute;\n}\n\n.await {\n  color: rgb(var(--mds-input-icon-color));\n  height: 24px;\n  width: 24px;\n}\n\n.counter {\n  border-left: var(--mds-input-controls-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  gap: 0;\n  position: absolute;\n  right: 0;\n}\n\n.counter-button {\n  height: 1.5rem;\n  width: 1.75rem;\n  border-radius: 0.5rem;\n\n  --mds-button-background: transparent;\n\n  border: 0;\n  fill: var(--mds-input-controls-color);\n  min-height: 0;\n  padding: 0;\n}\n\n.counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n  height: 3rem;\n  width: 3rem;\n\n  bottom: 0;\n  position: absolute;\n  top: 0;\n}\n\n.counter-button--decrease {\n  border-bottom-right-radius: 0;\n  border-right: var(--mds-input-controls-border);\n  border-top-right-radius: 0;\n  left: 0;\n}\n\n.counter-button--increase {\n  border-bottom-left-radius: 0;\n  border-left: var(--mds-input-controls-border);\n  border-top-left-radius: 0;\n  right: 0;\n}\n\n.password-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.mic-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.toggle-button--error {\n  cursor: help;\n  fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n.mic-toggle-button--recording {\n  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n  /* required to avoid input number buttons on firefox go be shown always */\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -moz-appearance: textfield;\n  padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n  left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n  padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n    --mds-input-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-icon-color: var(--variant-primary-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n  --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n  --mds-input-icon-color: var(--variant-ai-05);\n  --mds-input-tip-background: var(--variant-ai-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n  --mds-input-icon-color: var(--variant-ai-04);\n  --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n  --mds-input-icon-color: var(--status-info-05);\n  --mds-input-tip-background: var(--status-info-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n  --mds-input-icon-color: var(--status-success-05);\n  --mds-input-tip-background: var(--status-success-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n  --mds-input-icon-color: var(--status-warning-05);\n  --mds-input-tip-background: var(--status-warning-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n  --mds-input-icon-color: var(--status-error-05);\n  --mds-input-tip-background: var(--status-error-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system) .input {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n  }\n\n  :host-context(.pref-theme-system) .counter-button:hover {\n    --mds-button-background: rgb(var(--tone-neutral-08));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n  }\n\n  :host-context(.pref-contrast-more) .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsInputCss = ":host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color);--mds-input-ring:0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);--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);--mds-input-textarea-field-sizing:content;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:16rem;--mds-input-textarea-min-height:6rem;--mds-input-tip-background:84 84 84;--mds-input-variant-color:0 0 0;--mds-input-controls-border:2px solid rgb(var(--tone-neutral-09));--mds-input-controls-color:rgb(var(--tone-neutral-03));min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;container-type:inline-size;display:-ms-flexbox;display:flex;position:relative}:host([typography=\"detail\"]) .input{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}:host([typography=\"snippet\"]) .input{min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.input{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;margin:0rem;border-radius:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);border:0;-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:rgb(var(--tone-neutral-02));max-width:100%;min-height:3rem;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:100%}.input::-moz-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-moz-transition-property:color;transition-property:color}.input::-webkit-input-placeholder{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-webkit-transition-property:color;transition-property:color}.input:-ms-input-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-ms-transition-property:color;transition-property:color}.input::-ms-input-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-ms-transition-property:color;transition-property:color}.input::placeholder{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-webkit-transition-property:color;transition-property:color}.input:hover::-moz-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::-webkit-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover:-ms-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::-ms-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::placeholder{color:var(--mds-input-placeholder-hover-color)}.input:focus::-moz-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::-webkit-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus:-ms-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::-ms-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::placeholder{color:var(--mds-input-placeholder-focus-color)}.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}:host textarea.input,:host([typography]) textarea.input{border-bottom-right-radius:0;field-sizing:var(--mds-input-textarea-field-sizing);max-height:var(--mds-input-textarea-max-height);min-height:var(--mds-input-textarea-min-height);overflow:auto;resize:var(--mds-input-textarea-resize)}.input:focus{outline:2px solid transparent;outline-offset:2px;--mds-input-ring:0 0 0 3px rgb(var(--mds-input-variant-color) / 1);--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)}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.input.has-icon{padding-left:2.75rem}.input.has-right-icon{padding-right:2.75rem}.await,.icon{left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color));position:absolute}.await{color:rgb(var(--mds-input-icon-color));height:24px;width:24px}.counter{border-left:var(--mds-input-controls-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0;position:absolute;right:0}.counter-button{height:1.5rem;width:1.75rem;border-radius:0.5rem;--mds-button-background:transparent;border:0;fill:var(--mds-input-controls-color);min-height:0;padding:0}.counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-09))}.counter .counter-button:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.counter .counter-button:last-child{border-bottom-left-radius:0;border-top-left-radius:0;border-top-right-radius:0}.counter-button--horizontal{height:3rem;width:3rem;bottom:0;position:absolute;top:0}.counter-button--decrease{border-bottom-right-radius:0;border-right:var(--mds-input-controls-border);border-top-right-radius:0;left:0}.counter-button--increase{border-bottom-left-radius:0;border-left:var(--mds-input-controls-border);border-top-left-radius:0;right:0}.password-toggle-button{top:0.375rem;right:0.375rem;fill:var(--mds-input-controls-color);position:absolute}.mic-toggle-button{top:0.375rem;right:0.375rem;fill:var(--mds-input-controls-color);position:absolute}.toggle-button--error{cursor:help;fill:rgb(var(--tone-neutral-06))}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.mic-toggle-button--recording{-webkit-animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}:host([type=\"number\"]) .input{-moz-appearance:textfield;padding-right:2rem}:host([type=\"number\"][controls-layout=\"horizontal\"]) .input{padding-left:3.5rem;padding-right:3.5rem;text-align:center}:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input{padding-left:6rem;text-align:left}:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon{left:3.75rem}:host([type=\"password\"]) .input{padding-right:2.5rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"cf\"]) .input{min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase}:host{--mds-input-icon-color:var(--variant-primary-03);--mds-input-variant-color:0 0 0}:host(:focus){--mds-input-variant-color:var(--variant-primary-04)}:host([variant=\"ai\"]){--mds-input-icon-color:var(--variant-ai-05);--mds-input-tip-background:var(--variant-ai-05);--mds-input-variant-color:0 0 0}:host([variant=\"ai\"]:focus){--mds-input-icon-color:var(--variant-ai-04);--mds-input-variant-color:var(--variant-ai-05)}:host([variant=\"info\"]){--mds-input-icon-color:var(--status-info-05);--mds-input-tip-background:var(--status-info-05);--mds-input-variant-color:0 0 0}:host([variant=\"info\"]:focus){--mds-input-icon-color:var(--status-info-04);--mds-input-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-icon-color:var(--status-success-05);--mds-input-tip-background:var(--status-success-05);--mds-input-variant-color:0 0 0}:host([variant=\"success\"]:focus){--mds-input-icon-color:var(--status-success-04);--mds-input-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-icon-color:var(--status-warning-05);--mds-input-tip-background:var(--status-warning-05);--mds-input-variant-color:0 0 0}:host([variant=\"warning\"]:focus){--mds-input-icon-color:var(--status-warning-04);--mds-input-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-icon-color:var(--status-error-05);--mds-input-tip-background:var(--status-error-05);--mds-input-variant-color:0 0 0}:host([variant=\"error\"]:focus){--mds-input-icon-color:var(--status-error-04);--mds-input-variant-color:var(--status-error-05)}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsInputStyle0 = mdsInputCss;
 
 const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLElement {
@@ -1368,10 +1368,6 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
         this.isValid = !(this.required && this.value === '');
-        this.el.focus = () => {
-            var _a;
-            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-        };
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -1487,21 +1483,21 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
+        return (h(Host, { key: '37a82d87e412a45a2d7564860f7d595764fee556' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '6bd04aec103d606aac4c172a31be7fb2b341563d', 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', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: '2ce0de98e1f0547b5daa743189a13080d73cba31', class: "counter counter--vertical" }, h("mds-button", { key: '9ec2a7d8019366e70a8aebf488ec807716aac352', 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: '55f008a250a94496113e22a02e7ca2eeb4f7867f', 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: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
-            && h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && h("mds-button", { key: 'fbb1723f79b1b17dceafb543b0524a9bc457f76b', 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: 'cbd5545565544f2bedbf29d8746240790d8db257', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && h("mds-button", { key: '805f84eb8e0079d938c441f9f028648dcf8efcab', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: 'a94febae08842c64ee0f573738e4962b653ca539', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '33319e21a25524b0f4304ea736ccc20a7286edf3', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '20d3641f406da2b33ea64b4dac9e990041952e3a', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '85a47f7e5948246165dfa291e54286704fa1b3fe', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '1263940f43227eb5d5d051d3d0502aaa815a3636', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: '2857a15bdd167a3c96dd1bc29b05dc4367c60b02', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '5d648cccc76697d7f5b2e43b866c083a2e1f6fb5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '61ed22d7c6244498362c15bc42853c0e8cb6ec76', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
                 return h("option", { key: i, value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '606f8240dd93ff3bf05cdf96785d56aec5bfa2f5', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '133b80f0f07120b30485846d93bb9d963ca1112f', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-16T14:57:17",
+  "timestamp": "2026-02-19T19:07:57",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",

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

@@ -1126,7 +1126,7 @@ const hashRandomValue = (value) => {
     return hash(randomValue.toString());
 };
 
-const mdsInputCss = "\n\n/**\n * @prop --mds-input-background: Sets the background-color of the component\n * @prop --mds-input-icon-color: Sets the icon color of the component\n * @prop --mds-input-placeholder-default-color: Sets the color of the placeholder\n * @prop --mds-input-placeholder-focus-color: Sets the color of the placeholder when the input is focused\n * @prop --mds-input-placeholder-hover-color: Sets the color of the placeholder when the input is hovered\n * @prop --mds-input-ring: Sets the box-shadow of the component's input\n * @prop --mds-input-shadow: Sets the box-shadow of the component's input\n * @prop --mds-input-textarea-field-sizing: Sets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser\n * @prop --mds-input-textarea-max-height: Sets the `max-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-textarea-min-height: Sets the `min-height` of the component when attribute `type` is set to `textarea`\n * @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component\n * @prop --mds-input-variant-color: Sets the variant colors of the component\n */\n\n:host {\n  --mds-input-background: rgb(var(--tone-neutral));\n  --mds-input-icon-color: var(--mds-input-variant-color);\n  --mds-input-placeholder-default-color: rgb(var(--tone-neutral-06));\n  --mds-input-placeholder-focus-color: rgb(var(--tone-neutral-07));\n  --mds-input-placeholder-hover-color: var(--mds-input-placeholder-default-color);\n  --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);\n  --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);\n  --mds-input-textarea-field-sizing: content;\n  --mds-input-textarea-resize: none;\n  --mds-input-textarea-max-height: 16rem;\n  --mds-input-textarea-min-height: 6rem;\n  --mds-input-tip-background: 84 84 84;\n  --mds-input-variant-color: 0 0 0;\n  /* private */ --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n  /* private */ --mds-input-controls-color: rgb(var(--tone-neutral-03)); min-height: 1.5rem; font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; gap: 0.5rem;\n\n  container-type: inline-size;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n}\n\n:host([typography=\"detail\"]) .input {\n  min-height: 1.5rem;\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([typography=\"snippet\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.input {\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  margin: 0rem;\n  border-radius: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n    background-color: var(--mds-input-background);\n    border: 0;\n    -webkit-box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    box-shadow: var(--mds-input-ring), var(--mds-input-shadow);\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    color: rgb(var(--tone-neutral-02));\n    max-width: 100%;\n    min-height: 3rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;\n    width: 100%;\n}\n\n.input::-moz-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -moz-transition-property: color;\n  transition-property: color;\n}\n\n.input::-webkit-input-placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::-ms-input-placeholder {\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -ms-transition-property: color;\n  transition-property: color;\n}\n\n.input::placeholder {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: var(--mds-input-placeholder-default-color);\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.input:hover::-moz-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:hover::placeholder {\n  color: var(--mds-input-placeholder-hover-color);\n}\n\n.input:focus::-moz-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-webkit-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus:-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::-ms-input-placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input:focus::placeholder {\n  color: var(--mds-input-placeholder-focus-color);\n}\n\n.input::-webkit-outer-spin-button,\n.input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n          appearance: none;\n  display: none;\n  margin: 0;\n}\n\n:host textarea.input,\n:host([typography]) textarea.input {\n  border-bottom-right-radius: 0;\n\n  field-sizing: var(--mds-input-textarea-field-sizing);\n  max-height: var(--mds-input-textarea-max-height);\n  min-height: var(--mds-input-textarea-min-height);\n  overflow: auto;\n  resize: var(--mds-input-textarea-resize);\n}\n\n.input:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n\n  --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) / 1);\n  --mds-input-shadow: 0 4px 6px 3px rgb(var(--mds-input-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) / 0.06);\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-10));\n}\n\n.input:disabled::-moz-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input:disabled,\n.input:disabled::placeholder {\n  color: rgb(var(--tone-neutral-05));\n}\n\n.input.has-icon {\n  padding-left: 2.75rem;\n}\n\n.input.has-right-icon {\n  padding-right: 2.75rem;\n}\n\n\n.await,\n.icon {\n  left: 0.75rem;\n  top: 0.75rem;\n\n  fill: rgb(var(--mds-input-icon-color));\n  position: absolute;\n}\n\n.await {\n  color: rgb(var(--mds-input-icon-color));\n  height: 24px;\n  width: 24px;\n}\n\n.counter {\n  border-left: var(--mds-input-controls-border);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  gap: 0;\n  position: absolute;\n  right: 0;\n}\n\n.counter-button {\n  height: 1.5rem;\n  width: 1.75rem;\n  border-radius: 0.5rem;\n\n  --mds-button-background: transparent;\n\n  border: 0;\n  fill: var(--mds-input-controls-color);\n  min-height: 0;\n  padding: 0;\n}\n\n.counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-09));\n}\n\n.counter .counter-button:first-child {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.counter .counter-button:last-child {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.counter-button--horizontal {\n  height: 3rem;\n  width: 3rem;\n\n  bottom: 0;\n  position: absolute;\n  top: 0;\n}\n\n.counter-button--decrease {\n  border-bottom-right-radius: 0;\n  border-right: var(--mds-input-controls-border);\n  border-top-right-radius: 0;\n  left: 0;\n}\n\n.counter-button--increase {\n  border-bottom-left-radius: 0;\n  border-left: var(--mds-input-controls-border);\n  border-top-left-radius: 0;\n  right: 0;\n}\n\n.password-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.mic-toggle-button {\n  top: 0.375rem;\n  right: 0.375rem;\n\n  fill: var(--mds-input-controls-color);\n  position: absolute;\n}\n\n.toggle-button--error {\n  cursor: help;\n  fill: rgb(var(--tone-neutral-06));\n}\n\n@-webkit-keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n\n  50% {\n    opacity: .5;\n  }\n}\n\n.mic-toggle-button--recording {\n  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host([type=\"number\"]) .input {\n\n  /* required to avoid input number buttons on firefox go be shown always */\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -moz-appearance: textfield;\n  padding-right: 2rem;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n\n  text-align: center;\n}\n\n:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input {\n  padding-left: 6rem;\n\n  text-align: left;\n}\n\n\n:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon {\n  left: 3.75rem;\n}\n\n:host([type=\"password\"]) .input {\n  padding-right: 2.5rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown) {\n  font-size: 3rem;\n  max-height: 3rem;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown) {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n:host([type=\"cf\"]) .input {\n  min-height: 1.5rem;\n  font-family: 'Roboto Mono', 'Courier New', monospace;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-transform: uppercase;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n    --mds-input-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\n  --mds-input-icon-color: var(--variant-primary-03);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host(:focus) {\n  --mds-input-variant-color: var(--variant-primary-04);\n}\n\n:host([variant=\"ai\"]) {\n  --mds-input-icon-color: var(--variant-ai-05);\n  --mds-input-tip-background: var(--variant-ai-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"ai\"]:focus) {\n  --mds-input-icon-color: var(--variant-ai-04);\n  --mds-input-variant-color: var(--variant-ai-05);\n}\n\n:host([variant=\"info\"]) {\n  --mds-input-icon-color: var(--status-info-05);\n  --mds-input-tip-background: var(--status-info-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"info\"]:focus) {\n  --mds-input-icon-color: var(--status-info-04);\n  --mds-input-variant-color: var(--status-info-05);\n}\n\n:host([variant=\"success\"]) {\n  --mds-input-icon-color: var(--status-success-05);\n  --mds-input-tip-background: var(--status-success-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"success\"]:focus) {\n  --mds-input-icon-color: var(--status-success-04);\n  --mds-input-variant-color: var(--status-success-05);\n}\n\n:host([variant=\"warning\"]) {\n  --mds-input-icon-color: var(--status-warning-05);\n  --mds-input-tip-background: var(--status-warning-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"warning\"]:focus) {\n  --mds-input-icon-color: var(--status-warning-04);\n  --mds-input-variant-color: var(--status-warning-05);\n}\n\n:host([variant=\"error\"]) {\n  --mds-input-icon-color: var(--status-error-05);\n  --mds-input-tip-background: var(--status-error-05);\n  --mds-input-variant-color: 0 0 0;\n}\n\n:host([variant=\"error\"]:focus) {\n  --mds-input-icon-color: var(--status-error-04);\n  --mds-input-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce) .input {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system) .input {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n}\n\n:host-context(.pref-theme-dark) .counter-button:hover {\n  --mds-button-background: rgb(var(--tone-neutral-08));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-06));\n  }\n\n  :host-context(.pref-theme-system) .counter-button:hover {\n    --mds-button-background: rgb(var(--tone-neutral-08));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  --mds-input-background: rgb(var(--tone-neutral-09));\n  --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n}\n\n:host-context(.pref-contrast-more) .input::-moz-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host-context(.pref-contrast-more) .input::placeholder {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    --mds-input-background: rgb(var(--tone-neutral-09));\n    --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-05));\n  }\n\n  :host-context(.pref-contrast-more) .input::-moz-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-webkit-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input:-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::-ms-input-placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n\n  :host-context(.pref-contrast-more) .input::placeholder {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsInputCss = ":host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color);--mds-input-ring:0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);--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);--mds-input-textarea-field-sizing:content;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:16rem;--mds-input-textarea-min-height:6rem;--mds-input-tip-background:84 84 84;--mds-input-variant-color:0 0 0;--mds-input-controls-border:2px solid rgb(var(--tone-neutral-09));--mds-input-controls-color:rgb(var(--tone-neutral-03));min-height:1.5rem;font-family:Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;gap:0.5rem;container-type:inline-size;display:-ms-flexbox;display:flex;position:relative}:host([typography=\"detail\"]) .input{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}:host([typography=\"snippet\"]) .input{min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.input{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;margin:0rem;border-radius:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);border:0;-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:rgb(var(--tone-neutral-02));max-width:100%;min-height:3rem;overflow:hidden;text-overflow:ellipsis;-webkit-transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, margin, opacity, padding, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform;transition-property:background-color, border-color, box-shadow, color, fill, margin, opacity, padding, transform, -webkit-box-shadow, -webkit-transform;width:100%}.input::-moz-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-moz-transition-property:color;transition-property:color}.input::-webkit-input-placeholder{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-webkit-transition-property:color;transition-property:color}.input:-ms-input-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-ms-transition-property:color;transition-property:color}.input::-ms-input-placeholder{transition-duration:300ms;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-ms-transition-property:color;transition-property:color}.input::placeholder{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-input-placeholder-default-color);-webkit-transition-property:color;transition-property:color}.input:hover::-moz-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::-webkit-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover:-ms-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::-ms-input-placeholder{color:var(--mds-input-placeholder-hover-color)}.input:hover::placeholder{color:var(--mds-input-placeholder-hover-color)}.input:focus::-moz-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::-webkit-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus:-ms-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::-ms-input-placeholder{color:var(--mds-input-placeholder-focus-color)}.input:focus::placeholder{color:var(--mds-input-placeholder-focus-color)}.input::-webkit-outer-spin-button,.input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}:host textarea.input,:host([typography]) textarea.input{border-bottom-right-radius:0;field-sizing:var(--mds-input-textarea-field-sizing);max-height:var(--mds-input-textarea-max-height);min-height:var(--mds-input-textarea-min-height);overflow:auto;resize:var(--mds-input-textarea-resize)}.input:focus{outline:2px solid transparent;outline-offset:2px;--mds-input-ring:0 0 0 3px rgb(var(--mds-input-variant-color) / 1);--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)}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.input.has-icon{padding-left:2.75rem}.input.has-right-icon{padding-right:2.75rem}.await,.icon{left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color));position:absolute}.await{color:rgb(var(--mds-input-icon-color));height:24px;width:24px}.counter{border-left:var(--mds-input-controls-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0;position:absolute;right:0}.counter-button{height:1.5rem;width:1.75rem;border-radius:0.5rem;--mds-button-background:transparent;border:0;fill:var(--mds-input-controls-color);min-height:0;padding:0}.counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-09))}.counter .counter-button:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.counter .counter-button:last-child{border-bottom-left-radius:0;border-top-left-radius:0;border-top-right-radius:0}.counter-button--horizontal{height:3rem;width:3rem;bottom:0;position:absolute;top:0}.counter-button--decrease{border-bottom-right-radius:0;border-right:var(--mds-input-controls-border);border-top-right-radius:0;left:0}.counter-button--increase{border-bottom-left-radius:0;border-left:var(--mds-input-controls-border);border-top-left-radius:0;right:0}.password-toggle-button{top:0.375rem;right:0.375rem;fill:var(--mds-input-controls-color);position:absolute}.mic-toggle-button{top:0.375rem;right:0.375rem;fill:var(--mds-input-controls-color);position:absolute}.toggle-button--error{cursor:help;fill:rgb(var(--tone-neutral-06))}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.mic-toggle-button--recording{-webkit-animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}:host([type=\"number\"]) .input{-moz-appearance:textfield;padding-right:2rem}:host([type=\"number\"][controls-layout=\"horizontal\"]) .input{padding-left:3.5rem;padding-right:3.5rem;text-align:center}:host([type=\"number\"][controls-layout=\"horizontal\"][icon]) .input{padding-left:6rem;text-align:left}:host([type=\"number\"][controls-layout=\"horizontal\"]) .icon{left:3.75rem}:host([type=\"password\"]) .input{padding-right:2.5rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:-moz-placeholder-shown){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:-ms-input-placeholder){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"password\"]:not(:placeholder-shown){font-size:3rem;max-height:3rem}:host([type=\"password\"]) .input[type=\"text\"]:not(:-moz-placeholder-shown){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"password\"]) .input[type=\"text\"]:not(:-ms-input-placeholder){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"password\"]) .input[type=\"text\"]:not(:placeholder-shown){min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=\"cf\"]) .input{min-height:1.5rem;font-family:'Roboto Mono', 'Courier New', monospace;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase}:host{--mds-input-icon-color:var(--variant-primary-03);--mds-input-variant-color:0 0 0}:host(:focus){--mds-input-variant-color:var(--variant-primary-04)}:host([variant=\"ai\"]){--mds-input-icon-color:var(--variant-ai-05);--mds-input-tip-background:var(--variant-ai-05);--mds-input-variant-color:0 0 0}:host([variant=\"ai\"]:focus){--mds-input-icon-color:var(--variant-ai-04);--mds-input-variant-color:var(--variant-ai-05)}:host([variant=\"info\"]){--mds-input-icon-color:var(--status-info-05);--mds-input-tip-background:var(--status-info-05);--mds-input-variant-color:0 0 0}:host([variant=\"info\"]:focus){--mds-input-icon-color:var(--status-info-04);--mds-input-variant-color:var(--status-info-05)}:host([variant=\"success\"]){--mds-input-icon-color:var(--status-success-05);--mds-input-tip-background:var(--status-success-05);--mds-input-variant-color:0 0 0}:host([variant=\"success\"]:focus){--mds-input-icon-color:var(--status-success-04);--mds-input-variant-color:var(--status-success-05)}:host([variant=\"warning\"]){--mds-input-icon-color:var(--status-warning-05);--mds-input-tip-background:var(--status-warning-05);--mds-input-variant-color:0 0 0}:host([variant=\"warning\"]:focus){--mds-input-icon-color:var(--status-warning-04);--mds-input-variant-color:var(--status-warning-05)}:host([variant=\"error\"]){--mds-input-icon-color:var(--status-error-05);--mds-input-tip-background:var(--status-error-05);--mds-input-variant-color:0 0 0}:host([variant=\"error\"]:focus){--mds-input-icon-color:var(--status-error-04);--mds-input-variant-color:var(--status-error-05)}:host-context(.pref-animation-reduce) .input{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system) .input{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-dark) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06))}:host-context(.pref-theme-system) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08))}}:host-context(.pref-contrast-more){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-input-ring:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);--mds-input-background:rgb(var(--tone-neutral-09));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05))}:host-context(.pref-contrast-more) .input::-moz-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input:-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::-ms-input-placeholder{color:rgb(var(--tone-neutral-03))}:host-context(.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsInputStyle0 = mdsInputCss;
 
 const MdsInput = class {
@@ -1372,10 +1372,6 @@ const MdsInput = class {
         this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
         this.maxLengthChanged(this.maxlength);
         this.isValid = !(this.required && this.value === '');
-        this.el.focus = () => {
-            var _a;
-            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-        };
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -1491,21 +1487,21 @@ const MdsInput = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '6c3728c33cf55c79ffa444d89154255695baf62b' }, this.type === 'number'
+        return (h(Host, { key: '37a82d87e412a45a2d7564860f7d595764fee556' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '0e2e5e0644bd6b3aad3b8b12df734abfc309927e', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: '6bd04aec103d606aac4c172a31be7fb2b341563d', 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', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: '48fd016a7a0917ba5c669789ed373221e8e920d7', class: "counter counter--vertical" }, h("mds-button", { key: '8507fb252cbb8a92bc1b9cce05df97e01e900593', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'c22c5b5370f3121645f053b3c3d91e7fc5933a08', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: '2ce0de98e1f0547b5daa743189a13080d73cba31', class: "counter counter--vertical" }, h("mds-button", { key: '9ec2a7d8019366e70a8aebf488ec807716aac352', 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: '55f008a250a94496113e22a02e7ca2eeb4f7867f', 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: '10215d151779798d8b77d44e7bac708f1c737939', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: 'f97e9aeb646697bd63ec7cf152bbe56ff41f7902', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
-            && h("mds-button", { key: 'e293ab7cc45fa62973830e6a8d50a4752f9b9a3c', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: '5f0fbae757653b1d3bcbb2a24bc8f897d37f24fc', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '4f0b400762f31ee29d767afccca5daf3d37734f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '4ebf8150c21ccf4ebb3bff559735305d5df69fd1', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '96af6b54e03f634a604193579772c076b5857eb4', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '4b57532ce1640feba598504f9d53a024bdd56f43', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: 'c54fc1e7903946ab4d6b8a77beb54df3fc108ba0', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '60f23a6717e8effc1b01064349fa78df198b89e4', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
-            h("datalist", { key: '7ff09a4e142d4e070b55c2bd6101eacae8f91889', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+            && h("mds-button", { key: 'fbb1723f79b1b17dceafb543b0524a9bc457f76b', 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: 'cbd5545565544f2bedbf29d8746240790d8db257', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), this.mic
+            && h("mds-button", { key: '805f84eb8e0079d938c441f9f028648dcf8efcab', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", variant: "dark", tone: "quiet", title: this.speechToTextLabel, part: "mic-toggle-button" }), h("mds-input-tip", { key: 'a94febae08842c64ee0f573738e4962b653ca539', lang: this.language, position: "top", active: this.hasFocus, part: 'tip-top' }, this.disabled && h("mds-input-tip-item", { key: '33319e21a25524b0f4304ea736ccc20a7286edf3', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '20d3641f406da2b33ea64b4dac9e990041952e3a', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '85a47f7e5948246165dfa291e54286704fa1b3fe', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' })), h("mds-input-tip", { key: '1263940f43227eb5d5d051d3d0502aaa815a3636', lang: this.language, position: "bottom", active: this.hasFocus, part: 'tip-bottom' }, this.tip && h("mds-input-tip-item", { key: '2857a15bdd167a3c96dd1bc29b05dc4367c60b02', expanded: true, variant: "text" }, this.tip), this.maxlength && h("mds-input-tip-item", { key: '5d648cccc76697d7f5b2e43b866c083a2e1f6fb5', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel)), this.datalist &&
+            h("datalist", { key: '61ed22d7c6244498362c15bc42853c0e8cb6ec76', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
                 return h("option", { key: i, value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '12f4bb73d9edec126cf5b86c2d83e646c1504e78', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: 'a8453e655fb3d09ccd1ed4c3a9a388414dd6e4fe', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: '606f8240dd93ff3bf05cdf96785d56aec5bfa2f5', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '133b80f0f07120b30485846d93bb9d963ca1112f', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }