@muibook/components 3.1.0 → 4.0.0

package/dist/esm/components/mui-accordion/block/index.js

@@ -1,14 +1,14 @@
 import "../../mui-icons/down-chevron/index.js";
 import "../../mui-heading/index.js";
-class c extends HTMLElement {
+class u extends HTMLElement {
   constructor() {
     super(), this.summaryEl = null, this.detailEl = null, this.chevronEl = null, this.attachShadow({ mode: "open" }), this.accordionId = `accordion-detail-${Math.random().toString(36).substring(2, 9)}`;
   }
   connectedCallback() {
-    var o, r;
+    var s, r;
     if (!this.shadowRoot) return;
-    const i = this.getAttribute("heading") || "Heading...", e = this.getAttribute("size") || "medium", s = this.getAttribute("level") || "3", a = this.getAttribute("detail-space"), n = a ? `detail-space-${a}` : "";
-    let d = (
+    const i = this.getAttribute("heading") || "Heading...", e = this.getAttribute("size") || "medium", l = this.getAttribute("level") || "3", o = this.getAttribute("detail-space"), h = o ? `detail-space-${o}` : "";
+    let m = (
       /*html*/
       `
     <style>
@@ -119,6 +119,15 @@ class c extends HTMLElement {
           padding-right: var(--space-600);
         }
       }
+      :host(.card-slot) .detail-space-none {
+        padding: 0;
+      }
+      @media (min-width: 768px) {
+        :host(.card-slot) .detail-space-none {
+          padding: 0;
+        }
+      }
+
 
     </style>
 
@@ -129,25 +138,33 @@ class c extends HTMLElement {
       aria-expanded="false"
       aria-controls="${this.accordionId}"
     >
-      <mui-heading size="6" level="${s}">${i}</mui-heading>
+      <mui-heading size="6" level="${l}">${i}</mui-heading>
       <div class="icon">
         <mui-icon-down-chevron size="x-small"></mui-icon-down-chevron>
       </div>
     </div>
 
     <div id="${this.accordionId}" class="accordion-detail">
-      <div class="accordion-detail-inner size-${e}-detail ${n}" inert>
+      <div class="accordion-detail-inner size-${e}-detail ${h}" inert>
         <slot name="detail">Insert Content</slot>
       </div>
     </div>
     
     `
     );
-    if (this.shadowRoot.innerHTML = d, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-down-chevron"), !this.summaryEl || !this.detailEl || !this.chevronEl) {
+    if (this.shadowRoot.innerHTML = m, requestAnimationFrame(() => {
+      const t = this.shadowRoot.querySelector('slot[name="detail"]');
+      t && t.assignedElements({ flatten: !0 }).forEach((a) => {
+        var n, d;
+        (((n = a.tagName) == null ? void 0 : n.toLowerCase()) === "mui-slat-group" ? [a] : Array.from(((d = a.querySelectorAll) == null ? void 0 : d.call(a, "mui-slat-group")) || [])).forEach((c) => {
+          c.hasAttribute("usage") || c.setAttribute("usage", "accordion");
+        });
+      });
+    }), this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-down-chevron"), !this.summaryEl || !this.detailEl || !this.chevronEl) {
       console.error("Accordion elements not found");
       return;
     }
-    (o = this.summaryEl) == null || o.addEventListener("click", () => this.toggleAccordion()), (r = this.summaryEl) == null || r.addEventListener("keydown", (t) => {
+    (s = this.summaryEl) == null || s.addEventListener("click", () => this.toggleAccordion()), (r = this.summaryEl) == null || r.addEventListener("keydown", (t) => {
       (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
     });
   }
@@ -165,4 +182,4 @@ class c extends HTMLElement {
     this.setOpen(!1);
   }
 }
-customElements.get("mui-accordion-block") || customElements.define("mui-accordion-block", c);
+customElements.get("mui-accordion-block") || customElements.define("mui-accordion-block", u);

package/dist/esm/components/mui-accordion/core/index.js

@@ -0,0 +1,75 @@
+class l extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  connectedCallback() {
+    var r, n;
+    if (!this.shadowRoot) return;
+    const t = this.querySelector('[slot="summary"]'), s = this.querySelector('[slot="detail"]');
+    if (!t || !s) return;
+    this.iconToggleEl = t.querySelector("mui-icon-toggle");
+    const i = `
+      :host {
+        display: block;
+      }
+      .accordion-summary {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        outline-offset: 2px;
+        border-radius: inherit;
+      }
+      .accordion-summary:focus-visible {
+        outline: var(--outline-thick);
+      }
+      .accordion-detail {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+      }
+      .accordion-detail[open] {
+        max-height: 200vh;
+      }
+    `;
+    if (this.shadowRoot.innerHTML = /* html */
+    `
+      <style>${i}</style>
+      <div class="accordion-summary" tabindex="0" role="button" aria-expanded="false">
+        <slot name="summary"></slot>
+      </div>
+      <div class="accordion-detail" role="region" aria-hidden="true">
+        <slot name="detail"></slot>
+      </div>
+    `, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.iconToggleEl = t.querySelector("mui-icon-toggle"), !this.iconToggleEl) {
+      const e = t.querySelector("mui-icon-right-chevron"), o = t.querySelector("mui-icon-down-chevron");
+      e ? (this.chevronEl = e, e.setAttribute("data-icon-animation", "accordion-inline")) : o && (this.chevronEl = o, o.setAttribute("data-icon-animation", "accordion-block"));
+    }
+    (r = this.summaryEl) == null || r.addEventListener("click", () => this.toggleAccordion()), (n = this.summaryEl) == null || n.addEventListener("keydown", (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleAccordion());
+    }), this.hasAttribute("open") && this.openAccordion();
+  }
+  attributeChangedCallback(t, s, i) {
+    t === "open" && this.detailEl && this.summaryEl && (i !== null ? this.openAccordion() : this.closeAccordion());
+  }
+  toggleAccordion() {
+    this.open = !this.open;
+  }
+  openAccordion() {
+    var t;
+    !this.detailEl || !this.summaryEl || (this.detailEl.setAttribute("open", ""), this.detailEl.setAttribute("aria-hidden", "false"), this.summaryEl.setAttribute("aria-expanded", "true"), (t = this.chevronEl) == null || t.setAttribute("open", ""), this.iconToggleEl && (this.iconToggleEl.toggle = !0, this.iconToggleEl.setAttribute("aria-pressed", "true")));
+  }
+  closeAccordion() {
+    var t;
+    !this.detailEl || !this.summaryEl || (this.detailEl.removeAttribute("open"), this.detailEl.setAttribute("aria-hidden", "true"), this.summaryEl.setAttribute("aria-expanded", "false"), (t = this.chevronEl) == null || t.removeAttribute("open"), this.iconToggleEl && (this.iconToggleEl.toggle = !1, this.iconToggleEl.setAttribute("aria-pressed", "false")));
+  }
+}
+customElements.get("mui-accordion-core") || customElements.define("mui-accordion-core", l);

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

@@ -1,3 +1,4 @@
+import "./core/index.js";
 import "./block/index.js";
 import "./inline/index.js";
 import "./group/index.js";

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

@@ -12,17 +12,17 @@ class n extends HTMLElement {
     this.render();
   }
   render() {
-    const t = this.getAttribute("variant") || "neutral", e = {
+    const t = this.getAttribute("variant") || "neutral", a = {
       neutral: "var(--badge-background-neutral)",
       positive: "var(--badge-background-positive)",
       warning: "var(--badge-background-warning)",
       attention: "var(--badge-background-attention)"
-    }, a = {
+    }, e = {
       neutral: "off",
       positive: "polite",
       warning: "assertive",
       attention: "assertive"
-    }, r = e[t], i = a[t], s = (
+    }, r = a[t], i = e[t], s = (
       /*css*/
       `
       :host {
@@ -32,7 +32,12 @@ class n extends HTMLElement {
         font-size: var(--text-font-size-xs);
         font-weight: var(--badge-font-weight);
         color: var(--badge-text-color);
-        padding: var(--space-050) var(--space-200);
+        padding: var(--space-100) var(--space-200);
+        line-height: 1;
+      }
+
+      :host([usage="slat-end"]) {
+        margin-right: calc(-1 * var(--space-200));
       }
     `
     );

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

@@ -1,10 +1,10 @@
-class d extends HTMLElement {
+class u extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    const r = (
+    const l = (
       /*html*/
       `
       <style>
@@ -21,32 +21,46 @@ class d extends HTMLElement {
             padding: var(--space-600);
           }
         }
+
+        :host(.has-card-slat-group) {
+          padding-bottom: var(--space-200);
+        }
+        @media (min-width: 768px) {
+        :host(.has-card-slat-group) {
+          padding-bottom: var(--space-500);
+        }
+        }
+        
       </style>
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = r, requestAnimationFrame(() => {
+    this.shadowRoot.innerHTML = l, requestAnimationFrame(() => {
       if (!this.shadowRoot) return;
       const a = this.shadowRoot.querySelector("slot");
       if (!a) return;
-      const l = a.assignedNodes({ flatten: !0 });
-      let s = !1;
-      l.forEach((c) => {
+      const d = a.assignedNodes({ flatten: !0 });
+      let e = !1;
+      d.forEach((c) => {
         if (c.nodeType === Node.ELEMENT_NODE) {
           const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
-          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((e) => {
-            e.classList.add("card-slot");
-          }), s = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((o) => {
-            const e = o.getAttribute("variant");
-            (e === "action" || e === "row") && (o.classList.add("card-slot"), this.hasAttribute("condensed") && o.classList.add("condensed-slot"));
+          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((o) => {
+            o.classList.add("card-slot");
+          }), e = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((s) => {
+            const o = s.getAttribute("variant");
+            (o === "action" || o === "row") && (s.classList.add("card-slot"), this.hasAttribute("condensed") && s.classList.add("condensed-slot"));
           });
-          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((e) => {
-            e.classList.add("card-slot");
-          }), s = !0);
+          const r = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          r instanceof HTMLElement && (r.querySelectorAll("mui-cell").forEach((o) => {
+            o.classList.add("card-slot");
+          }), e = !0);
+          const n = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          n.length && (e = !0, n.forEach((s) => {
+            s.setAttribute("usage", "card"), s.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
+          }));
         }
-      }), !s && !this.hasAttribute("condensed") && this.classList.add("inner-space");
+      }), !e && !this.hasAttribute("condensed") && this.classList.add("inner-space");
     });
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", d);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", u);

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

@@ -1,10 +1,10 @@
-class d extends HTMLElement {
+class c extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    const i = (
+    const u = (
       /*html*/
       `
       <style>
@@ -32,31 +32,37 @@ class d extends HTMLElement {
           border-bottom-right-radius: calc(var(--card-radius) - 1px);
           border-bottom-left-radius: calc(var(--card-radius) - 1px);
         }
+
+        :host(.has-button-group) {
+          padding-top: 0;
+        }
+
+
       </style>
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = i, requestAnimationFrame(() => {
+    this.shadowRoot.innerHTML = u, requestAnimationFrame(() => {
       if (!this.shadowRoot) return;
       const s = this.shadowRoot.querySelector("slot");
       if (!s) return;
       const r = s.assignedNodes({ flatten: !0 }).filter((e) => {
-        var t;
-        return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((t = e.textContent) == null ? void 0 : t.trim()) !== "";
+        var o;
+        return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((o = e.textContent) == null ? void 0 : o.trim()) !== "";
       });
       if (r.length === 0) {
         this.classList.add("hidden");
         return;
       }
-      let a = !1;
+      let a = !1, i = !1;
       r.forEach((e) => {
-        var t;
+        var o, d;
         if (e.nodeType === Node.ELEMENT_NODE) {
-          const o = e;
-          (o.tagName.toLowerCase() === "mui-code" || (t = o.querySelector) != null && t.call(o, "mui-code")) && (a = !0);
+          const t = e, n = t.tagName.toLowerCase();
+          (n === "mui-code" || (o = t.querySelector) != null && o.call(t, "mui-code")) && (a = !0), (n === "mui-button-group" || (d = t.querySelector) != null && d.call(t, "mui-button-group")) && (i = !0);
         }
-      }), a || this.classList.add("inner-space");
+      }), a || this.classList.add("inner-space"), i && this.classList.add("has-button-group");
     });
   }
 }
-customElements.get("mui-card-footer") || customElements.define("mui-card-footer", d);
+customElements.get("mui-card-footer") || customElements.define("mui-card-footer", c);

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

@@ -0,0 +1,179 @@
+class d extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["active", "usage", "dismiss"];
+  }
+  connectedCallback() {
+    this.render(), this.updateIconSlots(), !this.hasAttribute("tabindex") && !this.hasAttribute("dismiss") ? this.setAttribute("tabindex", "0") : this.hasAttribute("dismiss") && this.removeAttribute("tabindex"), this.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
+    });
+  }
+  attributeChangedCallback() {
+    this.render(), this.updateIconSlots();
+  }
+  updateIconSlots() {
+    requestAnimationFrame(() => {
+      const t = this.shadowRoot;
+      if (!t) return;
+      const e = t.querySelector('slot[name="before"]'), i = t.querySelector('slot[name="after"]'), r = (o) => o ? o.assignedNodes({ flatten: !0 }).some((a) => {
+        var s;
+        return a.nodeType === Node.ELEMENT_NODE || a.nodeType === Node.TEXT_NODE && !!((s = a.textContent) != null && s.trim());
+      }) : !1, c = r(e), n = r(i);
+      this.classList.toggle("has-before", c), this.classList.toggle("has-after", n);
+    });
+  }
+  render() {
+    var e;
+    const t = (
+      /*css*/
+      `
+      :host {
+        display: inline-grid;
+        align-items: center;
+        height: 4rem;
+        box-sizing: border-box;
+        border: var(--border-thin);
+        padding: var(--space-100) var(--space-400);
+        gap: var(--space-200);
+        background: var(--chip-background);
+        border-color: var(--chip-border-color);
+        border-radius: var(--chip-radius);
+      }
+
+      /* CLICKABLE */
+      :host([variant="clickable"]) {
+        cursor: pointer;
+        transition: border-color var(--speed-200), background-color var(--speed-200);
+      }
+
+      /* Before & After Slot
+      ========================================= */
+      
+      :host([variant="clickable"].has-after.has-before) {
+        grid-template-columns: auto 1fr auto;
+        padding-right: var(--space-200);
+        padding-left: var(--space-200);
+      }
+
+      :host([variant="clickable"].has-after) {
+        grid-template-columns: 1fr auto;
+        padding-right: var(--space-200);
+      }
+
+      :host([variant="clickable"].has-before) {
+        grid-template-columns: auto 1fr;
+        padding-left: var(--space-200);
+      }
+
+      /* Usage: input */
+      :host([usage="input"]) {
+        border-radius: var(--input-radius);
+      }
+
+      /* Hover and focus (natural) */
+      :host([variant="clickable"]:hover) {
+        background: var(--chip-background-hover);
+        border-color: var(--chip-border-color-hover);
+        box-shadow: inset 0 0 0 1px var(--chip-border-color-hover);
+      }
+
+      :host([variant="clickable"]:focus) {
+        outline: none;
+      }
+
+      :host([variant="clickable"]:focus-visible) {
+        background: var(--chip-background-focus);
+        border-color: var(--chip-border-color-focus);
+        outline: var(--outline-thick);
+      }
+
+      /* Active: mouse down OR programmatic */
+      :host([variant="clickable"]:active),
+      :host([variant="clickable"][active]) {
+        background: var(--chip-background-active);
+        box-shadow: inset 0 0 0 1px var(--chip-border-color-active);
+        border-color: var(--chip-border-color-active);
+      }
+
+      :host([variant="clickable"]:active) mui-body::part(color),
+      :host([variant="clickable"][active]) mui-body::part(color) {
+        color: var(--chip-text-color-active);
+      }
+
+      ::slotted(.mui-icon) {
+        box-sizing: border-box;
+        padding: var(--space-025);
+        width: var(--space-500);
+        height: var(--space-500);
+        fill: var(--chip-icon-fill);
+      }
+
+      :host(.has-before) ::slotted(.mui-icon) { 
+        margin-right: -4px;
+      }
+
+      :host(.has-after) ::slotted(.mui-icon) { 
+        margin-left: -4px;
+      }
+
+          
+
+      /* DISMISS */
+
+      /* Disable pointer and focus styles when dismiss attribute is present */
+      :host([dismiss]) {
+        grid-template-columns: 1fr auto;
+        padding-right: calc(var(--space-100) + 0.1rem);
+      }
+
+      /* Has Before */
+      :host([dismiss].has-before) {
+        grid-template-columns: auto 1fr auto;
+        padding-left: var(--space-200);
+      }
+
+      /* Dismiss Icon */
+      mui-button::part(background) {
+        height: initial;
+        width: initial;
+        padding: var(--space-025);
+        border-radius: var(--radius-400);
+        background: var(--chip-dismiss-action-background);
+      }
+      mui-button::part(background):hover {
+        background: var(--chip-dismiss-action-background-hover);
+      }
+    `
+    );
+    this.hasAttribute("dismiss") ? (this.shadowRoot.innerHTML = /*html*/
+    `
+        <style>${t}</style>
+        <slot name="before"></slot>
+        <mui-body size="small" weight="bold">
+          <slot></slot>
+        </mui-body>
+        <mui-button part="dismiss-btn" variant="tertiary" aria-label="Remove chip">
+          <mui-icon-close size="x-small"></mui-icon-close>
+        </mui-button>
+      `, (e = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || e.addEventListener("click", (i) => {
+      i.stopPropagation(), this.dispatchEvent(
+        new CustomEvent("dismiss", {
+          bubbles: !0,
+          composed: !0,
+          detail: { id: this.id }
+        })
+      );
+    })) : (this.setAttribute("variant", "clickable"), this.shadowRoot.innerHTML = /*html*/
+    `
+          <style>${t}</style>
+          <slot name="before"></slot>
+          <mui-body size="small" weight="bold">
+            <slot></slot>
+          </mui-body>
+          <slot name="after"></slot>
+        `);
+  }
+}
+customElements.get("mui-chip") || customElements.define("mui-chip", d);

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

@@ -1,4 +1,4 @@
-class s extends HTMLElement {
+class i extends HTMLElement {
   static get observedAttributes() {
     return ["size", "scrollable"];
   }
@@ -48,6 +48,11 @@ class s extends HTMLElement {
         white-space: ${e ? "nowrap" : "wrap"};
       }
 
+      code:focus-visible {
+        outline: ${e ? "var(--outline-thick)" : "none"};
+        outline-offset: ${e ? "calc(-1 * var(--stroke-size-500))" : "none"};
+      }
+
       @media (min-width: 600px) {
         code {
           padding: var(--space-500) var(--space-600);
@@ -63,4 +68,4 @@ class s extends HTMLElement {
   `;
   }
 }
-customElements.get("mui-code") || customElements.define("mui-code", s);
+customElements.get("mui-code") || customElements.define("mui-code", i);

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

@@ -0,0 +1,55 @@
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(c, l, t) {
+    (c === "size" || c === "color") && l !== t && this.render();
+  }
+  render() {
+    const c = this.getAttribute("size") || "small", l = this.getAttribute("color"), o = l && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[l] || l || "var(--icon-color-default)", e = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, i = e[c] ?? e.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${i};
+          height: ${i};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${o};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M17.25 33.5c-1.332 0-2.427-.858-2.717-2.124l-.448-1.9-.119-.04-1.661 1.017c-1.121.686-2.466.488-3.416-.449l-1.859-1.86c-.976-.963-1.108-2.335-.435-3.43l1.029-1.636-.04-.106-1.886-.448c-1.252-.304-2.096-1.412-2.096-2.731V17.22c0-1.319.83-2.4 2.096-2.717l1.873-.462.04-.106-1.016-1.649c-.686-1.095-.554-2.454.422-3.417l1.872-1.86c.937-.936 2.295-1.134 3.416-.462l1.661 1.016.12-.04.447-1.899c.29-1.253 1.385-2.124 2.717-2.124h2.703c1.332 0 2.427.858 2.717 2.124l.448 1.9.119.04 1.661-1.017c1.121-.686 2.48-.474 3.416.462l1.872 1.86c.976.963 1.108 2.322.422 3.417l-1.015 1.65.04.105 1.872.462c1.266.316 2.097 1.398 2.097 2.717v2.573c0 1.32-.844 2.427-2.097 2.73l-1.886.45-.04.105 1.03 1.636c.672 1.095.54 2.467-.436 3.43l-1.86 1.86c-.949.937-2.294 1.134-3.415.448l-1.661-1.015-.119.04-.448 1.899c-.29 1.266-1.385 2.124-2.717 2.124zm.699-3.47h1.305c.224 0 .304-.105.343-.277l.752-3.18c1.055-.21 1.872-.566 2.782-1.147l2.743 1.689c.158.092.303.105.448-.053l.924-.91c.145-.145.131-.29.04-.436l-1.715-2.77c.54-.844.936-1.808 1.107-2.718l3.192-.752c.171-.04.277-.132.277-.343V17.88c0-.211-.106-.303-.277-.343l-3.192-.752a8.2 8.2 0 0 0-1.094-2.718l1.701-2.77c.092-.145.119-.304-.026-.449l-.937-.91c-.145-.145-.276-.132-.448-.04l-2.756 1.69a7.5 7.5 0 0 0-2.77-1.149l-.75-3.192c-.04-.172-.12-.277-.344-.277H17.95c-.211 0-.304.105-.343.277l-.752 3.18c-.989.21-2.083.659-2.782 1.147l-2.77-1.702c-.17-.092-.303-.092-.448.053l-.923.897c-.158.158-.132.303-.04.448l1.728 2.797a8.3 8.3 0 0 0-1.107 2.731l-3.165.739c-.185.04-.29.132-.29.343v1.253c0 .211.105.304.29.343l3.178.739c.158.937.553 1.847 1.107 2.73l-1.74 2.798c-.08.145-.106.29.04.435l.922.91c.145.145.29.145.449.04l2.782-1.702c.884.58 1.833.976 2.782 1.148l.739 3.18c.04.17.132.276.343.276m.646-6.61a4.923 4.923 0 0 1-4.932-4.92 4.923 4.923 0 0 1 4.932-4.92 4.92 4.92 0 0 1 4.919 4.92 4.92 4.92 0 0 1-4.919 4.92m0-2.968c1.081 0 1.952-.87 1.952-1.952s-.87-1.953-1.952-1.953-1.952.871-1.952 1.953.87 1.953 1.952 1.953"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-gear") || customElements.define("mui-icon-gear", s);

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

@@ -24,3 +24,4 @@ import "./up-chevron/index.js";
 import "./warning/index.js";
 import "./down-arrow-circle/index.js";
 import "./ellipsis/index.js";
+import "./gear/index.js";

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

@@ -1,16 +1,25 @@
-class o extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
-    return ["toggle", "rotate"];
+    return ["toggle", "rotate", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.classList.add("mui-icon"), this.shadowRoot.innerHTML || this.render(), this.applySmallSize();
-    const t = this.shadowRoot.querySelector('slot[name="start"]'), e = this.shadowRoot.querySelector('slot[name="end"]');
-    t.addEventListener("slotchange", () => this.applySmallSize()), e.addEventListener("slotchange", () => this.applySmallSize());
+    this.classList.add("mui-icon"), this.shadowRoot.innerHTML || this.render(), this.attributeChangedCallback("size", null, this.getAttribute("size"));
+    const t = this.shadowRoot.querySelector('slot[name="start"]'), s = this.shadowRoot.querySelector('slot[name="end"]');
+    t.addEventListener("slotchange", () => this.applySize()), s.addEventListener("slotchange", () => this.applySize());
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(t, s, o) {
+    if (t === "size") {
+      const e = this.getAttribute("size") || "small", l = {
+        "x-small": "1.6rem",
+        small: "2.4rem",
+        medium: "3.6rem",
+        large: "4.8rem"
+      }, i = l[e] ?? l.small;
+      this.style.setProperty("--icon-toggle-size", i), this.applySize();
+    }
   }
   get toggle() {
     return this.hasAttribute("toggle");
@@ -27,10 +36,11 @@ class o extends HTMLElement {
   /* ------------------------------------------------------------------ */
   /* PRIVATE: force size="small" on all assigned elements               */
   /* ------------------------------------------------------------------ */
-  applySmallSize() {
-    this.shadowRoot.querySelectorAll("slot").forEach((e) => {
-      e.assignedElements({ flatten: !0 }).forEach((s) => {
-        s.setAttribute("size", "small");
+  applySize() {
+    const t = this.getAttribute("size") || "small";
+    this.shadowRoot.querySelectorAll("slot").forEach((o) => {
+      o.assignedElements({ flatten: !0 }).forEach((e) => {
+        (!e.hasAttribute("size") || e.getAttribute("size") === "small") && e.setAttribute("size", t);
       });
     });
   }
@@ -41,8 +51,8 @@ class o extends HTMLElement {
         :host {
           display: inline-flex;
           position: relative;
-          height: 2.4rem;
-          width: 2.4rem;
+          height: var(--icon-toggle-size, 2.4rem);
+          width: var(--icon-toggle-size, 2.4rem);
         }
 
         ::slotted(*) {
@@ -78,4 +88,4 @@ class o extends HTMLElement {
     `;
   }
 }
-customElements.get("mui-icon-toggle") || customElements.define("mui-icon-toggle", o);
+customElements.get("mui-icon-toggle") || customElements.define("mui-icon-toggle", r);