@muibook/components 19.5.1 → 19.6.0

package/dist/esm/agent/keywords/index.js

@@ -1,7 +1,15 @@
 const e = {
   // FEEDBACK
   alert: ["alert", "success", "info", "warning", "error", "message", "banner", "notification"],
-  message: ["message", "notice", "notification", "alert", "info", "positive", "neutral", "warning", "attention"],
+  message: [
+    "page message",
+    "page notice",
+    "persistent notice",
+    "persistent message",
+    "system notice",
+    "status notice",
+    "message banner"
+  ],
   loader: ["loader", "loading", "skeleton", "placeholder", "shimmer", "pulse", "fade", "spinner"],
   spinner: ["spinner", "loading", "busy", "indicator", "progress"],
   progress: ["progress", "bar", "loading", "completion", "percent", "syncing", "pending"],

package/dist/esm/agent/prompts/index.js

@@ -24,6 +24,7 @@ CRITICAL RULES:
 11. Put visual backgrounds on layout style or SmartCard bg props.
 12. SmartCard props use kebab-case: bg-image, bg-color, logo-height.
 13. Normalize scanned Muibook/Figma names to Redactd component types before output.
+14. Do not use Message as a styled paragraph, inline note, or form helper. Message is only for persistent page-level notices with a heading and slotted body content.
 
 MUI SCAN NORMALIZATION RULES:
 - Normalize muiscan to Redactd types before output
@@ -60,7 +61,7 @@ TEXT NODE RULES FOR MUISCAN:
   - mui-badge: consume TEXT as the badge's direct rendered text; preserve before/after slot children; do not invent Body
   - mui-chip: consume TEXT as the chip's direct rendered text; preserve before/after slot children; do not invent Body
   - mui-alert: preserve variant/label, convert default content to Span, consume TEXT into Span.props.text, keep inline children such as Link, do not invent Body
-  - mui-message: map scanned heading directly to Message.props.heading, preserve variant/icon/size, keep remaining children as default message content
+  - mui-message: map scanned heading directly to Message.props.heading, preserve variant/icon/size, keep remaining children as default message content; if there is no supporting body content, prefer Body or FormMessage instead of Message
 - Do not invent wrappers when the target already supports text
 
 Available Components:
@@ -71,7 +72,7 @@ LAYOUT:
 - Grid: col, space, padding, alignX, alignY, height, width, fill, viewport, style
 - Container: size (small|medium|large), center, style
 - Responsive: breakpoint, breakpoint-low, breakpoint-high; slots showBelow/showMiddle/showAbove
-- Rule: length, weight, direction (horizontal|vertical)
+- Rule: length, weight (thin|thick|CSS size), direction (horizontal|vertical)
 
 SURFACES:
 - Card: use CardBody for card content
@@ -86,7 +87,7 @@ SURFACES:
 
 CONTENT:
 - Heading: text, size (1|2|3|4|5|6), level (1|2|3|4|5|6)
-- Body: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|success|warning|error), style
+- Body: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|success|warning|error), style; use _Icon icon=mui-icon-info slot=before for lightweight inline guidance
 - Span: text, style; supports inline children such as Link
 - Code: size, scrollable
 - Quote: default text
@@ -139,7 +140,7 @@ NAVIGATION:
 - CarouselPanel: item, style
 
 FEEDBACK:
-- Message: heading, variant (plain|neutral|positive|info|warning|attention), icon, size (small|medium|large); slot default
+- Message: heading, variant (neutral|positive|info|warning|attention), icon, size (small|medium|large); slot default. Use only for persistent page-level or section-level notices. Always provide a concise heading plus default slot body content, usually Body/List/Link. Do not use for inline guidance, styled text blocks, or form helper text.
 - Alert: variant (success|info|warning|error), label; slots default/action
 - Loader: loading, animation (pulsate|fade-in|translate), direction (up|right|down|left), duration; slot default
 - Spinner: size (xx-small|x-small|small|medium|large), color, duration, label, style

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

