@muibook/components 10.0.0 → 11.0.0

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

@@ -1,4 +1,4 @@
-const n = class n extends HTMLElement {
+const s = class s extends HTMLElement {
   constructor() {
     super(), this.button = null, this.menu = null, this.handleResize = () => {
       var t;
@@ -8,13 +8,13 @@ const n = class n extends HTMLElement {
       (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
     }, this.handleFocusOut = (t) => {
       var e;
-      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
     }, this.attachShadow({ mode: "open" });
   }
   handleKeyDown(t) {
     if (t.key === "Escape") {
       if (!this.menu) return;
-      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(
+      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
         new CustomEvent("dropdown-toggle", {
           detail: { open: !1 },
           bubbles: !0
@@ -23,39 +23,39 @@ const n = class n extends HTMLElement {
     }
   }
   static get observedAttributes() {
-    return ["zindex", "position", "persistent"];
+    return ["zindex", "position", "vertical-position", "persistent"];
   }
   get persistent() {
     return this.hasAttribute("persistent");
   }
-  attributeChangedCallback(t, e, o) {
-    t === "zindex" && this.menu && (this.menu.style.zIndex = o ?? "1"), t === "position" && this.menu && this.adjustPosition();
+  attributeChangedCallback(t, e, n) {
+    t === "zindex" && this.menu && (this.menu.style.zIndex = n ?? "1"), (t === "position" || t === "vertical-position") && this.menu && this.adjustPosition();
   }
   connectedCallback() {
-    var r, i, u, c, a;
-    this.render(), this.menu = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".dropdown-menu");
+    var i, r, l, a, h;
+    this.render(), this.menu = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".dropdown-menu");
     const t = this.getAttribute("zindex") || "1";
-    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (i = this.menu) == null || i.addEventListener("focusout", this.handleFocusOut);
-    const e = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="action"]'), o = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) || [];
-    this.button = o.find(
-      (l) => l instanceof HTMLElement && l.tagName.toLowerCase() === "mui-button"
+    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (r = this.menu) == null || r.addEventListener("focusout", this.handleFocusOut);
+    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="action"]'), n = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) || [];
+    this.button = n.find(
+      (u) => u instanceof HTMLElement && u.tagName.toLowerCase() === "mui-button"
     );
-    const d = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot:not([name])");
+    const d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
     if (d) {
-      const l = () => {
-        const h = d.assignedElements({ flatten: !0 });
-        h.forEach((s) => {
-          s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
-        }), h.forEach((s, w) => {
-          s.setAttribute("variant", "tertiary"), s.setAttribute("dropdown-slot", ""), w === 0 && s.setAttribute("dropdown-slot-first", ""), w === h.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
-            var p, m;
-            this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (m = this.menu) == null || m.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
-          }), s._dropdownListenerAdded = !0);
+      const u = () => {
+        const c = d.assignedElements({ flatten: !0 });
+        c.forEach((o) => {
+          o.removeAttribute("dropdown-slot"), o.removeAttribute("dropdown-slot-first"), o.removeAttribute("dropdown-slot-last");
+        }), c.forEach((o, w) => {
+          o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
+            var f, p;
+            this.persistent || ((f = this.menu) == null || f.classList.remove("show"), (p = this.menu) == null || p.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+          }), o._dropdownListenerAdded = !0);
         });
       };
-      d.addEventListener("slotchange", l), l();
+      d.addEventListener("slotchange", u), u();
     }
-    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), (a = this.button) == null || a.addEventListener("click", this.toggleMenu), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
+    this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), (h = this.button) == null || h.addEventListener("click", this.toggleMenu), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
   }
   disconnectedCallback() {
     var t, e;
@@ -68,41 +68,41 @@ const n = class n extends HTMLElement {
     }, 150);
   }
   toggleMenu(t) {
-    var o;
+    var n;
     if (t.stopPropagation(), !this.menu) return;
     const e = this.menu.classList.contains("show");
-    !e && n.openDropdown && n.openDropdown !== this && n.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (o = this.menu) == null || o.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
-      var d, r;
-      (d = this.menu) == null || d.classList.add("show"), (r = this.menu) == null || r.removeAttribute("inert"), this.adjustPosition();
-    }), n.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+    !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
+      var d, i;
+      (d = this.menu) == null || d.classList.add("show"), (i = this.menu) == null || i.removeAttribute("inert"), this.adjustPosition();
+    }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
   }
   closeMenu(t) {
-    var o;
+    var n;
     const e = t.composedPath();
-    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (o = this.menu) == null || o.setAttribute("inert", "true"), n.openDropdown === this && (n.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
   }
   adjustPosition() {
     if (!this.menu) return;
-    const t = this.menu, e = 8, o = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, r = o.endsWith("rem") ? parseFloat(o) * d : parseFloat(o) || 8;
+    const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, i = n.endsWith("rem") ? parseFloat(n) * d : parseFloat(n) || 8;
     t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
-    const i = this.getBoundingClientRect(), u = t.offsetWidth, c = t.offsetHeight, a = window.innerWidth, l = window.innerHeight;
-    let h = i.height + r;
-    l - i.bottom < c + r && i.top > l - i.bottom && (h = -(c + r));
-    let s = 0;
+    const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, c = (this.getAttribute("vertical-position") || "auto").toLowerCase(), o = u - r.bottom, w = r.top, f = a + i, p = o >= f, g = w >= f;
+    let b = r.height + i;
+    c === "up" ? b = g || !p ? -(a + i) : r.height + i : c === "down" ? b = p || !g ? r.height + i : -(a + i) : !p && w > o && (b = -(a + i));
+    let m = 0;
     switch (this.getAttribute("position") || "left") {
       case "left":
-        s = 0;
+        m = 0;
         break;
       case "center":
-        s = (i.width - u) / 2;
+        m = (r.width - l) / 2;
         break;
       case "right":
       default:
-        s = i.width - u;
+        m = r.width - l;
         break;
     }
-    const p = e - i.left, m = a - e - (i.left + u);
-    s = Math.max(p, Math.min(s, m)), u > a - e * 2 && (t.style.maxWidth = `${a - e * 2}px`), t.style.top = `${h}px`, t.style.left = `${s}px`;
+    const y = e - r.left, E = h - e - (r.left + l);
+    m = Math.max(y, Math.min(m, E)), l > h - e * 2 && (t.style.maxWidth = `${h - e * 2}px`), t.style.top = `${b}px`, t.style.left = `${m}px`;
   }
   render() {
     this.shadowRoot.innerHTML = /*html*/
@@ -168,6 +168,6 @@ const n = class n extends HTMLElement {
     `;
   }
 };
-n.openDropdown = null;
-let f = n;
-customElements.get("mui-dropdown") || customElements.define("mui-dropdown", f);
+s.openDropdown = null;
+let v = s;
+customElements.get("mui-dropdown") || customElements.define("mui-dropdown", v);

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

@@ -1,22 +1,40 @@
-class a extends HTMLElement {
+class o extends HTMLElement {
   static get observedAttributes() {
-    return ["variant", "message", "label", "hide-label"];
+    return ["variant", "message", "label", "hide-label", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
       <style>
-        :host { display: block; }
-
-        mui-body { margin-top: var(--space-200); }
-        mui-body::part(display) { display: flex; }
-        mui-body::part(align-items) { align-items: center; }
-        mui-body::part(gap) { gap: var(--space-100); }
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
+        .field-content {
+          display: flex;
+          flex-direction: column;
+        }
+        .message-container {
+          display: none;
+        }
+        :host([has-message]) .message-container {
+          display: flex;
+          margin-top: var(--space-300);
+        }
+        :host([size="x-small"][has-message]) .message-container { margin-top: var(--space-100); }
+        :host([size="small"][has-message]) .message-container { margin-top: var(--space-100); }
+        :host([size="medium"][has-message]) .message-container { margin-top: var(--space-300); }
+        :host([size="large"][has-message]) .message-container { margin-top: var(--space-300); }
 
         ::slotted(mui-checkbox) { padding-left: var(--space-025); }
       </style>
 
-      <slot></slot>
-      <div class="message-container"></div>
+      <div class="field-content">
+        <slot></slot>
+      </div>
+      <div class="message-container">
+        <slot name="message"></slot>
+        <div class="message-fallback"></div>
+      </div>
     `;
   }
   // -----------------------
@@ -46,33 +64,50 @@ class a extends HTMLElement {
   set hideLabel(e) {
     e ? this.setAttribute("hide-label", "") : this.removeAttribute("hide-label");
   }
+  get size() {
+    return this.getAttribute("size") || "medium";
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
   // -----------------------
   // Lifecycle methods
   // -----------------------
   connectedCallback() {
-    this.renderMessage(), this.passAttributesToChild();
+    this.bindSlotEvents(), this.renderMessage(), this.passAttributesToChild();
   }
   attributeChangedCallback(e) {
-    ["variant", "message", "label", "hide-label"].includes(e) && (this.renderMessage(), this.passAttributesToChild());
+    ["variant", "message", "label", "hide-label", "size"].includes(e) && (this.renderMessage(), this.passAttributesToChild());
   }
   // -----------------------
   // Helper methods
   // -----------------------
   passAttributesToChild() {
-    var s;
+    var i;
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector("slot"), i = (s = e == null ? void 0 : e.assignedElements) == null ? void 0 : s.call(e)[0];
-    i && ["variant", "label", "hide-label"].forEach((t) => {
-      this.hasAttribute(t) ? i.setAttribute(t, this.getAttribute(t) || "") : i.removeAttribute(t);
+    const e = this.shadowRoot.querySelector("slot"), t = (i = e == null ? void 0 : e.assignedElements) == null ? void 0 : i.call(e)[0];
+    t && ["variant", "label", "hide-label", "size"].forEach((s) => {
+      this.hasAttribute(s) ? t.setAttribute(s, this.getAttribute(s) || "") : t.removeAttribute(s);
     });
   }
   renderMessage() {
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector(".message-container");
-    if (!e) return;
+    const e = this.shadowRoot.querySelector(".message-fallback"), t = this.shadowRoot.querySelector('slot[name="message"]');
+    if (!e || !t) return;
     const i = this.variant, s = this.message;
-    let t = "";
-    i === "success" ? t = "<mui-icon-check></mui-icon-check>" : i === "warning" ? t = "<mui-icon-warning></mui-icon-warning>" : i === "error" && (t = "<mui-icon-attention></mui-icon-attention>"), e.innerHTML = s ? `<mui-body size="small" variant="${i}">${t}${s}</mui-body>` : "";
+    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((n) => n.nodeType === Node.ELEMENT_NODE ? !0 : n.nodeType === Node.TEXT_NODE ? (n.textContent || "").trim().length > 0 : !1)) {
+      e.innerHTML = "", this.setAttribute("has-message", "");
+      return;
+    }
+    e.innerHTML = s ? `<mui-body size="small" variant="${i}">${a}${s}</mui-body>` : "", s ? this.setAttribute("has-message", "") : this.removeAttribute("has-message");
+  }
+  bindSlotEvents() {
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector('slot[name="message"]');
+    e && e.addEventListener("slotchange", () => this.renderMessage());
+    const t = this.shadowRoot.querySelector("slot:not([name])");
+    t && t.addEventListener("slotchange", () => this.passAttributesToChild());
   }
 }
-customElements.get("mui-field") || customElements.define("mui-field", a);
+customElements.get("mui-field") || customElements.define("mui-field", o);

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

@@ -0,0 +1,88 @@
+import "../mui-heading/index.js";
+import "../mui-body/index.js";
+class h extends HTMLElement {
+  static get observedAttributes() {
+    return ["heading", "hide-label", "variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.setupSlotBehavior();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("heading") || "", e = this.hasAttribute("hide-label"), r = this.hasAttribute("choice-group");
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+        .group {
+          display: grid;
+          gap: var(--space-500);
+        }
+        .group-heading {
+          display: block;
+          margin: 0;
+        }
+        .group-label {
+          display: inline-flex;
+          margin: 0;
+        }
+        .content {
+          display: grid;
+          gap: var(--space-500);
+          min-inline-size: 0;
+        }
+        .content-inner {
+          display: contents;
+        }
+        :host([variant="horizontal"]) .content {
+          grid-template-columns: var(--form-group-horizontal-template, minmax(0, 1fr) minmax(0, 20rem));
+          align-items: start;
+        }
+        :host([variant="horizontal"]) .content-inner ::slotted(*) {
+          min-inline-size: 0;
+        }
+        :host([variant="horizontal"]) .content-inner ::slotted(mui-form-message),
+        :host([variant="horizontal"]) .content-inner ::slotted(mui-form-hint) {
+          grid-column: 1 / -1;
+        }
+        @media (max-width: 767px) {
+          :host([variant="horizontal"]) .content {
+            grid-template-columns: 1fr;
+          }
+        }
+      </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>` : ""}
+        <div class="content">
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  setupSlotBehavior() {
+    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();
+  }
+}
+customElements.get("mui-form-group") || customElements.define("mui-form-group", h);

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

@@ -0,0 +1 @@
+import "../mui-form-message/index.js";

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

@@ -0,0 +1,72 @@
+import "../mui-body/index.js";
+import "../mui-icons/info/index.js";
+class a extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "weight", "variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  getIconColor(t) {
+    return {
+      optional: "var(--text-color-optional)",
+      warning: "var(--text-color-warning)",
+      success: "var(--text-color-success)",
+      error: "var(--text-color-error)"
+    }[t] || "var(--text-color)";
+  }
+  getIconSize(t) {
+    return {
+      "x-small": "x-small",
+      small: "small",
+      medium: "small",
+      large: "medium"
+    }[t] || "small";
+  }
+  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));
+    });
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "small"), this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-flex;
+          width: 100%;
+        }
+        mui-body {
+          margin-inline-start: var(--stroke-size-100);
+          margin-block-start: var(--space-200);
+        }
+      </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>
+        <slot></slot>
+        <slot slot="after" name="after"></slot>
+      </mui-body>
+    `;
+    const i = this.shadowRoot.querySelector('slot[name="before"]');
+    i == null || i.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 {
+  }
+  customElements.define("mui-form-hint", r);
+}

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

@@ -0,0 +1,108 @@
+import "../mui-heading/index.js";
+class n extends HTMLElement {
+  constructor() {
+    super(), this.onSlotChange = () => {
+      if (!this.shadowRoot) return;
+      const e = this.shadowRoot.querySelector('slot[name="header"]'), t = this.shadowRoot.querySelector('slot[name="footer"]'), o = !!(e != null && e.assignedElements({ flatten: !0 }).length), s = !!(t != null && t.assignedElements({ flatten: !0 }).length);
+      this.toggleAttribute("has-header", o), this.toggleAttribute("has-footer", s);
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["heading", "heading-level", "disabled", "borderless"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("heading") || "", t = Number(this.getAttribute("heading-level") || "4"), o = Number.isFinite(t) ? Math.min(6, Math.max(1, Math.trunc(t))) : 4, s = this.hasAttribute("disabled");
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+        fieldset {
+          border: var(--border-thin);
+          border-color: var(--border-color);
+          border-radius: var(--radius-200);
+          padding: var(--space-500);
+          background: var(--surface-elevated-100);
+          box-sizing: border-box;
+          min-inline-size: 0;
+          margin: 0;
+        }
+        :host([borderless]) fieldset {
+          border: none;
+        }
+        @media (min-width: 768px) {
+          fieldset {
+            padding: var(--space-600);
+          }
+        }
+        legend {
+          margin: 0;
+          padding: 0;
+        }
+        .legend-row {
+          margin-bottom: var(--space-600);
+        }
+        :host([has-header]) .legend-row {
+          display: none;
+        }
+        .header {
+          margin-bottom: var(--space-600);
+        }
+        :host(:not([has-header])) .header {
+          display: none;
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        .content {
+          display: grid;
+          gap: var(--space-500);
+        }
+        .footer {
+          margin-top: var(--space-600);
+        }
+        :host(:not([has-footer])) .footer {
+          display: none;
+        }
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+        :host([disabled]) fieldset {
+          opacity: 0.7;
+        }
+      </style>
+
+      <fieldset ${s ? "disabled" : ""}>
+        ${e ? `<legend class="vh">${e}</legend><div class="legend-row"><mui-heading size="4" level="${o}">${e}</mui-heading></div>` : ""}
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </fieldset>
+    `;
+    const a = this.shadowRoot.querySelector('slot[name="header"]'), i = this.shadowRoot.querySelector('slot[name="footer"]');
+    a == null || a.addEventListener("slotchange", this.onSlotChange), i == null || i.addEventListener("slotchange", this.onSlotChange), this.onSlotChange();
+  }
+}
+customElements.get("mui-form-section") || customElements.define("mui-form-section", n);

package/dist/esm/components/mui-form-section-footer/index.js

@@ -0,0 +1,46 @@
+class s extends HTMLElement {
+  constructor() {
+    super(), this.onSlotChange = () => {
+      if (!this.shadowRoot) return;
+      const e = this.shadowRoot.querySelector("slot"), o = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? []).some((t) => t.tagName.toLowerCase() === "mui-rule" || !!t.querySelector("mui-rule"));
+      this.toggleAttribute("has-rule", o);
+    }, this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        .content {
+          display: grid;
+          gap: var(--form-section-footer-gap, var(--space-300));
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        :host([has-rule]) .content {
+          gap: var(--form-section-footer-gap-with-rule, var(--space-400));
+        }
+
+        ::slotted(mui-rule) {
+          margin: 0;
+        }
+      </style>
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+    const e = this.shadowRoot.querySelector("slot");
+    e == null || e.addEventListener("slotchange", this.onSlotChange), this.onSlotChange();
+  }
+}
+customElements.get("mui-form-section-footer") || customElements.define("mui-form-section-footer", s);