@muibook/components 9.1.0 → 10.0.0

package/dist/esm/components/mui-icons/pin-slash/index.js

@@ -0,0 +1,53 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, o = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path d="M12.552 6.171h11.325c.922 0 1.568.615 1.568 1.456 0 .41-.164.85-.492 1.25-.512.646-1.66 1.589-3.116 2.511l.329 4.96c2.756 1.118 4.58 3.342 4.58 5.678 0 .666-.286 1.2-.768 1.517L14.551 12.095l.04-.707c-1.455-.922-2.613-1.865-3.125-2.51-.318-.4-.482-.852-.482-1.251 0-.84.646-1.456 1.568-1.456m-4.91 3.7c-.327-.328-.337-.932 0-1.27a.91.91 0 0 1 1.292.02l19.412 19.39a.89.89 0 0 1 0 1.261.903.903 0 0 1-1.271 0zm2.04 12.155c0-1.885 1.2-3.7 3.096-4.899l6.928 6.929h-.144v4.837c0 1.056-.973 2.993-1.342 2.993-.38 0-1.353-1.937-1.353-2.993v-5.012h-5.289c-1.127 0-1.896-.748-1.896-1.855"></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-pin-slash") || customElements.define("mui-icon-pin-slash", c);

package/dist/esm/components/mui-icons/rectangle/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = o[e] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+d="M32.998 25.033a5.143 5.143 0 0 1-5.143 5.143H8.145a5.143 5.143 0 0 1-5.143-5.143V10.967a5.143 5.143 0 0 1 5.143-5.143h19.71a5.143 5.143 0 0 1 5.143 5.143zM8.145 9.681c-.71 0-1.286.576-1.286 1.286v14.066c0 .71.576 1.286 1.286 1.286h19.71c.71 0 1.285-.576 1.286-1.286V10.967c0-.71-.576-1.286-1.286-1.286z"
+    ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-rectangle") || customElements.define("mui-icon-rectangle", r);

package/dist/esm/components/mui-icons/rectangle-bottom-panel/index.js

@@ -0,0 +1,58 @@
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, l) {
+    (e === "size" || e === "color") && t !== l && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), i = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", c = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, o = c[e] ?? c.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${i};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M32.998 25.033a5.143 5.143 0 0 1-5.143 5.143H8.145a5.143 5.143 0 0 1-5.143-5.143V10.967a5.143 5.143 0 0 1 5.143-5.143h19.71a5.143 5.143 0 0 1 5.143 5.143zM8.145 9.681c-.71 0-1.286.576-1.286 1.286v14.066c0 .71.576 1.286 1.286 1.286h19.71c.71 0 1.285-.576 1.286-1.286V10.967c0-.71-.576-1.286-1.286-1.286z"
+        ></path>
+        <path
+          d="M19.927 22.244v2.572h-3.854v-2.572zm1.93-1.93c0-.956-.003-1.48-.041-1.853l-.005-.031-.03-.004c-.373-.038-.897-.041-1.854-.041h-3.854c-.957 0-1.481.003-1.854.04l-.031.005-.004.031c-.038.372-.041.897-.041 1.853 0 .957.003 1.481.041 1.854l.004.03q.015.002.031.005c.373.038.897.041 1.854.041v2.572l-1.197-.008c-.96-.019-1.568-.088-2.038-.35l-.124-.077a2.6 2.6 0 0 1-.559-.506l-.15-.202c-.325-.487-.407-1.117-.427-2.163l-.007-1.196c0-1.694 0-2.594.358-3.234l.077-.124c.14-.21.31-.4.505-.56l.203-.149c.486-.325 1.116-.407 2.162-.428l1.197-.006h3.854c1.807 0 2.71 0 3.359.434.28.188.52.428.708.709.434.648.435 1.552.435 3.358l-.007 1.196c-.02 1.046-.102 1.676-.428 2.163l-.15.202a2.6 2.6 0 0 1-.558.506c-.487.325-1.116.407-2.162.427l-1.197.008v-2.572c.957 0 1.481-.003 1.854-.041l.03-.005q.002-.015.005-.03c.038-.373.041-.897.041-1.854"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-rectangle-bottom-panel") || customElements.define("mui-icon-rectangle-bottom-panel", s);

