@muibook/components 10.0.1 → 11.0.1

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

@@ -0,0 +1,70 @@
+import "../mui-icons/spinner/index.js";
+class o extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "duration", "label"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("duration") || this.setAttribute("duration", "0.8s"), this.hasAttribute("color") || this.setAttribute("color", "default"), this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("size") || "medium", e = this.getAttribute("duration") || "0.8s", i = this.getAttribute("color") || "default", s = this.getAttribute("label") || "Loading", n = {
+      "xx-small": "1.3rem",
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, r = n[t] || n.medium;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: inline-flex;
+          width: ${r};
+          height: ${r};
+          align-items: center;
+          justify-content: center;
+        }
+        .spinner {
+          width: 100%;
+          height: 100%;
+          animation: spin ${e} linear infinite;
+          box-sizing: border-box;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .spinner {
+            animation-duration: 1.6s;
+          }
+        }
+      </style>
+      <span class="vh">${s}</span>
+      <span class="spinner" role="status" aria-label="${s}">
+        <mui-icon-spinner size="${t}" color="${i}"></mui-icon-spinner>
+      </span>
+    `;
+  }
+}
+customElements.get("mui-spinner") || customElements.define("mui-spinner", o);

package/dist/esm/components/mui-stepper/step/index.js

@@ -1,6 +1,10 @@
-class s extends HTMLElement {
+import "../../mui-body/index.js";
+import "../../mui-icons/checkmark/index.js";
+import "../../mui-icons/exclamationmark/index.js";
+import "../../mui-icons/notification/index.js";
+class g extends HTMLElement {
   static get observedAttributes() {
-    return ["state", "title", "direction"];
+    return ["state", "resolved-state", "title", "direction", "hide-icon", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -13,30 +17,39 @@ class s extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const o = this.getAttribute("state") || "upcoming", t = this.getAttribute("direction") || "horizontal", n = this.getAttribute("title") || "", i = `
+    const o = this.getAttribute("resolved-state") || this.getAttribute("state") || "upcoming", r = this.getAttribute("direction") || "horizontal", a = this.getAttribute("size"), t = a === "x-small" || a === "small" ? a : "medium", c = this.getAttribute("title") || "", l = this.hasAttribute("hide-icon"), d = o === "active" || o === "error" || o === "pending", s = t === "x-small" ? "xx-small" : t === "small" ? "x-small" : "small", p = t === "medium" ? "small" : "x-small", v = {
+      success: `<mui-icon-checkmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-checkmark>`,
+      completed: `<mui-icon-checkmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-checkmark>`,
+      active: `<mui-icon-notification class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-notification>`,
+      error: `<mui-icon-exclamationmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-exclamationmark>`,
+      pending: `<mui-icon-exclamationmark class="dot-icon" size="${s}" color="var(--stepper-icon-color)"></mui-icon-exclamationmark>`,
+      disabled: ""
+    }, i = `
     <div class="content">
       <mui-body
-        size="small"
-        ${o === "active" ? "weight='bold'" : ""}
+        size="${p}"
+        ${d ? "weight='bold'" : ""}
         class="${o === "active" ? "active" : ""}"
       >
-        ${n}
+        ${c}
       </mui-body>
       <slot name="secondary"></slot>
     </div>
-  `, r = `
+  `, n = `
   <div class="dotwrapper">
-    <div class="dot ${o}"></div>
-    ${t === "horizontal" ? `<div class="line before ${t}"></div><div class="line after ${t}"></div>` : ""}
+    <div class="dot ${o}">
+      ${l ? "" : v[o] || ""}
+    </div>
+    ${r === "horizontal" ? `<div class="line before ${r}"></div><div class="line after ${r}"></div>` : ""}
   </div>
-`, a = t === "horizontal" ? i + r : r + i, e = " 1.8rem";
+`, b = r === "horizontal" ? i + n : n + i, e = t === "x-small" ? "var(--stepper-dot-size-x-small)" : t === "small" ? "var(--stepper-dot-size-small)" : "var(--stepper-dot-size)";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: flex;
-          flex-direction: ${t === "horizontal" ? "column" : "row"};
-          align-items: ${t === "horizontal" ? "center" : "flex-start"};
+          flex-direction: ${r === "horizontal" ? "column" : "row"};
+          align-items: ${r === "horizontal" ? "center" : "flex-start"};
           flex: 1;
         }
 
@@ -45,30 +58,147 @@ class s extends HTMLElement {
           display: flex;
           align-items: center;
           justify-content: center; /* keeps dot centered */
-          width: ${t === "horizontal" ? "100%" : "auto"};
+          width: ${r === "horizontal" ? "100%" : "auto"};
         }
 
         /* .dot stays unchanged */
         .dot {
           width: ${e};
           height: ${e};
+          display: flex;
+          align-items: center;
+          justify-content: center;
           border-radius: 50%;
           box-shadow: inset 0 0 0 var(--stroke-size-200) var(--stepper-border-color);
-          background: var(--stepper-background-inactive);
+          background: var(--stepper-dot-background, var(--surface-elevated-200));
           z-index: 1;
         }
 
         .dot.completed {
           background: var(--stepper-background-active);
+          box-shadow: inset 0 0 0 var(--stroke-size-200) var(--stepper-background-active);
+        }
+        .dot.success {
+          background: var(--stepper-success-color);
+          box-shadow: inset 0 0 0 var(--stroke-size-200) var(--stepper-success-color);
         }
         .dot.active {
           background: var(--stepper-background-active);
         }
+        .dot.error {
+          background: var(--stepper-error-color);
+          box-shadow: inset 0 0 0 var(--stroke-size-200) var(--stepper-error-color);
+        }
+        .dot-icon {
+          display: block;
+          line-height: 1;
+        }
+        .dot.disabled {
+          opacity: 1;
+          box-shadow: inset 0 0 0 var(--stroke-size-200)
+            color-mix(in srgb, var(--stepper-disabled-color) 70%, transparent 30%);
+        }
+        .dot.pending {
+          position: relative;
+          overflow: visible;
+          background: var(--stepper-warning-color);
+          box-shadow: inset 0 0 0 var(--stroke-size-200) var(--stepper-warning-color);
+        }
+        .dot.pending::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          border-radius: 50%;
+          background: var(--stepper-warning-color);
+          filter: blur(var(--stroke-size-300));
+          opacity: 0.1;
+          transform: scale(1);
+          animation: pending-blur-pulse var(--speed-500) ease-in-out infinite;
+          pointer-events: none;
+          z-index: -1;
+        }
+        .dot.pending .dot-icon {
+          filter: drop-shadow(0 0 var(--stroke-size-200) color-mix(in srgb, var(--stepper-warning-color) 60%, transparent 40%));
+        }
+        .dot.error .dot-icon {
+          filter: drop-shadow(0 0 var(--stroke-size-200) color-mix(in srgb, var(--stepper-error-color) 60%, transparent 40%));
+        }
 
         .line {
           position: absolute;
           background: var(--stepper-color);
         }
+        :host([resolved-state="completed"]) .line.before,
+        :host([resolved-state="completed"]) .line.after,
+        :host([resolved-state="active"]) .line.before {
+          background: var(--stepper-background-active);
+        }
+        :host([resolved-state="error"]) .line.before,
+        :host([resolved-state="error"]) .line.after {
+          background: var(--stepper-error-color);
+        }
+        :host([resolved-state="success"]) .line.before,
+        :host([resolved-state="success"]) .line.after {
+          background: var(--stepper-success-color);
+        }
+        :host([resolved-state="pending"]) .line.before,
+        :host([resolved-state="pending"]) .line.after {
+          background: var(--stepper-warning-color);
+        }
+        :host([resolved-state="error"]) .line.before.horizontal {
+          background: linear-gradient(90deg, var(--stepper-background-active) 0%, var(--stepper-error-color) 70%, var(--stepper-error-color) 100%);
+        }
+        :host([resolved-state="success"]) .line.before.horizontal {
+          background: linear-gradient(90deg, var(--stepper-background-active) 0%, var(--stepper-success-color) 70%, var(--stepper-success-color) 100%);
+        }
+        :host([resolved-state="pending"]) .line.before.horizontal {
+          background: linear-gradient(
+            90deg,
+            var(--stepper-background-active) 0%,
+            var(--stepper-warning-color) 70%,
+            var(--stepper-warning-color) 100%
+          );
+        }
+        :host([resolved-state="disabled"]) .line.before.horizontal {
+          background: linear-gradient(
+            90deg,
+            var(--stepper-background-active) 0%,
+            var(--stepper-disabled-color) 70%,
+            var(--stepper-disabled-color) 100%
+          );
+        }
+        :host([resolved-state="error"]) .line.after.horizontal {
+          background: linear-gradient(
+            90deg,
+            var(--stepper-error-color) 0%,
+            color-mix(in srgb, var(--stepper-error-color) 55%, var(--stepper-color) 45%) 40%,
+            var(--stepper-color) 100%
+          );
+        }
+        :host([resolved-state="success"]) .line.after.horizontal {
+          background: linear-gradient(
+            90deg,
+            var(--stepper-success-color) 0%,
+            color-mix(in srgb, var(--stepper-success-color) 55%, var(--stepper-color) 45%) 40%,
+            var(--stepper-color) 100%
+          );
+        }
+        :host([resolved-state="pending"]) .line.after.horizontal {
+          background: linear-gradient(
+            90deg,
+            var(--stepper-warning-color) 0%,
+            color-mix(in srgb, var(--stepper-warning-color) 55%, var(--stepper-color) 45%) 40%,
+            var(--stepper-color) 100%
+          );
+        }
+        :host([resolved-state="disabled"]) .line.after.horizontal {
+          background: linear-gradient(
+            90deg,
+            var(--stepper-disabled-color) 0%,
+            color-mix(in srgb, var(--stepper-disabled-color) 55%, var(--stepper-color) 45%) 40%,
+            var(--stepper-color) 100%
+          );
+        }
 
         .line.before.horizontal {
           top: 50%;
@@ -103,6 +233,12 @@ class s extends HTMLElement {
           align-items: center;
           text-align: center;
         }
+        :host([size="small"][direction="horizontal"]) .content {
+          margin-bottom: var(--space-100);
+        }
+        :host([size="x-small"][direction="horizontal"]) .content {
+          margin-bottom: var(--space-050);
+        }
 
         :host([direction="vertical"]) .content {
           margin-left: calc( -1 * ((${e} / 2) + var(--stroke-size-100)));
@@ -124,6 +260,38 @@ class s extends HTMLElement {
           bottom: calc(-1 * var(--stroke-size-100));
 
         }
+        :host([direction="vertical"][resolved-state="error"]) .content:before {
+          background: linear-gradient(
+            180deg,
+            var(--stepper-error-color) 0%,
+            color-mix(in srgb, var(--stepper-error-color) 60%, var(--stepper-border-color) 40%) 45%,
+            var(--stepper-border-color) 100%
+          );
+        }
+        :host([direction="vertical"][resolved-state="success"]) .content:before {
+          background: linear-gradient(
+            180deg,
+            var(--stepper-success-color) 0%,
+            color-mix(in srgb, var(--stepper-success-color) 60%, var(--stepper-border-color) 40%) 45%,
+            var(--stepper-border-color) 100%
+          );
+        }
+        :host([direction="vertical"][resolved-state="pending"]) .content:before {
+          background: linear-gradient(
+            180deg,
+            var(--stepper-warning-color) 0%,
+            color-mix(in srgb, var(--stepper-warning-color) 60%, var(--stepper-border-color) 40%) 45%,
+            var(--stepper-border-color) 100%
+          );
+        }
+        :host([direction="vertical"][resolved-state="disabled"]) .content:before {
+          background: linear-gradient(
+            180deg,
+            var(--stepper-disabled-color) 0%,
+            color-mix(in srgb, var(--stepper-disabled-color) 60%, var(--stepper-border-color) 40%) 45%,
+            var(--stepper-border-color) 100%
+          );
+        }
 
         :host([direction="vertical"][position="last"]) .content:before {
           display: none;
@@ -135,8 +303,40 @@ class s extends HTMLElement {
 
 
         :host([direction="vertical"]) .dotwrapper {
-          margin-top: var(--stroke-size-200);
-          margin-bottom: var(--stroke-size-100);
+          width: ${e};
+          min-width: ${e};
+          flex: 0 0 ${e};
+          margin-top: var(--space-200);
+          margin-bottom: var(--space-200);
+        }
+        :host([direction="vertical"]) .dotwrapper::before {
+          content: "";
+          position: absolute;
+          top: calc(-1 * var(--space-200));
+          left: calc(50% - var(--stroke-size-100));
+          width: var(--stroke-size-200);
+          height: var(--space-200);
+          background: var(--stepper-border-color);
+          pointer-events: none;
+        }
+        :host([direction="vertical"][position="first"]) .dotwrapper::before {
+          display: none;
+        }
+        :host([direction="vertical"][resolved-state="error"]) .dotwrapper::before {
+          background: linear-gradient(
+            180deg,
+            var(--stepper-border-color) 0%,
+            color-mix(in srgb, var(--stepper-error-color) 45%, var(--stepper-border-color) 55%) 45%,
+            var(--stepper-error-color) 100%
+          );
+        }
+        :host([direction="vertical"][resolved-state="pending"]) .dotwrapper::before {
+          background: linear-gradient(
+            180deg,
+            var(--stepper-border-color) 0%,
+            color-mix(in srgb, var(--stepper-warning-color) 45%, var(--stepper-border-color) 55%) 45%,
+            var(--stepper-warning-color) 100%
+          );
         }
 
         .title[active] {
@@ -146,12 +346,49 @@ class s extends HTMLElement {
         mui-body.active::part(color) {
           color: var(--stepper-text-color-active);;
         }
+        :host([resolved-state="completed"]) mui-body::part(color),
+        :host([resolved-state="active"]) mui-body::part(color) {
+          color: var(--stepper-text-color-active);
+        }
+        :host([resolved-state="error"]) mui-body::part(color) {
+          color: var(--stepper-error-color);
+        }
+        :host([resolved-state="success"]) mui-body::part(color) {
+          color: var(--stepper-success-color);
+        }
+        :host([resolved-state="pending"]) mui-body::part(color) {
+          color: var(--stepper-warning-color);
+        }
+        :host([resolved-state="disabled"]) mui-body::part(color) {
+          color: var(--stepper-disabled-color);
+        }
+        :host([resolved-state="disabled"]) {
+          cursor: not-allowed;
+        }
+        :host([role="button"]) {
+          cursor: pointer;
+        }
+
+        @keyframes pending-blur-pulse {
+          0% {
+            opacity: 0.08;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.45;
+            transform: scale(1.16);
+          }
+          100% {
+            opacity: 0.08;
+            transform: scale(1);
+          }
+        }
 
       </style>
 
-      ${a}
+      ${b}
 
     `;
   }
 }
