@maggioli-design-system/mds-input 1.0.0 → 2.0.0

package/dist/cjs/{index-3aa055da.js → index-926865d7.js}

@@ -23,7 +23,6 @@ function _interopNamespace(e) {
 const NAMESPACE = 'mds-input';
 
 let scopeId;
-let hostTagName;
 let isSvgMode = false;
 let queuePending = false;
 const win = typeof window !== 'undefined' ? window : {};
@@ -112,7 +111,7 @@ const attachStyles = (hostRef) => {
     const elm = hostRef.$hostElement$;
     const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
+    const scopeId = addStyle(elm.getRootNode(), cmpMeta);
     if (flags & 10 /* needsScopedEncapsulation */) {
         // only required when we're NOT using native shadow dom (slot)
         // or this browser doesn't support native shadow dom
@@ -123,6 +122,9 @@ const attachStyles = (hostRef) => {
         // DOM WRITE!!
         elm['s-sc'] = scopeId;
         elm.classList.add(scopeId + '-h');
+        if (flags & 2 /* scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
     }
     endAttachStyles();
 };
@@ -379,9 +381,6 @@ 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);
@@ -526,7 +525,6 @@ 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]));
@@ -534,7 +532,7 @@ const renderVdom = (hostRef, renderFnResults) => {
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
-    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
+    rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
     {
         scopeId = hostElm['s-sc'];
     }
@@ -724,6 +722,29 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
@@ -757,7 +778,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1055,17 +1079,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     super(self);
                     self = this;
                     registerHost(self, cmpMeta);
-                    if (cmpMeta.$flags$ & 1 /* 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-3aa055da.js');
+const index = require('./index-926865d7.js');
 
 /*
- Stencil Client Patch Esm v2.12.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.15.1 | 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",[[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],"variantTip":[1,"variant-tip"],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], 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);
   });
 };
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3aa055da.js');
+const index = require('./index-926865d7.js');
 
 function toVal(mix) {
 	var k, y, str='';
@@ -45,9 +45,9 @@ function clsx () {
 	return str;
 }
 
-const mdsInputCss = "*,::before,::after{--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{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(--adjust-tone-02), var(--tw-text-opacity));--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);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--adjust-tone-02), var(--tw-ring-opacity));--tw-ring-opacity:0.1;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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, rgb(var(--adjust-tone)))}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{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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);--tw-shadow-color:rgba(var(--brand-maggioli-04), 0.5);--tw-shadow:var(--tw-shadow-colored);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--brand-maggioli-04), var(--tw-ring-opacity));-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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)}.input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-10), var(--tw-bg-opacity))}.input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled,.input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input.has-icon{padding-left:2.75rem}.tip,.tip-variant{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(--adjust-tone), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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{--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(--adjust-tone), var(--tw-text-opacity));--tw-text-opacity:0}.disabled{--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-05), var(--tw-bg-opacity))}.input:focus+.required{width:6rem;--tw-text-opacity:1}.icon{position:absolute;left:0.75rem;top:0.75rem;--tw-text-opacity:1;color:rgba(var(--brand-maggioli-04), var(--tw-text-opacity))}.top-1{top:0.25rem}.bottom-1{bottom:0.25rem}.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([variant=info]) .input:focus{--tw-shadow-color:rgba(var(--status-info-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-info-06), var(--tw-ring-opacity))}:host([variant=info]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-info-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=info]) .icon{--tw-text-opacity:1;color:rgba(var(--status-info-06), var(--tw-text-opacity))}:host([variant=success]) .input:focus{--tw-shadow-color:rgba(var(--status-success-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-success-06), var(--tw-ring-opacity))}:host([variant=success]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-success-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=success]) .icon{--tw-text-opacity:1;color:rgba(var(--status-success-06), var(--tw-text-opacity))}:host([variant=warning]) .input:focus{--tw-shadow-color:rgba(var(--status-warning-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-warning-06), var(--tw-ring-opacity))}:host([variant=warning]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-warning-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=warning]) .icon{--tw-text-opacity:1;color:rgba(var(--status-warning-06), var(--tw-text-opacity))}:host([variant=error]) .input:focus{--tw-shadow-color:rgba(var(--status-error-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-error-06), var(--tw-ring-opacity))}:host([variant=error]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-error-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=error]) .icon{--tw-text-opacity:1;color:rgba(var(--status-error-06), var(--tw-text-opacity))}";
+const mdsInputCss = "*.sc-mds-input,.sc-mds-input::before,.sc-mds-input::after{--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{--background:rgb(var(--adjust-tone));--icon-color:rgb(var(--adjust-tone));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(--adjust-tone-02), var(--tw-text-opacity));--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);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--adjust-tone-02), var(--tw-ring-opacity));--tw-ring-opacity:0.1;-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)}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{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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);--tw-shadow-color:rgba(var(--brand-maggioli-04), 0.5);--tw-shadow:var(--tw-shadow-colored);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--brand-maggioli-04), var(--tw-ring-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)}.input.sc-mds-input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-10), var(--tw-bg-opacity))}.input.sc-mds-input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input.sc-mds-input:disabled,.input.sc-mds-input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-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(--adjust-tone), 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(--adjust-tone), var(--tw-text-opacity));--tw-text-opacity:0}.disabled.sc-mds-input{--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-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))}.top-1.sc-mds-input{top:0.25rem}.bottom-1.sc-mds-input{bottom:0.25rem}.border.sc-mds-input{border-width:1px}.sc-mds-input-h(.sc-mds-input [variant=info].sc-mds-input).sc-mds-input .input.sc-mds-input:focus{--tw-shadow-color:rgba(var(--status-info-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-info-06), var(--tw-ring-opacity))}.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(--adjust-tone), 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 .input.sc-mds-input:focus{--tw-shadow-color:rgba(var(--status-success-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-success-06), var(--tw-ring-opacity))}.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(--adjust-tone), 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 .input.sc-mds-input:focus{--tw-shadow-color:rgba(var(--status-warning-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-warning-06), var(--tw-ring-opacity))}.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(--adjust-tone), 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 .input.sc-mds-input:focus{--tw-shadow-color:rgba(var(--status-error-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-error-06), var(--tw-ring-opacity))}.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(--adjust-tone), 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))}";
 
-let MdsInput = class {
+const MdsInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.changeEvent = index.createEvent(this, "changeEvent", 7);

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-3aa055da.js');
+const index = require('./index-926865d7.js');
 
 /*
- Stencil Client Patch Browser v2.12.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.15.1 | 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",[[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],"variantTip":[1,"variant-tip"],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], 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);
 });

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.12.1",
-    "typescriptVersion": "4.3.5"
+    "version": "2.15.1",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": []

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

@@ -82,7 +82,7 @@
 
   --tw-backdrop-saturate:  ;
 
-  --tw-backdrop-sepia:  
+  --tw-backdrop-sepia:  ;
 }
 @tailwind utilities;
 
@@ -90,21 +90,17 @@
   * @prop --background: Sets the background-color of the component
   */
 
-:host{
+:host {
 
+  --background: rgb(var(--adjust-tone));
+  --icon-color: rgb(var(--adjust-tone));
   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: flex
+  display: flex;
 }
 
 .input{
@@ -165,18 +161,20 @@
 
   --tw-ring-opacity: 0.1;
 
-  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   transition-duration: 300ms;
 
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
-  background-color: var(--background, rgb(var(--adjust-tone)))
+  background-color: var(--background);
 }
 
 textarea.input:active{
 
-  transition-property: none
+  transition-property: none;
 }
 
 textarea.input{
@@ -185,7 +183,7 @@ textarea.input{
 
   min-height: 6rem;
 
-  border-bottom-right-radius: 0px
+  border-bottom-right-radius: 0px;
 }
 
 .input:focus{
@@ -214,44 +212,46 @@ textarea.input{
 
   --tw-ring-color: rgba(var(--brand-maggioli-04), var(--tw-ring-opacity));
 
-  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   transition-duration: 300ms;
 
-  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 .input:disabled{
 
   --tw-bg-opacity: 1;
 
-  background-color: rgba(var(--adjust-tone-10), var(--tw-bg-opacity))
+  background-color: rgba(var(--adjust-tone-10), var(--tw-bg-opacity));
 }
 
 .input:disabled::-moz-placeholder{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone-05), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone-05), var(--tw-text-opacity));
 }
 
 .input:disabled:-ms-input-placeholder{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone-05), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone-05), var(--tw-text-opacity));
 }
 
 .input:disabled, .input:disabled::placeholder{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone-05), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone-05), var(--tw-text-opacity));
 }
 
 .input.has-icon{
 
-  padding-left: 2.75rem
+  padding-left: 2.75rem;
 }
 
 .tip, .tip-variant{
@@ -278,13 +278,15 @@ textarea.input{
 
   color: rgba(var(--adjust-tone), var(--tw-text-opacity));
 
-  transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   transition-duration: 300ms;
 
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
-  line-height: 0.75rem
+  line-height: 0.75rem;
 }
 
 .read-only{
@@ -295,7 +297,7 @@ textarea.input{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--status-info-09), var(--tw-text-opacity))
+  color: rgba(var(--status-info-09), var(--tw-text-opacity));
 }
 
 .required{
@@ -310,21 +312,21 @@ textarea.input{
 
   color: rgba(var(--adjust-tone), var(--tw-text-opacity));
 
-  --tw-text-opacity: 0
+  --tw-text-opacity: 0;
 }
 
 .disabled{
 
   --tw-bg-opacity: 1;
 
-  background-color: rgba(var(--adjust-tone-05), var(--tw-bg-opacity))
+  background-color: rgba(var(--adjust-tone-05), var(--tw-bg-opacity));
 }
 
 .input:focus + .required{
 
   width: 6rem;
 
-  --tw-text-opacity: 1
+  --tw-text-opacity: 1;
 }
 
 .icon{
@@ -335,33 +337,22 @@ textarea.input{
 
   top: 0.75rem;
 
-  --tw-text-opacity: 1;
-
-  color: rgba(var(--brand-maggioli-04), var(--tw-text-opacity))
+  fill: rgb(var(--brand-maggioli-04));
 }
 
 .top-1{
 
-  top: 0.25rem
+  top: 0.25rem;
 }
 
 .bottom-1{
 
-  bottom: 0.25rem
+  bottom: 0.25rem;
 }
 
 .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);
-
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+  border-width: 1px;
 }
 
 :host ( [variant=info] ) .input:focus{
@@ -372,7 +363,7 @@ textarea.input{
 
   --tw-ring-opacity: 1;
 
-  --tw-ring-color: rgba(var(--status-info-06), var(--tw-ring-opacity))
+  --tw-ring-color: rgba(var(--status-info-06), var(--tw-ring-opacity));
 }
 
 :host ( [variant=info] ) .tip-variant{
@@ -383,14 +374,14 @@ textarea.input{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone), var(--tw-text-opacity));
 }
 
 :host ( [variant=info] ) .icon{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--status-info-06), var(--tw-text-opacity))
+  color: rgba(var(--status-info-06), var(--tw-text-opacity));
 }
 
 :host ( [variant=success] ) .input:focus{
@@ -401,7 +392,7 @@ textarea.input{
 
   --tw-ring-opacity: 1;
 
-  --tw-ring-color: rgba(var(--status-success-06), var(--tw-ring-opacity))
+  --tw-ring-color: rgba(var(--status-success-06), var(--tw-ring-opacity));
 }
 
 :host ( [variant=success] ) .tip-variant{
@@ -412,14 +403,14 @@ textarea.input{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone), var(--tw-text-opacity));
 }
 
 :host ( [variant=success] ) .icon{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--status-success-06), var(--tw-text-opacity))
+  color: rgba(var(--status-success-06), var(--tw-text-opacity));
 }
 
 :host ( [variant=warning] ) .input:focus{
@@ -430,7 +421,7 @@ textarea.input{
 
   --tw-ring-opacity: 1;
 
-  --tw-ring-color: rgba(var(--status-warning-06), var(--tw-ring-opacity))
+  --tw-ring-color: rgba(var(--status-warning-06), var(--tw-ring-opacity));
 }
 
 :host ( [variant=warning] ) .tip-variant{
@@ -441,14 +432,14 @@ textarea.input{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone), var(--tw-text-opacity));
 }
 
 :host ( [variant=warning] ) .icon{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--status-warning-06), var(--tw-text-opacity))
