@muibook/components 19.6.0 → 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

@@ -57,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

@@ -59,6 +59,7 @@ 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; if there is no supporting body content, prefer Body or FormMessage instead of Message
@@ -86,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; use _Icon icon=mui-icon-info slot=before for lightweight inline guidance
+- 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
@@ -96,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:
@@ -109,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)
@@ -123,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

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);