@muibook/components 19.5.1 → 20.0.0

package/README.md

@@ -61,7 +61,7 @@ Learn more at [Muibook.com](https://muibook.com/#/create-mui-app)
 
 # Muibook Repository
 
-Muibook is the home of the Mui Design System (MichaelUI) — native Web Components with clean, composable patterns that help you write less code.
+Muibook is the home of the MichaelUI Design System — native Web Components with clean, composable patterns that help you write less code.
 
 - 📖 Comprehensive guides: From basic usage to advanced customization
 - 🎨 Design principles: Learn the MichaelUI design language

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"],
@@ -49,7 +57,38 @@ const e = {
   avatar: ["avatar", "profile", "user", "initials", "image", "icon", "person"],
   image: ["image", "photo", "picture", "figure", "caption", "img"],
   skeleton: ["skeleton", "loading", "placeholder", "shimmer", "pulse", "line", "rect", "circle"],
-  badge: ["badge", "label", "tag", "status", "notification", "overlay", "positive", "warning", "error"],
+  badge: [
+    "badge",
+    "count",
+    "label",
+    "tag",
+    "metadata",
+    "notification",
+    "overlay",
+    "paid",
+    "busy",
+    "offline",
+    "beta",
+    "default",
+    "shared",
+    "positive",
+    "warning",
+    "error"
+  ],
+  status: [
+    "status",
+    "state",
+    "workflow state",
+    "record status",
+    "object status",
+    "active",
+    "draft",
+    "pending",
+    "review",
+    "blocked",
+    "synced",
+    "queued"
+  ],
   // ACCORDION
   accordion: [
     "accordion",

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
@@ -58,9 +59,10 @@ TEXT NODE RULES FOR MUISCAN:
   - keep inline children such as Link nested inside the same Span
 - Exceptions:
   - mui-badge: consume TEXT as the badge's direct rendered text; preserve before/after slot children; do not invent Body
+  - mui-status: consume TEXT as the status's direct rendered text; preserve before/after icon slot children; do not invent Body, Badge, or Message inside Status
   - 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 +73,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
@@ -85,8 +87,8 @@ SURFACES:
 - SmartCard: state, number, variant, partner, type, logo, logo-height, bg-color, bg-image, inverted
 
 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
+- Heading: text, size (1|2|3|4|5|6), level (1|2|3|4|5|6), truncate, clamp
+- Body: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|info|success|warning|error), truncate, clamp, 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
@@ -95,7 +97,8 @@ CONTENT:
 - List: slot default
 - ListItem: text, variant, size (x-small|small|medium|large), weight (regular|bold)
 - _Icon: icon, size (xx-small|x-small|small|medium|large), color, slot
-- Badge: text, variant (default|positive|warning|error|overlay)
+- Badge: text, variant (default|positive|warning|error|overlay), color (grey|purple|violet|pink|magenta|red|orange|amber|yellow|lime|green|teal|cyan|blue|indigo|CSS background value). Use for compact non-interactive presentational metadata, counts, and lightweight state-like labels such as Offline, Online, Busy, Do not disturb, Beta, Default, IMG, or Shared when the surrounding UI already explains the object. Good inside cards, messages, chips, buttons, tabs, navigation, and hero or marketing surfaces. Use color to override the badge background only through theme-aware badge background tokens; do not use positive, warning, or attention just to get a different background colour.
+- Status: text, variant (info|positive|warning|attention), color (grey|purple|violet|pink|magenta|red|orange|amber|yellow|lime|green|teal|cyan|blue|indigo), size (small|medium); slots before/after. Use for compact object or workflow state labels such as Active, Draft, Pending, Review, Blocked, or Synced when the value is the primary state of a record, workflow, or system, especially in tables, slats, dashboards, and data-heavy pages. Status is non-interactive by default, but can be interactive when composed as a trigger or compact state action. Omit variant for default low-emphasis grey status; use variant for semantic feedback and color for non-semantic categorical labels. Use action only when the status is a trigger. Do not use for counts, helper text, paragraph guidance, page-level notices, or decorative metadata.
 - Skeleton: loading, shape (line|rect|circle), size, animation (shimmer|pulse|none), lines, width, height, radius, gap, duration, line-widths, max-width, style
 
 ACCORDION:
@@ -108,7 +111,7 @@ FORMS AND INPUTS:
 - FormSectionFooter: slot, style
 - FormGroup: heading, variant (vertical|horizontal), hide-label, style
 - Field: label, variant (default|success|warning|error), message, hide-label, size (x-small|small|medium|large), optional, style
-- FormMessage: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|success|warning|error), style
+- FormMessage: text, size (x-small|small|medium|large), weight (regular|bold), variant (default|optional|info|success|warning|error), style
 - Input: label, type (text|email|password|number|tel|url), placeholder, value, id, name, disabled, hide-label, variant (default|error), size (x-small|small|medium|large), optional, max-length; slots before/after
 - Textarea: label, placeholder, value, name, id, variant (default|success|warning|error), size (x-small|small|medium|large), rows, optional, hide-label, max-length, disabled, style
 - Select: label, placeholder, options, value, id, name, disabled, variant (default|error), size (x-small|small|medium|large)
@@ -122,14 +125,14 @@ FORMS AND INPUTS:
 - Addon: text, size (x-small|small|medium|large), slot (before|after), style
 
 ACTIONS:
-- Button: text, variant (primary|secondary|tertiary|overlay|attention), size (small|medium|large), disabled, aria-label; slots default/before/after
+- Button: text, variant (primary|secondary|tertiary|overlay|attention), size (xx-small|x-small|small|medium|large), stroke (border|ring), stroke-ring-size (100|200|300|400|500), disabled, aria-label; slots default/before/after
 - ButtonGroup: slot default, right, style
-- Link: text, href, variant (primary|secondary|tertiary|overlay|attention), size (x-small|small|medium|large), target, download, weight (regular|bold), disabled; slots default/before/after
+- Link: text, href, variant (primary|secondary|tertiary|overlay|attention), size (xx-small|x-small|small|medium|large), stroke (border|ring), stroke-ring-size (100|200|300|400|500), target, download, weight (regular|bold), disabled; slots default/before/after
 - Dropdown: zindex, position, persistent; slots action/default
-- Chip: text, active, dismiss, usage; slots default/before/after
+- Chip: text, active, dismiss, usage; slots default/before/after. Chip labels truncate when constrained; keep text short and let icons/dismiss controls remain visible.
 
 NAVIGATION:
-- TabBar: speed, controlsPosition; slots default/controls
+- TabBar: speed, controlsPosition, stroke (border|none), active-inset, radius; slots default/controls
 - TabItem: text, icon, active, id
 - TabController: slot default
 - TabPanel: item
@@ -139,7 +142,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-addon/index.js

@@ -1,4 +1,4 @@
-class s extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
     return ["slot", "size"];
   }