@@ -1,7 +1,7 @@
 import { getPartMap as r } from "../../utils/part-map/index.js";
 class l extends HTMLElement {
   static get observedAttributes() {
-    return ["size", "weight", "variant"];
+    return ["size", "weight", "variant", "truncate", "clamp"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -9,25 +9,36 @@ class l 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();
   }
-  attributeChangedCallback(t, e, s) {
-    e !== s && this.shadowRoot && this.render();
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.shadowRoot && this.render();
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = r("text", "spacing", "layout", "visual");
+    const t = r("text", "spacing", "layout", "visual"), e = this.getLineClamp();
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
-      :host { display: block; }
+      :host {
+        display: block;
+        --body-line-clamp: ${e};
+      }
       :host([has-before]),
       :host([has-after]) {
         display: inline-flex;
       }
 
+      :host([truncate]) {
+        display: block;
+        min-width: 0;
+        max-width: 100%;
+        width: 100%;
+      }
+
       :host p {
         color: var(--text-color);
         margin: var(--space-000);
         display: block;
+        min-width: 0;
         width: 100%;
       }
 
@@ -41,9 +52,31 @@ class l extends HTMLElement {
       }
 
       .content {
+        max-width: 100%;
         min-width: 0;
       }
 
+      :host([truncate]) p,
+      :host([clamp]) p {
+        max-width: 100%;
+      }
+
+      :host([truncate]) .content {
+        display: block;
+        max-width: 100%;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      :host([clamp]:not([truncate])) .content {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--body-line-clamp);
+      }
+
       ::slotted([slot="before"]),
       ::slotted([slot="after"]) {
         flex-shrink: 0;
@@ -64,7 +97,7 @@ class l extends HTMLElement {
 
       :host([size="large"]) ::slotted([slot="before"]),
       :host([size="large"]) ::slotted([slot="after"]) {
-        margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-050)));
+        margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-300)));
       }
 
       :host([size="x-small"]) p {
@@ -100,6 +133,9 @@ class l extends HTMLElement {
         color: var(--text-color-optional);
       }
 
+      :host([variant="info"]) p {
+        color: var(--text-color-info);
+      }
       :host([variant="success"]) p {
         color: var(--text-color-success);
       }
@@ -116,6 +152,9 @@ class l extends HTMLElement {
       :host([variant="optional"]) ::slotted(.mui-icon) {
         fill: var(--text-color-optional);
       }
+      :host([variant="info"]) ::slotted(.mui-icon) {
+        fill: var(--text-color-info);
+      }
       :host([variant="success"]) ::slotted(.mui-icon) {
         fill: var(--text-color-success);
       }
@@ -135,28 +174,32 @@ class l extends HTMLElement {
     </p>
     `, this.setupSlotBehavior();
   }
+  getLineClamp() {
+    const t = Number(this.getAttribute("clamp"));
+    return Number.isFinite(t) && t > 0 ? Math.floor(t) : 2;
+  }
   setupSlotBehavior() {
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector('slot[name="before"]'), e = this.shadowRoot.querySelector('slot[name="after"]'), s = () => {
-      const a = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], i = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? [];
-      a.length > 0 ? this.setAttribute("has-before", "") : this.removeAttribute("has-before"), i.length > 0 ? this.setAttribute("has-after", "") : this.removeAttribute("has-after"), this.syncInlineSlotSizes([...a, ...i]);
+    const t = this.shadowRoot.querySelector('slot[name="before"]'), e = this.shadowRoot.querySelector('slot[name="after"]'), i = () => {
+      const a = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], o = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? [];
+      a.length > 0 ? this.setAttribute("has-before", "") : this.removeAttribute("has-before"), o.length > 0 ? this.setAttribute("has-after", "") : this.removeAttribute("has-after"), this.syncInlineSlotSizes([...a, ...o]);
     };
-    t == null || t.addEventListener("slotchange", s), e == null || e.addEventListener("slotchange", s), s();
+    t == null || t.addEventListener("slotchange", i), e == null || e.addEventListener("slotchange", i), i();
   }
   syncInlineSlotSizes(t) {
-    const s = {
+    const i = {
       "x-small": "x-small",
       small: "small",
       medium: "small",
       large: "medium"
-    }[this.getAttribute("size") || "medium"] || "small", i = {
+    }[this.getAttribute("size") || "medium"] || "small", o = {
       "x-small": "xx-small",
       small: "x-small",
       medium: "small",
       large: "medium"
     }[this.getAttribute("size") || "medium"] || "small";
-    t.forEach((o) => {
-      o.tagName.startsWith("MUI-ICON-") && o.setAttribute("size", s), o.tagName === "MUI-BADGE" && o.setAttribute("size", i);
+    t.forEach((s) => {
+      s.tagName.startsWith("MUI-ICON-") && s.setAttribute("size", i), s.tagName === "MUI-BADGE" && s.setAttribute("size", o);
     });
   }
   waitForPartMap() {

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

@@ -10,6 +10,7 @@ class a extends HTMLElement {
   getIconColor(t) {
     return {
       optional: "var(--text-color-optional)",
+      info: "var(--text-color-info)",
       warning: "var(--text-color-warning)",
       success: "var(--text-color-success)",
       error: "var(--text-color-error)"
@@ -25,9 +26,9 @@ class a extends HTMLElement {
   }
   syncBeforeIcon() {
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector('slot[name="before"]'), e = this.getIconColor(this.getAttribute("variant") || "optional"), o = this.getIconSize(this.getAttribute("size") || "small");
-    ((t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).forEach((s) => {
-      s.tagName.toLowerCase().startsWith("mui-icon-") && (s.hasAttribute("color") || s.setAttribute("color", e), s.hasAttribute("size") || s.setAttribute("size", o));
+    const t = this.shadowRoot.querySelector('slot[name="before"]'), s = this.getIconColor(this.getAttribute("variant") || "optional"), o = this.getIconSize(this.getAttribute("size") || "small");
+    ((t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? []).forEach((e) => {
+      e.tagName.toLowerCase().startsWith("mui-icon-") && (e.hasAttribute("color") || e.setAttribute("color", s), e.hasAttribute("size") || e.setAttribute("size", o));
     });
   }
   connectedCallback() {
@@ -38,7 +39,7 @@ class a extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("size") || "small", e = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional";
+    const t = this.getAttribute("size") || "small", s = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional", r = this.querySelector('[slot="after"]') !== null;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -50,23 +51,30 @@ class a extends HTMLElement {
           margin-inline-start: var(--stroke-size-100);
           margin-block-start: var(--space-200);
         }
+        .slot-wrapper {
+          display: inline-flex;
+        }
       </style>
 
-      <mui-body size="${t}" weight="${e}" variant="${o}">
-        <slot slot="before" name="before">
-          <mui-icon-info id="default-before-icon" size="${this.getIconSize(t)}" color="${this.getIconColor(o)}"></mui-icon-info>
-        </slot>
+      <mui-body size="${t}" weight="${s}" variant="${o}">
+        <span slot="before" class="slot-wrapper">
+          <slot name="before">
+            <mui-icon-info id="default-before-icon" size="${this.getIconSize(t)}" color="${this.getIconColor(o)}"></mui-icon-info>
+          </slot>
+        </span>
         <slot></slot>
-        <slot slot="after" name="after"></slot>
+        ${r ? `<span slot="after" class="slot-wrapper">
+                <slot name="after"></slot>
+              </span>` : ""}
       </mui-body>
     `;
-    const i = this.shadowRoot.querySelector('slot[name="before"]');
-    i == null || i.addEventListener("slotchange", () => this.syncBeforeIcon()), this.syncBeforeIcon();
+    const e = this.shadowRoot.querySelector('slot[name="before"]');
+    e == null || e.addEventListener("slotchange", () => this.syncBeforeIcon()), this.syncBeforeIcon();
   }
 }
 customElements.get("mui-form-message") || customElements.define("mui-form-message", a);
 if (!customElements.get("mui-form-hint")) {
-  class r extends a {
+  class i extends a {
   }
-  customElements.define("mui-form-hint", r);
+  customElements.define("mui-form-hint", i);
 }

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

@@ -1,6 +1,6 @@
-class n extends HTMLElement {
+class h extends HTMLElement {
   static get observedAttributes() {
-    return ["size", "level"];
+    return ["size", "level", "truncate", "clamp"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -8,21 +8,53 @@ class n extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(i, t, e) {
-    t !== e && this.shadowRoot && this.render();
+  attributeChangedCallback(e, i, t) {
+    i !== t && this.shadowRoot && this.render();
   }
   render() {
     if (!this.shadowRoot) return;
-    const i = this.getAttribute("size") || "1", e = `h${this.getAttribute("level") || i}`;
+    const e = this.getAttribute("size") || "1", t = `h${this.getAttribute("level") || e}`, n = this.getLineClamp();
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
-        :host { display: block; }
+        :host {
+          display: block;
+          --heading-line-clamp: ${n};
+        }
+
+        :host([truncate]) {
+          min-width: 0;
+          max-width: 100%;
+          width: 100%;
+        }
 
         h1, h2, h3, h4, h5, h6 {
           margin: var(--space-000);
           font-weight: var(--heading-font-weight);
           color: var(--heading-text-color);
+          min-width: 0;
+          width: 100%;
+        }
+
+        .content {
+          max-width: 100%;
+          min-width: 0;
+        }
+
+        :host([truncate]) .content {
+          display: block;
+          max-width: 100%;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        :host([clamp]:not([truncate])) .content {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: var(--heading-line-clamp);
         }
 
         .size-1 { font-size: var(--heading-font-size-100); line-height: var(--heading-line-height-100); }
@@ -32,10 +64,14 @@ class n extends HTMLElement {
         .size-5 { font-size: var(--heading-font-size-500); line-height: var(--heading-line-height-500); }
         .size-6 { font-size: var(--heading-font-size-600); line-height: var(--heading-line-height-600); }
       </style>
-      <${e} class="size-${i}">
-        <slot></slot>
-      </${e}>
+      <${t} class="size-${e}">
+        <span class="content"><slot></slot></span>
+      </${t}>
     `;
   }
+  getLineClamp() {
+    const e = Number(this.getAttribute("clamp"));
+    return Number.isFinite(e) && e > 0 ? Math.floor(e) : 2;
+  }
 }
-customElements.get("mui-heading") || customElements.define("mui-heading", n);
+customElements.get("mui-heading") || customElements.define("mui-heading", h);

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

@@ -133,11 +133,11 @@ class T extends HTMLElement {
   }
   getDelay() {
     const t = Number(this.getAttribute("delay"));
-    return Number.isFinite(t) ? Math.min(2e3, Math.max(1e3, t)) : 1500;
+    return Number.isFinite(t) ? Math.min(2e3, Math.max(250, t)) : 500;
   }
   getInitialDelay() {
     const t = Number(this.getAttribute("initial-delay"));
-    return Number.isFinite(t) ? Math.min(2e3, Math.max(1e3, t)) : 1500;
+    return Number.isFinite(t) ? Math.min(2e3, Math.max(250, t)) : 500;
   }
   openWithDelay() {
     this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null);

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

@@ -15,8 +15,15 @@ class s extends HTMLElement {
     const t = !!this.closest("mui-card"), e = !!this.closest("mui-form-section"), i = !!this.closest("mui-dialog"), o = !!this.closest("mui-drawer");
     this.toggleAttribute("in-card", t), this.toggleAttribute("in-form-section", e), this.toggleAttribute("in-dialog", i), this.toggleAttribute("in-drawer", o);
   }
+  getRuleWeight() {
+    const t = this.getAttribute("weight") || "var(--stroke-size-100)";
+    return {
+      thin: "var(--stroke-size-100)",
+      thick: "var(--stroke-size-200)"
+    }[t] || t;
+  }
   updateStyles() {
-    const t = this.getAttribute("length") || "100%", e = this.getAttribute("weight") || "1px", i = (
+    const t = this.getAttribute("length") || "100%", e = this.getRuleWeight(), i = (
       /*css*/
       `
       :host {

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

@@ -39,7 +39,7 @@ class i extends HTMLElement {
     return this.querySelector('[slot="accessory"]') !== null;
   }
   render() {
-    const a = this.variant === "action", t = this.getAttribute("col") || "1fr 1fr", r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
+    const a = this.variant === "action", t = this.getAttribute("col") || (a ? "minmax(0, 1fr) auto" : "1fr 1fr"), r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
       /*css*/
       `
       :host {
@@ -72,6 +72,14 @@ class i extends HTMLElement {
         text-align: left;
       }
 
+      .action::part(grid-template-columns) {
+        grid-template-columns: ${t};
+      }
+
+      .action::part(gap) {
+        gap: ${r};
+      }
+
       .action:focus {
         z-index: 1;
       }

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Tue, 26 May 2026 10:59:50 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Thu, 28 May 2026 12:53:59 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -28,6 +28,7 @@
 /* ======================================= 21 / 14  =  1.500 ======================================= */
 /* ======================================= 24 / 16  =  1.500 ======================================= */
 /* ======================================= 24 / 18  =  1.333 ======================================= */
+/* ======================================= 30 / 18  =  1.667 ======================================= */
 /* ======================================= 24 / 21  =  1.143 ======================================= */
 /* ======================================= 36 / 24  =  1.500 ======================================= */
 /* ======================================= 48 / 36  =  1.333 ======================================= */
@@ -62,6 +63,7 @@
   --line-height-50: 1.5;
   --line-height-100: 1.5;
   --line-height-200: 1.33333333;
+  --line-height-225: 1.66666667;
   --line-height-300: 1.14285714;
   --line-height-400: 1.5;
   --line-height-500: 1.33333333;

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

@@ -241,6 +241,7 @@ html[data-theme="light"] {
   --border-color: var(--black-opacity-20);
   /* Text */
   --text-color: var(--grey-900);
+  --text-color-info: var(--blue-600);
   --text-color-success: var(--green-600);
   --text-color-warning: var(--orange-600);
   --text-color-error: var(--red-600);
@@ -597,6 +598,7 @@ html[data-theme="dark"] {
   --border-color: var(--white-opacity-20);
   /* Text */
   --text-color: var(--grey-200);
+  --text-color-info: var(--blue-400);
   --text-color-success: var(--green-400);
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
@@ -839,7 +841,7 @@ html[data-theme="dark"] {
   --text-line-height-xs: var(--line-height-25);
   --text-line-height-s: var(--line-height-50);
   --text-line-height-m: var(--line-height-100);
-  --text-line-height-l: var(--line-height-200);
+  --text-line-height-l: var(--line-height-225);
   --text-font-size-xs: var(--font-size-25);
   --text-font-size-s: var(--font-size-50);
   --text-font-size-m: var(--font-size-100);