@muibook/components 1.6.0 → 3.0.0

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

@@ -0,0 +1,29 @@
+class e extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  render() {
+    const s = (
+      /*css*/
+      `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--slat-accessory-background);
+        padding: var(--space-200);
+        border-radius: var(--radius-400);
+      }
+    `
+    );
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${s}</style>
+      <slot></slot>
+    `;
+  }
+}
+customElements.get("mui-slat-accessory") || customElements.define("mui-slat-accessory", e);

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

@@ -1,21 +1,2 @@
-class t extends HTMLElement {
-  constructor() {
-    super(), this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.setAttribute("role", "table"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
-    `
-    <style>
-      :host {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--space-500);
-        box-sizing: border-box;
-      }
-    </style>
-    <slot name="start"></slot>
-    <slot name="end"></slot>
-    `);
-  }
-}
-customElements.define("mui-slat", t);
+import "./slat/index.js";
+import "./accessory/index.js";

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

@@ -0,0 +1,139 @@
+import "../../mui-button/index.js";
+import "../../mui-icons/right-chevron/index.js";
+import "../../mui-stack/hstack/index.js";
+import "../../mui-stack/vstack/index.js";
+class i extends HTMLElement {
+  constructor() {
+    super(), this.variant = "", this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["variant", "col", "space"];
+  }
+  attributeChangedCallback(t, a, r) {
+    t === "variant" && (this.variant = r), this.render();
+  }
+  connectedCallback() {
+    this.variant = this.getAttribute("variant") || "", this.setAttribute("role", "row"), this.render();
+  }
+  applyCellRoles() {
+    var a;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("slot");
+    t == null || t.forEach((r) => {
+      r.assignedElements({ flatten: !0 }).forEach((s) => {
+        s.setAttribute("role", "cell");
+      });
+    });
+  }
+  hasAccessorySlot() {
+    return this.querySelector('[slot="accessory"]') !== null;
+  }
+  render() {
+    const t = this.variant === "action", a = this.getAttribute("col") || "1fr 1fr", r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
+      /*css*/
+      `
+      :host {
+        display: grid;
+        grid-template-columns: ${a};
+        align-items: center;
+        gap: ${r};
+        box-sizing: border-box;
+      }
+
+      :host([variant="row"]) {
+        padding: var(--space-300) var(--space-400);
+        background: var(--slat-background);
+        border-radius: var(--slat-radius);
+      }
+
+      :host([variant="header"]) {
+        padding: var(--space-200) var(--space-400);
+        padding-top: var(--space-400);
+      }
+
+      :host([variant="action"]) {
+        display: grid;
+        grid-template-columns: 1fr;
+        align-items: center;
+        width: 100%;
+      }
+
+      .action::part(text-align) {
+        text-align: left;
+      }
+
+      .action:focus {
+        z-index: 1;
+      }
+
+      .action::part(padding) {
+        padding: var(--space-300) var(--space-400);
+      }
+
+      .action::part(border) {
+        border: var(--space-000);
+      }
+
+      .action::part(background) {
+        background: var(--slat-background);
+      }
+
+      .action:hover::part(background) {
+        background: var(--slat-background-hover);
+      }
+
+      .action::part(border-radius) {
+        border-radius: var(--slat-radius);
+      }
+
+      .end {
+        display: flex;
+        align-items: center;
+        gap: var(--space-300);
+        text-align: right;
+      }
+      
+      :host(.card-slot) {
+        --slat-background: var(--slat-card-background);
+        --slat-background-hover: var(--slat-card-background-hover);
+      }
+
+      :host(.condensed-slot) .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); 
+      }
+
+    `
+    ), o = e ? `
+        <mui-h-stack alignY="center" space="var(--space-400)">
+          <slot name="accessory"></slot>
+          <slot name="start"></slot>
+        </mui-h-stack>
+      ` : '<slot name="start"></slot>';
+    this.shadowRoot.innerHTML = t ? (
+      /*html*/
+      `
+        <style>${s}</style>
+        <mui-button variant="tertiary" class="action">
+          ${o}
+          <div class="end" slot="after">
+            <slot name="end"></slot>
+            <mui-icon-right-chevron size="x-small"></mui-icon-right-chevron>
+          </div>
+          
+        </mui-button>
+      `
+    ) : (
+      /*html*/
+      `
+        <style>${s}</style>
+        ${o}
+        <slot name="end"></slot>
+      `
+    ), requestAnimationFrame(() => this.applyCellRoles());
+  }
+}
+customElements.get("mui-slat") || customElements.define("mui-slat", i);

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

@@ -1,4 +1,6 @@
-class b extends HTMLElement {
+import "../mui-body/index.js";
+import "../mui-badge/index.js";
+class u extends HTMLElement {
   static get observedAttributes() {
     return [
       "state",
@@ -24,18 +26,15 @@ class b extends HTMLElement {
     this.render();
   }
   render() {
-    const p = this.getAttribute("state") || "default", l = this.getAttribute("number") || "0000", n = this.getAttribute("bg-color"), o = this.getAttribute("bg-image"), u = this.getAttribute("variant") || "plain", e = this.hasAttribute("inverted"), s = this.getAttribute("type") || "", d = p === "frozen", c = this.getAttribute("logo") || "", g = this.getAttribute("partner") || "", a = this.getAttribute("logo-height"), t = a && !isNaN(parseInt(a, 10)) ? parseInt(a, 10) : void 0;
-    t && t > 126 && console.warn(
-      `[mui-smart-card] The logo height (${t}px) exceeds the recommended maximum of 126px. This may affect vertical alignment or visual consistency.`
-    );
+    const p = this.getAttribute("state") || "default", l = this.getAttribute("number") || "0000", n = this.getAttribute("bg-color"), o = this.getAttribute("bg-image"), b = this.getAttribute("variant") || "plain", t = this.hasAttribute("inverted"), s = this.getAttribute("type") || "", d = p === "frozen", c = this.getAttribute("logo") || "", g = this.getAttribute("partner") || "", a = this.getAttribute("logo-height"), e = a && !isNaN(parseInt(a, 10)) ? parseInt(a, 10) : void 0;
     let r = "card", i = "";
-    u === "animated" ? r += " animated" : r += " plain", o ? i = `
+    b === "animated" ? r += " animated" : r += " plain", o ? i = `
         background-image: url(${o});
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
       ` : n ? i = `background: ${n};` : i = `
-        background: ${e ? "linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%)" : "linear-gradient(180deg, var(--grey-200) 0%, var(--white) 100%)"};
+        background: ${t ? "linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%)" : "linear-gradient(180deg, var(--grey-200) 0%, var(--white) 100%)"};
       `, this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -110,13 +109,13 @@ class b extends HTMLElement {
           object-fit: contain;
           display: block;
           width: auto;
-          height: ${t ? `calc(${t}px / 1.5)` : "auto"};
+          height: ${e ? `calc(${e}px / 1.5)` : "auto"};
         }
 
         @media (min-width: 500px) {
           .logo img {
             width: auto;
-            height: ${t ? `${t}px` : "auto"};
+            height: ${e ? `${e}px` : "auto"};
           }   
         }
 
