@maggioli-design-system/mds-input 5.8.0 → 5.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/cjs/mds-input.cjs.entry.js +1 -1
  2. package/dist/collection/components/mds-input/mds-input.css +2 -2
  3. package/dist/components/mds-input.js +1 -1
  4. package/dist/documentation.json +1 -1
  5. package/dist/esm/mds-input.entry.js +1 -1
  6. package/dist/esm-es5/mds-input.entry.js +1 -1
  7. package/dist/mds-input/mds-input.esm.js +1 -1
  8. package/dist/mds-input/{p-2f346383.entry.js → p-43934a8d.entry.js} +1 -1
  9. package/dist/mds-input/p-92707e12.system.js +1 -1
  10. package/dist/mds-input/p-c02f60bd.system.entry.js +1 -0
  11. package/dist/stats.json +15 -15
  12. package/documentation.json +6 -1
  13. package/package.json +1 -1
  14. package/src/components/mds-input/mds-input.css +2 -1
  15. package/src/components/mds-input/mds-input.tsx +6 -0
  16. package/src/fixtures/icons.json +6 -0
  17. package/src/fixtures/iconsauce.json +6 -0
  18. package/www/build/mds-input.esm.js +1 -1
  19. package/www/build/{p-2f346383.entry.js → p-43934a8d.entry.js} +1 -1
  20. package/www/build/p-92707e12.system.js +1 -1
  21. package/www/build/p-c02f60bd.system.entry.js +1 -0
  22. package/dist/mds-input/p-07fcb40d.system.entry.js +0 -1
  23. package/www/build/p-07fcb40d.system.entry.js +0 -1
package/dist/cjs/mds-input.cjs.entry.js CHANGED
@@ -16,7 +16,7 @@ const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
16
16
 
17
17
  const miBaselineDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>`;
18
18
 
19
- const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n padding: 0rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
19
+ const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
20
20
 
21
21
  const MdsInput = class {
22
22
  constructor(hostRef) {
package/dist/collection/components/mds-input/mds-input.css CHANGED
@@ -392,12 +392,12 @@ textarea.input{
392
392
 
393
393
  border-radius: 0.5rem;
394
394
 
395
- padding: 0rem;
396
-
397
395
  --mds-button-background: transparent;
398
396
  --mds-button-icon-color: var(--mds-input-controls-color);
399
397
 
400
398
  border: 0;
399
+ min-height: 0;
400
+ padding: 0;
401
401
  }
402
402
 
403
403
  .counter-button:hover {
package/dist/components/mds-input.js CHANGED
@@ -12,7 +12,7 @@ const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
12
12
 
13
13
  const miBaselineDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>`;
14
14
 
15
- const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n padding: 0rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
15
+ const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
16
16
 