@@ -16,8 +16,8 @@ class s extends HTMLElement {
     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);
+    t.assignedElements({ flatten: !0 }).forEach((s) => {
+      s.tagName.toLowerCase() === "mui-body" && s.setAttribute("size", i);
     });
   }
   render() {
@@ -30,32 +30,32 @@ class s extends HTMLElement {
           align-items: center;
           justify-content: center;
           box-sizing: border-box;
-          min-height: 4.4rem;
+          min-height: var(--action-size-medium);
           padding: var(--space-200) var(--space-400);
           background: var(--addon-background);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
-          min-width: 4.4rem;
+          min-width: var(--action-size-medium);
           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);
+          min-height: var(--action-size-x-small);
+          min-width: var(--action-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);
+          min-height: var(--action-size-small);
+          min-width: var(--action-size-small);
           padding: var(--action-padding-small);
         }
         :host([size="medium"]) {
-          min-height: 4.4rem;
-          min-width: 4.4rem;
+          min-height: var(--action-size-medium);
+          min-width: var(--action-size-medium);
           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);
+          min-height: var(--action-size-large);
+          min-width: var(--action-size-large);
           padding: var(--space-300) var(--space-500);
         }
         :host([slot="before"]) {
@@ -75,4 +75,4 @@ class s extends HTMLElement {
     t == null || t.addEventListener("slotchange", () => this.syncSlottedContent());
   }
 }
-customElements.get("mui-addon") || customElements.define("mui-addon", s);
+customElements.get("mui-addon") || customElements.define("mui-addon", a);

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

@@ -87,7 +87,7 @@ class w extends HTMLElement {
       font-weight: var(--font-weight-bold);
       letter-spacing: -0.05rem;
       font-size: ${k};
-      color: var(--text-color);
+      color: var(--avatar-text-color, var(--text-color));
       background: ${p};
       overflow: hidden;
       align-items: center;
@@ -119,6 +119,9 @@ class w extends HTMLElement {
       width: 100%;
       height: 100%;
     }
+    ::slotted([class*="mui-icon"]) {
+      fill: var(--avatar-icon-color, currentColor);
+    }
   `
     );
     if (this.shadowRoot.innerHTML = `

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

@@ -1,9 +1,9 @@
-class b extends HTMLElement {
+class m extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["variant", "size"];
+    return ["variant", "size", "color"];
   }
   connectedCallback() {
     this.hasAttribute("variant") || this.setAttribute("variant", "neutral"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this.setAttribute("role", "status"), this.render();
@@ -12,31 +12,48 @@ class b extends HTMLElement {
     this.render();
   }
   render() {
-    const t = this.getAttribute("variant") || "neutral", i = this.getAttribute("size") || "medium", n = {
+    var o;
+    const e = this.getAttribute("variant") || "neutral", s = this.getAttribute("size") || "medium", r = (o = this.getAttribute("color")) == null ? void 0 : o.trim(), g = {
       neutral: "var(--badge-background-neutral)",
       positive: "var(--badge-background-positive)",
       warning: "var(--badge-background-warning)",
       attention: "var(--badge-background-attention)",
       overlay: "var(--badge-background-overlay)"
-    }, r = {
+    }, n = {
+      grey: "var(--badge-background-grey)",
+      purple: "var(--badge-background-purple)",
+      violet: "var(--badge-background-violet)",
+      pink: "var(--badge-background-pink)",
+      magenta: "var(--badge-background-magenta)",
+      red: "var(--badge-background-red)",
+      orange: "var(--badge-background-orange)",
+      amber: "var(--badge-background-amber)",
+      yellow: "var(--badge-background-yellow)",
+      lime: "var(--badge-background-lime)",
+      green: "var(--badge-background-green)",
+      teal: "var(--badge-background-teal)",
+      cyan: "var(--badge-background-cyan)",
+      blue: "var(--badge-background-blue)",
+      indigo: "var(--badge-background-indigo)"
+    }, d = {
       neutral: "var(--badge-text-color)",
       positive: "var(--badge-text-color)",
       warning: "var(--badge-text-color)",
       attention: "var(--badge-text-color)",
       overlay: "var(--badge-text-color-overlay)"
-    }, s = {
+    }, b = {
       neutral: "none",
       positive: "none",
       warning: "none",
       attention: "none",
       overlay: "var(--badge-border-overlay)"
-    }, o = {
+    }, l = {
       neutral: "off",
       positive: "polite",
       warning: "assertive",
       attention: "assertive",
       overlay: "off"
-    }, d = n[t], g = r[t], l = s[t], c = o[t], a = {
+    }, t = r, c = t && n[t] ? n[t] : r || "var(--badge-background, " + g[e] + ")", v = d[e], u = b[e], h = l[e], i = {
       "xx-small": {
         fontSize: "var(--font-size-15)",
         lineHeight: "1",
@@ -65,7 +82,7 @@ class b extends HTMLElement {
         lineHeight: "1",
         padding: "var(--space-100) var(--space-300)"
       }
-    }, e = a[i] || a.medium, v = (
+    }, a = i[s] || i.medium, p = (
       /*css*/
       `
       :host {
@@ -77,14 +94,14 @@ class b extends HTMLElement {
         display: inline-flex;
         align-items: center;
         border-radius: var(--badge-radius);
-        background: ${d};
-        border: ${l};
-        font-size: ${e.fontSize};
-        line-height: ${e.lineHeight};
+        background: ${c};
+        border: ${u};
+        font-size: ${a.fontSize};
+        line-height: ${a.lineHeight};
         font-weight: var(--badge-font-weight);
-        color: ${g};
-        padding: ${e.padding};
-        min-height: ${e.minHeight || "auto"};
+        color: ${v};
+        padding: ${a.padding};
+        min-height: ${a.minHeight || "auto"};
       }
 
       :host([usage="slat-end"]) {
@@ -92,13 +109,13 @@ class b extends HTMLElement {
       }
     `
     );
-    this.setAttribute("role", "status"), this.setAttribute("aria-live", c), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.setAttribute("role", "status"), this.setAttribute("aria-live", h), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${v}</style>
+        <style>${p}</style>
         <span class="badge">
           <slot></slot>
         </span>
       `);
   }
 }
-customElements.get("mui-badge") || customElements.define("mui-badge", b);
+customElements.get("mui-badge") || customElements.define("mui-badge", m);

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() {