@@ -124,21 +123,21 @@ class b extends HTMLElement {
         /* =========================================== */
         .type,
         .card-number::part(display) {
-          color: ${e ? "var(--white)" : "var(--black)"};
-          text-shadow: ${e ? "0 0px 8px rgb(0 0 0 / 12%);" : "0 0px 8px rgb(255 255 255 / 12%);"};
+          color: ${t ? "var(--white)" : "var(--black)"};
+          text-shadow: ${t ? "0 0px 8px rgb(0 0 0 / 12%);" : "0 0px 8px rgb(255 255 255 / 12%);"};
         }
 
         img { 
-          filter: ${e ? "drop-shadow(0px 1px 0px var(--black-opacity-60))" : "drop-shadow(0px 1px 0px var(--white-opacity-60))"};
+          filter: ${t ? "drop-shadow(0px 1px 0px var(--black-opacity-60))" : "drop-shadow(0px 1px 0px var(--white-opacity-60))"};
         }
 
 
         .inner {
-          box-shadow: ${e ? "inset 0 1px 0 0 rgb(255 255 255 / 20%), 0 1px 0 0 rgb(0 0 0 / 10%)" : "inset 0 1px 0 0 rgb(255 255 255 / 60%), 0 1px 0 0 rgb(0 0 0 / 40%)"};
+          box-shadow: ${t ? "inset 0 1px 0 0 rgb(255 255 255 / 20%), 0 1px 0 0 rgb(0 0 0 / 10%)" : "inset 0 1px 0 0 rgb(255 255 255 / 60%), 0 1px 0 0 rgb(0 0 0 / 40%)"};
         }
 
         .card.animated .inner::after {
-          background: linear-gradient(${e ? "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 8%) 40%, rgb(255 255 255 / 4%) 40%" : "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 25%) 40%, rgb(255 255 255 / 8%) 40%"});
+          background: linear-gradient(${t ? "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 8%) 40%, rgb(255 255 255 / 4%) 40%" : "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 25%) 40%, rgb(255 255 255 / 8%) 40%"});
         }
 
         /* Type */
@@ -332,4 +331,4 @@ class b extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-smart-card", b);
+customElements.get("mui-smart-card") || customElements.define("mui-smart-card", u);

package/dist/esm/components/mui-stack/hstack/index.js

@@ -49,4 +49,4 @@ class e extends HTMLElement {
     });
   }
 }
