@maggioli-design-system/mds-input 3.1.0 → 4.1.0

package/dist/cjs/{index-673e91e1.js → index-e46754eb.js}

@@ -133,6 +133,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -147,6 +155,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -468,6 +482,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -484,6 +513,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -676,7 +718,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -743,6 +786,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-673e91e1.js');
+const index = require('./index-e46754eb.js');
 
 /*
- Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

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

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-673e91e1.js');
+const index = require('./index-e46754eb.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 = "*,::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 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}.bottom-1{bottom:0.25rem}.top-1{top: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) {
     index.registerInstance(this, hostRef);
-    this.changeEvent = index.createEvent(this, "changeEvent", 7);
-    this.keyDownEvent = index.createEvent(this, "keyDownEvent", 7);
-    this.blurEvent = index.createEvent(this, "blurEvent", 7);
-    this.focusEvent = index.createEvent(this, "focusEvent", 7);
+    this.changeEvent = index.createEvent(this, "mdsInputChange", 7);
+    this.keyDownEvent = index.createEvent(this, "mdsInputKeydown", 7);
+    this.blurEvent = index.createEvent(this, "mdsInputBlur", 7);
+    this.focusEvent = index.createEvent(this, "mdsInputFocus", 7);
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
-        this.value = input.value || '';
+        this.value = input.value;
       }
       this.keyDownEvent.emit(ev);
     };
@@ -50,7 +50,7 @@ const MdsInput = class {
     this.minlength = undefined;
     this.name = undefined;
     this.pattern = undefined;
-    this.placeholder = undefined;
+    this.placeholder = '';
     this.readonly = false;
     this.required = false;
     this.variant = undefined;
@@ -73,7 +73,7 @@ const MdsInput = class {
    * Emits the change event when the component value changes
    */
   valueChanged() {
-    this.changeEvent.emit({ value: this.value === null ? this.value : this.value.toString() });
+    this.changeEvent.emit({ value: this.value });
   }
   /**
    * Sets focus on the specified `my-input`.
@@ -81,7 +81,7 @@ const MdsInput = class {
    * of the global `input.focus()`.
    */
   async setFocus() {
-    if (this.nativeInput !== null) {
+    if (this.nativeInput) {
       this.nativeInput.focus();
     }
   }
@@ -93,13 +93,14 @@ const MdsInput = class {
     return Promise.resolve(this.nativeInput);
   }
   getValue() {
-    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+    var _a;
+    return typeof this.value === 'number' ? this.value.toString() : (_a = this.value) !== null && _a !== void 0 ? _a : '';
   }
   render() {
     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.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("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.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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-673e91e1.js');
+const index = require('./index-e46754eb.js');
 
 /*
- Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | 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));

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.1",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

package/dist/collection/common/aria.js

@@ -6,11 +6,13 @@ const hash = (s) => {
   return h.toString();
 };
 const unslugName = (name) => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ');
+  var _a, _b, _c;
+  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
 };
 const setAttributeIfEmpty = (element, attribute, value) => {
+  var _a;
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute);
+    return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
   }
   element.setAttribute(attribute, value);
   return value;

package/dist/collection/common/keyboard-manager.js

@@ -0,0 +1,40 @@
+export class KeyboardManager {
+  constructor() {
+    this.elements = [];
+    this.handleClickBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
+        event.target.click();
+      }
+    };
+    this.handleEscapeBehaviorDispatchEvent = (event) => {
+      if (event.code === 'Escape' && this.escapeCallback) {
+        this.escapeCallback();
+      }
+    };
+    this.addElement = (el, name = 'element') => {
+      this.elements[name] = el;
+    };
+    this.attachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.detachClickBehavior = (name = 'element') => {
+      if (this.elements[name]) {
+        this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+      }
+    };
+    this.attachEscapeBehavior = (callBack) => {
+      this.escapeCallback = callBack;
+      if (typeof window !== undefined) {
+        window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+    this.detachEscapeBehavior = () => {
+      this.escapeCallback = () => { return; };
+      if (typeof window !== undefined) {
+        window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
+      }
+    };
+  }
+}

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

@@ -421,14 +421,14 @@ textarea.input{
   position: absolute;
 }
 
-.top-1{
+.bottom-1{
 
-  top: 0.25rem;
+  bottom: 0.25rem;
 }
 
-.bottom-1{
+.top-1{
 
-  bottom: 0.25rem;
+  top: 0.25rem;
 }
 
 .flex{
@@ -468,58 +468,59 @@ textarea.input{
 }
 
 :host {
+
   --mds-input-icon-color: 10, 80, 212; /* brand-maggioli-03 */
   --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( :focus ) {
+:host( :focus ) {
 
   --mds-input-variant-color: 31, 101, 232; /* brand-maggioli-04 */
 }
 
-:host ( [variant=info] ) {
+:host( [variant="info"] ) {
 
   --mds-input-icon-color: 25, 143, 182; /* status-info-05 */
   --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=info]:focus ) {
+:host( [variant="info"]:focus ) {
 
   --mds-input-icon-color: 21, 119, 151; /* status-info-04 */
   --mds-input-variant-color: 25, 143, 182; /* status-info-05 */
 }
 
-:host ( [variant=success] ) {
+:host( [variant="success"] ) {
 
   --mds-input-icon-color: 26, 151, 91; /* status-success-05 */
   --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=success]:focus ) {
+:host( [variant="success"]:focus ) {
 
   --mds-input-icon-color: 22, 125, 76; /* status-success-04 */
   --mds-input-variant-color: 26, 151, 91; /* status-success-05 */
 }
 
-:host ( [variant=warning] ) {
+:host( [variant="warning"] ) {
 
   --mds-input-icon-color: 168, 126, 0; /* status-warning-05 */
   --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=warning]:focus ) {
+:host( [variant="warning"]:focus ) {
 
   --mds-input-icon-color: 139, 104, 0; /* status-warning-04 */
   --mds-input-variant-color: 168, 126, 0; /* status-warning-05 */
 }
 
-:host ( [variant=error] ) {
+:host( [variant="error"] ) {
 
   --mds-input-icon-color: 234, 77, 73; /* status-error-05 */
   --mds-input-variant-color: 0, 0, 0;
 }
 
-:host ( [variant=error]:focus ) {
+:host( [variant="error"]:focus ) {
 
   --mds-input-icon-color: 215, 29, 25; /* status-error-04 */
   --mds-input-variant-color: 234, 77, 73; /* status-error-05 */