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

package/dist/cjs/{index-d13bd48d.js → index-a4879d20.js}

@@ -972,6 +972,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             maybePromise = safeCall(instance, 'componentWillLoad');
         }
     }
+    {
+        maybePromise = enqueue(maybePromise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };

package/dist/cjs/loader.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d13bd48d.js');
+const index = require('./index-a4879d20.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["mds-input.cjs",[[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"]}]]]], options);
+  return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d13bd48d.js');
+const index = require('./index-a4879d20.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -14,9 +14,42 @@ const miBaselineArrowUp = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 
 const miBaselineRemove = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>`;
 
-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>`;
+class Locale {
+    constructor(configData) {
+        this.defaultLanguage = 'en';
+        this.lang = (element) => {
+            const closestElement = element.closest('[lang]');
+            if (closestElement) {
+                if (closestElement.lang) {
+                    this.language = closestElement.lang;
+                    return;
+                }
+            }
+            this.language = this.defaultLanguage;
+        };
+        this.get = (tag) => {
+            var _a;
+            return (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
+        };
+        this.config = configData;
+    }
+}
 
-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";
+const increase$1 = "Increase";
+const decrease$1 = "Decrease";
+const localeEn = {
+	increase: increase$1,
+	decrease: decrease$1
+};
+
+const increase = "Aumenta";
+const decrease = "Diminuisci";
+const localeIt = {
+	increase: increase,
+	decrease: decrease
+};
+
+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.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\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";
 
 const MdsInput = class {
     constructor(hostRef) {
@@ -32,6 +65,10 @@ const MdsInput = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this.t = new Locale({
+            en: localeEn,
+            it: localeIt,
+        });
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -78,7 +115,6 @@ const MdsInput = class {
         this.controlDecreaseLabel = 'Riduci';
         this.datalist = undefined;
         this.disabled = false;
-        this.disabledLabel = 'disattivato';
         this.icon = undefined;
         this.max = undefined;
         this.maxlength = undefined;
@@ -88,9 +124,7 @@ const MdsInput = class {
         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;
@@ -135,21 +169,21 @@ const MdsInput = class {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return Promise.resolve(this.nativeInput);
     }
+    componentWillRender() {
+        this.t.lang(this.el);
+    }
     render() {
         var _a, _b;
         return (index.h(index.Host, null, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.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'
+            && index.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.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? index.h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : index.h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), 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: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && index.h("div", { class: "counter counter--vertical" }, index.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" }), index.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'
+            && index.h("div", { class: "counter counter--vertical" }, index.h("mds-button", { class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), index.h("mds-button", { class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && index.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" }), index.h("div", { class: "tip-container tip-container--top" }, this.disabled &&
-            index.h("div", { class: "tip tip--expanded tip--disabled" }, index.h("div", { class: "tip__content" }, index.h("mds-text", { typography: "option", truncate: "word" }, index.h("span", { class: "tip__text" }, this.disabledLabel)))), this.readonly &&
-            index.h("div", { class: "tip tip--expanded tip--read-only" }, index.h("div", { class: "tip__content" }, index.h("mds-text", { typography: "option", truncate: "word" }, index.h("span", { class: "tip__text" }, this.readonlyLabel)))), this.required &&
-            index.h("div", { class: "tip tip--expand tip--required" }, index.h("div", { class: "tip__content" }, index.h("mds-text", { typography: "option", truncate: "word" }, index.h("span", { class: "tip__text" }, this.requiredLabel), index.h("span", { class: "tip__icon svg", innerHTML: miBaselineDone }))))), index.h("div", { class: "tip-container tip-container--bottom" }, this.tip &&
-            index.h("div", { class: "tip tip--expanded tip--variant" }, index.h("div", { class: "tip__content" }, index.h("mds-text", { typography: "option", truncate: "word" }, index.h("span", { class: "tip__text" }, this.tip))))), this.datalist &&
+            && index.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.t.get('increase'), part: "counter-button-increase" }), index.h("mds-input-tip", { position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { expanded: true, variant: "readonly" }), this.required &&
+            index.h("mds-input-tip-item", { expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), index.h("mds-input-tip", { position: "bottom", active: this.hasFocus }, this.tip && index.h("mds-input-tip-item", { expanded: true, variant: "text" }, this.tip)), this.datalist &&
             index.h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 index.h("option", { value: element });
             })), this.icon && !this.await && index.h("mds-icon", { class: clsx('icon', this.variant), name: this.icon }), index.h("mds-spinner", { running: this.await, class: clsx('await', this.variant) })));

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d13bd48d.js');
+const index = require('./index-a4879d20.js');
 
 /*
  Stencil Client Patch Browser v4.10.0 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-input.cjs",[[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"]}]]]], options);
+  return index.bootstrapLazy([["mds-input.cjs",[[65,"mds-input",{"autocomplete":[513],"autofocus":[516],"await":[516],"controlsLayout":[513,"controls-layout"],"controlsIcon":[513,"controls-icon"],"controlIncreaseLabel":[513,"control-increase-label"],"controlDecreaseLabel":[513,"control-decrease-label"],"datalist":[16],"disabled":[516],"icon":[513],"max":[513],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"variant":[513],"tip":[513],"step":[513],"type":[513],"typography":[513],"value":[1537],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]},null,{"value":["valueChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/locale.js

@@ -0,0 +1,20 @@
+export class Locale {
+    constructor(configData) {
+        this.defaultLanguage = 'en';
+        this.lang = (element) => {
+            const closestElement = element.closest('[lang]');
+            if (closestElement) {
+                if (closestElement.lang) {
+                    this.language = closestElement.lang;
+                    return;
+                }
+            }
+            this.language = this.defaultLanguage;
+        };
+        this.get = (tag) => {
+            var _a;
+            return (_a = this.config[this.language][tag]) !== null && _a !== void 0 ? _a : this.config[this.defaultLanguage][tag];
+        };
+        this.config = configData;
+    }
+}

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

@@ -506,15 +506,6 @@ textarea.input{
   gap: 1.5rem;
 }
 
-.truncate{
-
-  overflow: hidden;
-
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-}
-
 .rounded{
 
   border-radius: 0.25rem;
@@ -794,175 +785,6 @@ textarea.input{
   --mds-input-variant-color: var(--status-error-05);
 }
 
-.tip-container{
-
-  left: 0.25rem;
-
-  right: 0.25rem;
-
-  gap: 0.25rem;
-
-  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
-
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-  transition-duration: 300ms;
-
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-
-  display: flex;
-  justify-content: flex-end;
-  pointer-events: none;
-  position: absolute;
-}
-
-.tip-container:empty {
-  display: none;
-}
-
-.tip-container--top {
-  top: 0.25rem;
-}
-
-.tip-container--bottom {
-  bottom: 0.25rem;
-}
-
-.tip{
-
-  height: 0.75rem;
-
-  border-radius: 0.375rem;
-
-  transition-duration: 300ms;
-
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-
-  align-items: center;
-  background-color: rgb(var(--mds-input-tip-background));
-  color: transparent;
-  color: rgb(var(--tone-neutral));
-  display: flex;
-  fill: rgb(var(--tone-neutral));
-  justify-content: center;
-  min-width: 0.75rem;
-  padding: 0;
-  pointer-events: none;
-  position: static;
-  text-align: center;
-  transform: translate(0, 0);
-  transition-property: background-color, border-radius, color, padding-left, padding-right, transform;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-.tip__content{
-
-  height: 0.75rem;
-
-  transition-duration: 200ms;
-
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-
-  display: grid;
-  grid-template-columns: 0fr;
-  opacity: 0;
-  overflow: hidden;
-  transition-property: grid-template-columns, opacity;
-}
-
-.tip__text {
-  transform: translate(0, 1px);
-}
-
-.tip__icon{
-
-  height: 0.75rem;
-
-  width: 0.75rem;
-
-  display: none;
-}
-
-:host(:focus-within) .tip-container--top {
-  transform: translate(calc(0.25rem * -1), calc(0.25rem * -1));
-}
-
-:host(:focus-within) .tip-container--bottom {
-  transform: translate(calc(0.25rem * -1), 0.25rem);
-}
-
-:host(:focus-within) .tip-container--top .tip {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-:host(:focus-within) .tip-container--bottom .tip {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.tip--expanded,
-:host(:focus-within) .tip--expand{
-
-  padding-left: 0.5rem;
-
-  padding-right: 0.5rem;
-}
-
-.tip--expanded .tip__content,
-:host(:focus-within) .tip--expand .tip__content,
-:host( [value]:not([value=""]) ) .tip--expand .tip__content {
-  grid-template-columns: 1fr;
-  opacity: 1;
-}
-
-:host( [value]:not([value=""]) ) .tip--expand .tip__text {
-  display: none;
-}
-
-:host( [value]:not([value=""]) ) .tip__icon {
-  display: flex;
-}
-
-:host([value]:not([value=""]):focus-within) .tip--expand {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-:host( [type="number"] ) .tip-container{
-
-  right: 2.25rem;
-}
-
-:host( [type="number"][controls-layout="horizontal"] ) .tip-container{
-
-  left: 3.5rem;
-
-  right: 3.5rem;
-}
-
-:host( [value]:not([value=""]) ) .tip--required {
-
-  --mds-input-tip-background: var(--status-success-05);
-}
-
-.tip--required {
-
-  --mds-input-tip-background: var(--status-error-05);
-}
-
-.tip--read-only {
-
-  --mds-input-tip-background: var(--status-info-05);
-}
-
-.tip--disabled {
-
-  --mds-input-tip-background: var(--tone-neutral-05);
-}
-
 
 @container (max-width: 210px) {
   :host .tip__content,

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

@@ -3,10 +3,16 @@ import miBaselineAdd from "@icon/mi/baseline/add.svg";
 import miBaselineArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import miBaselineArrowUp from "@icon/mi/baseline/keyboard-arrow-up.svg";
 import miBaselineRemove from "@icon/mi/baseline/remove.svg";
-import miBaselineDone from "@icon/mi/baseline/done.svg";
 import { Host, h } from "@stencil/core";
+import { Locale } from "../../common/locale";
+import localeEn from "./meta/locale.en.json";
+import localeIt from "./meta/locale.it.json";
 export class MdsInput {
     constructor() {
+        this.t = new Locale({
+            en: localeEn,
+            it: localeIt,
+        });
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -53,7 +59,6 @@ export class MdsInput {
         this.controlDecreaseLabel = 'Riduci';
         this.datalist = undefined;
         this.disabled = false;
-        this.disabledLabel = 'disattivato';
         this.icon = undefined;
         this.max = undefined;
         this.maxlength = undefined;
@@ -63,9 +68,7 @@ export class MdsInput {
         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;
@@ -110,21 +113,21 @@ export class MdsInput {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return Promise.resolve(this.nativeInput);
     }
+    componentWillRender() {
+        this.t.lang(this.el);
+    }
     render() {
         var _a, _b;
         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("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.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), 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: input => (this.nativeInput = input), 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'
+            && 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.t.get('increase'), 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.t.get('decrease'), 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("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.t.get('increase'), part: "counter-button-increase" }), h("mds-input-tip", { position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { expanded: true, variant: "text" }, this.tip)), this.datalist &&
             h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 h("option", { value: element });
             })), 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) })));
@@ -321,24 +324,6 @@ export class MdsInput {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "disabledLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the label for the displayed state disabled"
-                },
-                "attribute": "disabled-label",
-                "reflect": true,
-                "defaultValue": "'disattivato'"
-            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -494,24 +479,6 @@ export class MdsInput {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "readonlyLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the label for the displayed state read-only"
-                },
-                "attribute": "readonly-label",
-                "reflect": true,
-                "defaultValue": "'sola lettura'"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -530,24 +497,6 @@ export class MdsInput {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "requiredLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the label for the displayed state required"
-                },
-                "attribute": "required-label",
-                "reflect": true,
-                "defaultValue": "'obbligatorio'"
-            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -708,7 +657,7 @@ export class MdsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits a KeyboardEvent when a keboard key is pressed on the focused input element"
+                    "text": "Emits a KeyboardEvent when a keyboard key is pressed on the focused input element"
                 },
                 "complexType": {
                     "original": "KeyboardEvent",