-customElements.get("mui-step") || customElements.define("mui-step", s);
+customElements.get("mui-step") || customElements.define("mui-step", g);

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

@@ -1,24 +1,75 @@
-class n extends HTMLElement {
-  static get observedAttributes() {
-    return ["direction", "active-step"];
-  }
+class u extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.setAttribute("direction", this.getAttribute("direction") || "horizontal"), this.setAttribute("active-step", this.getAttribute("active-step") || "0");
+    super(), this.onKeyDown = (i) => {
+      const s = this.steps;
+      if (!s.length) return;
+      const e = i.key, n = this.activeStepIndex;
+      e === "ArrowRight" || e === "ArrowDown" ? (i.preventDefault(), this.setActiveStep(n + 1, "keyboard")) : e === "ArrowLeft" || e === "ArrowUp" ? (i.preventDefault(), this.setActiveStep(n - 1, "keyboard")) : e === "Home" ? (i.preventDefault(), this.setActiveStep(0, "keyboard")) : e === "End" && (i.preventDefault(), this.setActiveStep(s.length - 1, "keyboard"));
+    }, this.attachShadow({ mode: "open" }), this.setAttribute("direction", this.getAttribute("direction") || "horizontal"), this.setAttribute("active-step", this.getAttribute("active-step") || "1");
+    const t = this.getAttribute("size");
+    this.setAttribute("size", t === "x-small" || t === "small" ? t : "medium");
+  }
+  static get observedAttributes() {
+    return ["direction", "active-step", "linear", "interactive", "size"];
   }
   connectedCallback() {
-    this.render();
+    this.addEventListener("keydown", this.onKeyDown), this.render();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.onKeyDown);
   }
