@muibook/components 18.1.1 → 19.0.0

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

@@ -1,19 +1,19 @@
 class u extends HTMLElement {
   constructor() {
-    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");
+    super(), this.onKeyDown = (t) => {
+      const i = this.steps;
+      if (!i.length) return;
+      const s = t.key, e = this.activeStepIndex;
+      s === "ArrowRight" || s === "ArrowDown" ? (t.preventDefault(), this.setActiveStep(e + 1, "keyboard")) : s === "ArrowLeft" || s === "ArrowUp" ? (t.preventDefault(), this.setActiveStep(e - 1, "keyboard")) : s === "Home" ? (t.preventDefault(), this.setActiveStep(0, "keyboard")) : s === "End" && (t.preventDefault(), this.setActiveStep(i.length - 1, "keyboard"));
+    }, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
     return ["direction", "active-step", "linear", "interactive", "size"];
   }
   connectedCallback() {
-    this.addEventListener("keydown", this.onKeyDown), this.render();
+    this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.hasAttribute("active-step") || this.setAttribute("active-step", "1");
+    const t = this.getAttribute("size");
+    t === "x-small" || t === "small" || t === "medium" || this.setAttribute("size", "medium"), this.addEventListener("keydown", this.onKeyDown), this.render();
   }
   disconnectedCallback() {
     this.removeEventListener("keydown", this.onKeyDown);

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

@@ -20,8 +20,17 @@ class t extends HTMLElement {
       justify-content: space-between;
       align-self: ${this.getAttribute("align-y") || "initial"};
       text-align: left;
+      font-size: var(--row-cell-font-size, var(--text-font-size-m));
+      line-height: var(--row-cell-line-height, var(--text-line-height-m));
 
     }
+    .inner {
+      display: inherit;
+      width: 100%;
+      min-width: 0;
+      align-items: inherit;
+      justify-content: inherit;
+    }
     :host(*:first-of-type) {
       padding-left: var(--space-400);
     }
@@ -56,11 +65,21 @@ class t extends HTMLElement {
       text-align: center;
     }
     :host([action]) {
-      width: 4.4rem;
-      height: 4.4rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    :host([action]) .inner {
+      width: var(--row-action-size);
+      height: var(--row-action-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      margin-left: auto;
     }
     </style>
-     <slot></slot>
+     <div class="inner"><slot></slot></div>
   `;
   }
 }

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

@@ -1,12 +1,16 @@
-class e extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
-    return ["columns"];
+    return ["columns", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.setAttribute("role", "row"), this.syncContextAttributes(), this.render();
+    this.setAttribute("role", "row"), this.syncContextAttributes(), this.syncActionColumnState(), this.observeTableChanges(), this.render();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.tableObserver) == null || t.disconnect(), this.tableObserver = void 0;
   }
   attributeChangedCallback() {
     this.render();
@@ -15,6 +19,48 @@ class e extends HTMLElement {
     const t = !!this.closest("mui-card");
     this.toggleAttribute("in-card", t);
   }
+  observeTableChanges() {
+    var e;
+    const t = this.closest("mui-table");
+    t && ((e = this.tableObserver) == null || e.disconnect(), this.tableObserver = new MutationObserver(() => {
+      this.syncActionColumnState();
+    }), this.tableObserver.observe(t, {
+      subtree: !0,
+      childList: !0,
+      attributes: !0,
+      attributeFilter: ["action"],
+      characterData: !0
+    }));
+  }
+  clearActionPlaceholderStyles(t) {
+    const e = t;
+    e.style.removeProperty("width"), e.style.removeProperty("height"), e.style.removeProperty("display"), e.style.removeProperty("align-items"), e.style.removeProperty("justify-content");
+  }
+  syncActionColumnState() {
+    const t = this.closest("mui-table");
+    if (!t) return;
+    const e = !!t.querySelector("mui-cell[action]");
+    this.toggleAttribute("has-action-column", e);
+    const o = Array.from(this.children).filter(
+      (i) => i.tagName.toLowerCase() === "mui-cell"
+    ), r = o[o.length - 1];
+    if (!r) return;
+    const s = o.some(
+      (i) => i.hasAttribute("action")
+    );
+    if (!e || s) {
+      this.clearActionPlaceholderStyles(r);
+      return;
+    }
+    const n = Array.from(r.children).some(
+      (i) => i.nodeType === Node.ELEMENT_NODE
+    ), l = (r.textContent || "").trim();
+    if (!(!n && l.length === 0)) {
+      this.clearActionPlaceholderStyles(r);
+      return;
+    }
+    r.style.width = "var(--row-action-size)", r.style.height = "var(--row-action-size)", r.style.display = "inline-flex", r.style.alignItems = "center", r.style.justifyContent = "center";
+  }
   render() {
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
@@ -27,7 +73,43 @@ class e extends HTMLElement {
         padding: var(--space-300) var(--space-000);
         border-top: var(--border-thin);
         align-items: center;
-        min-height: 4.4rem;
+        min-height: var(--row-min-height, var(--row-action-size, var(--row-action-xs)));
+      }
+      :host(:not([size])) {
+        --row-action-size: var(--row-action-m);
+        --row-cell-font-size: var(--text-font-size-m);
+        --row-cell-line-height: var(--text-line-height-m);
+        --row-min-height: var(--row-action-m);
+      }
+      :host([size="xx-small"]) {
+        --row-action-size: var(--row-action-xxs);
+        --row-cell-font-size: var(--text-font-size-xs);
+        --row-cell-line-height: var(--text-line-height-xs);
+        --row-min-height: var(--row-action-xxs);
+      }
+      :host([size="x-small"]) {
+        --row-action-size: var(--row-action-xs);
+        --row-cell-font-size: var(--text-font-size-xs);
+        --row-cell-line-height: var(--text-line-height-xs);
+        --row-min-height: var(--row-action-xs);
+      }
+      :host([size="small"]) {
+        --row-action-size: var(--row-action-s);
+        --row-cell-font-size: var(--text-font-size-s);
+        --row-cell-line-height: var(--text-line-height-s);
+        --row-min-height: var(--row-action-s);
+      }
+      :host([size="medium"]) {
+        --row-action-size: var(--row-action-m);
+        --row-cell-font-size: var(--text-font-size-m);
+        --row-cell-line-height: var(--text-line-height-m);
+        --row-min-height: var(--row-action-m);
+      }
+      :host([size="large"]) {
+        --row-action-size: var(--row-action-l);
+        --row-cell-font-size: var(--text-font-size-l);
+        --row-cell-line-height: var(--text-line-height-l);
+        --row-min-height: var(--row-action-l);
       }
       :host([in-card]) {
         border-top-color: color-mix(in srgb, var(--border-color) 50%, transparent);
@@ -37,4 +119,4 @@ class e extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-row") || customElements.define("mui-row", e);
+customElements.get("mui-row") || customElements.define("mui-row", a);

package/dist/esm/components/mui-tabs/tab-bar/index.js

@@ -46,11 +46,11 @@ class l extends HTMLElement {
       h && (this.setActiveTab(h), h.focus());
     }), s.forEach((t, i) => {
       t.classList.remove("first", "middle", "last", "only"), s.length === 1 ? t.classList.add("only") : i === 0 ? t.classList.add("first") : i === s.length - 1 ? t.classList.add("last") : t.classList.add("middle");
-    }), s.forEach((t) => {
-      const i = t;
-      i.addEventListener("click", () => {
-        this.setActiveTab(i);
-      });
+    }), this.addEventListener("click", (t) => {
+      const r = (typeof t.composedPath == "function" ? t.composedPath() : []).find(
+        (h) => h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-tab-item"
+      ), n = t.target instanceof HTMLElement ? t.target.closest("mui-tab-item") : null, o = r || n;
+      !o || !this.contains(o) || this.setActiveTab(o);
     }), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Thu, 19 Mar 2026 13:50:01 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Mon, 23 Mar 2026 11:01:23 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -172,6 +172,7 @@
   --stroke-size-300: 3px;
   --stroke-size-400: 4px;
   --stroke-size-500: 5px;
+  --stroke-size-050: 0.5px;
   --stroke-solid: solid;
   --stroke-outset: outset;
   --speed-100: 0.1s;

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

@@ -796,6 +796,11 @@ html[data-theme="dark"] {
   --action-after-slot-padding: var(--space-300);
   --action-icon-only-padding: var(--space-000);
   --action-icon-only-size: 4.4rem;
+  --row-action-xxs: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+  --row-action-xs: var(--action-icon-only-size-x-small);
+  --row-action-s: var(--action-icon-only-size-small);
+  --row-action-m: var(--action-icon-only-size);
+  --row-action-l: var(--action-icon-only-size-large);
 
   /* SIZE: LARGE */
   --action-radius-large: var(--radius-300);