17
17
  const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLElement {
18
18
  constructor() {
package/dist/documentation.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-03-15T10:10:12",
2
+ "timestamp": "2024-04-17T15:18:58",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.10.0",
package/dist/esm/mds-input.entry.js CHANGED
@@ -12,7 +12,7 @@ const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
12
12
 
13
13
  const miBaselineDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>`;
14
14
 
15
- const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n padding: 0rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
15
+ const mdsInputCss = "*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography=\"snippet\"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: 'Roboto Mono', 'Courier New', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type=\"number\"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=\"\"]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type=\"number\"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type=\"number\"][controls-layout=\"horizontal\"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=\"\"]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n";
16
16
 
17
17
  const MdsInput = class {
18
18
  constructor(hostRef) {
package/dist/esm-es5/mds-input.entry.js CHANGED
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(n,t,i,r){function o(n){return n instanceof i?n:new i((function(t){t(n)}))}return new(i||(i=Promise))((function(i,e){function a(n){try{l(r.next(n))}catch(n){e(n)}}function s(n){try{l(r["throw"](n))}catch(n){e(n)}}function l(n){n.done?i(n.value):o(n.value).then(a,s)}l((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var i={label:0,sent:function(){if(e[0]&1)throw e[1];return e[1]},trys:[],ops:[]},r,o,e,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(n){return function(t){return l([n,t])}}function l(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(i=0)),i)try{if(r=1,o&&(e=s[0]&2?o["return"]:s[0]?o["throw"]||((e=o["return"])&&e.call(o),0):o.next)&&!(e=e.call(o,s[1])).done)return e;if(o=0,e)s=[s[0]&2,e.value];switch(s[0]){case 0:case 1:e=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;o=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(e=i.trys,e=e.length>0&&e[e.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!e||s[1]>e[0]&&s[1]<e[3])){i.label=s[1];break}if(s[0]===6&&i.label<e[1]){i.label=e[1];e=s;break}if(e&&i.label<e[2]){i.label=e[2];i.ops.push(s);break}if(e[2])i.ops.pop();i.trys.pop();continue}s=t.call(n,i)}catch(n){s=[6,n];o=0}finally{r=e=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-0e58948f.js";function r(n){var t,i,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(t=0;t<e;t++)n[t]&&(i=r(n[t]))&&(o&&(o+=" "),o+=i)}else for(i in n)n[i]&&(o&&(o+=" "),o+=i);return o}function clsx(){for(var n,t,i=0,o="",e=arguments.length;i<e;i++)(n=arguments[i])&&(t=r(n))&&(o&&(o+=" "),o+=t);return o}var miBaselineAdd='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>';var miBaselineArrowDown='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var miBaselineArrowUp='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>';var miBaselineRemove='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>';var miBaselineDone='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>';var mdsInputCss='*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="snippet"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n padding: 0rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type="number"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type="number"][controls-layout="horizontal"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type="number"][controls-layout="horizontal"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type="number"][controls-layout="horizontal"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=""]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=""]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=""]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=""]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type="number"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type="number"][controls-layout="horizontal"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=""]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n';var MdsInput=function(){function n(n){var t=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputChange",7);this.keyDownEvent=createEvent(this,"mdsInputKeydown",7);this.blurEvent=createEvent(this,"mdsInputBlur",7);this.focusEvent=createEvent(this,"mdsInputFocus",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.onInput=function(n){var i=n.target;if(i){t.value=i.value;t.internals.setFormValue(t.value)}t.keyDownEvent.emit(n)};this.onBlur=function(){t.hasFocus=false;t.blurEvent.emit()};this.onFocus=function(n){var i=n.target;t.hasFocus=true;t.focusEvent.emit();if(t.readonly){setTimeout((function(){i.select()}),10)}};this.stepUp=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepUp();t.value=t.nativeInput.value}};this.stepDown=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepDown();t.value=t.nativeInput.value}};this.hasFocus=false;this.autocomplete="off";this.autofocus=false;this.await=false;this.controlsLayout="vertical";this.controlsIcon="arrow";this.controlIncreaseLabel="Aumenta";this.controlDecreaseLabel="Riduci";this.datalist=undefined;this.disabled=false;this.disabledLabel="disattivato";this.icon=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.name=undefined;this.pattern=undefined;this.placeholder="";this.readonly=false;this.readonlyLabel="sola lettura";this.required=false;this.requiredLabel="obbligatorio";this.variant=undefined;this.tip=undefined;this.step=undefined;this.type="text";this.typography="detail";this.value=""}n.prototype.componentWillLoad=function(){var n;if(this.el.hasAttribute("tabindex")){var t=this.el.getAttribute("tabindex");this.tabindex=t!==null?parseInt(t):undefined;this.el.removeAttribute("tabindex")}this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null)};n.prototype.valueChanged=function(){var n;this.changeEvent.emit({value:this.value});this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null)};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};n.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};n.prototype.render=function(){var n=this;var t,i;return h(Host,null,this.type==="number"&&this.controlsLayout==="horizontal"&&h("mds-button",{class:"counter-button counter-button--horizontal counter-button--decrease",icon:this.controlsIcon==="arrow"?miBaselineArrowDown:miBaselineRemove,onClick:this.stepDown,role:"button",tabindex:"0",title:this.controlDecreaseLabel,part:"counter-button-decrease"}),this.type==="textarea"?h("textarea",{class:clsx("input",((t=this.icon)!==null&&t!==void 0?t:this.await)&&"has-icon"),autoFocus:this.autofocus,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,part:"field",placeholder:this.placeholder,readOnly:this.readonly,ref:function(t){return n.nativeInput=t},required:this.required,tabIndex:this.tabindex,value:this.value}):h("input",{class:clsx("input",((i=this.icon)!==null&&i!==void 0?i:this.await)&&"has-icon"),autoComplete:this.autocomplete,autoFocus:this.autofocus,disabled:this.disabled,max:this.max,maxLength:this.maxlength,min:this.min,minLength:this.minlength,name:this.name,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,pattern:this.pattern,list:this.datalist&&"datalist",part:"field",placeholder:this.placeholder,readOnly:this.readonly,ref:function(t){return n.nativeInput=t},required:this.required,step:this.step,tabIndex:this.tabindex,type:this.type,value:this.value}),this.type==="number"&&this.controlsLayout==="vertical"&&h("div",{class:"counter counter--vertical"},h("mds-button",{class:"counter-button",icon:this.controlsIcon==="arrow"?miBaselineArrowUp:miBaselineAdd,onClick:this.stepUp,role:"button",tabindex:"0",title:this.controlIncreaseLabel,part:"counter-button-increase"}),h("mds-button",{class:"counter-button",icon:this.controlsIcon==="arrow"?miBaselineArrowDown:miBaselineRemove,onClick:this.stepDown,role:"button",tabindex:"0",title:this.controlDecreaseLabel,part:"counter-button-decrease"})),this.type==="number"&&this.controlsLayout==="horizontal"&&h("mds-button",{class:"counter-button counter-button--horizontal counter-button--increase",icon:this.controlsIcon==="arrow"?miBaselineArrowUp:miBaselineAdd,onClick:this.stepUp,role:"button",tabindex:"0",title:this.controlIncreaseLabel,part:"counter-button-increase"}),h("div",{class:"tip-container tip-container--top"},this.disabled&&h("div",{class:"tip tip--expanded tip--disabled"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.disabledLabel)))),this.readonly&&h("div",{class:"tip tip--expanded tip--read-only"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.readonlyLabel)))),this.required&&h("div",{class:"tip tip--expand tip--required"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.requiredLabel),h("span",{class:"tip__icon svg",innerHTML:miBaselineDone}))))),h("div",{class:"tip-container tip-container--bottom"},this.tip&&h("div",{class:"tip tip--expanded tip--variant"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.tip))))),this.datalist&&h("datalist",{id:"datalist",class:"datalist"},this.datalist.forEach((function(n){h("option",{value:n})}))),this.icon&&!this.await&&h("mds-icon",{class:clsx("icon",this.variant),name:this.icon}),h("mds-spinner",{running:this.await,class:clsx("await",this.variant)}))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}();MdsInput.style=mdsInputCss;export{MdsInput as mds_input};
1
+ var __awaiter=this&&this.__awaiter||function(n,t,i,r){function o(n){return n instanceof i?n:new i((function(t){t(n)}))}return new(i||(i=Promise))((function(i,e){function a(n){try{l(r.next(n))}catch(n){e(n)}}function s(n){try{l(r["throw"](n))}catch(n){e(n)}}function l(n){n.done?i(n.value):o(n.value).then(a,s)}l((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var i={label:0,sent:function(){if(e[0]&1)throw e[1];return e[1]},trys:[],ops:[]},r,o,e,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(n){return function(t){return l([n,t])}}function l(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(i=0)),i)try{if(r=1,o&&(e=s[0]&2?o["return"]:s[0]?o["throw"]||((e=o["return"])&&e.call(o),0):o.next)&&!(e=e.call(o,s[1])).done)return e;if(o=0,e)s=[s[0]&2,e.value];switch(s[0]){case 0:case 1:e=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;o=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(e=i.trys,e=e.length>0&&e[e.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!e||s[1]>e[0]&&s[1]<e[3])){i.label=s[1];break}if(s[0]===6&&i.label<e[1]){i.label=e[1];e=s;break}if(e&&i.label<e[2]){i.label=e[2];i.ops.push(s);break}if(e[2])i.ops.pop();i.trys.pop();continue}s=t.call(n,i)}catch(n){s=[6,n];o=0}finally{r=e=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-0e58948f.js";function r(n){var t,i,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(t=0;t<e;t++)n[t]&&(i=r(n[t]))&&(o&&(o+=" "),o+=i)}else for(i in n)n[i]&&(o&&(o+=" "),o+=i);return o}function clsx(){for(var n,t,i=0,o="",e=arguments.length;i<e;i++)(n=arguments[i])&&(t=r(n))&&(o&&(o+=" "),o+=t);return o}var miBaselineAdd='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>';var miBaselineArrowDown='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var miBaselineArrowUp='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>';var miBaselineRemove='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>';var miBaselineDone='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>';var mdsInputCss='*, ::before, ::after{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::-ms-backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n\n::backdrop{\n\n --tw-border-spacing-x: 0;\n\n --tw-border-spacing-y: 0;\n\n --tw-translate-x: 0;\n\n --tw-translate-y: 0;\n\n --tw-rotate: 0;\n\n --tw-skew-x: 0;\n\n --tw-skew-y: 0;\n\n --tw-scale-x: 1;\n\n --tw-scale-y: 1;\n\n --tw-pan-x: ;\n\n --tw-pan-y: ;\n\n --tw-pinch-zoom: ;\n\n --tw-scroll-snap-strictness: proximity;\n\n --tw-gradient-from-position: ;\n\n --tw-gradient-via-position: ;\n\n --tw-gradient-to-position: ;\n\n --tw-ordinal: ;\n\n --tw-slashed-zero: ;\n\n --tw-numeric-figure: ;\n\n --tw-numeric-spacing: ;\n\n --tw-numeric-fraction: ;\n\n --tw-ring-inset: ;\n\n --tw-ring-offset-width: 0px;\n\n --tw-ring-offset-color: #fff;\n\n --tw-ring-color: rgb(59 130 246 / 0.5);\n\n --tw-ring-offset-shadow: 0 0 #0000;\n\n --tw-ring-shadow: 0 0 #0000;\n\n --tw-shadow: 0 0 #0000;\n\n --tw-shadow-colored: 0 0 #0000;\n\n --tw-blur: ;\n\n --tw-brightness: ;\n\n --tw-contrast: ;\n\n --tw-grayscale: ;\n\n --tw-hue-rotate: ;\n\n --tw-invert: ;\n\n --tw-saturate: ;\n\n --tw-sepia: ;\n\n --tw-drop-shadow: ;\n\n --tw-backdrop-blur: ;\n\n --tw-backdrop-brightness: ;\n\n --tw-backdrop-contrast: ;\n\n --tw-backdrop-grayscale: ;\n\n --tw-backdrop-hue-rotate: ;\n\n --tw-backdrop-invert: ;\n\n --tw-backdrop-opacity: ;\n\n --tw-backdrop-saturate: ;\n\n --tw-backdrop-sepia: ;\n}\n@tailwind utilities;\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-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\n --mds-input-background: rgb(var(--tone-neutral));\n --mds-input-icon-color: var(--mds-input-variant-color);\n --mds-input-tip-background: 84 84 84;\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-variant-color: 0 0 0;\n --mds-input-controls-color: rgb(var(--tone-neutral-04));\n --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));\n --mds-input-textarea-min-height: 6rem;\n --mds-input-textarea-max-height: 16rem;\n --mds-input-textarea-field-sizing: content;\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 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\n min-height: 1.5rem;\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n:host( [typography="snippet"] ) .input{\n\n min-height: 1.5rem;\n\n font-family: \'Roboto Mono\', \'Courier New\', monospace;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n}\n\n.input{\n\n font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n font-size: 1rem;\n\n line-height: 1.5rem;\n\n -webkit-font-smoothing: antialiased;\n\n -moz-osx-font-smoothing: grayscale;\n\n margin: 0rem;\n\n border-radius: 0.5rem;\n\n padding-left: 1rem;\n\n padding-right: 1rem;\n\n padding-top: 0.75rem;\n\n padding-bottom: 0.75rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n 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 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::-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\ntextarea.input{\n\n resize: vertical;\n\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}\n\n.input:focus{\n\n outline: 2px solid transparent;\n\n outline-offset: 2px;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n --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\n padding-left: 2.75rem;\n}\n\n\n.await,\n.icon{\n\n left: 0.75rem;\n\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\n height: 1.5rem;\n\n width: 1.75rem;\n\n border-radius: 0.5rem;\n\n --mds-button-background: transparent;\n --mds-button-icon-color: var(--mds-input-controls-color);\n\n border: 0;\n min-height: 0;\n padding: 0;\n}\n\n.counter-button:hover {\n\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\n height: 3rem;\n\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:host( [type="number"] ) .input{\n\n padding-right: 2rem;\n}\n\n:host( [type="number"][controls-layout="horizontal"] ) .input{\n\n padding-left: 3.5rem;\n\n padding-right: 3.5rem;\n\n text-align: center;\n}\n\n:host( [type="number"][controls-layout="horizontal"][icon] ) .input{\n\n padding-left: 6rem;\n\n text-align: left;\n}\n\n\n:host( [type="number"][controls-layout="horizontal"] ) .icon{\n\n left: 3.75rem;\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.w-min{\n\n width: -moz-min-content;\n\n width: -webkit-min-content;\n\n width: min-content;\n}\n\n.gap-400{\n\n gap: 1rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.truncate{\n\n overflow: hidden;\n\n text-overflow: ellipsis;\n\n white-space: nowrap;\n}\n\n.rounded{\n\n border-radius: 0.25rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-08{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-08) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n:host {\n\n --mds-input-icon-color: var(--brand-maggioli-03);\n --mds-input-variant-color: 0 0 0;\n}\n\n:host( :focus ) {\n\n --mds-input-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\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\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\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\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\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\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\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\n --mds-input-icon-color: var(--status-error-04);\n --mds-input-variant-color: var(--status-error-05);\n}\n\n.tip-container{\n\n left: 0.25rem;\n\n right: 0.25rem;\n\n gap: 0.25rem;\n\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-pack: end;\n justify-content: flex-end;\n pointer-events: none;\n position: absolute;\n}\n\n.tip-container:empty {\n display: none;\n}\n\n.tip-container--top {\n top: 0.25rem;\n}\n\n.tip-container--bottom {\n bottom: 0.25rem;\n}\n\n.tip{\n\n height: 0.75rem;\n\n border-radius: 0.375rem;\n\n -webkit-transition-duration: 300ms;\n\n transition-duration: 300ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgb(var(--mds-input-tip-background));\n color: transparent;\n color: rgb(var(--tone-neutral));\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n -ms-flex-pack: center;\n justify-content: center;\n min-width: 0.75rem;\n padding: 0;\n pointer-events: none;\n position: static;\n text-align: center;\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, -webkit-transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform;\n transition-property: background-color, border-radius, color, padding-left, padding-right, transform, -webkit-transform;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tip__content{\n\n height: 0.75rem;\n\n -webkit-transition-duration: 200ms;\n\n transition-duration: 200ms;\n\n -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n display: grid;\n grid-template-columns: 0fr;\n opacity: 0;\n overflow: hidden;\n -webkit-transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity;\n transition-property: grid-template-columns, opacity, -ms-grid-columns;\n}\n\n.tip__text {\n -webkit-transform: translate(0, 1px);\n transform: translate(0, 1px);\n}\n\n.tip__icon{\n\n height: 0.75rem;\n\n width: 0.75rem;\n\n display: none;\n}\n\n:host(:focus-within) .tip-container--top {\n -webkit-transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host(:focus-within) .tip-container--bottom {\n -webkit-transform: translate(calc(0.25rem * -1), 0.25rem);\n transform: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host(:focus-within) .tip-container--top .tip {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host(:focus-within) .tip-container--bottom .tip {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.tip--expanded,\n:host(:focus-within) .tip--expand{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.tip--expanded .tip__content,\n:host(:focus-within) .tip--expand .tip__content,\n:host( [value]:not([value=""]) ) .tip--expand .tip__content {\n grid-template-columns: 1fr;\n opacity: 1;\n}\n\n:host( [value]:not([value=""]) ) .tip--expand .tip__text {\n display: none;\n}\n\n:host( [value]:not([value=""]) ) .tip__icon {\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([value]:not([value=""]):focus-within) .tip--expand {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host( [type="number"] ) .tip-container{\n\n right: 2.25rem;\n}\n\n:host( [type="number"][controls-layout="horizontal"] ) .tip-container{\n\n left: 3.5rem;\n\n right: 3.5rem;\n}\n\n:host( [value]:not([value=""]) ) .tip--required {\n\n --mds-input-tip-background: var(--status-success-05);\n}\n\n.tip--required {\n\n --mds-input-tip-background: var(--status-error-05);\n}\n\n.tip--read-only {\n\n --mds-input-tip-background: var(--status-info-05);\n}\n\n.tip--disabled {\n\n --mds-input-tip-background: var(--tone-neutral-05);\n}\n\n\n@container (max-width: 210px) {\n :host .tip__content,\n :host(:focus-within) .tip__content {\n grid-template-columns: 0fr;\n opacity: 0;\n }\n\n :host .tip {\n padding-left: 0;\n padding-right: 0;\n }\n\n :host {\n\n --mds-input-background: rgb(var(--brand-maggioli-07));\n }\n}\n';var MdsInput=function(){function n(n){var t=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputChange",7);this.keyDownEvent=createEvent(this,"mdsInputKeydown",7);this.blurEvent=createEvent(this,"mdsInputBlur",7);this.focusEvent=createEvent(this,"mdsInputFocus",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.onInput=function(n){var i=n.target;if(i){t.value=i.value;t.internals.setFormValue(t.value)}t.keyDownEvent.emit(n)};this.onBlur=function(){t.hasFocus=false;t.blurEvent.emit()};this.onFocus=function(n){var i=n.target;t.hasFocus=true;t.focusEvent.emit();if(t.readonly){setTimeout((function(){i.select()}),10)}};this.stepUp=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepUp();t.value=t.nativeInput.value}};this.stepDown=function(){if(t.nativeInput&&!t.readonly&&!t.disabled){t.nativeInput.stepDown();t.value=t.nativeInput.value}};this.hasFocus=false;this.autocomplete="off";this.autofocus=false;this.await=false;this.controlsLayout="vertical";this.controlsIcon="arrow";this.controlIncreaseLabel="Aumenta";this.controlDecreaseLabel="Riduci";this.datalist=undefined;this.disabled=false;this.disabledLabel="disattivato";this.icon=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.name=undefined;this.pattern=undefined;this.placeholder="";this.readonly=false;this.readonlyLabel="sola lettura";this.required=false;this.requiredLabel="obbligatorio";this.variant=undefined;this.tip=undefined;this.step=undefined;this.type="text";this.typography="detail";this.value=""}n.prototype.componentWillLoad=function(){var n;if(this.el.hasAttribute("tabindex")){var t=this.el.getAttribute("tabindex");this.tabindex=t!==null?parseInt(t):undefined;this.el.removeAttribute("tabindex")}this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null)};n.prototype.valueChanged=function(){var n;this.changeEvent.emit({value:this.value});this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null)};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};n.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};n.prototype.render=function(){var n=this;var t,i;return h(Host,null,this.type==="number"&&this.controlsLayout==="horizontal"&&h("mds-button",{class:"counter-button counter-button--horizontal counter-button--decrease",icon:this.controlsIcon==="arrow"?miBaselineArrowDown:miBaselineRemove,onClick:this.stepDown,role:"button",tabindex:"0",title:this.controlDecreaseLabel,part:"counter-button-decrease"}),this.type==="textarea"?h("textarea",{class:clsx("input",((t=this.icon)!==null&&t!==void 0?t:this.await)&&"has-icon"),autoFocus:this.autofocus,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,part:"field",placeholder:this.placeholder,readOnly:this.readonly,ref:function(t){return n.nativeInput=t},required:this.required,tabIndex:this.tabindex,value:this.value}):h("input",{class:clsx("input",((i=this.icon)!==null&&i!==void 0?i:this.await)&&"has-icon"),autoComplete:this.autocomplete,autoFocus:this.autofocus,disabled:this.disabled,max:this.max,maxLength:this.maxlength,min:this.min,minLength:this.minlength,name:this.name,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,pattern:this.pattern,list:this.datalist&&"datalist",part:"field",placeholder:this.placeholder,readOnly:this.readonly,ref:function(t){return n.nativeInput=t},required:this.required,step:this.step,tabIndex:this.tabindex,type:this.type,value:this.value}),this.type==="number"&&this.controlsLayout==="vertical"&&h("div",{class:"counter counter--vertical"},h("mds-button",{class:"counter-button",icon:this.controlsIcon==="arrow"?miBaselineArrowUp:miBaselineAdd,onClick:this.stepUp,role:"button",tabindex:"0",title:this.controlIncreaseLabel,part:"counter-button-increase"}),h("mds-button",{class:"counter-button",icon:this.controlsIcon==="arrow"?miBaselineArrowDown:miBaselineRemove,onClick:this.stepDown,role:"button",tabindex:"0",title:this.controlDecreaseLabel,part:"counter-button-decrease"})),this.type==="number"&&this.controlsLayout==="horizontal"&&h("mds-button",{class:"counter-button counter-button--horizontal counter-button--increase",icon:this.controlsIcon==="arrow"?miBaselineArrowUp:miBaselineAdd,onClick:this.stepUp,role:"button",tabindex:"0",title:this.controlIncreaseLabel,part:"counter-button-increase"}),h("div",{class:"tip-container tip-container--top"},this.disabled&&h("div",{class:"tip tip--expanded tip--disabled"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.disabledLabel)))),this.readonly&&h("div",{class:"tip tip--expanded tip--read-only"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.readonlyLabel)))),this.required&&h("div",{class:"tip tip--expand tip--required"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.requiredLabel),h("span",{class:"tip__icon svg",innerHTML:miBaselineDone}))))),h("div",{class:"tip-container tip-container--bottom"},this.tip&&h("div",{class:"tip tip--expanded tip--variant"},h("div",{class:"tip__content"},h("mds-text",{typography:"option",truncate:"word"},h("span",{class:"tip__text"},this.tip))))),this.datalist&&h("datalist",{id:"datalist",class:"datalist"},this.datalist.forEach((function(n){h("option",{value:n})}))),this.icon&&!this.await&&h("mds-icon",{class:clsx("icon",this.variant),name:this.icon}),h("mds-spinner",{running:this.await,class:clsx("await",this.variant)}))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}();MdsInput.style=mdsInputCss;export{MdsInput as mds_input};
package/dist/mds-input/mds-input.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as a}from"./p-534509b0.js";export{s as setNonce}from"./p-534509b0.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((e=>a([["p-2f346383",[[65,"mds-input",{autocomplete:[513],autofocus:[516],await:[516],controlsLayout:[513,"controls-layout"],controlsIcon:[513,"controls-icon"],controlIncreaseLabel:[513,"control-increase-label"],controlDecreaseLabel:[513,"control-decrease-label"],datalist:[16],disabled:[516],disabledLabel:[513,"disabled-label"],icon:[513],max:[513],maxlength:[514],min:[520],minlength:[514],name:[513],pattern:[513],placeholder:[513],readonly:[516],readonlyLabel:[513,"readonly-label"],required:[516],requiredLabel:[513,"required-label"],variant:[513],tip:[513],step:[513],type:[513],typography:[513],value:[1537],hasFocus:[32],setFocus:[64],getInputElement:[64]},null,{value:["valueChanged"]}]]]],e)));
1
+ import{p as e,b as a}from"./p-534509b0.js";export{s as setNonce}from"./p-534509b0.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((e=>a([["p-43934a8d",[[65,"mds-input",{autocomplete:[513],autofocus:[516],await:[516],controlsLayout:[513,"controls-layout"],controlsIcon:[513,"controls-icon"],controlIncreaseLabel:[513,"control-increase-label"],controlDecreaseLabel:[513,"control-decrease-label"],datalist:[16],disabled:[516],disabledLabel:[513,"disabled-label"],icon:[513],max:[513],maxlength:[514],min:[520],minlength:[514],name:[513],pattern:[513],placeholder:[513],readonly:[516],readonlyLabel:[513,"readonly-label"],required:[516],requiredLabel:[513,"required-label"],variant:[513],tip:[513],step:[513],type:[513],typography:[513],value:[1537],hasFocus:[32],setFocus:[64],getInputElement:[64]},null,{value:["valueChanged"]}]]]],e)));