package/dist/esm/components/mui-icons/rectangle-dashed/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, s) {
+    (t === "size" || t === "color") && e !== s && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[e] || e || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, o = i[t] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M6.86 22.916v2.117c0 .71.575 1.286 1.285 1.286h3.999v3.857H8.145a5.143 5.143 0 0 1-5.143-5.143v-2.117zm14.425 3.403v3.857h-6.57v-3.857zm11.713-1.286a5.143 5.143 0 0 1-5.143 5.143h-3.999v-3.857h4c.709 0 1.284-.576 1.285-1.286v-2.117h3.857zm0-4.688h-3.857v-4.69h3.857zm-26.139-4.69v4.69H3.002v-4.69zm20.996-9.831a5.143 5.143 0 0 1 5.143 5.143v2.117h-3.857v-2.117c0-.71-.576-1.286-1.286-1.286h-3.999V5.824zM12.144 9.681H8.145c-.71 0-1.286.576-1.286 1.286v2.117H3.002v-2.117a5.143 5.143 0 0 1 5.143-5.143h3.999zm9.14 0h-6.569V5.824h6.57z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-rectangle-dashed") || customElements.define("mui-icon-rectangle-dashed", r);

package/dist/esm/components/mui-icons/rectangle-left-drawer/index.js

@@ -0,0 +1,55 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    (t === "size" || t === "color") && e !== i && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), r = e && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[e] || e || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = o[t] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${r};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M27.855 5.823a5.143 5.143 0 0 1 5.143 5.143v14.068a5.143 5.143 0 0 1-5.143 5.143H8.145a5.143 5.143 0 0 1-5.143-5.143V10.966a5.143 5.143 0 0 1 5.143-5.143zM15.053 26.32h12.802c.71 0 1.285-.577 1.286-1.286V10.968c0-.71-.576-1.286-1.286-1.286H15.053zM8.145 9.682c-.71 0-1.286.576-1.286 1.285v14.067c0 .71.576 1.285 1.286 1.286h4.337V9.682z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-rectangle-left-drawer") || customElements.define("mui-icon-rectangle-left-drawer", l);

package/dist/esm/components/mui-icons/rectangle-media-text/index.js

@@ -0,0 +1,55 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    (t === "size" || t === "color") && e !== i && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), s = e && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[e] || e || "var(--icon-color-default)", o = {
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, c = o[t] ?? o.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${c};
+          height: ${c};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M32.998 25.033a5.143 5.143 0 0 1-5.143 5.143H8.145a5.143 5.143 0 0 1-5.143-5.143V10.967a5.143 5.143 0 0 1 5.143-5.143h19.71a5.143 5.143 0 0 1 5.143 5.143zM8.145 9.681c-.71 0-1.286.576-1.286 1.286v14.066c0 .71.576 1.286 1.286 1.286h19.71c.71 0 1.285-.576 1.286-1.286V10.967c0-.71-.576-1.286-1.286-1.286zM22.67 22.103c.527 0 .91.396.91.924 0 .5-.383.896-.91.896H9.84c-.54 0-.923-.395-.923-.896 0-.528.382-.924.923-.924zm2.717-3.323c.527 0 .923.396.923.897a.91.91 0 0 1-.923.923H9.84a.9.9 0 0 1-.923-.923c0-.501.382-.896.923-.897zm-12.436-7.556c.963 0 1.477.527 1.477 1.477v2.559c0 .949-.514 1.476-1.476 1.476h-2.545c-.963 0-1.49-.527-1.49-1.476V12.7c0-.949.527-1.476 1.49-1.476z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-rectangle-media-text") || customElements.define("mui-icon-rectangle-media-text", l);

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

@@ -52,7 +52,7 @@ class u extends HTMLElement {
         return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((c = n.textContent) != null && c.trim());
       }
     ), s = d(e), r = d(t);
