@muibook/components 18.2.0 → 19.0.1

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

@@ -1,4 +1,4 @@
-class d extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["condensed"];
   }
@@ -32,8 +32,8 @@ class d extends HTMLElement {
           c instanceof HTMLElement && (c.querySelectorAll("mui-cell").forEach((o) => {
             o.setAttribute("card-slot", "");
           }), r = !0);
-          const l = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          l.length && (r = !0, l.forEach((e) => {
+          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          d.length && (r = !0, d.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", ""));
           }));
         }
@@ -64,9 +64,16 @@ class d extends HTMLElement {
           padding-bottom: var(--space-200);
         }
         @media (min-width: 768px) {
-        :host([has-card-slat-group]) {
-          padding-bottom: var(--space-500);
+          :host([has-card-slat-group]) {
+            padding-bottom: var(--space-500);
+          }
         }
+
+        :host([condensed]),
+        :host([condensed][inner-space]),
+        :host([condensed][has-card-slat-group]),
+        :host([condensed][has-accordion-slat-group]) {
+          padding: var(--space-000);
         }
         
       </style>
@@ -76,4 +83,4 @@ class d extends HTMLElement {
     this.shadowRoot.innerHTML = s, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", d);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", l);

package/dist/esm/components/mui-chip-input/index.js

@@ -1,5 +1,6 @@
 import "../mui-input/index.js";
 import "../mui-chip/index.js";
+import "../mui-button/index.js";
 import "../mui-stack/hstack/index.js";
 class w extends HTMLElement {
   constructor() {
@@ -83,16 +84,16 @@ class w extends HTMLElement {
     try {
       e = JSON.parse(t);
     } catch {
-      e = t.split(",").map((l) => l.trim()).filter(Boolean);
+      e = t.split(",").map((o) => o.trim()).filter(Boolean);
     }
     if (!Array.isArray(e)) return [];
     const i = new Map(this.parseOptions().map((a) => [a.value.toLowerCase(), a])), s = e.map((a) => {
-      const l = this.normalizeOption(a);
-      return l ? i.get(l.value.toLowerCase()) || l : null;
+      const o = this.normalizeOption(a);
+      return o ? i.get(o.value.toLowerCase()) || o : null;
     }).filter((a) => !!a), r = /* @__PURE__ */ new Set();
     return s.filter((a) => {
-      const l = a.value.toLowerCase();
-      return r.has(l) ? !1 : (r.add(l), !0);
+      const o = a.value.toLowerCase();
+      return r.has(o) ? !1 : (r.add(o), !0);
     });
   }
   syncSelectedFromAttribute() {
@@ -115,6 +116,10 @@ class w extends HTMLElement {
   get placement() {
     return this.getAttribute("placement") === "after" ? "after" : "before";
   }
+  set placement(t) {
+    const e = t === "after" ? "after" : "before";
+    this.setAttribute("placement", e);
+  }
   get useStackLayout() {
     if (this.hasAttribute("mobile-stack")) return !0;
     const t = this.getAttribute("breakpoint");
@@ -196,21 +201,15 @@ class w extends HTMLElement {
   handleKeyboard(t) {
     const e = this.filteredOptions, i = e.length + (this.showCreateOption ? 1 : 0);
     if (t.key === "ArrowDown" && i > 0) {
-      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1 + i) % i;
-      const s = this.inputValue.length;
-      this.rerenderAndPreserveFocus(s, s);
+      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex + 1 + i) % i, this.updateListbox();
       return;
     }
     if (t.key === "ArrowUp" && i > 0) {
-      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i;
-      const s = this.inputValue.length;
-      this.rerenderAndPreserveFocus(s, s);
+      t.preventDefault(), this.highlightedIndex = (this.highlightedIndex - 1 + i) % i, this.updateListbox();
       return;
     }
     if (t.key === "Escape") {
-      this.highlightedIndex = -1;
-      const s = this.inputValue.length;
-      this.rerenderAndPreserveFocus(s, s);
+      this.highlightedIndex = -1, this.updateListbox();
       return;
     }
     if (t.key === "Backspace" && !this.inputValue && this.selectedItems.length > 0) {
@@ -228,53 +227,97 @@ class w extends HTMLElement {
   setupListeners() {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("mui-input");
-    t && (t.oninput = (e) => {
-      var n;
-      const i = this.getInnerInput(), s = (i == null ? void 0 : i.selectionStart) ?? null, r = (i == null ? void 0 : i.selectionEnd) ?? null, a = (n = e.detail) == null ? void 0 : n.value, l = t.getAttribute("value") || "";
-      this.inputValue = a ?? l, this.highlightedIndex = -1, this.emitQueryChange(), this.rerenderAndPreserveFocus(s, r);
-    }, t.onkeydown = (e) => {
-      this.handleKeyboard(e);
-    }, this.shadowRoot.querySelectorAll("[data-option-value]").forEach((e) => {
-      e.addEventListener("mousedown", (i) => {
-        i.preventDefault();
-        const s = e.getAttribute("data-option-value");
-        s && this.addValue(s);
-      });
-    }), this.shadowRoot.querySelectorAll("[data-remove-value]").forEach((e) => {
-      e.addEventListener("dismiss", (i) => {
-        i.stopPropagation();
-        const s = e.getAttribute("data-remove-value");
-        s && !this.disabled && this.removeValue(s);
+    if (!t) return;
+    t.oninput = (i) => {
+      var a;
+      const s = (a = i.detail) == null ? void 0 : a.value, r = t.getAttribute("value") || "";
+      this.inputValue = s ?? r, this.highlightedIndex = -1, this.emitQueryChange(), this.updateListbox();
+    }, t.onkeydown = (i) => {
+      this.handleKeyboard(i);
+    };
+    const e = this.shadowRoot.querySelector(".listbox");
+    e && (e.onmousedown = (i) => {
+      const s = i.target, r = s == null ? void 0 : s.closest("[data-option-value]");
+      if (!r) return;
+      i.preventDefault();
+      const a = r.getAttribute("data-option-value");
+      a && this.addValue(a);
+    }), this.shadowRoot.querySelectorAll("[data-remove-value]").forEach((i) => {
+      i.addEventListener("dismiss", (s) => {
+        s.stopPropagation();
+        const r = i.getAttribute("data-remove-value");
+        r && !this.disabled && this.removeValue(r);
       });
-    }));
+    });
   }
-  render() {
-    const t = this.getAttribute("id") || "", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "Type to add", s = this.hasAttribute("hide-label"), r = this.useStackLayout, a = this.getAttribute("name") || "", l = this.filteredOptions, n = `${t}-listbox`, d = !this.disabled && (l.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = l.map((o, v) => {
-      const h = v === this.highlightedIndex;
+  updateListbox() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".listbox");
+    if (!t) return;
+    const e = this.filteredOptions;
+    if (!(!this.disabled && (e.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0)) {
+      t.hidden = !0, t.innerHTML = "";
+      return;
+    }
+    const s = e.map((o, u) => {
+      const n = u === this.highlightedIndex;
       return (
         /*html*/
         `
-          <button
-            type="button"
-            class="option ${h ? "active" : ""}"
+          <mui-button
+            variant="${n ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${n ? "active" : ""}"
             role="option"
-            aria-selected="${h ? "true" : "false"}"
+            aria-selected="${n ? "true" : "false"}"
             data-option-value="${o.value}"
-          >${o.label}</button>
+          >${o.label}</mui-button>
+        `
+      );
+    }).join(""), r = e.length, a = this.showCreateOption ? (
+      /*html*/
+      `
+          <mui-button
+            variant="${this.highlightedIndex === r ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${this.highlightedIndex === r ? "active" : ""}"
+            role="option"
+            aria-selected="${this.highlightedIndex === r ? "true" : "false"}"
+            data-option-value="${this.inputValue.trim()}"
+          >Add "${this.inputValue.trim()}"</mui-button>
+        `
+    ) : "";
+    t.hidden = !1, t.innerHTML = `${s}${a}`;
+  }
+  render() {
+    const t = this.getAttribute("id") || "", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "Type to add", s = this.hasAttribute("hide-label"), r = this.useStackLayout, a = this.getAttribute("name") || "", o = this.filteredOptions, u = `${t}-listbox`, n = !this.disabled && (o.length > 0 || this.showCreateOption) && this.inputValue.trim().length > 0, c = o.map((l, v) => {
+      const d = v === this.highlightedIndex;
+      return (
+        /*html*/
+        `
+          <mui-button
+            variant="${d ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${d ? "active" : ""}"
+            role="option"
+            aria-selected="${d ? "true" : "false"}"
+            data-option-value="${l.value}"
+          >${l.label}</mui-button>
         `
       );
-    }).join(""), u = l.length, p = this.showCreateOption ? (
+    }).join(""), h = o.length, p = this.showCreateOption ? (
       /*html*/
       `
-          <button
-            type="button"
-            class="option ${this.highlightedIndex === u ? "active" : ""}"
+          <mui-button
+            variant="${this.highlightedIndex === h ? "secondary" : "tertiary"}"
+            size="small"
+            class="option ${this.highlightedIndex === h ? "active" : ""}"
             role="option"
-            aria-selected="${this.highlightedIndex === u ? "true" : "false"}"
+            aria-selected="${this.highlightedIndex === h ? "true" : "false"}"
             data-option-value="${this.inputValue.trim()}"
-          >Add "${this.inputValue.trim()}"</button>
+          >Add "${this.inputValue.trim()}"</mui-button>
         `
-    ) : "", m = this.placement, b = this.placement === "after" ? "chip-slot-shell after-shell" : "chip-slot-shell before-shell", g = this.selectedItems.length ? (
+    ) : "", m = this.placement, b = this.placement === "after" ? "chip-slot-shell after-shell" : "chip-slot-shell before-shell", f = this.selectedItems.length ? (
       /*html*/
       `
           <mui-h-stack
@@ -284,7 +327,7 @@ class w extends HTMLElement {
             aligny="center"
           >
             ${this.selectedItems.map(
-        (o) => (
+        (l) => (
           /*html*/
           `
                   <mui-chip
@@ -292,15 +335,15 @@ class w extends HTMLElement {
                     size="${this.normalizedSize}"
                     dismiss
                     ${this.disabled ? "disabled" : ""}
-                    data-remove-value="${o.value}"
-                    aria-label="Remove ${o.label}"
-                  >${o.label}</mui-chip>
+                    data-remove-value="${l.value}"
+                    aria-label="Remove ${l.label}"
+                  >${l.label}</mui-chip>
                 `
         )
       ).join("")}
           </mui-h-stack>
         `
-    ) : "", f = a ? this.selectedValues.map((o) => `<input type="hidden" name="${a}" value="${o}" />`).join("") : "";
+    ) : "", g = a ? this.selectedValues.map((l) => `<input type="hidden" name="${a}" value="${l}" />`).join("") : "";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -362,16 +405,8 @@ class w extends HTMLElement {
         }
         .option {
           width: 100%;
-          text-align: left;
-          border: none;
-          background: transparent;
-          padding: var(--space-200) var(--space-300);
-          cursor: pointer;
-          color: var(--text-color);
-        }
-        .option.active,
-        .option:hover {
-          background: var(--surface-elevated-200);
+          justify-content: flex-start;
+          --button-width: 100%;
         }
       </style>
 
@@ -391,16 +426,18 @@ class w extends HTMLElement {
           value="${this.inputValue}"
           ${r ? 'slot-layout="stack-mobile"' : ""}
           ${this.disabled ? "disabled" : ""}
-          aria-controls="${n}"
+          aria-controls="${u}"
           aria-autocomplete="list"
         >
-          ${g}
+          ${f}
         </mui-input>
 
-        ${d ? `<div id="${n}" class="listbox" role="listbox">${c}${p}</div>` : ""}
+        <div id="${u}" class="listbox" role="listbox" ${n ? "" : "hidden"}>
+          ${n ? `${c}${p}` : ""}
+        </div>
       </div>
 
-      ${f}
+      ${g}
     `;
   }
 }

package/dist/esm/components/mui-file-upload/index.js

@@ -1,10 +1,28 @@
 import "../mui-button/index.js";
-class r extends HTMLElement {
+class a extends HTMLElement {
+  static get observedAttributes() {
+    return ["accepted-file-types", "current-file-name", "acceptedfiletypes", "currentfilename"];
+  }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null;
+    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.readAcceptedFileTypes(), this.currentFileName = this.readCurrentFileName(), this.selectedFileName = null;
+  }
+  readAcceptedFileTypes() {
+    return this.getAttribute("accepted-file-types") || this.getAttribute("acceptedFileTypes") || this.getAttribute("acceptedfiletypes") || "";
+  }
+  readCurrentFileName() {
+    return this.getAttribute("current-file-name") || this.getAttribute("currentFileName") || this.getAttribute("currentfilename") || "";
+  }
+  attributeChangedCallback(e, i, t) {
+    if (i !== t) {
+      if (e === "accepted-file-types" || e === "acceptedfiletypes") {
+        this.acceptedFileTypes = this.readAcceptedFileTypes(), this.input && (this.input.accept = this.acceptedFileTypes);
+        return;
+      }
+      (e === "current-file-name" || e === "currentfilename") && (this.currentFileName = this.readCurrentFileName(), !this.selectedFileName && this.label && (this.label.textContent = this.currentFileName || "No file selected"));
+    }
   }
   connectedCallback() {
-    this.render(), this.cacheElements(), this.attachEvents();
+    this.acceptedFileTypes = this.readAcceptedFileTypes(), this.currentFileName = this.readCurrentFileName(), this.render(), this.cacheElements(), this.attachEvents();
   }
   disconnectedCallback() {
     this.cleanupListeners();
@@ -78,7 +96,7 @@ class r extends HTMLElement {
         }
       </style>
       <div class="wrapper">
-        <span class="label">${this.currentFileName}</span>
+        <span class="label">${this.selectedFileName || this.currentFileName || "No file selected"}</span>
         <mui-button variant="tertiary">Browse</mui-button>
         <input type="file" accept="${this.acceptedFileTypes}" />
       </div>
@@ -95,16 +113,16 @@ class r extends HTMLElement {
       this.input.click();
     }, this._inputChangeHandler = this.handleFileChange.bind(this), this.wrapper.addEventListener("click", this._wrapperClickHandler), this.input.addEventListener("change", this._inputChangeHandler);
   }
-  handleFileChange(i) {
-    var t;
-    const e = (t = i.target.files) == null ? void 0 : t[0];
-    e && (this.selectedFileName = e.name, this.label.textContent = e.name, this.dispatchEvent(
+  handleFileChange(e) {
+    var r;
+    const t = (r = e.target.files) == null ? void 0 : r[0];
+    t && (this.selectedFileName = t.name, this.label.textContent = t.name, this.dispatchEvent(
       new CustomEvent("file-upload", {
-        detail: { file: e },
+        detail: { file: t },
         bubbles: !0,
         composed: !0
       })
     ));
   }
 }
-customElements.get("mui-file-upload") || customElements.define("mui-file-upload", r);
+customElements.get("mui-file-upload") || customElements.define("mui-file-upload", a);

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

@@ -1,42 +1,61 @@
-class c extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
-    super(), this.slotEl = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null;
-    const e = this.attachShadow({ mode: "open" }), s = (
+    super(), this.slotEl = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null, this.cleanup = null;
+    const t = this.attachShadow({ mode: "open" }), s = (
       /*css*/
       `
       :host { display: block; }
     `
     );
-    e.innerHTML = `
+    t.innerHTML = `
       <style>${s}</style>
       <slot></slot>
-    `, this.slotEl = e.querySelector("slot");
+    `, this.slotEl = t.querySelector("slot");
   }
   static get observedAttributes() {
     return ["breakpoint", "breakpoint-low", "breakpoint-high"];
   }
   connectedCallback() {
-    const e = this.getAttribute("breakpoint"), s = this.getAttribute("breakpoint-low"), l = this.getAttribute("breakpoint-high");
-    if (this.slotEl) {
+    this.setupResponsive();
+  }
+  disconnectedCallback() {
+    this.teardownResponsive();
+  }
+  attributeChangedCallback(t, s, l) {
+    s !== l && a.observedAttributes.includes(t) && this.setupResponsive();
+  }
+  teardownResponsive() {
+    var t;
+    (t = this.cleanup) == null || t.call(this), this.cleanup = null, this.mqlLow = null, this.mqlHigh = null, this.mqlSingle = null;
+  }
+  setupResponsive() {
+    const t = this.getAttribute("breakpoint"), s = this.getAttribute("breakpoint-low"), l = this.getAttribute("breakpoint-high");
+    if (this.teardownResponsive(), !!this.slotEl)
       if (s && l) {
-        const o = parseInt(s), i = parseInt(l);
-        this.mqlLow = window.matchMedia(`(max-width: ${o}px)`), this.mqlHigh = window.matchMedia(`(min-width: ${i}px)`);
-        const t = () => {
-          const n = this.mqlLow.matches, h = this.mqlHigh.matches, a = n ? "showBelow" : h ? "showAbove" : "showMiddle";
-          this.slotEl.setAttribute("name", a);
+        const n = parseInt(s), i = parseInt(l);
+        if (Number.isNaN(n) || Number.isNaN(i)) return;
+        this.mqlLow = window.matchMedia(`(max-width: ${n}px)`), this.mqlHigh = window.matchMedia(`(min-width: ${i}px)`);
+        const e = () => {
+          const o = this.mqlLow.matches, h = this.mqlHigh.matches, r = o ? "showBelow" : h ? "showAbove" : "showMiddle";
+          this.slotEl.setAttribute("name", r);
+        };
+        e(), this.mqlLow.addEventListener("change", e), this.mqlHigh.addEventListener("change", e), this.cleanup = () => {
+          var o, h;
+          (o = this.mqlLow) == null || o.removeEventListener("change", e), (h = this.mqlHigh) == null || h.removeEventListener("change", e);
+        };
+      } else if (t) {
+        const n = parseInt(t);
+        if (Number.isNaN(n)) return;
+        this.mqlSingle = window.matchMedia(`(max-width: ${n}px)`);
+        const i = () => {
+          this.slotEl.setAttribute("name", this.mqlSingle.matches ? "showBelow" : "showAbove");
         };
-        t(), this.mqlLow.addEventListener("change", t), this.mqlHigh.addEventListener("change", t);
-      } else if (e) {
-        const o = parseInt(e);
-        this.mqlSingle = window.matchMedia(`(max-width: ${o}px)`);
-        const i = (t) => {
-          this.slotEl.setAttribute("name", t ? "showBelow" : "showAbove");
+        i(), this.mqlSingle.addEventListener("change", i), this.cleanup = () => {
+          var e;
+          (e = this.mqlSingle) == null || e.removeEventListener("change", i);
         };
-        i(this.mqlSingle.matches), this.mqlSingle.addEventListener("change", (t) => {
-          i(t.matches);
-        });
-      }
-    }
+      } else
+        this.slotEl.removeAttribute("name");
   }
 }
-customElements.get("mui-responsive") || customElements.define("mui-responsive", c);
+customElements.get("mui-responsive") || customElements.define("mui-responsive", a);

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

@@ -108,13 +108,18 @@ class i extends HTMLElement {
         --slat-background-hover: var(--slat-card-background-hover);
       }
 
-      :host([condensed-slot]) .action::part(border-radius) {
-        border-radius: 0; 
+      :host([radius="none"]) .action::part(border-radius) {
+        border-radius: 0;
       }
 
-      :host([condensed-slot]:last-of-type) .action::part(border-radius) {
-        border-bottom-left-radius: var(--card-radius); 
-        border-bottom-right-radius: var(--card-radius); 
+      :host([radius="none"][condensed-slot]:first-of-type) .action::part(border-radius) {
+        border-top-left-radius: var(--card-radius);
+        border-top-right-radius: var(--card-radius);
+      }
+
+      :host([radius="none"][condensed-slot]:last-of-type) .action::part(border-radius) {
+        border-bottom-left-radius: var(--card-radius);
+        border-bottom-right-radius: var(--card-radius);
       }
 
       ::slotted(mui-avatar) {

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>
   `;
   }
 }