@muibook/components 19.4.0 → 19.5.1

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

@@ -66,9 +66,9 @@ TEXT NODE RULES FOR MUISCAN:
 Available Components:
 
 LAYOUT:
-- VStack: space, alignX, alignY, style
-- HStack: space, alignX, alignY, style
-- Grid: col, space, alignX, alignY
+- VStack: space, padding, alignX, alignY, height, width, fill, viewport, style
+- HStack: space, padding, alignX, alignY, height, width, fill, viewport, style
+- 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)

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

@@ -1,29 +1,20 @@
 import "../mui-heading/index.js";
-import "../mui-body/index.js";
-class n extends HTMLElement {
-  constructor() {
-    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" });
-  }
+class r extends HTMLElement {
   static get observedAttributes() {
-    return ["heading", "heading-level", "heading-space", "hide-label", "variant", "space", "aligny"];
+    return ["heading", "heading-level", "heading-space", "hide-heading", "hide-label", "variant", "space", "aligny"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render(), this.bindSlotBehavior(), this.updateChoiceGroupState();
+    this.render();
   }
   attributeChangedCallback() {
-    this.render(), this.bindSlotBehavior(), this.updateChoiceGroupState();
+    this.render();
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("heading") || "", e = this.hasAttribute("hide-label"), i = this.hasAttribute("choice-group"), o = this.getHeadingLevel();
+    const e = this.getAttribute("heading") || "", t = this.hasAttribute("hide-heading") || this.hasAttribute("hide-label"), i = this.getHeadingLevel();
     this.syncLayoutAttributes(), this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -41,11 +32,6 @@ class n extends HTMLElement {
           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(--form-group-space);
@@ -73,7 +59,7 @@ class n extends HTMLElement {
       </style>
 
       <div class="group">
-        ${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>` : ""}
+        ${e && !t ? `<mui-heading class="group-heading" size="5" level="${i}">${e}</mui-heading>` : ""}
         <div class="content">
           <div class="content-inner">
             <slot></slot>
@@ -82,19 +68,13 @@ class n extends HTMLElement {
       </div>
     `;
   }
-  bindSlotBehavior() {
-    var e;
-    if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector("slot");
-    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");
+    const e = this.getAttribute("space"), t = this.getAttribute("aligny"), i = this.getAttribute("heading-space");
+    e ? this.style.setProperty("--form-group-space", e) : this.style.removeProperty("--form-group-space"), t ? this.style.setProperty("--form-group-align-y", t) : 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";
+    const e = this.getAttribute("heading-level") || "5";
+    return ["1", "2", "3", "4", "5", "6"].includes(e) ? e : "5";
   }
 }
-customElements.get("mui-form-group") || customElements.define("mui-form-group", n);
+customElements.get("mui-form-group") || customElements.define("mui-form-group", r);

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

@@ -1,49 +1,69 @@
-import { getPartMap as e } from "../../utils/part-map/index.js";
-class l extends HTMLElement {
+import { getPartMap as o } from "../../utils/part-map/index.js";
+class h extends HTMLElement {
   static get observedAttributes() {
-    return ["col", "space", "alignx", "aligny"];
+    return ["col", "space", "alignx", "aligny", "padding", "height", "width", "viewport", "fill"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.col = "1fr 1fr", this.space = "var(--space-000)", this.alignX = "normal", this.alignY = "normal";
   }
   async connectedCallback() {
     await this.waitForPartMap();
-    const t = this.getAttribute("col") || this.col, a = this.getAttribute("space") || this.space, i = this.getAttribute("alignx") || this.alignX, s = this.getAttribute("aligny") || this.alignY, o = e("layout", "spacing"), r = (
+    const t = this.getAttribute("col") || this.col, i = this.getAttribute("space") || this.space, s = this.getAttribute("alignx") || this.alignX, e = this.getAttribute("aligny") || this.alignY, r = o("layout", "spacing");
+    this.syncDimensions();
+    const a = (
       /*css*/
       `
       :host {
         display: block;
+        height: var(--grid-height, auto);
+        width: var(--grid-width, auto);
       }
       div {
         display: grid;
         grid-template-columns: var(--col);
         gap: var(--gap);
+        padding: var(--padding);
+        box-sizing: border-box;
         align-items: var(--alignY);
         justify-items: var(--alignX);
       }
+      :host([height]) div,
+      :host([viewport]) div,
+      :host([fill]) div {
+        height: 100%;
+      }
+      :host([width]) div,
+      :host([fill]) div {
+        width: 100%;
+      }
     `
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${r}</style>
-      <div part="${o}" style="--col: ${t}; --gap: ${a}; --alignX: ${i}; --alignY: ${s};">
+      <style>${a}</style>
+      <div part="${r}" style="--col: ${t}; --gap: ${i}; --padding: ${this.getAttribute("padding") || "var(--space-000)"}; --alignX: ${s}; --alignY: ${e};">
         <slot></slot>
       </div>
     `);
   }
-  attributeChangedCallback(t, a, i) {
-    if (a === i || !this.shadowRoot) return;
-    const s = this.shadowRoot.querySelector("div");
-    s && (t === "col" && s.style.setProperty("--col", i || this.col), t === "space" && s.style.setProperty("--gap", i || this.space), t === "alignx" && s.style.setProperty("--alignX", i || this.alignX), t === "aligny" && s.style.setProperty("--alignY", i || this.alignY));
+  attributeChangedCallback(t, i, s) {
+    if (i === s || !this.shadowRoot) return;
+    (t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions();
+    const e = this.shadowRoot.querySelector("div");
+    e && (t === "col" && e.style.setProperty("--col", s || this.col), t === "space" && e.style.setProperty("--gap", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY));
+  }
+  syncDimensions() {
+    const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
+    this.style.setProperty("--grid-height", t), this.style.setProperty("--grid-width", i);
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof e == "function") return t();
-      const a = () => {
-        typeof e == "function" ? t() : requestAnimationFrame(a);
+      if (typeof o == "function") return t();
+      const i = () => {
+        typeof o == "function" ? t() : requestAnimationFrame(i);
       };
-      a();
+      i();
     });
   }
 }
-customElements.get("mui-grid") || customElements.define("mui-grid", l);
+customElements.get("mui-grid") || customElements.define("mui-grid", h);

package/dist/esm/components/mui-stack/hstack/index.js

@@ -1,7 +1,7 @@
 import { getPartMap as a } from "../../../utils/part-map/index.js";
 class h extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "aligny", "alignx", "height", "width", "viewport", "fill"];
+    return ["space", "aligny", "alignx", "padding", "height", "width", "viewport", "fill"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.styles = /*css*/
@@ -11,22 +11,25 @@ class h extends HTMLElement {
         height: var(--stack-height, auto);
         width: var(--stack-width, auto);
       }
-      :host([fill]) {
-        --stack-height: 100%;
-        --stack-width: 100%;
-      }
-      :host([viewport]) {
-        --stack-height: 100dvh;
-      }
       slot {
         display: flex;
         box-sizing: border-box;
-        height: 100%;
-        width: 100%;
+        height: auto;
+        width: auto;
         gap: var(--space);
+        padding: var(--padding);
         align-items: var(--alignY);
         justify-content: var(--alignX);
       }
+      :host([height]) slot,
+      :host([viewport]) slot,
+      :host([fill]) slot {
+        height: 100%;
+      }
+      :host([width]) slot,
+      :host([fill]) slot {
+        width: 100%;
+      }
     `;
   }
   async connectedCallback() {
@@ -40,6 +43,7 @@ class h extends HTMLElement {
         part="${t}" 
         style="
           --space: ${this.getAttribute("space") || this.space};
+          --padding: ${this.getAttribute("padding") || "var(--space-000)"};
           --alignY: ${this.getAttribute("aligny") || this.alignY};
           --alignX: ${this.getAttribute("alignx") || this.alignX};
         ">
@@ -47,13 +51,13 @@ class h extends HTMLElement {
     `;
   }
   attributeChangedCallback(t, i, s) {
-    if (i === s || ((t === "height" || t === "width") && this.syncDimensions(), !this.shadowRoot)) return;
+    if (i === s || ((t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions(), !this.shadowRoot)) return;
     const e = this.shadowRoot.querySelector("slot");
-    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX));
+    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX));
   }
   syncDimensions() {
-    const t = this.getAttribute("height"), i = this.getAttribute("width");
-    t ? this.style.setProperty("--stack-height", t) : this.style.removeProperty("--stack-height"), i ? this.style.setProperty("--stack-width", i) : this.style.removeProperty("--stack-width");
+    const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
+    this.style.setProperty("--stack-height", t), this.style.setProperty("--stack-width", i);
   }
   waitForPartMap() {
     return new Promise((t) => {

package/dist/esm/components/mui-stack/vstack/index.js

@@ -1,7 +1,7 @@
 import { getPartMap as a } from "../../../utils/part-map/index.js";
 class h extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "alignx", "aligny", "height", "width", "viewport", "fill"];
+    return ["space", "alignx", "aligny", "padding", "height", "width", "viewport", "fill"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignX = "normal", this.alignY = "normal", this.styles = /*css*/
@@ -11,22 +11,25 @@ class h extends HTMLElement {
         height: var(--stack-height, auto);
         width: var(--stack-width, auto);
       }
-      :host([fill]) {
-        --stack-height: 100%;
-        --stack-width: 100%;
-      }
-      :host([viewport]) {
-        --stack-height: 100dvh;
-      }
       slot {
         display: grid;
         box-sizing: border-box;
-        height: 100%;
-        width: 100%;
+        height: auto;
+        width: auto;
         gap: var(--space);
+        padding: var(--padding);
         justify-items: var(--alignX);
         align-items: var(--alignY);
       }
+      :host([height]) slot,
+      :host([viewport]) slot,
+      :host([fill]) slot {
+        height: 100%;
+      }
+      :host([width]) slot,
+      :host([fill]) slot {
+        width: 100%;
+      }
     `;
   }
   async connectedCallback() {
@@ -40,6 +43,7 @@ class h extends HTMLElement {
         part="${t}" 
         style="
           --space: ${this.getAttribute("space") || this.space};
+          --padding: ${this.getAttribute("padding") || "var(--space-000)"};
           --alignX: ${this.getAttribute("alignx") || this.alignX};
           --alignY: ${this.getAttribute("aligny") || this.alignY};
         ">
@@ -47,13 +51,13 @@ class h extends HTMLElement {
     `;
   }
   attributeChangedCallback(t, i, s) {
-    if (i === s || ((t === "height" || t === "width") && this.syncDimensions(), !this.shadowRoot)) return;
+    if (i === s || ((t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions(), !this.shadowRoot)) return;
     const e = this.shadowRoot.querySelector("slot");
-    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY));
+    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY));
   }
   syncDimensions() {
-    const t = this.getAttribute("height"), i = this.getAttribute("width");
-    t ? this.style.setProperty("--stack-height", t) : this.style.removeProperty("--stack-height"), i ? this.style.setProperty("--stack-width", i) : this.style.removeProperty("--stack-width");
+    const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
+    this.style.setProperty("--stack-height", t), this.style.setProperty("--stack-width", i);
   }
   waitForPartMap() {
     return new Promise((t) => {

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Mon, 25 May 2026 10:00:49 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Tue, 26 May 2026 10:59:50 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */