@maggioli-design-system/mds-input 3.0.2 → 3.0.3

package/dist/cjs/{index-ce0af7c1.js → index-b844ce43.js}

@@ -31,6 +31,7 @@ const NAMESPACE = 'mds-input';
  * Modified for Stencil's renderer and slot projection
  */
 let scopeId;
+let hostTagName;
 let isSvgMode = false;
 let queuePending = false;
 const createTime = (fnName, tagName = '') => {
@@ -70,7 +71,6 @@ const isComplexType = (o) => {
  *
  * Modified for Stencil's compiler and vdom
  */
-// const stack: any[] = [];
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
@@ -264,7 +264,7 @@ const attachStyles = (hostRef) => {
     const elm = hostRef.$hostElement$;
     const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(elm.getRootNode(), cmpMeta);
+    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
     if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
         // only required when we're NOT using native shadow dom (slot)
         // or this browser doesn't support native shadow dom
@@ -275,9 +275,6 @@ const attachStyles = (hostRef) => {
         // DOM WRITE!!
         elm['s-sc'] = scopeId;
         elm.classList.add(scopeId + '-h');
-        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
-            elm.classList.add(scopeId + '-s');
-        }
     }
     endAttachStyles();
 };
@@ -456,6 +453,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
+    if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
     for (; startIdx <= endIdx; ++startIdx) {
         if (vnodes[startIdx]) {
             childNode = createElm(null, parentVNode, startIdx);
@@ -730,6 +730,7 @@ const renderVdom = (hostRef, renderFnResults) => {
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+    hostTagName = hostElm.tagName;
     if (cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
         cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
@@ -737,7 +738,7 @@ const renderVdom = (hostRef, renderFnResults) => {
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
-    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
+    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
     {
         scopeId = hostElm['s-sc'];
     }
@@ -1221,6 +1222,17 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     super(self);
                     self = this;
                     registerHost(self, cmpMeta);
+                    if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
+                        {
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
+                        }
+                    }
                 }
                 connectedCallback() {
                     if (appLoadFallback) {

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce0af7c1.js');
+const index = require('./index-b844ce43.js');
 
 /*
- Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.21.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["mds-input.cjs",[[2,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"variantTip":[1,"variant-tip"],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
+  return index.bootstrapLazy([["mds-input.cjs",[[1,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"tip":[1],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
   });
 };
 

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce0af7c1.js');
+const index = require('./index-b844ce43.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))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const mdsInputCss = "*.sc-mds-input,.sc-mds-input::before,.sc-mds-input::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.sc-mds-input::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.sc-mds-input::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}@tailwind utilities; .sc-mds-input-h{--icon-color:rgb(var(--tone-neutral));--background:rgb(var(--tone-neutral));--variant-color:0, 0, 0;--ring:0 0 0 1px rgba(var(--variant-color), 0.1);--shadow:0 1px 3px 0 rgba(var(--variant-color), 0.1), 0 1px 2px 0 rgba(var(--variant-color), 0.06);font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input.sc-mds-input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--background);-webkit-box-shadow:var(--ring), var(--shadow);box-shadow:var(--ring), var(--shadow)}textarea.input.sc-mds-input:active{-webkit-transition-property:none;transition-property:none}textarea.input.sc-mds-input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input.sc-mds-input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--variant-color:10, 80, 212;--ring:0 0 0 3px rgba(var(--variant-color), 1);--shadow:0 4px 6px -1px rgba(var(--variant-color), 0.1), 0 2px 4px -1px rgba(var(--variant-color), 0.06);-webkit-box-shadow:var(--ring), var(--shadow);box-shadow:var(--ring), var(--shadow)}.input.sc-mds-input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-10), var(--tw-bg-opacity))}.input.sc-mds-input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled,.input.sc-mds-input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.has-icon.sc-mds-input{padding-left:2.75rem}.tip.sc-mds-input,.tip-variant.sc-mds-input{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem}.read-only.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required.sc-mds-input{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--tone-neutral), var(--tw-text-opacity));--tw-text-opacity:0}.disabled.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-05), var(--tw-bg-opacity))}.input.sc-mds-input:focus+.required.sc-mds-input{width:6rem;--tw-text-opacity:1}.icon.sc-mds-input{position:absolute;left:0.75rem;top:0.75rem;fill:rgb(var(--brand-maggioli-04))}.fixed.sc-mds-input{position:fixed}.absolute.sc-mds-input{position:absolute}.top-1.sc-mds-input{top:0.25rem}.bottom-1.sc-mds-input{bottom:0.25rem}.flex.sc-mds-input{display:-ms-flexbox;display:flex}.w-min.sc-mds-input{width:-moz-min-content;width:-webkit-min-content;width:min-content}.flex-col.sc-mds-input{-ms-flex-direction:column;flex-direction:column}.gap-y-2.sc-mds-input{row-gap:0.5rem}.border.sc-mds-input{border-width:1px}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input{--variant-color:30, 174, 221}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-info-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-info-06), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=success].sc-mds-input).sc-mds-input{--variant-color:32, 184, 111}.sc-mds-input-h(.sc-mds-input [variant=success].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-success-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=success].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-success-06), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=warning].sc-mds-input).sc-mds-input{--variant-color:204, 153, 0}.sc-mds-input-h(.sc-mds-input [variant=warning].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-warning-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=warning].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-warning-06), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=error].sc-mds-input).sc-mds-input{--variant-color:158, 21, 18}.sc-mds-input-h(.sc-mds-input [variant=error].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-error-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=error].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-error-06), var(--tw-text-opacity))}";
+const mdsInputCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}@tailwind utilities; :host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-tip-background:84, 84, 84;--mds-input-ring:0 0 0 1px rgba(var(--mds-input-variant-color), 0.1);--mds-input-shadow:0 1px 3px 0 rgba(var(--mds-input-variant-color), 0.1), 0 1px 2px 0 rgba(var(--mds-input-variant-color), 0.06);--mds-input-variant-color:0, 0, 0;font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow)}textarea.input:active{-webkit-transition-property:none;transition-property:none}textarea.input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-ring:0 0 0 3px rgba(var(--mds-input-variant-color), 1);--mds-input-shadow:0 4px 6px -1px rgba(var(--mds-input-variant-color), 0.1), 0 2px 4px -1px rgba(var(--mds-input-variant-color), 0.06)}.input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-10), var(--tw-bg-opacity))}.input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled,.input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.has-icon{padding-left:2.75rem}.tip{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem;background-color:rgb(var(--mds-input-tip-background))}.tip-variant{--mds-input-tip-background:var(--mds-input-icon-color)}.read-only{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--tone-neutral), var(--tw-text-opacity));--tw-text-opacity:0}.disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-05), var(--tw-bg-opacity))}.input:focus+.required{width:6rem;--tw-text-opacity:1}.icon{position:absolute;left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color))}.fixed{position:fixed}.absolute{position:absolute}.top-1{top:0.25rem}.bottom-1{bottom:0.25rem}.flex{display:-ms-flexbox;display:flex}.w-min{width:-moz-min-content;width:-webkit-min-content;width:min-content}.flex-col{-ms-flex-direction:column;flex-direction:column}.gap-y-2{row-gap:0.5rem}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-input-icon-color:10, 80, 212;--mds-input-variant-color:0, 0, 0}:host(:focus){--mds-input-variant-color:31, 101, 232;}:host([variant=info]){--mds-input-icon-color:25, 143, 182;--mds-input-variant-color:0, 0, 0}:host([variant=info]:focus){--mds-input-icon-color:21, 119, 151;--mds-input-variant-color:25, 143, 182;}:host([variant=success]){--mds-input-icon-color:26, 151, 91;--mds-input-variant-color:0, 0, 0}:host([variant=success]:focus){--mds-input-icon-color:22, 125, 76;--mds-input-variant-color:26, 151, 91;}:host([variant=warning]){--mds-input-icon-color:168, 126, 0;--mds-input-variant-color:0, 0, 0}:host([variant=warning]:focus){--mds-input-icon-color:139, 104, 0;--mds-input-variant-color:168, 126, 0;}:host([variant=error]){--mds-input-icon-color:234, 77, 73;--mds-input-variant-color:0, 0, 0}:host([variant=error]:focus){--mds-input-icon-color:215, 29, 25;--mds-input-variant-color:234, 77, 73;}";
 
 const MdsInput = class {
   constructor(hostRef) {
@@ -54,7 +54,7 @@ const MdsInput = class {
     this.readonly = false;
     this.required = false;
     this.variant = undefined;
-    this.variantTip = undefined;
+    this.tip = undefined;
     this.step = undefined;
     this.type = 'text';
     this.value = '';
@@ -99,7 +99,7 @@ const MdsInput = class {
     const value = this.getValue();
     return (index.h(index.Host, null, this.type === 'textarea'
       ? index.h("textarea", { class: clsx('input', this.icon && '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, placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
-      : index.h("input", { class: clsx('input', this.icon && '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', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.required && index.h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && index.h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.variant && this.variantTip && index.h("mds-text", { typography: "option", class: "tip-variant bottom-1" }, this.variantTip), this.datalist &&
+      : index.h("input", { class: clsx('input', this.icon && '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', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && !this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.required && !this.disabled && !this.readonly && index.h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.tip && index.h("mds-text", { typography: "option", class: clsx('tip bottom-1', this.variant && 'tip-variant') }, this.tip), this.datalist &&
       index.h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
         index.h("option", { value: element });
       })), this.icon && index.h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-ce0af7c1.js');
+const index = require('./index-b844ce43.js');
 
 /*
- Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.21.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-input.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mds-input.cjs",[[2,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"variantTip":[1,"variant-tip"],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
+  return index.bootstrapLazy([["mds-input.cjs",[[1,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"tip":[1],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.3",
-    "typescriptVersion": "4.7.4"
+    "version": "2.21.0",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [],
   "bundles": []

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

@@ -182,17 +182,22 @@
 @tailwind utilities;
 
 /**
-* @prop --background: Sets the background-color of the component
-* @prop --shadow: Sets the box-shadow of the component‘s input
+* @prop --mds-input-background: Sets the background-color of the component
+* @prop --mds-input-icon-color: Sets the icon color of the component
+* @prop --mds-input-ring: Sets the box-shadow of the component's input
+* @prop --mds-input-shadow: Sets the box-shadow of the component's input
+* @prop --mds-input-tip-background: Sets the background color of the tip message at the bottom right of the component
+* @prop --mds-input-variant-color: Sets the variant colors of the component
 */
 
 :host {
 
-  --icon-color: rgb(var(--tone-neutral));
-  --background: rgb(var(--tone-neutral));
-  --variant-color: 0, 0, 0;
-  --ring: 0 0 0 1px rgba(var(--variant-color), 0.1);
-  --shadow: 0 1px 3px 0 rgba(var(--variant-color), 0.1), 0 1px 2px 0 rgba(var(--variant-color), 0.06);
+  --mds-input-background: rgb(var(--tone-neutral));
+  --mds-input-icon-color: var(--mds-input-variant-color);
+  --mds-input-tip-background: 84, 84, 84;
+  --mds-input-ring: 0 0 0 1px rgba(var(--mds-input-variant-color), 0.1);
+  --mds-input-shadow: 0 1px 3px 0 rgba(var(--mds-input-variant-color), 0.1), 0 1px 2px 0 rgba(var(--mds-input-variant-color), 0.06);
+  --mds-input-variant-color: 0, 0, 0;
   font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -252,8 +257,8 @@
 
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
-  background-color: var(--background);
-  box-shadow: var(--ring), var(--shadow);
+  background-color: var(--mds-input-background);
+  box-shadow: var(--mds-input-ring), var(--mds-input-shadow);
 }
 
 textarea.input:active{
@@ -284,11 +289,8 @@ textarea.input{
 
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
-  --variant-color: 10, 80, 212;
-  --ring: 0 0 0 3px rgba(var(--variant-color), 1);
-  --shadow: 0 4px 6px -1px rgba(var(--variant-color), 0.1), 0 2px 4px -1px rgba(var(--variant-color), 0.06);
-
-  box-shadow: var(--ring), var(--shadow);
+  --mds-input-ring: 0 0 0 3px rgba(var(--mds-input-variant-color), 1);
+  --mds-input-shadow: 0 4px 6px -1px rgba(var(--mds-input-variant-color), 0.1), 0 2px 4px -1px rgba(var(--mds-input-variant-color), 0.06);
 }
 
 .input:disabled{
@@ -318,8 +320,7 @@ textarea.input{
   padding-left: 2.75rem;
 }
 
-.tip,
-.tip-variant{
+.tip{
 
   pointer-events: none;
 
@@ -352,6 +353,11 @@ textarea.input{
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
   line-height: 0.75rem;
+  background-color: rgb(var(--mds-input-tip-background));
+}
+
+.tip-variant {
+  --mds-input-tip-background: var(--mds-input-icon-color);
 }
 
 .read-only{
@@ -402,7 +408,7 @@ textarea.input{
 
   top: 0.75rem;
 
-  fill: rgb(var(--brand-maggioli-04));
+  fill: rgb(var(--mds-input-icon-color));
 }
 
 .fixed{
@@ -452,95 +458,70 @@ textarea.input{
   border-width: 1px;
 }
 
-:host ( [variant=info] ) {
-
-  --variant-color: 30, 174, 221; /* status-info-06 */
-}
-
-:host ( [variant=info] ) .tip-variant{
-
-  --tw-bg-opacity: 1;
+.shadow{
 
-  background-color: rgba(var(--status-info-06), var(--tw-bg-opacity));
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
-  --tw-text-opacity: 1;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
 
-  color: rgba(var(--tone-neutral), var(--tw-text-opacity));
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host ( [variant=info] ) .icon{
-
-  --tw-text-opacity: 1;
-
-  color: rgba(var(--status-info-06), var(--tw-text-opacity));
+:host {
+  --mds-input-icon-color: 10, 80, 212; /* brand-maggioli-03 */
+  --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=success] ) {
+:host ( :focus ) {
 
-  --variant-color: 32, 184, 111; /* status-success-06 */
+  --mds-input-variant-color: 31, 101, 232; /* brand-maggioli-04 */
 }
 
-:host ( [variant=success] ) .tip-variant{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgba(var(--status-success-06), var(--tw-bg-opacity));
-
-  --tw-text-opacity: 1;
+:host ( [variant=info] ) {
 
-  color: rgba(var(--tone-neutral), var(--tw-text-opacity));
+  --mds-input-icon-color: 25, 143, 182; /* status-info-05 */
+  --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=success] ) .icon{
+:host ( [variant=info]:focus ) {
 
-  --tw-text-opacity: 1;
-
-  color: rgba(var(--status-success-06), var(--tw-text-opacity));
+  --mds-input-icon-color: 21, 119, 151; /* status-info-04 */
+  --mds-input-variant-color: 25, 143, 182; /* status-info-05 */
 }
 
-:host ( [variant=warning] ) {
+:host ( [variant=success] ) {
 
-  --variant-color: 204, 153, 0; /* status-warning-06 */
+  --mds-input-icon-color: 26, 151, 91; /* status-success-05 */
+  --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=warning] ) .tip-variant{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgba(var(--status-warning-06), var(--tw-bg-opacity));
-
-  --tw-text-opacity: 1;
+:host ( [variant=success]:focus ) {
 
-  color: rgba(var(--tone-neutral), var(--tw-text-opacity));
+  --mds-input-icon-color: 22, 125, 76; /* status-success-04 */
+  --mds-input-variant-color: 26, 151, 91; /* status-success-05 */
 }
 
-:host ( [variant=warning] ) .icon{
-
-  --tw-text-opacity: 1;
+:host ( [variant=warning] ) {
 
-  color: rgba(var(--status-warning-06), var(--tw-text-opacity));
+  --mds-input-icon-color: 168, 126, 0; /* status-warning-05 */
+  --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=error] ) {
+:host ( [variant=warning]:focus ) {
 
-  --variant-color: 158, 21, 18; /* status-error-06 */
+  --mds-input-icon-color: 139, 104, 0; /* status-warning-04 */
+  --mds-input-variant-color: 168, 126, 0; /* status-warning-05 */
 }
 
-:host ( [variant=error] ) .tip-variant{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgba(var(--status-error-06), var(--tw-bg-opacity));
-
-  --tw-text-opacity: 1;
+:host ( [variant=error] ) {
 
-  color: rgba(var(--tone-neutral), var(--tw-text-opacity));
+  --mds-input-icon-color: 234, 77, 73; /* status-error-05 */
+  --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=error] ) .icon{
-
-  --tw-text-opacity: 1;
+:host ( [variant=error]:focus ) {
 
-  color: rgba(var(--status-error-06), var(--tw-text-opacity));
+  --mds-input-icon-color: 215, 29, 25; /* status-error-04 */
+  --mds-input-variant-color: 234, 77, 73; /* status-error-05 */
 }
 

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

@@ -41,7 +41,7 @@ export class MdsInput {
     this.readonly = false;
     this.required = false;
     this.variant = undefined;
-    this.variantTip = undefined;
+    this.tip = undefined;
     this.step = undefined;
     this.type = 'text';
     this.value = '';
@@ -86,13 +86,13 @@ export class MdsInput {
     const value = this.getValue();
     return (h(Host, null, this.type === 'textarea'
       ? h("textarea", { class: clsx('input', this.icon && '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, placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
-      : h("input", { class: clsx('input', this.icon && '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', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.required && h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.disabled && h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.variant && this.variantTip && h("mds-text", { typography: "option", class: "tip-variant bottom-1" }, this.variantTip), this.datalist &&
+      : h("input", { class: clsx('input', this.icon && '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', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.disabled && h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && !this.disabled && h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.required && !this.disabled && !this.readonly && h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.tip && h("mds-text", { typography: "option", class: clsx('tip bottom-1', this.variant && 'tip-variant') }, this.tip), this.datalist &&
       h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
         h("option", { value: element });
       })), this.icon && h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
   }
   static get is() { return "mds-input"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["mds-input.css"]
@@ -373,7 +373,7 @@ export class MdsInput {
         "attribute": "variant",
         "reflect": true
       },
-      "variantTip": {
+      "tip": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -385,9 +385,9 @@ export class MdsInput {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Sets the word(s) of the variant of the input field"
+          "text": "Sets the word(s) of the tip of the input field"
         },
-        "attribute": "variant-tip",
+        "attribute": "tip",
         "reflect": false
       },
       "step": {
@@ -421,7 +421,7 @@ export class MdsInput {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Specifies the type of input element"

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

@@ -77,7 +77,7 @@ export default {
       control: { type: 'select' },
       description: 'Sets the variant of the input field',
     },
-    'variant-tip': {
+    tip: {
       type: { name: 'string' },
       description: 'Sets the message of the variant of the input field',
     },
@@ -130,11 +130,16 @@ readOnly.args = {
   readOnly: true,
   value: 'This is a read only field',
 };
-export const status = Template.bind({});
-status.args = {
-  status: 'error',
+export const variant = Template.bind({});
+variant.args = {
+  variant: 'error',
   placeholder: 'Status input field',
-  'status-tip': 'errore',
+  tip: 'errore',
+};
+export const tip = Template.bind({});
+tip.args = {
+  placeholder: 'Scrivi qualcosa...',
+  tip: 'input',
 };
 export const search = Template.bind({});
 search.args = {

package/dist/components/mds-input.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 
 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))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const mdsInputCss = "*.sc-mds-input,.sc-mds-input::before,.sc-mds-input::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.sc-mds-input::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.sc-mds-input::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}@tailwind utilities; .sc-mds-input-h{--icon-color:rgb(var(--tone-neutral));--background:rgb(var(--tone-neutral));--variant-color:0, 0, 0;--ring:0 0 0 1px rgba(var(--variant-color), 0.1);--shadow:0 1px 3px 0 rgba(var(--variant-color), 0.1), 0 1px 2px 0 rgba(var(--variant-color), 0.06);font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input.sc-mds-input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--background);-webkit-box-shadow:var(--ring), var(--shadow);box-shadow:var(--ring), var(--shadow)}textarea.input.sc-mds-input:active{-webkit-transition-property:none;transition-property:none}textarea.input.sc-mds-input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input.sc-mds-input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--variant-color:10, 80, 212;--ring:0 0 0 3px rgba(var(--variant-color), 1);--shadow:0 4px 6px -1px rgba(var(--variant-color), 0.1), 0 2px 4px -1px rgba(var(--variant-color), 0.06);-webkit-box-shadow:var(--ring), var(--shadow);box-shadow:var(--ring), var(--shadow)}.input.sc-mds-input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-10), var(--tw-bg-opacity))}.input.sc-mds-input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled,.input.sc-mds-input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.has-icon.sc-mds-input{padding-left:2.75rem}.tip.sc-mds-input,.tip-variant.sc-mds-input{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem}.read-only.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required.sc-mds-input{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--tone-neutral), var(--tw-text-opacity));--tw-text-opacity:0}.disabled.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-05), var(--tw-bg-opacity))}.input.sc-mds-input:focus+.required.sc-mds-input{width:6rem;--tw-text-opacity:1}.icon.sc-mds-input{position:absolute;left:0.75rem;top:0.75rem;fill:rgb(var(--brand-maggioli-04))}.fixed.sc-mds-input{position:fixed}.absolute.sc-mds-input{position:absolute}.top-1.sc-mds-input{top:0.25rem}.bottom-1.sc-mds-input{bottom:0.25rem}.flex.sc-mds-input{display:-ms-flexbox;display:flex}.w-min.sc-mds-input{width:-moz-min-content;width:-webkit-min-content;width:min-content}.flex-col.sc-mds-input{-ms-flex-direction:column;flex-direction:column}.gap-y-2.sc-mds-input{row-gap:0.5rem}.border.sc-mds-input{border-width:1px}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input{--variant-color:30, 174, 221}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-info-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-info-06), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=success].sc-mds-input).sc-mds-input{--variant-color:32, 184, 111}.sc-mds-input-h(.sc-mds-input [variant=success].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-success-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=success].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-success-06), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=warning].sc-mds-input).sc-mds-input{--variant-color:204, 153, 0}.sc-mds-input-h(.sc-mds-input [variant=warning].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-warning-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=warning].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-warning-06), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=error].sc-mds-input).sc-mds-input{--variant-color:158, 21, 18}.sc-mds-input-h(.sc-mds-input [variant=error].sc-mds-input).sc-mds-input .tip-variant.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--status-error-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity))}.sc-mds-input-h(.sc-mds-input [variant=error].sc-mds-input).sc-mds-input .icon.sc-mds-input{--tw-text-opacity:1;color:rgba(var(--status-error-06), var(--tw-text-opacity))}";
+const mdsInputCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}@tailwind utilities; :host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-tip-background:84, 84, 84;--mds-input-ring:0 0 0 1px rgba(var(--mds-input-variant-color), 0.1);--mds-input-shadow:0 1px 3px 0 rgba(var(--mds-input-variant-color), 0.1), 0 1px 2px 0 rgba(var(--mds-input-variant-color), 0.06);--mds-input-variant-color:0, 0, 0;font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow)}textarea.input:active{-webkit-transition-property:none;transition-property:none}textarea.input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-ring:0 0 0 3px rgba(var(--mds-input-variant-color), 1);--mds-input-shadow:0 4px 6px -1px rgba(var(--mds-input-variant-color), 0.1), 0 2px 4px -1px rgba(var(--mds-input-variant-color), 0.06)}.input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-10), var(--tw-bg-opacity))}.input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled,.input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.has-icon{padding-left:2.75rem}.tip{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem;background-color:rgb(var(--mds-input-tip-background))}.tip-variant{--mds-input-tip-background:var(--mds-input-icon-color)}.read-only{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--tone-neutral), var(--tw-text-opacity));--tw-text-opacity:0}.disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-05), var(--tw-bg-opacity))}.input:focus+.required{width:6rem;--tw-text-opacity:1}.icon{position:absolute;left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color))}.fixed{position:fixed}.absolute{position:absolute}.top-1{top:0.25rem}.bottom-1{bottom:0.25rem}.flex{display:-ms-flexbox;display:flex}.w-min{width:-moz-min-content;width:-webkit-min-content;width:min-content}.flex-col{-ms-flex-direction:column;flex-direction:column}.gap-y-2{row-gap:0.5rem}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-input-icon-color:10, 80, 212;--mds-input-variant-color:0, 0, 0}:host(:focus){--mds-input-variant-color:31, 101, 232;}:host([variant=info]){--mds-input-icon-color:25, 143, 182;--mds-input-variant-color:0, 0, 0}:host([variant=info]:focus){--mds-input-icon-color:21, 119, 151;--mds-input-variant-color:25, 143, 182;}:host([variant=success]){--mds-input-icon-color:26, 151, 91;--mds-input-variant-color:0, 0, 0}:host([variant=success]:focus){--mds-input-icon-color:22, 125, 76;--mds-input-variant-color:26, 151, 91;}:host([variant=warning]){--mds-input-icon-color:168, 126, 0;--mds-input-variant-color:0, 0, 0}:host([variant=warning]:focus){--mds-input-icon-color:139, 104, 0;--mds-input-variant-color:168, 126, 0;}:host([variant=error]){--mds-input-icon-color:234, 77, 73;--mds-input-variant-color:0, 0, 0}:host([variant=error]:focus){--mds-input-icon-color:215, 29, 25;--mds-input-variant-color:234, 77, 73;}";
 
 const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.changeEvent = createEvent(this, "changeEvent", 7);
     this.keyDownEvent = createEvent(this, "keyDownEvent", 7);
     this.blurEvent = createEvent(this, "blurEvent", 7);
@@ -51,7 +52,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.readonly = false;
     this.required = false;
     this.variant = undefined;
-    this.variantTip = undefined;
+    this.tip = undefined;
     this.step = undefined;
     this.type = 'text';
     this.value = '';
@@ -96,7 +97,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const value = this.getValue();
     return (h(Host, null, this.type === 'textarea'
       ? h("textarea", { class: clsx('input', this.icon && '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, placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
-      : h("input", { class: clsx('input', this.icon && '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', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.required && h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.disabled && h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.variant && this.variantTip && h("mds-text", { typography: "option", class: "tip-variant bottom-1" }, this.variantTip), this.datalist &&
+      : h("input", { class: clsx('input', this.icon && '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', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.disabled && h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && !this.disabled && h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.required && !this.disabled && !this.readonly && h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.tip && h("mds-text", { typography: "option", class: clsx('tip bottom-1', this.variant && 'tip-variant') }, this.tip), this.datalist &&
       h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
         h("option", { value: element });
       })), this.icon && h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
@@ -106,7 +107,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "value": ["valueChanged"]
   }; }
   static get style() { return mdsInputCss; }
-}, [2, "mds-input", {
+}, [1, "mds-input", {
     "autocomplete": [1],
     "autofocus": [4],
     "datalist": [16],
@@ -122,7 +123,7 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "readonly": [4],
     "required": [4],
     "variant": [513],
-    "variantTip": [1, "variant-tip"],
+    "tip": [1],
     "step": [1],
     "type": [1],
     "value": [8],