-    this.classList.toggle("has-before", s), this.classList.toggle("has-after", r);
+    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", r);
     const i = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], v = i.length > 0 && i.every(
       (l) => {
         var n;
@@ -289,44 +289,44 @@ class u extends HTMLElement {
       }
       /* ===================================== */
 
-      :host(.alert-positive-slot) {
+      :host([alert-positive-slot]) {
         --alert-text: var(--feedback-positive-text);
         --alert-icon: var(--feedback-positive-icon);
         --alert-bg-hover: var(--feedback-positive-action-background);
       }
 
-      :host(.alert-info-slot) {
+      :host([alert-info-slot]) {
         --alert-text: var(--feedback-info-text);
         --alert-icon: var(--feedback-info-icon);
         --alert-bg-hover: var(--feedback-info-action-background);
       }
 
-      :host(.alert-warning-slot) {
+      :host([alert-warning-slot]) {
         --alert-text: var(--feedback-warning-text);
         --alert-icon: var(--feedback-warning-icon);
         --alert-bg-hover: var(--feedback-warning-action-background);
       }
 
-      :host(.alert-attention-slot) {
+      :host([alert-attention-slot]) {
         --alert-text: var(--feedback-attention-text);
         --alert-icon: var(--feedback-attention-icon);
         --alert-bg-hover: var(--feedback-attention-action-background);
       }
 
-      :host(.alert-slot) a {
+      :host([alert-slot]) a {
         font-weight: var(--font-weight-semi-bold);
         color: var(--alert-text);
       }
 
-      :host(.alert-slot) a:hover,
-      :host(.alert-slot) a:focus-visible {
+      :host([alert-slot]) a:hover,
+      :host([alert-slot]) a:focus-visible {
         background: var(--alert-bg-hover);
         color: var(--alert-text);
       }
 
-      :host(.alert-slot) ::slotted(.mui-icon),
-      :host(.alert-slot):hover ::slotted(.mui-icon),
-      :host(.alert-slot):focus-visible ::slotted(.mui-icon) {
+      :host([alert-slot]) ::slotted(.mui-icon),
+      :host([alert-slot]):hover ::slotted(.mui-icon),
+      :host([alert-slot]):focus-visible ::slotted(.mui-icon) {
         fill: var(--alert-icon);
       }
 
@@ -380,39 +380,39 @@ class u extends HTMLElement {
 
       /* Before & After Icon
       ========================================= */
-      :host(.has-after) a,
-      :host(.has-before) a,
-      :host(.has-after.has-before) a { 
+      :host([has-after]) a,
+      :host([has-before]) a,
+      :host([has-after][has-before]) a { 
         display: grid; 
         align-items: center; 
         gap: var(--space-100);
       }
 
-      :host(.has-after.has-before) a {
+      :host([has-after][has-before]) a {
         grid-template-columns: auto 1fr auto;
       }
 
-      :host(.has-after) a {
+      :host([has-after]) a {
         grid-template-columns: 1fr auto;
       }
 
-      :host(.has-before) a {
+      :host([has-before]) a {
         grid-template-columns: auto 1fr;
       }
 
-      :host(.has-after.has-before[variant]:not([variant="default"])) a,
-      :host(.has-after.has-before[usage="input"]) a {
+      :host([has-after][has-before][variant]:not([variant="default"])) a,
+      :host([has-after][has-before][usage="input"]) a {
         padding-right: var(--action-after-slot-padding);
         padding-left: var(--action-before-slot-padding);
       }
 
-      :host(.has-after[variant]:not([variant="default"])) a,
-      :host(.has-after[usage="input"]) a {
+      :host([has-after][variant]:not([variant="default"])) a,
+      :host([has-after][usage="input"]) a {
         padding-right: var(--action-after-slot-padding);
       }
 
-      :host(.has-before[variant]:not([variant="default"])) a,
-      :host(.has-before[usage="input"]) a {
+      :host([has-before][variant]:not([variant="default"])) a,
+      :host([has-before][usage="input"]) a {
         padding-left: var(--action-before-slot-padding);
       }
 
@@ -547,76 +547,76 @@ class u extends HTMLElement {
       }
 
       /* Before & After Icon padding adjustments for x-small */
-      :host([size="x-small"][variant]:not([variant="default"]).has-after) a,
-      :host([size="x-small"][variant]:not([variant="default"]).has-before) a,
-      :host([size="x-small"][variant]:not([variant="default"]).has-after.has-before) a { 
+      :host([size="x-small"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="x-small"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="x-small"][variant]:not([variant="default"])[has-after][has-before]) a { 
         gap: var(--space-025);
       }
 
-      :host([size="x-small"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="x-small"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding-x-small);
         padding-left: var(--action-before-slot-padding-x-small);
       }
 
-      :host([size="x-small"][variant]:not([variant="default"]).has-after) a {
+      :host([size="x-small"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding-x-small);
       }
 
-      :host([size="x-small"][variant]:not([variant="default"]).has-before) a {
+      :host([size="x-small"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding-x-small);
       }
 
       /* Before & After Icon padding adjustments for small */
-      :host([size="small"][variant]:not([variant="default"]).has-after) a,
-      :host([size="small"][variant]:not([variant="default"]).has-before) a,
-      :host([size="small"][variant]:not([variant="default"]).has-after.has-before) a { 
+      :host([size="small"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="small"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="small"][variant]:not([variant="default"])[has-after][has-before]) a { 
         gap: var(--space-050);
       }
 
-      :host([size="small"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="small"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding-small);
         padding-left: var(--action-before-slot-padding-small);
       }
 
-      :host([size="small"][variant]:not([variant="default"]).has-after) a {
+      :host([size="small"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding-small);
       }
 
-      :host([size="small"][variant]:not([variant="default"]).has-before) a {
+      :host([size="small"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding-small);
       }
 
       /* Before & After Icon padding adjustments for medium */
-      :host([size="medium"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="medium"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding);
         padding-left: var(--action-before-slot-padding);
       }
 
-      :host([size="medium"][variant]:not([variant="default"]).has-after) a {
+      :host([size="medium"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding);
       }
 
-      :host([size="medium"][variant]:not([variant="default"]).has-before) a {
+      :host([size="medium"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding);
       }
 
       /* Before & After Icon padding adjustments for large */
-      :host([size="large"][variant]:not([variant="default"]).has-after) a,
-      :host([size="large"][variant]:not([variant="default"]).has-before) a,
-      :host([size="large"][variant]:not([variant="default"]).has-after.has-before) a { 
+      :host([size="large"][variant]:not([variant="default"])[has-after]) a,
+      :host([size="large"][variant]:not([variant="default"])[has-before]) a,
+      :host([size="large"][variant]:not([variant="default"])[has-after][has-before]) a { 
         gap: var(--space-200);
       }
 
-      :host([size="large"][variant]:not([variant="default"]).has-after.has-before) a {
+      :host([size="large"][variant]:not([variant="default"])[has-after][has-before]) a {
         padding-right: var(--action-after-slot-padding-large);
         padding-left: var(--action-before-slot-padding-large);
       }
 
-      :host([size="large"][variant]:not([variant="default"]).has-after) a {
+      :host([size="large"][variant]:not([variant="default"])[has-after]) a {
         padding-right: var(--action-after-slot-padding-large);
       }
 
-      :host([size="large"][variant]:not([variant="default"]).has-before) a {
+      :host([size="large"][variant]:not([variant="default"])[has-before]) a {
         padding-left: var(--action-before-slot-padding-large);
       }
 

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

@@ -103,16 +103,16 @@ class i extends HTMLElement {
         text-align: right;
       }
       
-      :host(.card-slot) {
+      :host([card-slot]) {
         --slat-background: var(--slat-card-background);
         --slat-background-hover: var(--slat-card-background-hover);
       }
 
-      :host(.condensed-slot) .action::part(border-radius) {
+      :host([condensed-slot]) .action::part(border-radius) {
         border-radius: 0; 
       }
 
-      :host(.condensed-slot:last-of-type) .action::part(border-radius) {
+      :host([condensed-slot]:last-of-type) .action::part(border-radius) {
         border-bottom-left-radius: var(--card-radius); 
         border-bottom-right-radius: var(--card-radius); 
       }
@@ -125,11 +125,11 @@ class i extends HTMLElement {
         --avatar-background-override: var(--slat-avatar-background-hover);
       }
 
-      :host(.card-slot) ::slotted(mui-avatar) {
+      :host([card-slot]) ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-card-avatar-background);
       }
-      :host(.card-slot) .action:hover ::slotted(mui-avatar),
-      :host(.card-slot) .action:focus ::slotted(mui-avatar) {
+      :host([card-slot]) .action:hover ::slotted(mui-avatar),
+      :host([card-slot]) .action:focus ::slotted(mui-avatar) {
         --avatar-background-override: var(--slat-card-avatar-background-hover);
       }