-customElements.define("mui-h-stack", e);
+customElements.get("mui-h-stack") || customElements.define("mui-h-stack", e);

package/dist/esm/components/mui-stack/vstack/index.js

@@ -49,4 +49,4 @@ class e extends HTMLElement {
     });
   }
 }
-customElements.define("mui-v-stack", e);
+customElements.get("mui-v-stack") || customElements.define("mui-v-stack", e);

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

@@ -35,11 +35,7 @@ class h extends HTMLElement {
     this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (i = this._checkbox) == null || i.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (s = this._checkbox) == null || s.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
   }
   _updateIcons() {
-    const t = this.shadowRoot.querySelector(
-      'slot[name="on-icon"]'
-    ), e = this.shadowRoot.querySelector(
-      'slot[name="off-icon"]'
-    );
+    const t = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
     t && t.assignedElements().forEach((i) => {
       i.style.display = this._checked ? "inline" : "none";
     }), e && e.assignedElements().forEach((i) => {
@@ -48,9 +44,7 @@ class h extends HTMLElement {
   }
   render() {
     const t = this.getAttribute("label");
-    t || console.warn(
-      "mui-switch Accessibility warning: Provide a 'label' to ensure the switch is described for assistive technologies."
-    ), this.shadowRoot.innerHTML = /*html*/
+    this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host { display: inline-block; }
@@ -140,4 +134,4 @@ class h extends HTMLElement {
     `;
   }
 }
-customElements.define("mui-switch", h);
+customElements.get("mui-switch") || customElements.define("mui-switch", h);

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

@@ -1,14 +1,20 @@
-class s extends HTMLElement {
+class t extends HTMLElement {
   static get observedAttributes() {
     return ["align-y"];
   }
   constructor() {
-    super();
-    const t = this.attachShadow({ mode: "open" });
-    this.setAttribute("role", "cell");
-    const e = (
-      /*css*/
-      `
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.setAttribute("role", "cell"), this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = /*html*/
+    `
+    <style>
     :host {
       display: flex;
       justify-content: space-between;
@@ -53,13 +59,9 @@ class s extends HTMLElement {
       width: 4.4rem;
       height: 4.4rem;
     }
-  `
-    );
-    t.innerHTML = /*html*/
-    `
-    <style>${e}</style>
-    <slot></slot>
+    </style>
+     <slot></slot>
   `;
   }
 }
-customElements.define("mui-cell", s);
+customElements.get("mui-cell") || customElements.define("mui-cell", t);

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

@@ -24,4 +24,4 @@ class t extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-row", t);
+customElements.get("mui-row") || customElements.define("mui-row", t);

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

@@ -21,4 +21,4 @@ class o extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-row-group", o);
+customElements.get("mui-row-group") || customElements.define("mui-row-group", o);

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

@@ -18,4 +18,4 @@ class t extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-table", t);
+customElements.get("mui-table") || customElements.define("mui-table", t);

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

@@ -20,4 +20,4 @@ class n extends HTMLElement {
     });
   }
 }
