@muibook/components 20.0.0 → 20.1.0

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

@@ -1,11 +1,12 @@
-import { getPartMap as h } from "../../utils/part-map/index.js";
-class f extends HTMLElement {
+import { getPartMap as f } from "../../utils/part-map/index.js";
+class g extends HTMLElement {
   static get observedAttributes() {
     return [
       "onclick",
       "type",
       "aria-label",
       "disabled",
+      "pending",
       "variant",
       "stroke",
       "stroke-ring-size",
@@ -17,9 +18,14 @@ class f extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  focus(t) {
+    var e;
+    const o = (e = this.shadowRoot) == null ? void 0 : e.querySelector("button");
+    o ? o.focus(t) : super.focus(t);
+  }
   async connectedCallback() {
     if (this.hasAttribute("size") || this.setAttribute("size", "medium"), this.syncRingSizeAttribute(), await this.waitForPartMap(), !this.shadowRoot) return;
-    let t = (
+    let o = (
       /*html*/
       `
     <style>
@@ -79,6 +85,14 @@ class f extends HTMLElement {
       cursor: not-allowed;
     }
 
+    :host([pending]) {
+      pointer-events: none;
+    }
+
+    :host([pending]) button {
+      cursor: progress;
+    }
+
     button, button:before, button:after {box-sizing: border-box;}
 
     button:focus-visible {
@@ -560,8 +574,8 @@ class f extends HTMLElement {
     :host([size="xx-small"]) button:hover,
     :host([size="xx-small"]) button:focus,
     :host([size="xx-small"]) button:disabled {
-      font-size: var(--font-size-15);
-      line-height: var(--line-height-25);
+      font-size: var(--text-font-size-xxs);
+      line-height: var(--text-line-height-xxs);
       font-weight: var(--font-weight-semi-bold);
       min-height: var(--action-size-xx-small);
       padding: var(--space-025) var(--space-100);
@@ -766,8 +780,9 @@ class f extends HTMLElement {
       min-width: 0;
       min-height: 0;
       padding: var(--space-000);
-      border: none;
+      border: var(--action-avatar-border, none);
       background: transparent;
+      box-shadow: var(--action-avatar-shadow, none);
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -781,6 +796,34 @@ class f extends HTMLElement {
       margin-left: var(--space-000);
     }
 
+    :host([has-avatar-chip]) {
+      display: inline-flex;
+      width: auto;
+      text-align: left;
+    }
+
+    :host([has-avatar-chip]) button {
+      display: inline-flex;
+      width: auto;
+      min-width: 0;
+      align-items: center;
+      justify-content: flex-start;
+      text-align: left;
+    }
+
+    :host([has-avatar-chip][size="x-small"]) button {
+      padding-left: var(--space-100);
+    }    
+    :host([has-avatar-chip][size="small"]) button {
+      padding-left: var(--space-200);
+    }
+    :host([has-avatar-chip][size="medium"]) button {
+      padding-left: var(--space-300);
+    }
+    :host([has-avatar-chip][size="large"]) button {
+      padding-left: var(--space-400);
+    }
+
     :host([has-video]) {
       display: inline-block;
       width: auto;
@@ -818,10 +861,11 @@ class f extends HTMLElement {
     </style>
 
     <button 
-      part="${h("text", "spacing", "layout", "visual")}"
+      part="${f("text", "spacing", "layout", "visual")}"
       onclick="${this.getAttribute("onclick")}" 
       type="${this.getAttribute("type") || "button"}" 
       aria-label="${this.getAttribute("aria-label") || ""}"
+      aria-busy="${this.hasAttribute("pending") ? "true" : "false"}"
       ${this.hasAttribute("disabled") ? "disabled" : ""}
     >
       <slot name="before"></slot>
@@ -831,116 +875,124 @@ class f extends HTMLElement {
 
     `
     );
-    this.shadowRoot.innerHTML = t, await customElements.whenDefined("mui-button"), [
+    this.shadowRoot.innerHTML = o;
+    const e = this.shadowRoot.querySelector("button");
+    e == null || e.addEventListener("click", (a) => {
+      this.hasAttribute("pending") && (a.preventDefault(), a.stopImmediatePropagation());
+    }), await customElements.whenDefined("mui-button"), [
       this.shadowRoot.querySelector("slot:not([name])"),
       this.shadowRoot.querySelector('slot[name="before"]'),
       this.shadowRoot.querySelector('slot[name="after"]')
     ].forEach((a) => a == null ? void 0 : a.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
   }
-  attributeChangedCallback(o, t, s) {
-    var a;
-    if (o === "disabled") {
-      const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button");
-      e && (this.hasAttribute("disabled") ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
+  attributeChangedCallback(t, o, e) {
+    var s, a;
+    if (t === "disabled") {
+      const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("button");
+      i && (this.hasAttribute("disabled") ? i.setAttribute("disabled", "") : i.removeAttribute("disabled"));
+    }
+    if (t === "pending") {
+      const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button");
+      i && i.setAttribute("aria-busy", this.hasAttribute("pending") ? "true" : "false");
     }
-    o === "size" && t !== s && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState()), o === "stroke-ring-size" && t !== s && this.syncRingSizeAttribute();
+    t === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState()), t === "stroke-ring-size" && o !== e && this.syncRingSizeAttribute();
   }
   syncRingSizeAttribute() {
-    var a;
-    const o = (a = this.getAttribute("stroke-ring-size")) == null ? void 0 : a.trim();
-    if (!o) {
+    var s;
+    const t = (s = this.getAttribute("stroke-ring-size")) == null ? void 0 : s.trim();
+    if (!t) {
       this.style.removeProperty("--action-ring-size");
       return;
     }
-    const t = o.startsWith("stroke-size-") ? o.replace("stroke-size-", "") : o, s = /^(100|200|300|400|500)$/.test(t);
-    this.style.setProperty("--action-ring-size", s ? `var(--stroke-size-${t})` : o);
+    const o = t.startsWith("stroke-size-") ? t.replace("stroke-size-", "") : t, e = /^(100|200|300|400|500)$/.test(o);
+    this.style.setProperty("--action-ring-size", e ? `var(--stroke-size-${o})` : t);
   }
   syncButtonState() {
-    const o = this.shadowRoot;
-    if (!o) return;
-    const t = o.querySelector("slot:not([name])"), s = o.querySelector('slot[name="before"]'), a = o.querySelector('slot[name="after"]'), e = (r) => r ? r.assignedNodes({ flatten: !0 }).some((i) => {
+    const t = this.shadowRoot;
+    if (!t) return;
+    const o = t.querySelector("slot:not([name])"), e = t.querySelector('slot[name="before"]'), s = t.querySelector('slot[name="after"]'), a = (r) => r ? r.assignedNodes({ flatten: !0 }).some((n) => {
       var c;
-      return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((c = i.textContent) != null && c.trim());
-    }) : !1, n = e(s), l = e(a);
-    this.toggleAttribute("has-before", n), this.toggleAttribute("has-after", l);
-    const d = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [], u = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], b = u.some((r) => r.tagName.toLowerCase() === "mui-video-thumbnail");
-    this.toggleAttribute("has-video", b);
-    const v = !b && u.length === 1 && u[0].tagName.toLowerCase() === "mui-avatar" && d.every((r) => {
-      var i;
-      return r.nodeType === Node.TEXT_NODE ? !((i = r.textContent) != null && i.trim()) : r.nodeType === Node.ELEMENT_NODE ? r.tagName.toLowerCase() === "mui-avatar" : !1;
+      return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((c = n.textContent) != null && c.trim());
+    }) : !1, i = a(e), l = a(s);
+    this.toggleAttribute("has-before", i), this.toggleAttribute("has-after", l);
+    const d = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], u = (o == null ? void 0 : o.assignedElements({ flatten: !0 })) ?? [], b = u.some((r) => r.tagName.toLowerCase() === "mui-video-thumbnail"), h = u.some((r) => r.tagName.toLowerCase() === "mui-avatar-chip");
+    this.toggleAttribute("has-video", b), this.toggleAttribute("has-avatar-chip", h);
+    const v = !b && !h && u.length === 1 && u[0].tagName.toLowerCase() === "mui-avatar" && d.every((r) => {
+      var n;
+      return r.nodeType === Node.TEXT_NODE ? !((n = r.textContent) != null && n.trim()) : r.nodeType === Node.ELEMENT_NODE ? r.tagName.toLowerCase() === "mui-avatar" : !1;
     });
-    if (this.toggleAttribute("avatar-only", v), !v && !b && d.every((r) => {
-      var i;
+    if (this.toggleAttribute("avatar-only", v), !v && !b && !h && d.every((r) => {
+      var n;
       if (r.nodeType === Node.ELEMENT_NODE) {
         const c = r;
         return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
       }
-      return r.nodeType === Node.TEXT_NODE && !((i = r.textContent) != null && i.trim());
+      return r.nodeType === Node.TEXT_NODE && !((n = r.textContent) != null && n.trim());
     })) {
       this.setAttribute("icon-only", ""), this.updateIconSizes(d, !0);
       return;
     }
-    this.removeAttribute("icon-only"), [s, t, a].forEach((r) => {
+    this.removeAttribute("icon-only"), [e, o, s].forEach((r) => {
       if (!r) return;
-      const i = r.assignedNodes({ flatten: !0 });
-      this.updateIconSizes(i, !1), v || this.updateAvatarSizes(i), this.updateBadgeSizes(i);
+      const n = r.assignedNodes({ flatten: !0 });
+      this.updateIconSizes(n, !1), v || this.updateAvatarSizes(n), this.updateBadgeSizes(n);
     });
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(o) {
-    const t = this.getAttribute("size") || "medium", a = {
+  updateAvatarSizes(t) {
+    const o = this.getAttribute("size") || "medium", s = {
       "xx-small": "xx-small",
       "x-small": "xx-small",
       small: "xx-small",
       medium: "small",
       large: "medium"
-    }[t] || "small";
-    o.forEach((e) => {
-      if (e.nodeType === Node.ELEMENT_NODE) {
-        const n = e;
-        n.tagName.toLowerCase() === "mui-avatar" && n.setAttribute("size", a);
+    }[o] || "small";
+    t.forEach((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const i = a;
+        i.tagName.toLowerCase() === "mui-avatar" && i.setAttribute("size", s);
       }
     });
   }
-  updateIconSizes(o, t) {
-    const s = this.getAttribute("size") || "medium", e = {
+  updateIconSizes(t, o) {
+    const e = this.getAttribute("size") || "medium", a = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
-      medium: t ? "medium" : "small",
+      medium: o ? "medium" : "small",
       // small for regular, medium for icon-only
-      large: t ? "large" : "medium"
-    }[s] || "small";
-    o.forEach((n) => {
-      if (n.nodeType === Node.ELEMENT_NODE) {
-        const l = n;
-        (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", e);
+      large: o ? "large" : "medium"
+    }[e] || "small";
+    t.forEach((i) => {
+      if (i.nodeType === Node.ELEMENT_NODE) {
+        const l = i;
+        (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", a);
       }
     });
   }
-  updateBadgeSizes(o) {
-    const t = this.getAttribute("size") || "medium", a = {
+  updateBadgeSizes(t) {
+    const o = this.getAttribute("size") || "medium", s = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }[t] || "medium";
-    o.forEach((e) => {
-      if (e.nodeType === Node.ELEMENT_NODE) {
-        const n = e;
-        n.tagName.toLowerCase() === "mui-badge" && n.setAttribute("size", a);
+    }[o] || "medium";
+    t.forEach((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const i = a;
+        i.tagName.toLowerCase() === "mui-badge" && i.setAttribute("size", s);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((o) => {
-      if (typeof h == "function") return o();
-      const t = () => {
-        typeof h == "function" ? o() : requestAnimationFrame(t);
+    return new Promise((t) => {
+      if (typeof f == "function") return t();
+      const o = () => {
+        typeof f == "function" ? t() : requestAnimationFrame(o);
       };
-      t();
+      o();
     });
   }
 }
-customElements.get("mui-button") || customElements.define("mui-button", f);
+customElements.get("mui-button") || customElements.define("mui-button", g);

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

@@ -0,0 +1,199 @@
+import "../mui-button/index.js";
+import "../mui-icons/left-chevron/index.js";
+import "../mui-icons/right-chevron/index.js";
+class z extends HTMLElement {
+  constructor() {
+    super(), this.selectedDate = null, this.viewMode = "single", this.attachShadow({ mode: "open" });
+    const t = /* @__PURE__ */ new Date();
+    this.currentDate = new Date(t.getFullYear(), t.getMonth(), 1);
+  }
+  static get observedAttributes() {
+    return ["value", "view", "min-date", "max-date"];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t ?? "");
+  }
+  focus(t) {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".selected, .today, .day:not(.empty)");
+    e && typeof e.focus == "function" ? e.focus(t) : super.focus(t);
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && (this.syncAttributes(), this.render());
+  }
+  syncAttributes() {
+    const t = this.getAttribute("value");
+    if (t) {
+      const e = new Date(t);
+      isNaN(e.getTime()) || (this.selectedDate = e, this.hasAttribute("data-initialized") || (this.currentDate = new Date(e.getFullYear(), e.getMonth(), 1), this.setAttribute("data-initialized", "true")));
+    }
+    this.viewMode = this.getAttribute("view") === "double" ? "double" : "single";
+  }
+  changeMonth(t) {
+    this.currentDate.setMonth(this.currentDate.getMonth() + t), this.render();
+  }
+  selectDate(t) {
+    this.selectedDate = t;
+    const e = t.getFullYear(), i = String(t.getMonth() + 1).padStart(2, "0"), h = String(t.getDate()).padStart(2, "0"), o = `${e}-${i}-${h}`;
+    this.setAttribute("value", o), this.dispatchEvent(new CustomEvent("change", { detail: { value: o }, bubbles: !0, composed: !0 }));
+  }
+  renderMonth(t, e) {
+    var d, u, g;
+    const i = new Date(t, e + 1, 0).getDate(), h = new Date(t, e, 1).getDay(), o = new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(t, e, 1)), p = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+    let c = "";
+    for (let n = 0; n < h; n++)
+      c += '<div class="day empty"></div>';
+    const r = /* @__PURE__ */ new Date(), m = r.getFullYear() === t && r.getMonth() === e, s = ((d = this.selectedDate) == null ? void 0 : d.getFullYear()) === t && ((u = this.selectedDate) == null ? void 0 : u.getMonth()) === e;
+    for (let n = 1; n <= i; n++) {
+      const a = m && r.getDate() === n, v = s && ((g = this.selectedDate) == null ? void 0 : g.getDate()) === n, y = `${t}-${String(e + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`, l = ["day"];
+      v && l.push("selected"), a && l.push("today"), c += `<mui-button variant="${v ? "primary" : "tertiary"}" size="small" class="${l.join(" ")}" data-date="${y}" aria-label="${o} ${n}, ${t}">${n}</mui-button>`;
+    }
+    return (
+      /*html*/
+      `
+      <div class="month">
+        <div class="month-header">
+          <div class="month-title">${o} ${t}</div>
+        </div>
+        <div class="grid">
+          ${p.map((n) => `<div class="weekday">${n}</div>`).join("")}
+          ${c}
+        </div>
+      </div>
+    `
+    );
+  }
+  render() {
+    var h, o, p;
+    if (!this.shadowRoot) return;
+    const t = this.currentDate.getFullYear(), e = this.currentDate.getMonth(), i = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          font-family: inherit;
+          --calendar-width: 28rem;
+          --calendar-day-size: 3.6rem;
+        }
+        .calendar-container {
+          position: relative;
+          display: flex;
+          gap: var(--space-400);
+          padding: var(--space-200);
+        }
+        .controls {
+          position: absolute;
+          top: var(--space-200);
+          left: var(--space-200);
+          right: var(--space-200);
+          display: flex;
+          justify-content: space-between;
+          pointer-events: none;
+        }
+        .controls mui-button {
+          pointer-events: auto;
+        }
+        .month {
+          width: var(--calendar-width);
+        }
+        .month-header {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 3.6rem;
+          margin-bottom: var(--space-200);
+        }
+        .month-title {
+          font-weight: var(--font-weight-medium);
+          font-size: var(--text-font-size-s);
+          color: var(--text-color);
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: var(--space-050);
+          justify-items: center;
+        }
+        .weekday {
+          font-size: var(--text-font-size-xs);
+          color: var(--text-color-secondary);
+          font-weight: var(--font-weight-medium);
+          width: var(--calendar-day-size);
+          height: var(--calendar-day-size);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .day {
+          width: var(--calendar-day-size);
+          height: var(--calendar-day-size);
+          --action-size-small: var(--calendar-day-size);
+          --action-padding-small: 0;
+        }
+        :host([slotted]) .day {
+          --action-radius-small: var(--stroke-size-200);
+        }
+        .day.today {
+          --action-tertiary-text-color: var(--action-primary-background);
+        }
+        .day.empty {
+          cursor: default;
+        }
+      </style>
+      <div class="calendar-container">
+        <div class="controls">
+          <mui-button variant="tertiary" size="small" id="prev-btn" aria-label="Previous Month">
+            <mui-icon-left-chevron></mui-icon-left-chevron>
+          </mui-button>
+          <mui-button variant="tertiary" size="small" id="next-btn" aria-label="Next Month">
+            <mui-icon-right-chevron></mui-icon-right-chevron>
+          </mui-button>
+        </div>
+        ${this.renderMonth(t, e)}
+        ${this.viewMode === "double" ? this.renderMonth(t, e + 1) : ""}
+      </div>
+    `
+    );
+    this.shadowRoot.innerHTML = i, (h = this.shadowRoot.getElementById("prev-btn")) == null || h.addEventListener("click", () => this.changeMonth(-1)), (o = this.shadowRoot.getElementById("next-btn")) == null || o.addEventListener("click", () => this.changeMonth(1)), this.shadowRoot.querySelectorAll(".day:not(.empty)").forEach((c) => {
+      c.addEventListener("click", (r) => {
+        const s = r.target.getAttribute("data-date");
+        if (s) {
+          const [d, u, g] = s.split("-").map(Number);
+          this.selectDate(new Date(d, u - 1, g));
+        }
+      });
+    }), (p = this.shadowRoot.querySelector(".calendar-container")) == null || p.addEventListener("keydown", (c) => {
+      const r = c.target;
+      if (!r.classList.contains("day") || r.classList.contains("empty")) return;
+      const m = c, s = m.key;
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(s)) {
+        m.preventDefault();
+        const d = r.getAttribute("data-date");
+        if (!d) return;
+        const [u, g, n] = d.split("-").map(Number), a = new Date(u, g - 1, n);
+        s === "ArrowLeft" && a.setDate(a.getDate() - 1), s === "ArrowRight" && a.setDate(a.getDate() + 1), s === "ArrowUp" && a.setDate(a.getDate() - 7), s === "ArrowDown" && a.setDate(a.getDate() + 7);
+        const v = () => {
+          var S;
+          const D = a.getFullYear(), $ = String(a.getMonth() + 1).padStart(2, "0"), A = String(a.getDate()).padStart(2, "0"), x = `${D}-${$}-${A}`, M = (S = this.shadowRoot) == null ? void 0 : S.querySelector(`.day[data-date="${x}"]`);
+          M == null || M.focus();
+        }, y = this.currentDate.getMonth(), l = this.currentDate.getFullYear(), f = a.getMonth(), w = a.getFullYear();
+        let b = !1;
+        if (this.viewMode === "single")
+          b = y === f && l === w;
+        else {
+          const D = new Date(l, y + 1, 1);
+          b = y === f && l === w || D.getMonth() === f && D.getFullYear() === w;
+        }
+        b ? v() : (this.currentDate = new Date(w, f, 1), this.render(), setTimeout(v, 0));
+      }
+    });
+  }
+}
+customElements.get("mui-calendar") || customElements.define("mui-calendar", z);

package/dist/esm/components/mui-card/body/index.js

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class m extends HTMLElement {
   static get observedAttributes() {
     return ["condensed"];
   }
@@ -8,7 +8,7 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(s, a, r) {
+  attributeChangedCallback(s, l, a) {
     s === "condensed" && this.updateSlottedContent();
   }
   updateSlottedContent() {
@@ -16,28 +16,43 @@ class l extends HTMLElement {
       if (!this.shadowRoot) return;
       const s = this.shadowRoot.querySelector("slot");
       if (!s) return;
-      const a = s.assignedNodes({ flatten: !0 });
+      const l = s.assignedNodes({ flatten: !0 });
       this.removeAttribute("inner-space"), this.removeAttribute("has-card-slat-group"), this.removeAttribute("has-accordion-slat-group");
-      let r = !1;
-      a.forEach((i) => {
-        if (i.nodeType === Node.ELEMENT_NODE) {
-          const t = i, n = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-accordion-block").forEach((o) => {
+      let a = !1;
+      const u = [];
+      if (l.forEach((r) => {
+        if (r.nodeType === Node.ELEMENT_NODE) {
+          const t = r, c = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          c instanceof HTMLElement && (c.querySelectorAll("mui-accordion-block").forEach((o) => {
             o.setAttribute("card-slot", "");
-          }), r = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
+          }), a = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
             const o = e.getAttribute("variant");
-            (o === "action" || o === "row") && (e.setAttribute("card-slot", ""), this.hasAttribute("condensed") ? e.setAttribute("condensed-slot", "") : e.removeAttribute("condensed-slot"));
+            (o === "action" || o === "row") && (e.setAttribute("card-slot", ""), e.removeAttribute("condensed-slot-first"), e.removeAttribute("condensed-slot-last"), this.hasAttribute("condensed") ? (e.setAttribute("condensed-slot", ""), u.push(e)) : e.removeAttribute("condensed-slot"));
           });
-          const c = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          c instanceof HTMLElement && (c.querySelectorAll("mui-cell").forEach((o) => {
+          const d = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          d instanceof HTMLElement && (d.setAttribute("card-slot", ""), d.querySelectorAll("mui-cell").forEach((o) => {
             o.setAttribute("card-slot", "");
-          }), r = !0);
-          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          d.length && (r = !0, d.forEach((e) => {
+          }), a = !0), (t.tagName.toLowerCase() === "mui-avatar-group" ? [t] : Array.from(t.querySelectorAll("mui-avatar-group"))).forEach((e) => {
+            e.setAttribute("card-slot", "");
+          }), (t.tagName.toLowerCase() === "mui-chip-rail" ? [t] : Array.from(t.querySelectorAll("mui-chip-rail"))).forEach((e) => {
+            e.setAttribute("card-slot", "");
+          }), (t.tagName.toLowerCase() === "mui-code" ? [t] : Array.from(t.querySelectorAll("mui-code"))).forEach((e) => {
+            e.setAttribute("card-slot", "");
+          });
+          const h = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          h.length && (a = !0, h.forEach((e) => {
             e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.setAttribute("has-accordion-slat-group", "") : (this.setAttribute("inner-space", ""), this.setAttribute("has-card-slat-group", ""));
           }));
         }
-      }), !r && !this.hasAttribute("condensed") && this.setAttribute("inner-space", "");
+      }), u.length) {
+        const r = l.flatMap((c) => {
+          if (c.nodeType !== Node.ELEMENT_NODE) return [];
+          const n = c;
+          return n.tagName.toLowerCase() === "mui-slat" ? [n] : Array.from(n.querySelectorAll("mui-slat"));
+        }), t = r[0], i = r[r.length - 1];
+        t != null && t.hasAttribute("condensed-slot") && t.setAttribute("condensed-slot-first", ""), i != null && i.hasAttribute("condensed-slot") && i.setAttribute("condensed-slot-last", "");
+      }
+      !a && !this.hasAttribute("condensed") && this.setAttribute("inner-space", "");
     });
   }
   render() {
@@ -83,4 +98,4 @@ class l extends HTMLElement {
     this.shadowRoot.innerHTML = s, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", l);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", m);

package/dist/esm/components/mui-card/footer/index.js

@@ -1,4 +1,4 @@
-class c extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -46,23 +46,25 @@ class c extends HTMLElement {
       if (!this.shadowRoot) return;
       const s = this.shadowRoot.querySelector("slot");
       if (!s) return;
-      const r = s.assignedNodes({ flatten: !0 }).filter((e) => {
+      const i = s.assignedNodes({ flatten: !0 }).filter((e) => {
         var o;
         return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((o = e.textContent) == null ? void 0 : o.trim()) !== "";
       });
-      if (r.length === 0) {
+      if (i.length === 0) {
         this.setAttribute("hidden", "");
         return;
       }
-      let i = !1, a = !1;
-      r.forEach((e) => {
+      let a = !1, d = !1;
+      i.forEach((e) => {
         var o, n;
         if (e.nodeType === Node.ELEMENT_NODE) {
-          const t = e, d = t.tagName.toLowerCase();
-          (d === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (i = !0), (d === "mui-button-group" || (n = t.querySelector) != null && n.call(t, "mui-button-group")) && (a = !0);
+          const t = e, r = t.tagName.toLowerCase();
+          (r === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (a = !0, (r === "mui-code" ? [t] : Array.from(t.querySelectorAll("mui-code"))).forEach((c) => {
+            c.setAttribute("card-slot", "");
+          })), (r === "mui-button-group" || (n = t.querySelector) != null && n.call(t, "mui-button-group")) && (d = !0);
         }
-      }), i || this.setAttribute("inner-space", ""), a && this.setAttribute("has-button-group", "");
+      }), a || this.setAttribute("inner-space", ""), d && this.setAttribute("has-button-group", "");
     });
   }
 }
-customElements.get("mui-card-footer") || customElements.define("mui-card-footer", c);
+customElements.get("mui-card-footer") || customElements.define("mui-card-footer", l);

package/dist/esm/components/mui-carousel/controller/index.js

@@ -99,7 +99,7 @@ class n extends HTMLElement {
       /* Base positioning for all control slots */
       ::slotted([slot="controls"]) {
         position: absolute;
-        z-index: 10;
+        z-index: 1;
       }
 
       ::slotted([slot="controls"][controlsPosition="top"]) {