@muibook/components 19.3.0 → 19.4.0

package/README.md

@@ -147,6 +147,21 @@ npm run preview:create-mui-app
 npm install
 ```
 
+#### Clean install from the lockfile:
+
+Use this when you want to install the exact dependency versions already recorded in `package-lock.json`, especially during an active NPM supply-chain issue.
+
+```bash
+npm ci
+npm run build
+```
+
+- `npm install` reads `package.json` version ranges and may update `package-lock.json`.
+- `npm ci` removes `node_modules` and installs exactly from `package-lock.json`.
+- `npm ci` fails if `package.json` and `package-lock.json` are out of sync.
+- Prefer `npm ci` for CI, release builds, and clean local verification.
+- The current declared versions in `package.json` are pinned for now by removing `^` and `~` ranges.
+
 #### TypeScript Support:
 
 ```bash

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

@@ -1,4 +1,4 @@
-class y extends HTMLElement {
+class w extends HTMLElement {
   static get observedAttributes() {
     return ["label", "image", "size", "background", "background-color"];
   }
@@ -59,21 +59,24 @@ class y extends HTMLElement {
   }
   render() {
     const e = this.getAttribute("label"), t = this.getAttribute("image"), a = (this.getAttribute("size") || "medium").toLowerCase(), r = this.getAttribute("background") || "neutral", n = this.getAttribute("background-color"), l = e || "Avatar", o = this.hasSlottedContent(), i = t && !this._imageFailed && !o, c = !i && !o, h = this.getInitials(e), d = {
+      "xx-small": "var(--avatar-xx-small)",
       "x-small": "var(--avatar-x-small)",
       small: "var(--avatar-small)",
       medium: "var(--avatar-medium)",
       large: "var(--avatar-large)"
     }, s = d[a] ?? d.medium, g = {
-      "x-small": "var(--font-size-15)",
+      "xx-small": "var(--font-size-15)",
+      "x-small": "var(--font-size-100)",
       small: "var(--font-size-200)",
       medium: "var(--font-size-300)",
       large: "var(--font-size-400)"
     }, k = g[a] ?? g.medium, u = {
+      "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }, f = u[a] ?? u.medium, m = this.getBackgroundCSS(), p = r === "neutral" && !n ? `var(--avatar-background-override, ${m})` : m, w = (
+    }, f = u[a] ?? u.medium, m = this.getBackgroundCSS(), p = r === "neutral" && !n ? `var(--avatar-background-override, ${m})` : m, x = (
       /*css*/
       `
     :host {
@@ -119,7 +122,7 @@ class y extends HTMLElement {
   `
     );
     if (this.shadowRoot.innerHTML = `
-    <style>${w}</style>
+    <style>${x}</style>
     ${i ? `<img src="${t}" alt="${l}" />` : ""}
     <div class="initials" role="img" aria-label="${l}">${h}</div>
     <slot></slot>
@@ -133,4 +136,4 @@ class y extends HTMLElement {
     }
   }
 }
-customElements.get("mui-avatar") || customElements.define("mui-avatar", y);
+customElements.get("mui-avatar") || customElements.define("mui-avatar", w);

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

@@ -754,9 +754,9 @@ class h extends HTMLElement {
   // Update avatar sizes based on button size
   updateAvatarSizes(o) {
     const t = this.getAttribute("size") || "medium", r = {
-      "xx-small": "x-small",
-      "x-small": "x-small",
-      small: "x-small",
+      "xx-small": "xx-small",
+      "x-small": "xx-small",
+      small: "xx-small",
       medium: "small",
       large: "medium"
     }[t] || "small";

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

@@ -35,7 +35,7 @@ class l extends HTMLElement {
     r.assignedNodes({ flatten: !0 }).forEach((o) => {
       if (o.nodeType === Node.ELEMENT_NODE) {
         const t = o, i = t.tagName.toLowerCase();
-        i === "mui-avatar" ? t.setAttribute("size", "x-small") : i.startsWith("mui-icon-") && t.setAttribute("size", a);
+        i === "mui-avatar" ? t.setAttribute("size", "xx-small") : i.startsWith("mui-icon-") && t.setAttribute("size", a);
       }
     });
   }

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

@@ -40,7 +40,7 @@ class s extends HTMLElement {
         border-radius: inherit;
         font-family: monospace;
         color: var(--text-color);
-        background: var(--surface-elevated-200);
+        background: var(--code-background);
         padding: var(--space-400) var(--space-500);
         box-sizing: border-box;
         width: 100%;

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

@@ -18,10 +18,11 @@ class l extends HTMLElement {
       }
 
       dialog {
-        border: none;
+        border: var(--dialog-border);
         width: ${this.getAttribute("width") || "350px"};
         max-width: 90vw;
         padding: 0;
+        box-sizing: border-box;
         overflow: hidden;
         border-radius: var(--dialog-radius);
         background: var(--dialog-background);

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

@@ -1,6 +1,6 @@
 import "../mui-icons/close/index.js";
 import "../mui-button/index.js";
-class p extends HTMLElement {
+class u extends HTMLElement {
   constructor() {
     super(), this.innerEl = null, this.overlayEl = null, this.footerEl = null, this.actionsSlot = null, this.pushLayout = null, this.outer = null, this.persistentLayout = null, this.headerEl = null, this.headerSlot = null, this._handleEscape = (t) => {
       const e = this.getAttribute("variant") || "overlay";
@@ -56,15 +56,22 @@ class p extends HTMLElement {
       `
       .header {
         display: flex;
+        flex: 0 0 auto;
         justify-content: space-between;
         align-items: center;
         padding: calc(var(--space-400) + env(safe-area-inset-top)) var(--space-400) var(--space-400) var(--space-500);
         border-bottom: var(--border-thin);
         box-sizing: border-box;
       }
+      .inner {
+        display: flex;
+        flex-direction: column;
+      }
       .content {
+        flex: 1 1 auto;
+        min-height: 0;
         overflow-y: auto;
-        height: 100%;
+        height: auto;
         padding: var(--space-500);
         box-sizing: border-box;
       }
@@ -83,6 +90,7 @@ class p extends HTMLElement {
 
       .actions {
         display: flex;
+        flex: 0 0 auto;
         align-items: center;
         justify-content: flex-end;
         padding: var(--space-400) var(--space-500) calc(var(--space-400) + env(safe-area-inset-bottom));
@@ -90,8 +98,6 @@ class p extends HTMLElement {
         background: var(--drawer-background);
         gap: var(--space-300);
         box-sizing: border-box;
-        position: fixed;
-        bottom: 0;
         width: 100%;
       }
       .header[hidden],
@@ -102,18 +108,6 @@ class p extends HTMLElement {
     ), s = (
       /*css*/
       `
-      :host([has-header]) .content {
-        height: calc(100dvh - (7.7rem  + env(safe-area-inset-top) ));
-      }
-
-      :host([has-footer]) .content {
-        height: calc(100dvh - (7.7rem  + env(safe-area-inset-bottom) ));
-      }
-
-      :host([has-header][has-footer]) .content {
-        height: calc(100dvh - ((7.7rem * 2)  + (env(safe-area-inset-top) + env(safe-area-inset-bottom)) ));
-      }
-
       .overlay {
         position: fixed;
         top: 0;
@@ -145,8 +139,6 @@ class p extends HTMLElement {
         transform: translateX(100%);
         opacity: 0;
         visibility: hidden;
-        display: flex;
-        flex-direction: column;
         will-change: transform, opacity;
       }
 
@@ -178,7 +170,7 @@ class p extends HTMLElement {
         visibility: visible;
       }
     `
-    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", d = (
+    ), a = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", l = (
       /*css*/
       `
       .inner {
@@ -190,17 +182,6 @@ class p extends HTMLElement {
         height: 100%;
       }
 
-      .content { height: 100%; }
-
-      :host([has-header]) .content,
-      :host([has-footer]) .content {
-        height: calc(100% - 7.7rem);
-      }
-
-      :host([has-header][has-footer]) .content {
-        height: calc(100% - (7.7rem * 2));
-      }
-
       .outer {
         overflow: hidden;
         will-change: transform;
@@ -233,7 +214,7 @@ class p extends HTMLElement {
 
       /* Hidden & Persistent */
       :host([open]) .outer,
-      :host([variant="persistent"]) .outer  { ${r} }
+      :host([variant="persistent"]) .outer  { ${a} }
 
 
       /* Direct slotted element */
@@ -266,12 +247,6 @@ class p extends HTMLElement {
           border: none;
         }
 
-        .actions {
-          position: fixed;
-          bottom: 0;
-          width: 100%;
-        }
-
         /* Overlay */
         :host([variant="overlay"]) .inner {
           max-width: ${t};
@@ -313,12 +288,15 @@ class p extends HTMLElement {
           padding-top: var(--space-400);
         }
 
-        :host([variant="persistent"]) .content { height: auto; }
+        :host([variant="persistent"]) .content {
+          flex: 0 1 auto;
+          min-height: initial;
+          height: auto;
+        }
 
         :host([variant="persistent"]) .actions {
           border-bottom-right-radius: var(--radius-200);
           border-bottom-left-radius: var(--radius-200);
-          position: static;
           width: 100%;
           padding: var(--space-400) var(--space-500) var(--space-400);
         }
@@ -332,10 +310,10 @@ class p extends HTMLElement {
       }
 
     `
-    ), l = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
-    let a = "";
+    ), d = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
+    let r = "";
     const c = this.hasAttribute("drawer-space") ? "no-padding" : "";
-    e === "overlay" ? a = /*html*/
+    e === "overlay" ? r = /*html*/
     `
       <style>${o}${s}${n}</style>
       <div class="overlay"></div>
@@ -353,13 +331,13 @@ class p extends HTMLElement {
           <slot name="actions"></slot>
         </div>
       </div>
-    ` : (e === "push" || e === "persistent") && (a = /*html*/
+    ` : (e === "push" || e === "persistent") && (r = /*html*/
     `
-        <style>${o}${d}${n}</style>
+        <style>${o}${l}${n}</style>
         <div class="shell">
-          ${l === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
+          ${d === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
         </div>
-      `), this.shadowRoot.innerHTML = a;
+      `), this.shadowRoot.innerHTML = r;
   }
   cacheEls() {
     this.innerEl = this.shadowRoot.querySelector(".inner"), this.overlayEl = this.shadowRoot.querySelector(".overlay"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]'), this.outer = this.shadowRoot.querySelector(".outer"), this.pushLayout = this.shadowRoot.querySelector(".shell"), this.persistentLayout = this.shadowRoot.querySelector(".shell"), this.headerEl = this.shadowRoot.querySelector(".header"), this.headerSlot = this.shadowRoot.querySelector('slot[name="title"]');
@@ -403,4 +381,4 @@ class p extends HTMLElement {
     this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("mui-drawer-close", { bubbles: !0, composed: !0 }));
   }
 }
-customElements.get("mui-drawer") || customElements.define("mui-drawer", p);
+customElements.get("mui-drawer") || customElements.define("mui-drawer", u);

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

@@ -1,4 +1,5 @@
-class n extends HTMLElement {
+import "../mui-icons/info/index.js";
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["variant", "message", "label", "hide-label", "size", "optional"];
   }
@@ -102,11 +103,12 @@ class n 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((o) => o.nodeType === Node.ELEMENT_NODE ? !0 : o.nodeType === Node.TEXT_NODE ? (o.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>' : i === "info" && (a = '<mui-icon-info slot="before" color="var(--feedback-info-icon)"></mui-icon-info>'), 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="${this.size}" variant="${i}">${a}${s}</mui-body>` : "", s ? this.setAttribute("has-message", "") : this.removeAttribute("has-message");
+    const n = i === "info" ? ' style="--text-color: var(--feedback-info-text);"' : "";
+    e.innerHTML = s ? `<mui-body size="${this.size}" variant="${i}"${n}>${a}${s}</mui-body>` : "", s ? this.setAttribute("has-message", "") : this.removeAttribute("has-message");
   }
   syncMessageSlotSizing() {
     if (!this.shadowRoot) return;
@@ -127,4 +129,4 @@ class n extends HTMLElement {
     t && t.addEventListener("slotchange", () => this.passAttributesToChild());
   }
 }
-customElements.get("mui-field") || customElements.define("mui-field", n);
+customElements.get("mui-field") || customElements.define("mui-field", r);

package/dist/esm/components/mui-form-group/index.js

@@ -1,42 +1,54 @@
 import "../mui-heading/index.js";
 import "../mui-body/index.js";
-class h extends HTMLElement {
-  static get observedAttributes() {
-    return ["heading", "hide-label", "variant"];
-  }
+class n extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.slotEl = null, this.updateChoiceGroupState = () => {
+      var o;
+      const t = ((o = this.slotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || [], e = "mui-radio-group, mui-radio, mui-checkbox, mui-switch", i = t.some((r) => {
+        var a;
+        const s = r.tagName.toLowerCase();
+        return s === "mui-radio-group" || s === "mui-radio" || s === "mui-checkbox" || s === "mui-switch" ? !0 : !!((a = r.querySelector) != null && a.call(r, e));
+      });
+      i !== this.hasAttribute("choice-group") && (this.toggleAttribute("choice-group", i), this.render(), this.bindSlotBehavior());
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["heading", "heading-level", "heading-space", "hide-label", "variant", "space", "aligny"];
   }
   connectedCallback() {
-    this.render(), this.setupSlotBehavior();
+    this.render(), this.bindSlotBehavior(), this.updateChoiceGroupState();
   }
   attributeChangedCallback() {
-    this.render();
+    this.render(), this.bindSlotBehavior(), this.updateChoiceGroupState();
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("heading") || "", e = this.hasAttribute("hide-label"), r = this.hasAttribute("choice-group");
-    this.shadowRoot.innerHTML = /*html*/
+    const t = this.getAttribute("heading") || "", e = this.hasAttribute("hide-label"), i = this.hasAttribute("choice-group"), o = this.getHeadingLevel();
+    this.syncLayoutAttributes(), this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: block;
+          --form-group-space: var(--space-500);
+          --form-group-heading-space: var(--form-group-space);
+          --form-group-align-y: start;
         }
         .group {
           display: grid;
-          gap: var(--space-500);
         }
         .group-heading {
           display: block;
           margin: 0;
+          margin-bottom: var(--form-group-heading-space);
         }
         .group-label {
           display: inline-flex;
           margin: 0;
+          margin-bottom: var(--form-group-space);
         }
         .content {
           display: grid;
-          gap: var(--space-500);
+          gap: var(--form-group-space);
           min-inline-size: 0;
         }
         .content-inner {
@@ -44,7 +56,7 @@ class h extends HTMLElement {
         }
         :host([variant="horizontal"]) .content {
           grid-template-columns: var(--form-group-horizontal-template, minmax(0, 1fr) minmax(0, 20rem));
-          align-items: start;
+          align-items: var(--form-group-align-y);
         }
         :host([variant="horizontal"]) .content-inner ::slotted(*) {
           min-inline-size: 0;
@@ -61,7 +73,7 @@ class h extends HTMLElement {
       </style>
 
       <div class="group">
-        ${t && !e ? r ? `<mui-body class="group-label" size="small" weight="bold" variant="optional">${t}</mui-body>` : `<mui-heading class="group-heading" size="5" level="5">${t}</mui-heading>` : ""}
+        ${t && !e ? i ? `<mui-body class="group-label" size="small" weight="bold" variant="optional">${t}</mui-body>` : `<mui-heading class="group-heading" size="5" level="${o}">${t}</mui-heading>` : ""}
         <div class="content">
           <div class="content-inner">
             <slot></slot>
@@ -70,19 +82,19 @@ class h extends HTMLElement {
       </div>
     `;
   }
-  setupSlotBehavior() {
+  bindSlotBehavior() {
+    var e;
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("slot");
-    if (!t) return;
-    const e = () => {
-      const r = t.assignedElements({ flatten: !0 }), a = "mui-radio-group, mui-radio, mui-checkbox, mui-switch", n = r.some((i) => {
-        var s;
-        const o = i.tagName.toLowerCase();
-        return o === "mui-radio-group" || o === "mui-radio" || o === "mui-checkbox" || o === "mui-switch" ? !0 : !!((s = i.querySelector) != null && s.call(i, a));
-      });
-      n && !this.hasAttribute("choice-group") ? (this.setAttribute("choice-group", ""), this.render()) : !n && this.hasAttribute("choice-group") && (this.removeAttribute("choice-group"), this.render());
-    };
-    t.addEventListener("slotchange", e), e();
+    t && this.slotEl !== t && ((e = this.slotEl) == null || e.removeEventListener("slotchange", this.updateChoiceGroupState), this.slotEl = t, this.slotEl.addEventListener("slotchange", this.updateChoiceGroupState));
+  }
+  syncLayoutAttributes() {
+    const t = this.getAttribute("space"), e = this.getAttribute("aligny"), i = this.getAttribute("heading-space");
+    t ? this.style.setProperty("--form-group-space", t) : this.style.removeProperty("--form-group-space"), e ? this.style.setProperty("--form-group-align-y", e) : this.style.removeProperty("--form-group-align-y"), i ? this.style.setProperty("--form-group-heading-space", i) : this.style.removeProperty("--form-group-heading-space");
+  }
+  getHeadingLevel() {
+    const t = this.getAttribute("heading-level") || "5";
+    return ["1", "2", "3", "4", "5", "6"].includes(t) ? t : "5";
   }
 }
-customElements.get("mui-form-group") || customElements.define("mui-form-group", h);
+customElements.get("mui-form-group") || customElements.define("mui-form-group", n);

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

@@ -779,15 +779,15 @@ class h extends HTMLElement {
   // Update avatar sizes based on button size
   updateAvatarSizes(t) {
     const e = this.getAttribute("size") || "medium", s = ((this.getAttribute("variant") || "default") === "default" ? {
-      "xx-small": "x-small",
-      "x-small": "x-small",
-      small: "x-small",
-      medium: "x-small",
+      "xx-small": "xx-small",
+      "x-small": "xx-small",
+      small: "xx-small",
+      medium: "xx-small",
       large: "small"
     } : {
-      "xx-small": "x-small",
-      "x-small": "x-small",
-      small: "x-small",
+      "xx-small": "xx-small",
+      "x-small": "xx-small",
+      small: "xx-small",
       medium: "small",
       large: "medium"
     })[e] || "small";