@muibook/components 11.0.1 → 13.0.0

package/dist/esm/components/mui-addon/index.js

@@ -1,18 +1,28 @@
-class o extends HTMLElement {
+class s extends HTMLElement {
   static get observedAttributes() {
-    return ["slot"];
+    return ["slot", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.syncSlottedContent();
   }
-  attributeChangedCallback(r, e, t) {
-    r === "slot" && e !== t && this.render();
+  attributeChangedCallback(t, i, e) {
+    (t === "slot" || t === "size") && i !== e && (this.render(), this.syncSlottedContent());
+  }
+  syncSlottedContent() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    if (!t) return;
+    const i = this.getAttribute("size") || "medium";
+    t.assignedElements({ flatten: !0 }).forEach((o) => {
+      o.tagName.toLowerCase() === "mui-body" && o.setAttribute("size", i);
+    });
   }
   render() {
-    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
@@ -20,6 +30,7 @@ class o extends HTMLElement {
           align-items: center;
           justify-content: center;
           box-sizing: border-box;
+          min-height: 4.4rem;
           padding: var(--space-200) var(--space-400);
           background: var(--addon-background);
           border: var(--border-thin);
@@ -27,6 +38,26 @@ class o extends HTMLElement {
           min-width: 4.4rem;
           white-space: nowrap;
         }
+        :host([size="x-small"]) {
+          min-height: var(--action-icon-only-size-x-small);
+          min-width: var(--action-icon-only-size-x-small);
+          padding: var(--action-padding-x-small);
+        }
+        :host([size="small"]) {
+          min-height: var(--action-icon-only-size-small);
+          min-width: var(--action-icon-only-size-small);
+          padding: var(--action-padding-small);
+        }
+        :host([size="medium"]) {
+          min-height: 4.4rem;
+          min-width: 4.4rem;
+          padding: var(--space-200) var(--space-400);
+        }
+        :host([size="large"]) {
+          min-height: var(--action-icon-only-size-large);
+          min-width: var(--action-icon-only-size-large);
+          padding: var(--space-300) var(--space-500);
+        }
         :host([slot="before"]) {
           border-right: none;
           border-top-left-radius: var(--radius-100);
@@ -39,7 +70,9 @@ class o extends HTMLElement {
         }
       </style>
       <slot></slot>
-    `);
+    `;
+    const t = this.shadowRoot.querySelector("slot");
+    t == null || t.addEventListener("slotchange", () => this.syncSlottedContent());
   }
 }
-customElements.get("mui-addon") || customElements.define("mui-addon", o);
+customElements.get("mui-addon") || customElements.define("mui-addon", s);

package/dist/esm/components/mui-field/index.js

@@ -1,6 +1,6 @@
-class o extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
-    return ["variant", "message", "label", "hide-label", "size"];
+    return ["variant", "message", "label", "hide-label", "size", "optional"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
@@ -70,14 +70,20 @@ class o extends HTMLElement {
   set size(e) {
     this.setAttribute("size", e);
   }
+  get optional() {
+    return this.hasAttribute("optional");
+  }
+  set optional(e) {
+    e ? this.setAttribute("optional", "") : this.removeAttribute("optional");
+  }
   // -----------------------
   // Lifecycle methods
   // -----------------------
   connectedCallback() {
-    this.bindSlotEvents(), this.renderMessage(), this.passAttributesToChild();
+    this.bindSlotEvents(), this.renderMessage(), this.passAttributesToChild(), this.syncMessageSlotSizing();
   }
   attributeChangedCallback(e) {
-    ["variant", "message", "label", "hide-label", "size"].includes(e) && (this.renderMessage(), this.passAttributesToChild());
+    ["variant", "message", "label", "hide-label", "size", "optional"].includes(e) && (this.renderMessage(), this.passAttributesToChild(), this.syncMessageSlotSizing());
   }
   // -----------------------
   // Helper methods
@@ -86,7 +92,7 @@ class o extends HTMLElement {
     var i;
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("slot"), t = (i = e == null ? void 0 : e.assignedElements) == null ? void 0 : i.call(e)[0];
-    t && ["variant", "label", "hide-label", "size"].forEach((s) => {
+    t && ["variant", "label", "hide-label", "size", "optional"].forEach((s) => {
       this.hasAttribute(s) ? t.setAttribute(s, this.getAttribute(s) || "") : t.removeAttribute(s);
     });
   }
@@ -96,18 +102,29 @@ class o extends HTMLElement {
     if (!e || !t) return;
     const i = this.variant, s = this.message;
     let a = "";
-    if (i === "success" ? a = '<mui-icon-check slot="before"></mui-icon-check>' : i === "warning" ? a = '<mui-icon-warning slot="before"></mui-icon-warning>' : i === "error" && (a = '<mui-icon-attention slot="before"></mui-icon-attention>'), t.assignedNodes({ flatten: !0 }).some((n) => n.nodeType === Node.ELEMENT_NODE ? !0 : n.nodeType === Node.TEXT_NODE ? (n.textContent || "").trim().length > 0 : !1)) {
+    if (i === "success" ? a = '<mui-icon-check slot="before"></mui-icon-check>' : i === "warning" ? a = '<mui-icon-warning slot="before"></mui-icon-warning>' : i === "error" && (a = '<mui-icon-attention slot="before"></mui-icon-attention>'), t.assignedNodes({ flatten: !0 }).some((o) => o.nodeType === Node.ELEMENT_NODE ? !0 : o.nodeType === Node.TEXT_NODE ? (o.textContent || "").trim().length > 0 : !1)) {
       e.innerHTML = "", this.setAttribute("has-message", "");
       return;
     }
-    e.innerHTML = s ? `<mui-body size="small" variant="${i}">${a}${s}</mui-body>` : "", s ? this.setAttribute("has-message", "") : this.removeAttribute("has-message");
+    e.innerHTML = s ? `<mui-body size="${this.size}" variant="${i}">${a}${s}</mui-body>` : "", s ? this.setAttribute("has-message", "") : this.removeAttribute("has-message");
+  }
+  syncMessageSlotSizing() {
+    if (!this.shadowRoot) return;
+    const e = this.size || "medium", t = this.shadowRoot.querySelector('slot[name="message"]');
+    if (!t) return;
+    t.assignedElements({ flatten: !0 }).forEach((s) => {
+      const a = s.tagName.toLowerCase();
+      (a === "mui-form-message" || a === "mui-form-hint" || a === "mui-body") && s.setAttribute("size", e);
+    });
   }
   bindSlotEvents() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector('slot[name="message"]');
-    e && e.addEventListener("slotchange", () => this.renderMessage());
+    e && e.addEventListener("slotchange", () => {
+      this.renderMessage(), this.syncMessageSlotSizing();
+    });
     const t = this.shadowRoot.querySelector("slot:not([name])");
     t && t.addEventListener("slotchange", () => this.passAttributesToChild());
   }
 }
-customElements.get("mui-field") || customElements.define("mui-field", o);
+customElements.get("mui-field") || customElements.define("mui-field", n);

package/dist/esm/components/mui-hint/index.js

@@ -20,7 +20,7 @@ class y extends HTMLElement {
     `
       <style>
         :host {
-          display: block;
+          display: inline-flex;
           width: max-content;
           position: relative;
           vertical-align: middle;
@@ -131,14 +131,14 @@ class y extends HTMLElement {
     this.openTimer && (window.clearTimeout(this.openTimer), this.openTimer = null), this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null), t && this.setAttribute("closing-immediate", ""), this.removeAttribute("open"), t && requestAnimationFrame(() => this.removeAttribute("closing-immediate")), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
   }
   positionTooltip() {
-    var u, b, g, f;
-    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".trigger"), o = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".tooltip");
+    var u, g, b, f;
+    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".trigger"), o = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".tooltip");
     if (!o || !t) return;
-    const h = (g = this.shadowRoot) == null ? void 0 : g.querySelector('slot[name="trigger"]'), w = ((f = h == null ? void 0 : h.assignedElements({ flatten: !0 })) == null ? void 0 : f[0]) || null || t, d = this.getAttribute("placement") || "top", e = w.getBoundingClientRect(), p = this.getBoundingClientRect(), i = o.getBoundingClientRect(), c = window.innerHeight, m = window.innerWidth, r = 8, n = 8;
+    const h = (b = this.shadowRoot) == null ? void 0 : b.querySelector('slot[name="trigger"]'), w = ((f = h == null ? void 0 : h.assignedElements({ flatten: !0 })) == null ? void 0 : f[0]) || null || t, d = this.getAttribute("placement") || "top", e = w.getBoundingClientRect(), p = this.getBoundingClientRect(), i = o.getBoundingClientRect(), c = window.innerHeight, m = window.innerWidth, n = 8, r = 8;
     let s = d;
-    d === "top" && e.top - i.height - n < r && (s = "bottom"), d === "bottom" && e.bottom + i.height + n > c - r && (s = "top"), d === "left" && e.left - i.width - n < r && (s = "right"), d === "right" && e.right + i.width + n > m - r && (s = "left"), o.setAttribute("data-placement", s);
+    d === "top" && e.top - i.height - r < n && (s = "bottom"), d === "bottom" && e.bottom + i.height + r > c - n && (s = "top"), d === "left" && e.left - i.width - r < n && (s = "right"), d === "right" && e.right + i.width + r > m - n && (s = "left"), o.setAttribute("data-placement", s);
     let a = 0, l = 0;
-    s === "top" ? (a = e.top - i.height - n, l = e.left + e.width / 2 - i.width / 2) : s === "bottom" ? (a = e.bottom + n, l = e.left + e.width / 2 - i.width / 2) : s === "left" ? (a = e.top + e.height / 2 - i.height / 2, l = e.left - i.width - n) : (a = e.top + e.height / 2 - i.height / 2, l = e.right + n), a = Math.max(r, Math.min(a, c - i.height - r)), l = Math.max(r, Math.min(l, m - i.width - r));
+    s === "top" ? (a = e.top - i.height - r, l = e.left + e.width / 2 - i.width / 2) : s === "bottom" ? (a = e.bottom + r, l = e.left + e.width / 2 - i.width / 2) : s === "left" ? (a = e.top + e.height / 2 - i.height / 2, l = e.left - i.width - r) : (a = e.top + e.height / 2 - i.height / 2, l = e.right + r), a = Math.max(n, Math.min(a, c - i.height - n)), l = Math.max(n, Math.min(l, m - i.width - n));
     const v = a - p.top, x = l - p.left;
     o.style.top = `${v}px`, o.style.left = `${x}px`;
   }

package/dist/esm/components/mui-image/index.js

@@ -1,49 +1,96 @@
-class t extends HTMLElement {
+class c extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.observer = null, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["height", "fit", "crop", "position", "zoom", "focal-x", "focal-y", "radius", "aspect-ratio"];
+  }
+  syncChildSlots() {
+    Array.from(this.children).forEach((e) => {
+      const i = e.tagName.toLowerCase();
+      i === "img" && !e.hasAttribute("slot") && e.setAttribute("slot", "image"), i === "figcaption" && !e.hasAttribute("slot") && e.setAttribute("slot", "caption");
+    });
   }
   connectedCallback() {
+    this.syncChildSlots(), this.render(), this.observer = new MutationObserver(() => this.syncChildSlots()), this.observer.observe(this, { childList: !0, subtree: !1 });
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.observer) == null || t.disconnect(), this.observer = null;
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.render();
+  }
+  clampPercent(t, e) {
+    const i = Number.parseFloat(t || "");
+    return Number.isFinite(i) ? Math.min(100, Math.max(0, i)) : e;
+  }
+  getPosition() {
+    const t = this.getAttribute("focal-x"), e = this.getAttribute("focal-y");
+    if (t != null || e != null) {
+      const i = this.clampPercent(t, 50), a = this.clampPercent(e, 50);
+      return `${i}% ${a}%`;
+    }
+    return this.getAttribute("position") || "center center";
+  }
+  getZoom() {
+    const t = Number.parseFloat(this.getAttribute("zoom") || "1");
+    return !Number.isFinite(t) || t <= 0 ? 1 : t;
+  }
+  render() {
     if (!this.shadowRoot) return;
-    let e = (
-      /*html*/
-      `
-
-    <style>
-
-
-      :host {
-        display: flex;
-      }
-      figure {
-        background: var(--surface-elevated-200);
-        display: block;
-        width: 100%;
-        margin: var(--space-000);
-        border-radius: var(--radius-300);
-        overflow: hidden;
-      }
-      ::slotted(img) {
-        width: 100%;
-        height: auto;
-        display: block;
-        border-style: none;
-        -ms-interpolation-mode: bicubic;
-        vertical-align: middle;
-      }
-      ::slotted(figcaption) {
-        padding: var(--space-500);
-        color: var( --text-color);
-        text-align: center;
-        display: block;
-      }
-    </style>
+    const t = this.getAttribute("height") || "", e = this.getAttribute("fit") || (this.hasAttribute("crop") ? "cover" : "contain"), i = this.getPosition(), a = this.getZoom(), o = this.getAttribute("radius") || "var(--radius-300)", s = this.getAttribute("aspect-ratio") || "", r = this.hasAttribute("crop");
+    this.style.setProperty("--mui-image-radius-active", o), this.style.setProperty("--mui-image-overflow-active", r ? "hidden" : "clip"), this.style.setProperty("--mui-image-fit-active", e), this.style.setProperty("--mui-image-position-active", i), this.style.setProperty("--mui-image-zoom-active", String(a)), this.style.setProperty("--mui-image-height-active", t || "auto"), this.style.setProperty("--mui-image-aspect-ratio-active", s || "auto"), this.style.setProperty("--mui-image-image-height-active", t || s ? "100%" : "auto"), this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+          width: 100%;
+          --mui-image-radius-active: var(--radius-300);
+          --mui-image-overflow-active: clip;
+          --mui-image-fit-active: contain;
+          --mui-image-position-active: center center;
+          --mui-image-zoom-active: 1;
+          --mui-image-height-active: auto;
+          --mui-image-aspect-ratio-active: auto;
+          --mui-image-image-height-active: auto;
+        }
+        figure {
+          background: var(--surface-elevated-200);
+          display: block;
+          width: 100%;
+          margin: var(--space-000);
+          box-sizing: border-box;
+          border-radius: var(--mui-image-radius-active);
+          overflow: var(--mui-image-overflow-active);
+          height: var(--mui-image-height-active);
+          aspect-ratio: var(--mui-image-aspect-ratio-active);
+        }
+        ::slotted([slot="image"]) {
+          width: 100%;
+          height: var(--mui-image-image-height-active);
+          object-fit: var(--mui-image-fit-active);
+          object-position: var(--mui-image-position-active);
+          display: block;
+          border-style: none;
+          -ms-interpolation-mode: bicubic;
+          vertical-align: middle;
+          transform-origin: center;
+          transform: scale(var(--mui-image-zoom-active));
+        }
+        ::slotted([slot="caption"]) {
+          padding: var(--space-500);
+          color: var(--text-color);
+          text-align: center;
+          display: block;
+        }
+      </style>
 
-    <figure>
-      <slot name="image"></slot>
-      <slot name="caption"></slot>
-    </figure>`
-    );
-    this.shadowRoot.innerHTML = e;
+      <figure>
+        <slot name="image"></slot>
+        <slot name="caption"></slot>
+      </figure>
+    `;
   }
 }
-customElements.get("mui-image") || customElements.define("mui-image", t);
+customElements.get("mui-image") || customElements.define("mui-image", c);

package/dist/esm/components/mui-input/index.js

@@ -25,7 +25,7 @@ class S extends HTMLElement {
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(t, i, e) {
+  attributeChangedCallback(t, r, e) {
     var d;
     const o = (d = this.shadowRoot) == null ? void 0 : d.querySelector("input");
     if (o) {
@@ -43,15 +43,15 @@ class S extends HTMLElement {
     }
   }
   cleanupListeners() {
-    var i;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
     t && this._changeHandler && (t.removeEventListener("change", this._changeHandler), t.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("input");
-    t && (this.cleanupListeners(), this._changeHandler = (i) => {
-      const e = i.target;
+    t && (this.cleanupListeners(), this._changeHandler = (r) => {
+      const e = r.target;
       this.setAttribute("value", e.value);
       const o = {
         detail: { value: e.value },
@@ -63,23 +63,23 @@ class S extends HTMLElement {
   }
   updateCharacterCount() {
     var e, o;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input"), i = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".char-count");
-    !t || !i || t.maxLength <= 0 || (i.textContent = `${t.value.length}/${t.maxLength}`);
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input"), r = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".char-count");
+    !t || !r || t.maxLength <= 0 || (r.textContent = `${t.value.length}/${t.maxLength}`);
   }
   updateSlottedButtons() {
     requestAnimationFrame(() => {
-      var l, h, p;
-      const t = this.getAttribute("size") || "medium", e = ["x-small", "small", "medium", "large"].includes(t) ? t : "medium", o = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="before"]'), d = (h = this.shadowRoot) == null ? void 0 : h.querySelector('slot[name="after"]'), m = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="hint"]'), u = (c) => {
-        if (!c) return;
-        c.assignedNodes({ flatten: !0 }).forEach((s) => {
+      var n, u, p;
+      const t = this.getAttribute("size") || "medium", e = ["x-small", "small", "medium", "large"].includes(t) ? t : "medium", o = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="before"]'), d = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="after"]'), f = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="hint"]'), c = (h) => {
+        if (!h) return;
+        h.assignedNodes({ flatten: !0 }).forEach((s) => {
           if (s.nodeType === Node.ELEMENT_NODE) {
-            const r = s, a = r.tagName.toLowerCase();
-            (a === "mui-button" || a === "mui-link") && (r.setAttribute("usage", "input"), r.setAttribute("size", e), r.removeAttribute("variant"), r.removeAttribute("weight")), a === "mui-chip" && (r.setAttribute("usage", "input"), r.setAttribute("size", e));
+            const i = s, a = i.tagName.toLowerCase();
+            (a === "mui-button" || a === "mui-link") && (i.setAttribute("usage", "input"), i.setAttribute("size", e), i.removeAttribute("variant"), i.removeAttribute("weight")), a === "mui-chip" && (i.setAttribute("usage", "input"), i.setAttribute("size", e)), a === "mui-addon" && i.setAttribute("size", e);
           }
         });
       };
-      if (u(o), u(d), m) {
-        const c = {
+      if (c(o), c(d), f) {
+        const h = {
           "x-small": "xx-small",
           small: "x-small",
           medium: "x-small",
@@ -89,11 +89,15 @@ class S extends HTMLElement {
           small: "x-small",
           medium: "small",
           large: "medium"
-        }, s = c[e] || "x-small", r = b[e] || "small";
-        m.assignedNodes({ flatten: !0 }).forEach((a) => {
+        }, s = h[e] || "x-small", i = b[e] || "small";
+        f.assignedNodes({ flatten: !0 }).forEach((a) => {
           if (a.nodeType !== Node.ELEMENT_NODE) return;
-          const n = a, f = n.tagName.toLowerCase();
-          f.startsWith("mui-icon-") && !n.hasAttribute("size") && n.setAttribute("size", s), f === "mui-badge" && !n.hasAttribute("size") && n.setAttribute("size", r), n.setAttribute("aria-hidden", "true");
+          const l = a, m = l.tagName.toLowerCase();
+          if (m === "mui-hint") {
+            l.removeAttribute("aria-hidden");
+            return;
+          }
+          m.startsWith("mui-icon-") && !l.hasAttribute("size") && l.setAttribute("size", s), m === "mui-badge" && !l.hasAttribute("size") && l.setAttribute("size", i), l.setAttribute("aria-hidden", "true");
         });
       }
     });
@@ -112,7 +116,7 @@ class S extends HTMLElement {
       "datetime-local",
       "month",
       "week"
-    ], i = this.getAttribute("type") || "text", e = t.includes(i) ? i : "text", o = this.getAttribute("name") || "", d = this.getAttribute("value") || "", m = this.getAttribute("placeholder") || "", u = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, l = this.getAttribute("label") || "", h = this.hasAttribute("optional"), p = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), b = p && l ? `aria-label="${l}"` : "", s = this.getAttribute("max-length"), r = s && Number(s) > 0 ? String(Number(s)) : "", a = this.getAttribute("size") || "medium", f = ["x-small", "small", "medium", "large"].includes(a) ? a : "medium", v = this.getAttribute("variant") || "", g = v || "", x = (this.getAttribute("slot-layout") || "inline") === "stack-mobile" ? "input-wrapper stack-mobile" : "input-wrapper", w = this.querySelector('[slot="before"]') !== null, y = this.querySelector('[slot="after"]') !== null, z = this.querySelector('[slot="hint"]') !== null, E = [g, w ? "before" : "", y ? "after" : "", z ? "hint" : ""].filter(Boolean).join(" "), A = (
+    ], r = this.getAttribute("type") || "text", e = t.includes(r) ? r : "text", o = this.getAttribute("name") || "", d = this.getAttribute("value") || "", f = this.getAttribute("placeholder") || "", c = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, n = this.getAttribute("label") || "", u = this.hasAttribute("optional"), p = this.hasAttribute("hide-label"), h = this.hasAttribute("disabled"), b = p && n ? `aria-label="${n}"` : "", s = this.getAttribute("max-length"), i = s && Number(s) > 0 ? String(Number(s)) : "", a = this.getAttribute("size") || "medium", m = ["x-small", "small", "medium", "large"].includes(a) ? a : "medium", v = this.getAttribute("variant") || "", g = v || "", x = (this.getAttribute("slot-layout") || "inline") === "stack-mobile" ? "input-wrapper stack-mobile" : "input-wrapper", w = this.querySelector('[slot="before"]') !== null, z = this.querySelector('[slot="after"]') !== null, y = this.querySelector('[slot="hint"]') !== null, E = [g, w ? "before" : "", z ? "after" : "", y ? "hint" : ""].filter(Boolean).join(" "), A = (
       /*html*/
       `
       <style>
@@ -133,10 +137,27 @@ class S extends HTMLElement {
         label {
           display: block;
           font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
           font-weight: var(--font-weight-medium);
           margin-bottom: var(--space-100);
           color: var(--text-color);
         }
+        :host([size="x-small"]) label {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="small"]) label {
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        :host([size="medium"]) label {
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
+        :host([size="large"]) label {
+          font-size: var(--text-font-size-l);
+          line-height: var(--text-line-height-l);
+        }
         .label-with-optional {
           display: flex;
           align-items: center;
@@ -270,6 +291,22 @@ class S extends HTMLElement {
           text-transform: uppercase;
           font-weight: var(--font-weight-medium);
         }
+        :host([size="x-small"]) .optional {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="small"]) .optional {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        :host([size="medium"]) .optional {
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        :host([size="large"]) .optional {
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
         .optional-dot {
           display: inline-flex;
           align-items: center;
@@ -469,25 +506,28 @@ class S extends HTMLElement {
           flex: none;
           pointer-events: none;
         }
+        slot[name="hint"]::slotted(mui-hint) {
+          pointer-events: auto;
+        }
 
         /* ========================================================================== */
         
 
       </style>
-      ${l ? `<label for="${u}" class="${[p ? "vh" : "", h ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${l}${h ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+      ${n ? `<label for="${c}" class="${[p ? "vh" : "", u ? "label-with-optional" : ""].filter(Boolean).join(" ")}">${n}${u ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
     <div class="${x}">
       <div class="before-slot">
         <slot name="before"></slot>
       </div>
       <input
-        class="${[E, `size-${f}`].filter(Boolean).join(" ")}"
+        class="${[E, `size-${m}`].filter(Boolean).join(" ")}"
         type="${e}"
         name="${o}"
-        id="${u}"
+        id="${c}"
         value="${d}"
-        placeholder="${m}"
-        ${c ? 'disabled aria-disabled="true"' : ""}
-        ${r ? `maxlength="${r}"` : ""}
+        placeholder="${f}"
+        ${h ? 'disabled aria-disabled="true"' : ""}
+        ${i ? `maxlength="${i}"` : ""}
         ${b}
       />
       <div class="hint-slot">
@@ -497,7 +537,7 @@ class S extends HTMLElement {
         <slot name="after"></slot>
       </div>
     </div>
-    ${r ? '<div class="meta"><span class="char-count"></span></div>' : ""}
+    ${i ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = A, this.updateSlottedButtons());