@muibook/components 19.2.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

@@ -8,7 +8,7 @@ class h extends HTMLElement {
   }
   async connectedCallback() {
     if (this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), !this.shadowRoot) return;
-    let o = (
+    let t = (
       /*html*/
       `
     <style>
@@ -662,6 +662,35 @@ class h extends HTMLElement {
       padding-left: var(--action-before-slot-padding-large);
     }
 
+    :host([avatar-only]) {
+      width: auto;
+      display: flex;
+    }
+
+    :host([avatar-only]) button,
+    :host([avatar-only]) button:hover,
+    :host([avatar-only]) button:focus,
+    :host([avatar-only]) button:focus-visible,
+    :host([avatar-only]) button:disabled {
+      width: auto;
+      min-width: 0;
+      min-height: 0;
+      padding: var(--space-000);
+      border: none;
+      background: transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-000);
+      line-height: 0;
+      border-radius: 999rem;
+    }
+
+    :host([avatar-only]) button ::slotted(mui-avatar) {
+      margin-right: var(--space-000);
+      margin-left: var(--space-000);
+    }
+
 
     </style>
 
@@ -679,106 +708,103 @@ class h extends HTMLElement {
 
     `
     );
-    this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
-      const s = this.shadowRoot;
-      if (!s) return;
-      const e = s.querySelector("slot:not([name])"), t = s.querySelector('slot[name="before"]'), a = s.querySelector('slot[name="after"]'), i = (d) => d ? d.assignedNodes({ flatten: !0 }).some((n) => {
-        var l;
-        return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((l = n.textContent) != null && l.trim());
-      }) : !1, c = i(t), u = i(a);
-      this.toggleAttribute("has-before", c), this.toggleAttribute("has-after", u);
-      const v = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [];
-      v.every((d) => {
-        var n;
-        if (d.nodeType === Node.ELEMENT_NODE) {
-          const l = d;
-          return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
-        }
-        return d.nodeType === Node.TEXT_NODE && !((n = d.textContent) != null && n.trim());
-      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(v, !0)) : (this.removeAttribute("icon-only"), [t, e, a].forEach((n) => {
-        if (n) {
-          const l = n.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(l, !1), this.updateAvatarSizes(l), this.updateBadgeSizes(l);
-        }
-      }));
-    });
+    this.shadowRoot.innerHTML = t, await customElements.whenDefined("mui-button"), [
+      this.shadowRoot.querySelector("slot:not([name])"),
+      this.shadowRoot.querySelector('slot[name="before"]'),
+      this.shadowRoot.querySelector('slot[name="after"]')
+    ].forEach((r) => r == null ? void 0 : r.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
+  }
+  attributeChangedCallback(o, t, n) {
+    var r;
+    if (o === "disabled") {
+      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button");
+      e && (this.hasAttribute("disabled") ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
+    }
+    o === "size" && t !== n && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState());
   }
-  attributeChangedCallback(r, o, s) {
-    var e;
-    if (r === "disabled") {
-      const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("button");
-      t && (this.hasAttribute("disabled") ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"));
-    }
-    r === "size" && o !== s && this.shadowRoot && requestAnimationFrame(() => {
-      const t = this.shadowRoot;
-      if (!t) return;
-      const a = [
-        t.querySelector("slot:not([name])"),
-        t.querySelector('slot[name="before"]'),
-        t.querySelector('slot[name="after"]')
-      ], i = this.hasAttribute("icon-only");
-      a.forEach((c) => {
-        if (c) {
-          const u = c.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(u, i), this.updateAvatarSizes(u), this.updateBadgeSizes(u);
-        }
-      });
+  syncButtonState() {
+    const o = this.shadowRoot;
+    if (!o) return;
+    const t = o.querySelector("slot:not([name])"), n = o.querySelector('slot[name="before"]'), r = o.querySelector('slot[name="after"]'), e = (a) => a ? a.assignedNodes({ flatten: !0 }).some((i) => {
+      var d;
+      return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((d = i.textContent) != null && d.trim());
+    }) : !1, s = e(n), l = e(r);
+    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", l);
+    const c = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [], v = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], u = v.length === 1 && v[0].tagName.toLowerCase() === "mui-avatar" && c.every((a) => {
+      var i;
+      return a.nodeType === Node.TEXT_NODE ? !((i = a.textContent) != null && i.trim()) : a.nodeType === Node.ELEMENT_NODE ? a.tagName.toLowerCase() === "mui-avatar" : !1;
+    });
+    if (this.toggleAttribute("avatar-only", u), !u && c.every((a) => {
+      var i;
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const d = a;
+        return d.tagName.toLowerCase() === "svg" || d.classList.contains("mui-icon");
+      }
+      return a.nodeType === Node.TEXT_NODE && !((i = a.textContent) != null && i.trim());
+    })) {
+      this.setAttribute("icon-only", ""), this.updateIconSizes(c, !0);
+      return;
+    }
+    this.removeAttribute("icon-only"), [n, t, r].forEach((a) => {
+      if (!a) return;
+      const i = a.assignedNodes({ flatten: !0 });
+      this.updateIconSizes(i, !1), u || this.updateAvatarSizes(i), this.updateBadgeSizes(i);
     });
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(r) {
-    const o = this.getAttribute("size") || "medium", e = {
-      "xx-small": "x-small",
-      "x-small": "x-small",
-      small: "x-small",
+  updateAvatarSizes(o) {
+    const t = this.getAttribute("size") || "medium", r = {
+      "xx-small": "xx-small",
+      "x-small": "xx-small",
+      small: "xx-small",
       medium: "small",
       large: "medium"
-    }[o] || "small";
-    r.forEach((t) => {
-      if (t.nodeType === Node.ELEMENT_NODE) {
-        const a = t;
-        a.tagName.toLowerCase() === "mui-avatar" && a.setAttribute("size", e);
+    }[t] || "small";
+    o.forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const s = e;
+        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", r);
       }
     });
   }
-  updateIconSizes(r, o) {
-    const s = this.getAttribute("size") || "medium", t = {
+  updateIconSizes(o, t) {
+    const n = this.getAttribute("size") || "medium", e = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
-      medium: o ? "medium" : "small",
+      medium: t ? "medium" : "small",
       // small for regular, medium for icon-only
-      large: o ? "large" : "medium"
-    }[s] || "small";
-    r.forEach((a) => {
-      if (a.nodeType === Node.ELEMENT_NODE) {
-        const i = a;
-        (i.tagName.toLowerCase() === "svg" || i.classList.contains("mui-icon") || i.tagName.toLowerCase() === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", t);
+      large: t ? "large" : "medium"
+    }[n] || "small";
+    o.forEach((s) => {
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const l = s;
+        (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", e);
       }
     });
   }
-  updateBadgeSizes(r) {
-    const o = this.getAttribute("size") || "medium", e = {
+  updateBadgeSizes(o) {
+    const t = this.getAttribute("size") || "medium", r = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }[o] || "medium";
-    r.forEach((t) => {
-      if (t.nodeType === Node.ELEMENT_NODE) {
-        const a = t;
-        a.tagName.toLowerCase() === "mui-badge" && a.setAttribute("size", e);
+    }[t] || "medium";
+    o.forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const s = e;
+        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", r);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((r) => {
-      if (typeof b == "function") return r();
-      const o = () => {
-        typeof b == "function" ? r() : requestAnimationFrame(o);
+    return new Promise((o) => {
+      if (typeof b == "function") return o();
+      const t = () => {
+        typeof b == "function" ? o() : requestAnimationFrame(t);
       };
-      o();
+      t();
     });
   }
 }

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