@maggioli-design-system/mds-input 4.2.0 → 4.2.1

package/dist/cjs/{index-3097681c.js → index-b0659581.js}

@@ -1160,6 +1160,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
@@ -1197,7 +1198,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1245,21 +1246,49 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
+                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                    }
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
@@ -1419,6 +1448,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
+            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
@@ -1432,7 +1462,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$attrsToReflect$ = [];
             }
             {
-                cmpMeta.$watchers$ = {};
+                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {

package/dist/cjs/loader.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3097681c.js');
+const index = require('./index-b0659581.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  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);
+  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]},null,{"value":["valueChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3097681c.js');
+const index = require('./index-b0659581.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;}::-ms-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:16px;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:16px;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 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;}::-ms-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 rgb(var(--mds-input-variant-color) 0.1);--mds-input-shadow:0 1px 3px 0 rgb(var(--mds-input-variant-color) 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) 0.06);--mds-input-variant-color:0, 0, 0;font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:16px;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:-ms-flexbox;display:flex;position:relative}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:16px;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;min-height:3rem;width:100%;text-overflow:ellipsis;border-radius:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-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);border:0;border-color:transparent;-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:rgb(var(--tone-neutral-02));overflow:hidden}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 rgb(var(--mds-input-variant-color) 1);--mds-input-shadow:0 4px 6px -1px rgb(var(--mds-input-variant-color) 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) 0.06)}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.input.has-icon{padding-left:2.75rem}.tip{right:0.25rem;height:0.75rem;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;-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:rgb(var(--mds-input-tip-background));color:rgb(var(--tone-neutral));-ms-flex-pack:center;justify-content:center;line-height:0.75rem;pointer-events:none;position:absolute;text-align:center}.tip-variant{--mds-input-tip-background:var(--mds-input-icon-color)}.read-only{background-color:rgb(var(--status-info-05));color:rgb(var(--tone-neutral))}.required{width:0.75rem;padding:0px;background-color:rgb(var(--status-error-05));color:transparent}.disabled{background-color:rgb(var(--tone-neutral-05))}.input:focus+.required{width:6rem;color:rgb(var(--tone-neutral))}.icon{left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color));position:absolute}.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) {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3097681c.js');
+const index = require('./index-b0659581.js');
 
 /*
- Stencil Client Patch Browser v4.2.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.3.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));
@@ -17,7 +17,7 @@ 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],"tip":[1],"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]},null,{"value":["valueChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
+    "version": "4.3.0",
     "typescriptVersion": "5.1.6"
   },
   "collections": [],

package/dist/collection/common/aria.js

@@ -5,6 +5,7 @@ const hash = (s) => {
   }
   return h.toString();
 };
+const randomInt = (max) => Math.floor(Math.random() * max);
 const unslugName = (name) => {
   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;
@@ -18,4 +19,11 @@ const setAttributeIfEmpty = (element, attribute, value) => {
   return value;
 };
 const hashValue = (value) => `${value}-${hash(value)}`;
-export { unslugName, setAttributeIfEmpty, hashValue, };
+const hashRandomValue = (value) => {
+  const randomValue = randomInt(1000000);
+  if (value) {
+    return `${value}-${hash(randomValue.toString())}`;
+  }
+  return hash(randomValue.toString());
+};
+export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };

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

@@ -207,16 +207,17 @@
   --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-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) 0.1);
+  --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) 0.06);
   --mds-input-variant-color: 0, 0, 0;
   font-family: Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   line-height: 1.5rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  position: relative;
+
   display: flex;
+  position: relative;
 }
 
 .input{
@@ -233,22 +234,14 @@
 
   margin: 0px;
 
-  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;
@@ -257,10 +250,6 @@
 
   padding-bottom: 0.75rem;
 
-  --tw-text-opacity: 1;
-
-  color: rgba(var(--tone-neutral-02), var(--tw-text-opacity));
-
   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);
@@ -270,11 +259,15 @@
   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 
   background-color: var(--mds-input-background);
+  border: 0;
+  border-color: transparent;
   box-shadow: var(--mds-input-ring), var(--mds-input-shadow);
+  box-sizing: border-box;
+  color: rgb(var(--tone-neutral-02));
+  overflow: hidden;
 }
 
-textarea.input:active{
-
+textarea.input:active {
   transition-property: none;
 }
 
@@ -301,30 +294,21 @@ textarea.input{
 
   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);
+  --mds-input-ring: 0 0 0 3px rgb(var(--mds-input-variant-color) 1);
+  --mds-input-shadow: 0 4px 6px -1px rgb(var(--mds-input-variant-color) 0.1), 0 2px 4px -1px rgb(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 {
+  background-color: rgb(var(--tone-neutral-10));
 }
 
-.input:disabled::-moz-placeholder{
-
-  --tw-text-opacity: 1;
-
-  color: rgba(var(--tone-neutral-05), var(--tw-text-opacity));
+.input:disabled::-moz-placeholder {
+  color: rgb(var(--tone-neutral-05));
 }
 
 .input:disabled,
-.input:disabled::placeholder{
-
-  --tw-text-opacity: 1;
-
-  color: rgba(var(--tone-neutral-05), var(--tw-text-opacity));
+.input:disabled::placeholder {
+  color: rgb(var(--tone-neutral-05));
 }
 
 .input.has-icon{
@@ -334,28 +318,16 @@ textarea.input{
 
 .tip{
 
-  pointer-events: none;
-
-  position: absolute;
-
   right: 0.25rem;
 
   height: 0.75rem;
 
-  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));
-
   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);
@@ -364,63 +336,54 @@ 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));
+  color: rgb(var(--tone-neutral));
+  justify-content: center;
+  line-height: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+  text-align: center;
 }
 
 .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));
+.read-only {
+  background-color: rgb(var(--status-info-05));
+  color: rgb(var(--tone-neutral));
 }
 
 .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;
+  background-color: rgb(var(--status-error-05));
+  color: transparent;
 }
 
-.disabled{
-
-  --tw-bg-opacity: 1;
-
-  background-color: rgba(var(--tone-neutral-05), var(--tw-bg-opacity));
+.disabled {
+  background-color: rgb(var(--tone-neutral-05));
 }
 
 .input:focus + .required{
 
   width: 6rem;
 
-  --tw-text-opacity: 1;
+  color: rgb(var(--tone-neutral));
 }
 
 .icon{
 
-  position: absolute;
-
   left: 0.75rem;
 
   top: 0.75rem;
 
   fill: rgb(var(--mds-input-icon-color));
+  position: absolute;
 }
 
 .fixed{

package/dist/components/mds-input.js

@@ -2,7 +2,7 @@ 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 = "*,::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;}::-ms-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:16px;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:16px;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 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;}::-ms-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 rgb(var(--mds-input-variant-color) 0.1);--mds-input-shadow:0 1px 3px 0 rgb(var(--mds-input-variant-color) 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) 0.06);--mds-input-variant-color:0, 0, 0;font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:16px;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:-ms-flexbox;display:flex;position:relative}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:16px;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;min-height:3rem;width:100%;text-overflow:ellipsis;border-radius:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-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);border:0;border-color:transparent;-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:rgb(var(--tone-neutral-02));overflow:hidden}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 rgb(var(--mds-input-variant-color) 1);--mds-input-shadow:0 4px 6px -1px rgb(var(--mds-input-variant-color) 0.1), 0 2px 4px -1px rgb(var(--mds-input-variant-color) 0.06)}.input:disabled{background-color:rgb(var(--tone-neutral-10))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-webkit-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled:-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled::-ms-input-placeholder{color:rgb(var(--tone-neutral-05))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05))}.input.has-icon{padding-left:2.75rem}.tip{right:0.25rem;height:0.75rem;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;-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:rgb(var(--mds-input-tip-background));color:rgb(var(--tone-neutral));-ms-flex-pack:center;justify-content:center;line-height:0.75rem;pointer-events:none;position:absolute;text-align:center}.tip-variant{--mds-input-tip-background:var(--mds-input-icon-color)}.read-only{background-color:rgb(var(--status-info-05));color:rgb(var(--tone-neutral))}.required{width:0.75rem;padding:0px;background-color:rgb(var(--status-error-05));color:transparent}.disabled{background-color:rgb(var(--tone-neutral-05))}.input:focus+.required{width:6rem;color:rgb(var(--tone-neutral))}.icon{left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color));position:absolute}.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$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLElement {
   constructor() {
@@ -131,6 +131,8 @@ const MdsInput$1 = /*@__PURE__*/ proxyCustomElement(class MdsInput extends HTMLE
     "hasFocus": [32],
     "setFocus": [64],
     "getInputElement": [64]
+  }, undefined, {
+    "value": ["valueChanged"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-09-18T09:17:01",
+  "timestamp": "2023-09-27T11:23:58",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
+    "version": "4.3.0",
     "typescriptVersion": "5.1.6"
   },
   "components": [

package/dist/esm/{index-e22ac7e3.js → index-9b253f5d.js}

@@ -1138,6 +1138,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
@@ -1175,7 +1176,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1223,21 +1224,49 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
+                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                    }
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
@@ -1397,6 +1426,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
+            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
@@ -1410,7 +1440,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$attrsToReflect$ = [];
             }
             {
-                cmpMeta.$watchers$ = {};
+                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {

package/dist/esm/loader.js

@@ -1,9 +1,9 @@
-import { b as bootstrapLazy } from './index-e22ac7e3.js';
-export { s as setNonce } from './index-e22ac7e3.js';
+import { b as bootstrapLazy } from './index-9b253f5d.js';
+export { s as setNonce } from './index-9b253f5d.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return bootstrapLazy([["mds-input",[[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);
+  return bootstrapLazy([["mds-input",[[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]},null,{"value":["valueChanged"]}]]]], options);
 };
 
 export { defineCustomElements };