-customElements.define("mui-tab-controller", n);
+customElements.get("mui-tab-controller") || customElements.define("mui-tab-controller", n);

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

@@ -13,7 +13,7 @@ class s extends HTMLElement {
     const t = this.getAttribute("icon");
     this.setAttribute("tabindex", this.hasAttribute("active") ? "0" : "-1"), this.shadowRoot.innerHTML = "";
     const i = document.createElement("style");
-    if (i.textContent = /*html*/
+    if (i.textContent = /*css*/
     `
       :host {
         user-select: none;
@@ -58,4 +58,4 @@ class s extends HTMLElement {
     this.classList.toggle("active", t), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
   }
 }
-customElements.define("mui-tab-item", s);
+customElements.get("mui-tab-item") || customElements.define("mui-tab-item", s);

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

@@ -29,4 +29,4 @@ class e extends HTMLElement {
   attributeChangedCallback(t, s, n) {
   }
 }
-customElements.define("mui-tab-panel", e);
+customElements.get("mui-tab-panel") || customElements.define("mui-tab-panel", e);

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

@@ -133,4 +133,4 @@ class c extends HTMLElement {
     );
   }
 }
-customElements.define("mui-tab-bar", c);
+customElements.get("mui-tab-bar") || customElements.define("mui-tab-bar", c);

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

@@ -256,10 +256,10 @@ html[data-theme="light"] {
   --feedback-attention-action-background: var(--red-200);
 
   /* Action - Primary (Button & Link) */
-  --action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
+  --action-primary-border-color: var(--black-opacity-0);
+  --action-primary-border-color-hover: var(--black-opacity-0);
+  --action-primary-border-color-focus: var(--black-opacity-0);
+  --action-primary-border-color-disabled: var(--black-opacity-0);
   --action-primary-background: var(--grey-900);
   --action-primary-background-hover: var(--grey-1000);
   --action-primary-background-focus: var(--grey-1000);
@@ -269,10 +269,10 @@ html[data-theme="light"] {
   --action-primary-text-color-focus: var(--white);
   --action-primary-text-color-disabled: var(--grey-400);
   /* Action - Secondary (Button & Link) */
-  --action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);
-  --action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);
-  --action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);
-  --action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-800);
+  --action-secondary-border-color: var(--grey-800);
+  --action-secondary-border-color-hover: var(--grey-800);
+  --action-secondary-border-color-focus: var(--grey-800);
+  --action-secondary-border-color-disabled: var(--grey-800);
   --action-secondary-background: var(--white-opacity-0);
   --action-secondary-background-hover: var(--grey-100);
   --action-secondary-background-focus: var(--grey-100);
@@ -282,10 +282,10 @@ html[data-theme="light"] {
   --action-secondary-text-color-focus: var(--grey-1000);
   --action-secondary-text-color-disabled: var(--grey-400);
   /* Action - Tertiary (Button & Link) */
-  --action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
-  --action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
-  --action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
-  --action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--white-opacity-0);
+  --action-tertiary-border-color: var(--black-opacity-0);
+  --action-tertiary-border-color-hover: var(--black-opacity-0);
+  --action-tertiary-border-color-focus: var(--black-opacity-0);
+  --action-tertiary-border-color-disabled: var(--black-opacity-0);
   --action-tertiary-background: var(--white-opacity-0);
   --action-tertiary-background-hover: var(--black-opacity-10);
   --action-tertiary-background-focus: var(--black-opacity-10);
@@ -295,10 +295,10 @@ html[data-theme="light"] {
   --action-tertiary-text-color-focus: var(--grey-1000);
   --action-tertiary-text-color-disabled: var(--grey-400);
   /* Action - Attention (Button & Link) */
-  --action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
+  --action-attention-border-color: var(--black-opacity-0);
+  --action-attention-border-color-hover: var(--black-opacity-0);
+  --action-attention-border-color-focus: var(--black-opacity-0);
+  --action-attention-border-color-disabled: var(--black-opacity-0);
   --action-attention-background: var(--red-500);
   --action-attention-background-hover: var(--red-600);
   --action-attention-background-focus: var(--red-600);
@@ -321,12 +321,11 @@ html[data-theme="light"] {
   --outline-color: var(--blue-500);
   --border-color: var(--black-opacity-20);
 
-  --optional-text-color: var(--grey-600);
-
   --text-color: var(--grey-900);
   --text-color-success: var(--green-600);
   --text-color-warning: var(--orange-600);
   --text-color-error: var(--red-600);
+  --text-color-optional: var(--grey-600);
 
   /* ================================================================================================== */
   /* Components                                                                                         */
@@ -371,6 +370,13 @@ html[data-theme="light"] {
 
   /* Carousel */
   --carousel-background: var(--white);
+
+  /* Slat */
+  --slat-background: var(--white-opacity-60);
+  --slat-background-hover: var(--white-opacity-90);
+  --slat-card-background: var(--surface-elevated-100);
+  --slat-card-background-hover: var(--surface-elevated-200);
+  --slat-accessory-background: var(--black-opacity-10);
 }
 
 /* ==================================================================================================== */
@@ -428,10 +434,10 @@ html[data-theme="dark"] {
   --feedback-warning-action-background: var(--orange-900);
   --feedback-attention-action-background: var(--red-900);
   /* Action - Primary (Button & Link) */
-  --action-primary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-primary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-primary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-primary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
+  --action-primary-border-color: var(--black-opacity-0);
+  --action-primary-border-color-hover: var(--black-opacity-0);
+  --action-primary-border-color-focus: var(--black-opacity-0);
+  --action-primary-border-color-disabled: var(--black-opacity-0);
   --action-primary-background: var(--grey-200);
   --action-primary-background-hover: var(--grey-100);
   --action-primary-background-focus: var(--grey-100);
@@ -441,10 +447,10 @@ html[data-theme="dark"] {
   --action-primary-text-color-focus: var(--grey-900);
   --action-primary-text-color-disabled: var(--grey-400);
   /* Action - Secondary (Button & Link) */
-  --action-secondary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);
-  --action-secondary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);
-  --action-secondary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);
-  --action-secondary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--grey-200);
+  --action-secondary-border-color: var(--grey-200);
+  --action-secondary-border-color-hover: var(--grey-200);
+  --action-secondary-border-color-focus: var(--grey-200);
+  --action-secondary-border-color-disabled: var(--grey-200);
   --action-secondary-background: var(--black-opacity-0);
   --action-secondary-background-hover: var(--grey-800);
   --action-secondary-background-focus: var(--grey-800);
@@ -454,11 +460,11 @@ html[data-theme="dark"] {
   --action-secondary-text-color-focus: var(--grey-100);
   --action-secondary-text-color-disabled: var(--grey-600);
   /* Action - Tertiary (Button & Link) */
-  --action-tertiary-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-tertiary-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-tertiary-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-tertiary-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-tertiary-background: transparent;
+  --action-tertiary-border-color: var(--black-opacity-0);
+  --action-tertiary-border-color-hover: var(--black-opacity-0);
+  --action-tertiary-border-color-focus: var(--black-opacity-0);
+  --action-tertiary-border-color-disabled: var(--black-opacity-0);
+  --action-tertiary-background: var(--black-opacity-0);
   --action-tertiary-background-hover: var(--white-opacity-10);
   --action-tertiary-background-focus: var(--white-opacity-10);
   --action-tertiary-background-disabled: var(--grey-900);
@@ -467,10 +473,10 @@ html[data-theme="dark"] {
   --action-tertiary-text-color-focus: var(--grey-100);
   --action-tertiary-text-color-disabled: var(--grey-600);
   /* Action - Attention (Button & Link) */
-  --action-attention-stroke: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-attention-stroke-hover: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-attention-stroke-focus: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
-  --action-attention-stroke-disabled: var(--stroke-size-200) var(--stroke-solid) var(--black-opacity-0);
+  --action-attention-border-color: var(--black-opacity-0);
+  --action-attention-border-color-hover: var(--black-opacity-0);
+  --action-attention-border-color-focus: var(--black-opacity-0);
+  --action-attention-border-color-disabled: var(--black-opacity-0);
   --action-attention-background: var(--red-600);
   --action-attention-background-hover: var(--red-700);
   --action-attention-background-focus: var(--red-700);
@@ -493,12 +499,11 @@ html[data-theme="dark"] {
   --outline-color: var(--blue-300);
   --border-color: var(--white-opacity-20);
 
-  --optional-text-color: var(--grey-300);
-
   --text-color: var(--grey-200);
   --text-color-success: var(--green-400);
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
+  --text-color-optional: var(--grey-300);
   /* ================================================================================================== */
   /* Components                                                                                         */
   /* ================================================================================================== */
@@ -542,6 +547,13 @@ html[data-theme="dark"] {
 
   /* Carousel */
   --carousel-background: var(--grey-700);
+
+  /* Slat */
+  --slat-background: var(--black-opacity-20);
+  --slat-background-hover: var(--black-opacity-50);
+  --slat-card-background: var(--surface-elevated-100);
+  --slat-card-background-hover: var(--surface-elevated-200);
+  --slat-accessory-background: var(--white-opacity-10);
 }
 
 /* ==================================================================================================== */
@@ -558,7 +570,29 @@ html[data-theme="dark"] {
   --feedback-warning-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-warning-border-color);
   --feedback-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--feedback-attention-border-color);
   /* Action (Button & Link) */
-  --action-padding: var(--space-200) var(--space-500);
+  --action-primary-border: var(--stroke-size-200) var(--stroke-solid) var(--action-primary-border-color);
+  --action-primary-border-hover: var(--stroke-size-200) var(--stroke-solid) var(--action-primary-border-color-hover);
+  --action-primary-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-primary-border-color-focus);
+  --action-primary-border-disabled: var(--stroke-size-200) var(--stroke-solid)
+    var(--action-primary-border-color-disabled);
+  --action-secondary-border: var(--stroke-size-200) var(--stroke-solid) var(--action-secondary-border-color);
+  --action-secondary-border-hover: var(--stroke-size-200) var(--stroke-solid) var(--action-secondary-border-color-hover);
+  --action-secondary-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-secondary-border-color-focus);
+  --action-secondary-border-disabled: var(--stroke-size-200) var(--stroke-solid)
+    var(--action-secondary-border-color-disabled);
+  --action-tertiary-border: var(--stroke-size-200) var(--stroke-solid) var(--action-tertiary-border-color);
+  --action-tertiary-border-hover: var(--stroke-size-200) var(--stroke-solid) var(--action-tertiary-border-color-hover);
+  --action-tertiary-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-tertiary-border-color-focus);
+  --action-tertiary-border-disabled: var(--stroke-size-200) var(--stroke-solid)
+    var(--action-tertiary-border-color-disabled);
+  --action-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color);
+  --action-attention-border-hover: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color-hover);
+  --action-attention-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color-focus);
+  --action-attention-border-disabled: var(--stroke-size-200) var(--stroke-solid)
+    var(--action-attention-border-color-disabled);
+  --action-padding: var(--space-200) calc(var(--space-300) + var(--space-100));
+  --action-before-slot-padding: var(--space-300);
+  --action-after-slot-padding: var(--space-300);
   --action-icon-only-padding: var(--space-000);
   --action-radius: var(--radius-100);
   --action-font-size: var(--text-font-size);
@@ -633,4 +667,6 @@ html[data-theme="dark"] {
   --carousel-radius: var(--radius-300);
   --carousel-tab-position: var(--space-400);
   --carousel-tab-offset: calc(4.4rem + var(--carousel-tab-position)); /* Tab Height */
+  /* Slat [Action] */
+  --slat-radius: var(--radius-200);
 }