-  attributeChangedCallback(t, e, i) {
-    (t === "direction" || t === "active-step") && this.render();
+  attributeChangedCallback(t, i, s) {
+    (t === "direction" || t === "active-step" || t === "linear" || t === "interactive" || t === "size") && this.render();
   }
   get steps() {
-    var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot");
     return (t == null ? void 0 : t.assignedElements()) || [];
   }
+  get activeStepIndex() {
+    const t = Number.parseInt(this.getAttribute("active-step") || "1", 10);
+    return Number.isFinite(t) ? Math.max(t - 1, 0) : 0;
+  }
+  emitStepChange(t, i, s) {
+    this.dispatchEvent(
+      new CustomEvent("step-change", {
+        detail: {
+          previousStep: t + 1,
+          activeStep: i + 1,
+          previousIndex: t,
+          activeIndex: i,
+          source: s
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  setActiveStep(t, i) {
+    const s = this.steps;
+    if (!s.length) return;
+    const e = Math.min(Math.max(t, 0), s.length - 1), n = this.activeStepIndex;
+    n !== e && (this.setAttribute("active-step", String(e + 1)), this.emitStepChange(n, e, i));
+  }
+  resolveStepState(t, i, s) {
+    const e = t.getAttribute("state");
+    if (e && e !== "active" && e !== "upcoming") {
+      if (e === "disabled") return "disabled";
+      if (e === "error") return "error";
+      if (e === "success") return "success";
+      if (e === "pending") return "pending";
+      if (e === "completed") return "completed";
+    }
+    return i < s ? "completed" : i === s ? "active" : "upcoming";
+  }
+  canActivateStep(t, i, s) {
+    if (!this.hasAttribute("interactive")) return !1;
+    const e = s[t];
+    return e.hasAttribute("disabled") || e.getAttribute("state") === "disabled" ? !1 : !this.hasAttribute("linear") || t <= i ? !0 : t === i + 1;
+  }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("direction") || "horizontal", e = parseInt(this.getAttribute("active-step") || "0", 10);
+    const t = this.getAttribute("direction") === "vertical" ? "vertical" : "horizontal", i = this.getAttribute("size"), s = i === "x-small" || i === "small" ? i : "medium", e = this.steps, n = Math.min(Math.max(this.activeStepIndex, 0), Math.max(e.length - 1, 0));
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -26,70 +77,15 @@ class n extends HTMLElement {
           display: flex;
           flex-direction: ${t === "horizontal" ? "row" : "column"};
           ${t === "horizontal" ? "justify-content: space-between;" : ""}
+          width: 100%;
+          outline: none;
         }
-
-        .step {
-          display: flex;
-          flex-direction: ${t === "horizontal" ? "column" : "row"};
-          align-items: center;
-          position: relative;
-        }
-
-        .dot {
-          width: 1.25rem;
-          height: 1.25rem;
-          border-radius: 50%;
-          border: 2px solid var(--color-border, #ccc);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: var(--color-bg, #fff);
-          flex-shrink: 0;
-        }
-
-        .dot.completed {
-          background: var(--color-success, #4caf50);
-          border-color: var(--color-success, #4caf50);
-        }
-        .dot.active {
-          border-color: var(--color-primary, #1976d2);
-        }
-
-        .title {
-          margin-top: ${t === "horizontal" ? "var(--space-200)" : "0"};
-          margin-left: ${t === "vertical" ? "var(--space-200)" : "0"};
-          text-align: ${t === "horizontal" ? "center" : "left"};
-        }
-        .title mui-body[active] {
-          font-weight: bold;
-        }
-
-        .connector {
-          position: absolute;
-          background: red;
-        }
-        .connector.horizontal {
-          top: 0.625rem;
-          left: 100%;
-          width: var(--space-400);
-          height: 2px;
-        }
-        .connector.vertical {
-          left: 0.625rem;
-          top: 100%;
-          height: var(--space-400);
-          width: 2px;
-        }
-
       </style>
-
       <slot></slot>
-    `;
-    const i = e - 1, s = this.steps;
-    s.forEach((r, o) => {
-      const c = o < i ? "completed" : o === i ? "active" : "upcoming";
-      r.setAttribute("state", c), r.setAttribute("direction", t), r.setAttribute("position", o === 0 ? "first" : o === s.length - 1 ? "last" : "middle");
+    `, e.forEach((r, o) => {
+      const a = this.resolveStepState(r, o, n), c = this.canActivateStep(o, n, e);
+      r.setAttribute("resolved-state", a), r.setAttribute("direction", t), r.setAttribute("size", s), r.setAttribute("position", o === 0 ? "first" : o === e.length - 1 ? "last" : "middle"), c ? (r.setAttribute("tabindex", o === n ? "0" : "-1"), r.setAttribute("role", "button"), r.setAttribute("aria-current", o === n ? "step" : "false"), r.onclick = () => this.setActiveStep(o, "click")) : (r.setAttribute("tabindex", "-1"), r.removeAttribute("role"), r.removeAttribute("aria-current"), r.onclick = null);
     });
   }
 }
-customElements.get("mui-stepper") || customElements.define("mui-stepper", n);
+customElements.get("mui-stepper") || customElements.define("mui-stepper", u);

package/dist/esm/components/mui-table/row/index.js

@@ -1,4 +1,4 @@
-class t extends HTMLElement {
+class e extends HTMLElement {
   static get observedAttributes() {
     return ["columns"];
   }
@@ -6,7 +6,17 @@ class t extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.setAttribute("role", "row"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.setAttribute("role", "row"), this.syncContextAttributes(), this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  syncContextAttributes() {
+    const t = !!this.closest("mui-card");
+    this.toggleAttribute("in-card", t);
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
     <style>
       :host {
@@ -19,9 +29,12 @@ class t extends HTMLElement {
         align-items: center;
         min-height: 4.4rem;
       }
+      :host([in-card]) {
+        border-top-color: color-mix(in srgb, var(--border-color) 50%, transparent);
+      }
     </style>
     <slot></slot>
     `);
   }
 }
-customElements.get("mui-row") || customElements.define("mui-row", t);
+customElements.get("mui-row") || customElements.define("mui-row", e);

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

@@ -1,23 +1,30 @@
-class n extends HTMLElement {
+class s extends HTMLElement {
   constructor() {
     super(), this.handleTabChange = this.handleTabChange.bind(this);
   }
   connectedCallback() {
-    this.addEventListener("tab-change", this.handleTabChange);
-    const e = this.querySelector("mui-tab-bar");
-    if (e) {
-      const t = e.querySelector("mui-tab-item[active]");
-      t && this.updatePanels(t.id);
-    }
+    this.addEventListener("tab-change", this.handleTabChange), requestAnimationFrame(() => this.initializePanels());
   }
-  handleTabChange(e) {
-    const t = e;
-    this.updatePanels(t.detail.activeId);
+  disconnectedCallback() {
+    this.removeEventListener("tab-change", this.handleTabChange);
   }
-  updatePanels(e) {
-    this.querySelectorAll("mui-tab-panel").forEach((a) => {
-      a.getAttribute("item") === e ? a.style.display = "" : a.style.display = "none";
+  initializePanels() {
+    const i = this.querySelector("mui-tab-bar"), e = i == null ? void 0 : i.querySelector("mui-tab-item[active]"), n = i == null ? void 0 : i.querySelector("mui-tab-item"), t = (e == null ? void 0 : e.id) || (n == null ? void 0 : n.id) || "";
+    this.updatePanels(t);
+  }
+  handleTabChange(i) {
+    var t;
+    const e = i, n = ((t = e == null ? void 0 : e.detail) == null ? void 0 : t.activeId) || "";
+    this.updatePanels(n);
+  }
+  updatePanels(i) {
+    const e = Array.from(this.querySelectorAll("mui-tab-panel"));
+    if (!e.length) return;
+    let n = e.find((t) => t.getAttribute("item") === i) || null;
+    n || (n = e[0]), e.forEach((t) => {
+      const a = t === n;
+      t.toggleAttribute("hidden", !a), t.setAttribute("aria-hidden", String(!a)), t.style.display = a ? "" : "none";
     });
   }
 }
-customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", n);
+customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", s);