@muibook/components 19.0.0 → 19.1.0

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

@@ -1,5 +1,5 @@
-import { getPartMap as h } from "../../utils/part-map/index.js";
-class u extends HTMLElement {
+import { getPartMap as v } from "../../utils/part-map/index.js";
+class h extends HTMLElement {
   static get observedAttributes() {
     return ["target", "href", "variant", "disabled", "weight", "size", "download", "usage"];
   }
@@ -9,26 +9,26 @@ class u extends HTMLElement {
   async connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), await this.waitForPartMap(), this.render(), requestAnimationFrame(() => this.updateSlotState());
   }
-  attributeChangedCallback(t, o, e) {
+  attributeChangedCallback(t, e, o) {
     if (this.shadowRoot) {
       if (t === "href") {
         const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("href", e || "#");
+        a && a.setAttribute("href", o || "#");
       }
       if (t === "target") {
         const a = this.shadowRoot.querySelector("a");
-        a && a.setAttribute("target", e || "_self");
+        a && a.setAttribute("target", o || "_self");
       }
       if (t === "disabled") {
         const a = this.shadowRoot.querySelector("a");
-        a && (e !== null ? (a.setAttribute("aria-disabled", "true"), a.setAttribute("href", "javascript:void(0)")) : (a.setAttribute("aria-disabled", "false"), a.setAttribute("href", this.getAttribute("href") || "#")));
+        a && (o !== null ? (a.setAttribute("aria-disabled", "true"), a.setAttribute("href", "javascript:void(0)")) : (a.setAttribute("aria-disabled", "false"), a.setAttribute("href", this.getAttribute("href") || "#")));
       }
       if (t === "download") {
         const a = this.shadowRoot.querySelector("a");
         if (!a) return;
-        e !== null ? a.setAttribute("download", e === "" ? "" : e) : a.removeAttribute("download");
+        o !== null ? a.setAttribute("download", o === "" ? "" : o) : a.removeAttribute("download");
       }
-      t === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => {
+      t === "size" && e !== o && this.shadowRoot && requestAnimationFrame(() => {
         const a = this.shadowRoot;
         if (!a) return;
         const n = [
@@ -46,20 +46,20 @@ class u extends HTMLElement {
     }
   }
   updateSlotState() {
-    const t = this.shadowRoot, o = t.querySelector("slot:not([name])"), e = t.querySelector('slot[name="before"]'), a = t.querySelector('slot[name="after"]'), n = (d) => !!d && d.assignedNodes({ flatten: !0 }).some(
+    const t = this.shadowRoot, e = t.querySelector("slot:not([name])"), o = t.querySelector('slot[name="before"]'), a = t.querySelector('slot[name="after"]'), n = (d) => !!d && d.assignedNodes({ flatten: !0 }).some(
       (l) => {
         var c;
         return l.nodeType === Node.ELEMENT_NODE || l.nodeType === Node.TEXT_NODE && !!((c = l.textContent) != null && c.trim());
       }
-    ), s = n(e), i = n(a);
+    ), s = n(o), i = n(a);
     this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", i);
-    const r = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], v = r.length > 0 && r.every(
+    const r = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [], u = r.length > 0 && r.every(
       (d) => {
         var l;
         return d.nodeType === Node.ELEMENT_NODE ? d.classList.contains("mui-icon") || d.tagName.toLowerCase() === "svg" : !((l = d.textContent) != null && l.trim());
       }
     );
-    this.toggleAttribute("icon-only", v), v ? this.updateIconSizes(r, !0) : [e, o, a].forEach((l) => {
+    this.toggleAttribute("icon-only", u), u ? this.updateIconSizes(r, !0) : [o, e, a].forEach((l) => {
       if (l) {
         const c = l.assignedNodes({ flatten: !0 });
         this.updateIconSizes(c, !1), this.updateAvatarSizes(c), this.updateBadgeSizes(c);
@@ -68,7 +68,7 @@ class u extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = h("text", "spacing", "layout", "visual");
+    const t = v("text", "spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
@@ -496,7 +496,7 @@ class u extends HTMLElement {
       :host([slot="before"][usage="input"]) a,
       :host([slot="after"][usage="input"]) a {
         border: var(--border-thin);
-        min-height: 4.4rem;
+        min-height: var(--input-slot-min-height);
         background: var(--input-background);
         color: var(--action-secondary-text-color);
         border-color: var(--form-default-border-color);
@@ -564,7 +564,11 @@ class u extends HTMLElement {
       :host([size="xx-small"][variant]:not([variant="default"])) a,
       :host([size="xx-small"][variant]:not([variant="default"])) a:hover,
       :host([size="xx-small"][variant]:not([variant="default"])) a:focus,
-      :host([size="xx-small"][variant]:not([variant="default"])) a[aria-disabled="true"] {
+      :host([size="xx-small"][variant]:not([variant="default"])) a[aria-disabled="true"],
+      :host([size="xx-small"][usage="input"]) a,
+      :host([size="xx-small"][usage="input"]) a:hover,
+      :host([size="xx-small"][usage="input"]) a:focus,
+      :host([size="xx-small"][usage="input"]) a[aria-disabled="true"] {
         font-size: var(--font-size-15);
         line-height: var(--line-height-25);
         font-weight: var(--font-weight-semi-bold);
@@ -576,7 +580,11 @@ class u extends HTMLElement {
       :host([size="x-small"][variant]:not([variant="default"])) a,
       :host([size="x-small"][variant]:not([variant="default"])) a:hover,
       :host([size="x-small"][variant]:not([variant="default"])) a:focus,
-      :host([size="x-small"][variant]:not([variant="default"])) a[aria-disabled="true"] {
+      :host([size="x-small"][variant]:not([variant="default"])) a[aria-disabled="true"],
+      :host([size="x-small"][usage="input"]) a,
+      :host([size="x-small"][usage="input"]) a:hover,
+      :host([size="x-small"][usage="input"]) a:focus,
+      :host([size="x-small"][usage="input"]) a[aria-disabled="true"] {
         font-size: var(--text-font-size-xs);
         line-height: var(--text-line-height-xs);
         font-weight: var(--font-weight-semi-bold);
@@ -585,27 +593,49 @@ class u extends HTMLElement {
         border-radius: var(--action-radius-x-small);
       }
 
-      :host([size="small"][variant]:not([variant="default"])) a {
+      :host([size="small"][variant]:not([variant="default"])) a,
+      :host([size="small"][usage="input"]) a {
         font-size: var(--text-font-size-s);
         line-height: var(--text-line-height-s);
         padding: var(--action-padding-small);
         border-radius: var(--action-radius-small);
       }
 
-      :host([size="medium"][variant]:not([variant="default"])) a {
+      :host([size="medium"][variant]:not([variant="default"])) a,
+      :host([size="medium"][usage="input"]) a {
         font-size: var(--text-font-size-m);
         line-height: var(--text-line-height-m);
         padding: var(--action-padding);
         border-radius: var(--action-radius-medium);
       }
 
-      :host([size="large"][variant]:not([variant="default"])) a {
+      :host([size="large"][variant]:not([variant="default"])) a,
+      :host([size="large"][usage="input"]) a {
         font-size: var(--text-font-size-l);
         line-height: var(--text-line-height-l);
         padding: var(--action-padding-large);
         border-radius: var(--action-radius-large);
       }
 
+      /* Keep input-composed links flush against the input edge after size radius applies. */
+      :host([slot="before"][usage="input"]) a,
+      :host([slot="before"][usage="input"]) a:hover,
+      :host([slot="before"][usage="input"]) a:focus,
+      :host([slot="before"][usage="input"]) a:focus-visible,
+      :host([slot="before"][usage="input"]) a[aria-disabled="true"] {
+        border-top-right-radius: var(--radius-000);
+        border-bottom-right-radius: var(--radius-000);
+      }
+
+      :host([slot="after"][usage="input"]) a,
+      :host([slot="after"][usage="input"]) a:hover,
+      :host([slot="after"][usage="input"]) a:focus,
+      :host([slot="after"][usage="input"]) a:focus-visible,
+      :host([slot="after"][usage="input"]) a[aria-disabled="true"] {
+        border-top-left-radius: var(--radius-000);
+        border-bottom-left-radius: var(--radius-000);
+      }
+
       /* Icon-only size variants */
       :host([size="xx-small"][variant]:not([variant="default"])[icon-only]) a {
         height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
@@ -748,7 +778,7 @@ class u extends HTMLElement {
   }
   // Update avatar sizes based on button size
   updateAvatarSizes(t) {
-    const o = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
+    const e = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "x-small",
@@ -760,7 +790,7 @@ class u extends HTMLElement {
       small: "x-small",
       medium: "small",
       large: "medium"
-    })[o] || "small";
+    })[e] || "small";
     t.forEach((i) => {
       if (i.nodeType === Node.ELEMENT_NODE) {
         const r = i;
@@ -768,14 +798,14 @@ class u extends HTMLElement {
       }
     });
   }
-  updateIconSizes(t, o) {
-    const e = this.getAttribute("size") || "medium", n = {
+  updateIconSizes(t, e) {
+    const o = this.getAttribute("size") || "medium", n = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
-      medium: o ? "medium" : "small",
-      large: o ? "large" : "medium"
-    }[e] || "small";
+      medium: e ? "medium" : "small",
+      large: e ? "large" : "medium"
+    }[o] || "small";
     t.forEach((s) => {
       if (s.nodeType === Node.ELEMENT_NODE) {
         const i = s, r = i.tagName.toLowerCase();
@@ -784,13 +814,13 @@ class u extends HTMLElement {
     });
   }
   updateBadgeSizes(t) {
-    const o = this.getAttribute("size") || "medium", a = {
+    const e = this.getAttribute("size") || "medium", a = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }[o] || "medium";
+    }[e] || "medium";
     t.forEach((n) => {
       if (n.nodeType === Node.ELEMENT_NODE) {
         const s = n;
@@ -800,12 +830,12 @@ class u extends HTMLElement {
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof h == "function") return t();
-      const o = () => {
-        typeof h == "function" ? t() : requestAnimationFrame(o);
+      if (typeof v == "function") return t();
+      const e = () => {
+        typeof v == "function" ? t() : requestAnimationFrame(e);
       };
-      o();
+      e();
     });
   }
 }
-customElements.get("mui-link") || customElements.define("mui-link", u);
+customElements.get("mui-link") || customElements.define("mui-link", h);

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

@@ -1,42 +1,61 @@
-class c extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
-    super(), this.slotEl = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null;
-    const e = this.attachShadow({ mode: "open" }), s = (
+    super(), this.slotEl = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null, this.cleanup = null;
+    const t = this.attachShadow({ mode: "open" }), s = (
       /*css*/
       `
       :host { display: block; }
     `
     );
-    e.innerHTML = `
+    t.innerHTML = `
       <style>${s}</style>
       <slot></slot>
-    `, this.slotEl = e.querySelector("slot");
+    `, this.slotEl = t.querySelector("slot");
   }
   static get observedAttributes() {
     return ["breakpoint", "breakpoint-low", "breakpoint-high"];
   }
   connectedCallback() {
-    const e = this.getAttribute("breakpoint"), s = this.getAttribute("breakpoint-low"), l = this.getAttribute("breakpoint-high");
-    if (this.slotEl) {
+    this.setupResponsive();
+  }
+  disconnectedCallback() {
+    this.teardownResponsive();
+  }
+  attributeChangedCallback(t, s, l) {
+    s !== l && a.observedAttributes.includes(t) && this.setupResponsive();
+  }
+  teardownResponsive() {
+    var t;
+    (t = this.cleanup) == null || t.call(this), this.cleanup = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null;
+  }
+  setupResponsive() {
+    const t = this.getAttribute("breakpoint"), s = this.getAttribute("breakpoint-low"), l = this.getAttribute("breakpoint-high");
+    if (this.teardownResponsive(), !!this.slotEl)
       if (s && l) {
-        const o = parseInt(s), i = parseInt(l);
-        this.mqlLow = window.matchMedia(`(max-width: ${o}px)`), this.mqlHigh = window.matchMedia(`(min-width: ${i}px)`);
-        const t = () => {
-          const n = this.mqlLow.matches, h = this.mqlHigh.matches, a = n ? "showBelow" : h ? "showAbove" : "showMiddle";
-          this.slotEl.setAttribute("name", a);
+        const n = parseInt(s), i = parseInt(l);
+        if (Number.isNaN(n) || Number.isNaN(i)) return;
+        this.mqlLow = window.matchMedia(`(max-width: ${n}px)`), this.mqlHigh = window.matchMedia(`(min-width: ${i}px)`);
+        const e = () => {
+          const o = this.mqlLow.matches, h = this.mqlHigh.matches, r = o ? "showBelow" : h ? "showAbove" : "showMiddle";
+          this.slotEl.setAttribute("name", r);
+        };
+        e(), this.mqlLow.addEventListener("change", e), this.mqlHigh.addEventListener("change", e), this.cleanup = () => {
+          var o, h;
+          (o = this.mqlLow) == null || o.removeEventListener("change", e), (h = this.mqlHigh) == null || h.removeEventListener("change", e);
+        };
+      } else if (t) {
+        const n = parseInt(t);
+        if (Number.isNaN(n)) return;
+        this.mqlSingle = window.matchMedia(`(max-width: ${n}px)`);
+        const i = () => {
+          this.slotEl.setAttribute("name", this.mqlSingle.matches ? "showBelow" : "showAbove");
         };
-        t(), this.mqlLow.addEventListener("change", t), this.mqlHigh.addEventListener("change", t);
-      } else if (e) {
-        const o = parseInt(e);
-        this.mqlSingle = window.matchMedia(`(max-width: ${o}px)`);
-        const i = (t) => {
-          this.slotEl.setAttribute("name", t ? "showBelow" : "showAbove");
+        i(), this.mqlSingle.addEventListener("change", i), this.cleanup = () => {
+          var e;
+          (e = this.mqlSingle) == null || e.removeEventListener("change", i);
         };
-        i(this.mqlSingle.matches), this.mqlSingle.addEventListener("change", (t) => {
-          i(t.matches);
-        });
-      }
-    }
+      } else
+        this.slotEl.removeAttribute("name");
   }
 }
-customElements.get("mui-responsive") || customElements.define("mui-responsive", c);
+customElements.get("mui-responsive") || customElements.define("mui-responsive", a);

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Mon, 23 Mar 2026 11:01:23 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Mon, 30 Mar 2026 07:14:52 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */

package/dist/esm/css/mui-tokens.css

@@ -230,6 +230,7 @@ html[data-theme="light"] {
   --skeleton-radius: var(--radius-200);
   --skeleton-animation-speed: 2000ms;
   --skeleton-gap: var(--space-200);
+  --chip-input-background: var(--surface-elevated-alpha);
   --surface-recessed-alpha: var(--black-opacity-10);
   --surface-recessed-100: var(--grey-300);
   --surface-recessed-200: var(--grey-400);
@@ -571,6 +572,7 @@ html[data-theme="dark"] {
   --skeleton-radius: var(--radius-200);
   --skeleton-animation-speed: 2000ms;
   --skeleton-gap: var(--space-200);
+  --chip-input-background: var(--grey-900);
   --surface-elevated-300: var(--grey-1000);
   --surface-recessed-alpha: var(--black-opacity-30);
   --surface-recessed-100: var(--grey-1000);