+  color: rgba(var(--status-warning-06), var(--tw-text-opacity));
 }
 
 :host ( [variant=error] ) .input:focus{
@@ -459,7 +450,7 @@ textarea.input{
 
   --tw-ring-opacity: 1;
 
-  --tw-ring-color: rgba(var(--status-error-06), var(--tw-ring-opacity))
+  --tw-ring-color: rgba(var(--status-error-06), var(--tw-ring-opacity));
 }
 
 :host ( [variant=error] ) .tip-variant{
@@ -470,13 +461,13 @@ textarea.input{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--adjust-tone), var(--tw-text-opacity))
+  color: rgba(var(--adjust-tone), var(--tw-text-opacity));
 }
 
 :host ( [variant=error] ) .icon{
 
   --tw-text-opacity: 1;
 
-  color: rgba(var(--status-error-06), var(--tw-text-opacity))
+  color: rgba(var(--status-error-06), var(--tw-text-opacity));
 }
 

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

@@ -108,7 +108,7 @@ export class MdsInput {
       this.icon && h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
   }
   static get is() { return "mds-input"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["mds-input.css"]
   }; }

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

@@ -160,6 +160,38 @@ search.args = {
 
 export const icon = Template.bind({})
 icon.args = {
-  icon: 'email',
+  icon: 'mi/round/email',
   placeholder: 'Status input field',
 }
+
+const FormIntegration = (args) => (
+  <form className="flex flex-col gap-y-2" id="mds-icon-fi" name="mds-icon-fi">
+    <mds-input {...args}></mds-input>
+    <mds-button class="w-min" type="button" onClick={() => {
+      const input = document.querySelector('input[name="inputto"]')
+      const form = document.querySelector('form');
+      const mdsInput = document.querySelector('mds-input');
+
+      console.log('Input', input)
+      console.log('Form', form)
+      console.log('Form elements', form.elements)
+      console.log('MdsInput', mdsInput)
+
+      mdsInput.getInputElement().then((inputElement) => {
+        console.log('MdsInput input element', inputElement)
+      })
+
+      input.addEventListener('input', function(e) { console.error('Input', e.target.value)})
+      input.addEventListener('change', function(e) { console.warn('Change', e.target.value)})
+      mdsInput.addEventListener('changeEvent', function(e) { console.info('MdsInput ChangeEvent', e.detail.value) })
+
+      form.addEventListener('submit', function(e) { e.preventDefault(), console.info('Submitted', e)})
+    }}>Trigger listener</mds-button>
+  </form>
+)
+
+export const formIntegration = FormIntegration.bind({})
+formIntegration.args = {
+  placeholder: 'Mi integro col form!',
+  name: 'inputto',
+}

package/dist/collection/dictionary/icon.js

@@ -1,3 +1,3 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
-const iconsDictionary = Object.keys(mggIconsDictionary).sort();
+import jsonIconsDictionary from '../fixtures/icons.json';
+const iconsDictionary = jsonIconsDictionary;
 export { iconsDictionary, };

package/dist/components/index.d.ts

@@ -9,7 +9,7 @@ import type { Components, JSX } from "../types/components";
  * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
  * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
  */
 export declare const setAssetPath: (path: string) => void;