@muibook/components 6.1.0 → 7.0.0

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

@@ -1,13 +1,13 @@
-import { getPartMap as c } from "../../utils/part-map/index.js";
+import { getPartMap as u } from "../../utils/part-map/index.js";
 class v extends HTMLElement {
   static get observedAttributes() {
-    return ["onclick", "type", "aria-label", "disabled", "variant"];
+    return ["onclick", "type", "aria-label", "disabled", "variant", "size", "usage"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   async connectedCallback() {
-    if (await this.waitForPartMap(), !this.shadowRoot) return;
+    if (this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), !this.shadowRoot) return;
     let a = (
       /*html*/
       `
@@ -41,7 +41,8 @@ class v extends HTMLElement {
       text-align: inherit;
     }
 
-    // Turned back on for focus-visible
+    /* Turned back on for focus-visible
+    ========================================= */
     button:focus-visible, button:active, button:hover { outline: var(--space-000); }
 
     button:hover {
@@ -74,7 +75,6 @@ class v extends HTMLElement {
     :host button:focus-visible ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
     :host button:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
 
-
     /* Primary 
     ========================================= */
     :host([variant="primary"]) button {
@@ -211,8 +211,8 @@ class v extends HTMLElement {
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 44px;
-      width: 44px;
+      height: var(--action-icon-only-size);
+      width: var(--action-icon-only-size);
       padding: var(--action-icon-only-padding);
     }
     /* ===================================== */
@@ -222,145 +222,280 @@ class v extends HTMLElement {
     /* STYLE ADJUSTMENTS WHEN BUTTON IS SLOTTED WITHIN INPUT                      */
     /* Related styles unique to this usage is found in the mui-input/index.js     */
     /* ========================================================================== */
+    :host([slot="before"][usage="input"]) button,
+    :host([slot="after"][usage="input"]) button {
+      border: var(--border-thin);
+      min-height: 4.4rem;
+      background: var(--input-background);
+      color: var(--action-secondary-text-color);
+      border-color: var(--form-default-border-color);
+    }
+
+    :host([slot="before"][usage="input"]) button:hover,
+    :host([slot="before"][usage="input"]) button:focus-visible,
+    :host([slot="after"][usage="input"]) button:hover,
+    :host([slot="after"][usage="input"]) button:focus-visible {
+      background: var(--input-background);
+      color: var(--action-secondary-text-color-hover);
+      border-color: var(--form-default-border-color-hover);
+      border-width: var(--stroke-size-100);
+    }
+
+    :host([slot="after"][usage="input"]) button ::slotted(.mui-icon),
+    :host([slot="before"][usage="input"]) button ::slotted(.mui-icon) { 
+      fill: var(--action-secondary-text-color); 
+    }
+    
+    :host([slot="after"][usage="input"]) button:hover ::slotted(.mui-icon),
+    :host([slot="before"][usage="input"]) button:hover ::slotted(.mui-icon) { 
+      fill: var(--action-secondary-text-color-hover); 
+    }
+
+    :host([slot="after"][usage="input"]) button:focus-visible ::slotted(.mui-icon),
+    :host([slot="before"][usage="input"]) button:focus-visible ::slotted(.mui-icon) { 
+      fill: var(--action-secondary-text-color-focus); 
+    }
+
+    :host([slot="after"][usage="input"]) button:disabled ::slotted(.mui-icon),
+    :host([slot="before"][usage="input"]) button:disabled ::slotted(.mui-icon) { 
+      fill: var(--action-secondary-text-color-disabled); 
+    }
+
 
     /* ========================================================================== */
     /* BEFORE: When a BUTTON has slot="before" applied to host for INPUT usage    */
     /* ========================================================================== */
+    :host([slot="before"][usage="input"]) button {
+      border-right: none;
+      border-top-right-radius: var(--radius-000);
+      border-bottom-right-radius: var(--radius-000);
+    }
 
-        :host([slot="before"]) button {
-          border: var(--border-thin);
-          min-height: 4.4rem;
-          background: var(--action-secondary-background);
-          color: var(--action-secondary-text-color);
-          border-color: var(--form-default-border-color);
-          border-right: none;
-          border-top-right-radius: var(--radius-000);
-          border-bottom-right-radius: var(--radius-000);
-        }
-
-        :host([slot="before"]) button:hover {
-          background: var(--action-secondary-background-hover);
-          color: var(--action-secondary-text-color-hover);
-          border-color: var(--form-default-border-color-hover);
-        }
+    :host([slot="before"][usage="input"]) button:hover,
+    :host([slot="before"][usage="input"]) button:focus-visible {
+      border-right: none;
+      box-shadow: var(--stroke-size-100) 0 0 0 var(--form-default-border-color-hover);
+    }
 
     /* ========================================================================== */
     /* AFTER: When a BUTTON has slot="after" applied to host for INPUT usage      */
     /* ========================================================================== */
+    :host([slot="after"][usage="input"]) button {
+      border-left: none;
+      border-top-left-radius: var(--radius-000);
+      border-bottom-left-radius: var(--radius-000);
+    }
 
-        :host([slot="after"]) button {
-          border: var(--border-thin);
-          min-height: 4.4rem;
-          background: var(--action-secondary-background);
-          color: var(--action-secondary-text-color);
-          border-color: var(--form-default-border-color);
-          border-left: none;
-          border-top-left-radius: var(--radius-000);
-          border-bottom-left-radius: var(--radius-000);
-        }
-
-        :host([slot="after"]) button:hover,
-        :host([slot="after"]) button:focus-visible {
-          background: var(--action-secondary-background-hover);
-          color: var(--action-secondary-text-color-hover);
-          border-color: var(--form-default-border-color-hover);
-        }
+    :host([slot="after"][usage="input"]) button:hover,
+    :host([slot="after"][usage="input"]) button:focus-visible {
+      border-left: none;
+      box-shadow: calc(-1 * var(--stroke-size-100)) 0 0 0 var(--form-default-border-color-hover);
+    }
 
     /* ========================================================================== */
 
 
-      :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-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) {
-        --alert-text: var(--feedback-info-text);
-        --alert-icon: var(--feedback-info-icon);
-        --alert-bg-hover: var(--feedback-info-action-background);
-      }
+    :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) {
-        --alert-text: var(--feedback-warning-text);
-        --alert-icon: var(--feedback-warning-icon);
-        --alert-bg-hover: var(--feedback-warning-action-background);
-      }
+    :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) {
-        --alert-text: var(--feedback-attention-text);
-        --alert-icon: var(--feedback-attention-icon);
-        --alert-bg-hover: var(--feedback-attention-action-background);
-      }
+    :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) button {
-        font-weight: var(--font-weight-semi-bold);
-        color: var(--alert-text);
-      }
+    :host(.alert-slot) button {
+      font-weight: var(--font-weight-semi-bold);
+      color: var(--alert-text);
+    }
 
-      :host(.alert-slot) button:hover,
-      :host(.alert-slot) button:focus-visible {
-        background: var(--alert-bg-hover);
-        color: var(--alert-text);
-      }
+    :host(.alert-slot) button:hover,
+    :host(.alert-slot) button: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) {
-        fill: var(--alert-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);
+    }
 
-      /* Dropdown Slot */
-      :host(.dropdown-slot) button {
-        border-radius: var(--radius-000);
-      }
+    /* Dropdown Slot */
+    :host(.dropdown-slot) button {
+      border-radius: var(--radius-000);
+    }
 
-      :host(.dropdown-slot) button:hover,
-      :host(.dropdown-slot) button:focus {
-        background: var(--dropdown-button-background-hover);
-      }
+    :host(.dropdown-slot) button:hover,
+    :host(.dropdown-slot) button:focus {
+      background: var(--dropdown-button-background-hover);
+    }
 
-      :host(.dropdown-slot-first) button {
-        border-top-left-radius: calc(var(--radius-100) / 2);
-        border-top-right-radius: calc(var(--radius-100) / 2);
-      }
+    :host(.dropdown-slot-first) button {
+      border-top-left-radius: calc(var(--radius-100) / 2);
+      border-top-right-radius: calc(var(--radius-100) / 2);
+    }
 
-      :host(.dropdown-slot-last) button  {
-        border-bottom-left-radius: calc(var(--radius-100) / 2);
-        border-bottom-right-radius: calc(var(--radius-100) / 2);
-      }
+    :host(.dropdown-slot-last) button  {
+      border-bottom-left-radius: calc(var(--radius-100) / 2);
+      border-bottom-right-radius: calc(var(--radius-100) / 2);
+    }
 
 
-      /* Before & After Icon
+    /* Before & After Icon
+    ========================================= */
+    :host(.has-after) button,
+    :host(.has-before) button,
+    :host(.has-after.has-before) button { 
+      display: grid; 
+      align-items: center; 
+      gap: var(--space-100);
+    }
+    
+    :host(.has-after.has-before) button {
+      grid-template-columns: auto 1fr auto;
+      padding-right: var(--action-after-slot-padding);
+      padding-left: var(--action-before-slot-padding);
+    }
+
+    :host(.has-after) button {
+      grid-template-columns: 1fr auto;
+      padding-right: var(--action-after-slot-padding);
+    }
+
+    :host(.has-before) button {
+      grid-template-columns: auto 1fr;
+      padding-left: var(--action-before-slot-padding);
+    }
+
+
+    /* Size Variants
+    ========================================= */
+    :host([size="x-small"]) button,
+    :host([size="x-small"]) button:hover,
+    :host([size="x-small"]) button:focus {
+      font-size: var(--text-font-size-xs);
+      line-height: var(--text-line-height-xs);
+      font-weight: var(--font-weight-semi-bold);
+      padding: var(--action-padding-x-small);
+      border-width: var(--stroke-size-100);
+    }
+
+    :host([size="small"]) button {
+      font-size: var(--text-font-size-s);
+      line-height: var(--text-line-height-s);
+      padding: var(--action-padding-small);
+    }
+
+    :host([size="medium"]) button {
+      font-size: var(--text-font-size-m);
+      line-height: var(--text-line-height-m);
+    }
+
+    :host([size="large"]) button {
+      font-size: var(--text-font-size-l);
+      line-height: var(--text-line-height-l);
+      padding: var(--action-padding-large);
+    }
+
+    :host([size="x-small"][icon-only]) button {
+      height: var(--action-icon-only-size-x-small);
+      width: var(--action-icon-only-size-x-small);
+      padding: var(--action-icon-only-padding);
+    }
+
+    :host([size="small"][icon-only]) button {
+      height: var(--action-icon-only-size-small);
+      width: var(--action-icon-only-size-small);
+      padding: var(--action-icon-only-padding);
+    }
+
+    :host([size="large"][icon-only]) button {
+      height: var(--action-icon-only-size-large);
+      width: var(--action-icon-only-size-large);
+      padding: var(--action-icon-only-padding);
+    }
+
+
+    /* Before & After Icon
       ========================================= */
-      :host(.has-after) button,
-      :host(.has-before) button,
-      :host(.has-after.has-before) button { 
-        display: grid; 
-        align-items: center; 
-        gap: var(--space-100);
-      }
-      
-      :host(.has-after.has-before) button {
-        grid-template-columns: auto 1fr auto;
-        padding-right: var(--action-after-slot-padding);
-        padding-left: var(--action-before-slot-padding);
-      }
+    :host([size="x-small"].has-after) button,
+    :host([size="x-small"].has-before) button,
+    :host([size="x-small"].has-after.has-before) button { 
+      gap: var(--space-025);
+    }
+    
+    :host([size="x-small"].has-after.has-before) button {
+      padding-right: var(--action-after-slot-padding-x-small);
+      padding-left: var(--action-before-slot-padding-x-small);
+    }
 
-      :host(.has-after) button {
-        grid-template-columns: 1fr auto;
-        padding-right: var(--action-after-slot-padding);
-      }
+    :host([size="x-small"].has-after) button {
+      padding-right: var(--action-after-slot-padding-x-small);
+    }
+
+    :host([size="x-small"].has-before) button {
+      padding-left: var(--action-before-slot-padding-x-small);
+    }
+
+    :host([size="small"].has-after) button,
+    :host([size="small"].has-before) button,
+    :host([size="small"].has-after.has-before) button { 
+      gap: var(--space-050);
+    }
+    
+    :host([size="small"].has-after.has-before) button {
+      padding-right: var(--action-after-slot-padding-small);
+      padding-left: var(--action-before-slot-padding-small);
+    }
+
+    :host([size="small"].has-after) button {
+      padding-right: var(--action-after-slot-padding-small);
+    }
+
+    :host([size="small"].has-before) button {
+      padding-left: var(--action-before-slot-padding-small);
+    }
+
+    :host([size="large"].has-after) button,
+    :host([size="large"].has-before) button,
+    :host([size="large"].has-after.has-before) button { 
+      gap: var(--space-200);
+    }
+    
+    :host([size="large"].has-after.has-before) button {
+      padding-right: var(--action-after-slot-padding-large);
+      padding-left: var(--action-before-slot-padding-large);
+    }
+
+    :host([size="large"].has-after) button {
+      padding-right: var(--action-after-slot-padding-large);
+    }
+
+    :host([size="large"].has-before) button {
+      padding-left: var(--action-before-slot-padding-large);
+    }
 
-      :host(.has-before) button {
-        grid-template-columns: auto 1fr;
-        padding-left: var(--action-before-slot-padding);
-      }
 
     </style>
 
     <button 
-      part="${c("text", "spacing", "layout", "visual")}"
+      part="${u("text", "spacing", "layout", "visual")}"
       onclick="${this.getAttribute("onclick")}" 
       type="${this.getAttribute("type") || "button"}" 
       aria-label="${this.getAttribute("aria-label") || ""}"
@@ -376,25 +511,64 @@ class v extends HTMLElement {
     this.shadowRoot.innerHTML = a, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
       const e = this.shadowRoot;
       if (!e) return;
-      const i = e.querySelector("slot:not([name])"), d = e.querySelector('slot[name="before"]'), l = e.querySelector('slot[name="after"]'), s = (t) => t ? t.assignedNodes({ flatten: !0 }).some((o) => {
+      const o = e.querySelector("slot:not([name])"), c = e.querySelector('slot[name="before"]'), s = e.querySelector('slot[name="after"]'), t = (i) => i ? i.assignedNodes({ flatten: !0 }).some((r) => {
+        var l;
+        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && !!((l = r.textContent) != null && l.trim());
+      }) : !1, d = t(c), h = t(s);
+      this.classList.toggle("has-before", d), this.classList.toggle("has-after", h);
+      const b = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [];
+      b.every((i) => {
         var r;
-        return o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && !!((r = o.textContent) != null && r.trim());
-      }) : !1, b = s(d), u = s(l);
-      this.classList.toggle("has-before", b), this.classList.toggle("has-after", u), ((i == null ? void 0 : i.assignedNodes({ flatten: !0 })) ?? []).every((t) => {
-        var o;
-        if (t.nodeType === Node.ELEMENT_NODE) {
-          const r = t;
-          return r.tagName.toLowerCase() === "svg" || r.classList.contains("mui-icon");
+        if (i.nodeType === Node.ELEMENT_NODE) {
+          const l = i;
+          return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
+        }
+        return i.nodeType === Node.TEXT_NODE && !((r = i.textContent) != null && r.trim());
+      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(b, !0)) : (this.removeAttribute("icon-only"), [c, o, s].forEach((r) => {
+        if (r) {
+          const l = r.assignedNodes({ flatten: !0 });
+          this.updateIconSizes(l, !1);
         }
-        return t.nodeType === Node.TEXT_NODE && !((o = t.textContent) != null && o.trim());
-      }) ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
+      }));
+    });
+  }
+  attributeChangedCallback(n, a, e) {
+    n === "size" && a !== e && this.shadowRoot && requestAnimationFrame(() => {
+      const o = this.shadowRoot;
+      if (!o) return;
+      const c = [
+        o.querySelector("slot:not([name])"),
+        o.querySelector('slot[name="before"]'),
+        o.querySelector('slot[name="after"]')
+      ], s = this.hasAttribute("icon-only");
+      c.forEach((t) => {
+        if (t) {
+          const d = t.assignedNodes({ flatten: !0 });
+          this.updateIconSizes(d, s);
+        }
+      });
+    });
+  }
+  updateIconSizes(n, a) {
+    const e = this.getAttribute("size") || "medium", c = {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: a ? "medium" : "small",
+      // small for regular, medium for icon-only
+      large: a ? "large" : "medium"
+    }[e] || "small";
+    n.forEach((s) => {
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const t = s;
+        (t.tagName.toLowerCase() === "svg" || t.classList.contains("mui-icon") || t.tagName.toLowerCase() === "mui-icon") && !t.hasAttribute("size") && t.setAttribute("size", c);
+      }
     });
   }
   waitForPartMap() {
     return new Promise((n) => {
-      if (typeof c == "function") return n();
+      if (typeof u == "function") return n();
       const a = () => {
-        typeof c == "function" ? n() : requestAnimationFrame(a);
+        typeof u == "function" ? n() : requestAnimationFrame(a);
       };
       a();
     });

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

@@ -49,7 +49,7 @@ class p extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("width") || "400px", e = this.getAttribute("variant") || "overlay", i = !!this.querySelector('[slot="before"]');
+    const t = this.getAttribute("width") || "320px", e = this.getAttribute("variant") || "overlay", i = !!this.querySelector('[slot="before"]');
     this._computedSide = this.getAttribute("side") || (i ? "right" : "left"), this.getAttribute("side") !== this._computedSide && this.setAttribute("side", this._computedSide);
     const o = (
       /*css*/
@@ -179,7 +179,7 @@ class p extends HTMLElement {
         visibility: visible;
       }
     `
-    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", d = (
+    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", l = (
       /*css*/
       `
       .inner {
@@ -207,6 +207,11 @@ class p extends HTMLElement {
         will-change: transform;
       }
 
+      :host([variant="push"]),
+      :host([variant="persistent"]) {
+        display: block;
+        width: 100%;
+      }
 
       /* Push */
       :host([variant="push"]) .shell {
@@ -230,6 +235,15 @@ class p extends HTMLElement {
       /* Hidden & Persistent */
       :host([open]) .outer,
       :host([variant="persistent"]) .outer  { ${r} }
+
+
+      /* Direct slotted element */
+      ::slotted([slot="page"]) {
+        height: 100dvh;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
     `
     ), n = (
       /*css*/
@@ -319,7 +333,7 @@ class p extends HTMLElement {
       }
 
     `
-    ), l = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
+    ), d = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
     let a = "";
     const c = this.hasAttribute("drawer-space") ? "no-padding" : "";
     e === "overlay" ? a = /*html*/
@@ -342,9 +356,9 @@ class p extends HTMLElement {
       </div>
     ` : (e === "push" || e === "persistent") && (a = /*html*/
     `
-        <style>${o}${d}${n}</style>
+        <style>${o}${l}${n}</style>
         <div class="shell">
-          ${l === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
+          ${d === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
         </div>
       `), this.shadowRoot.innerHTML = a;
   }
@@ -368,14 +382,14 @@ class p extends HTMLElement {
     e && e.classList.toggle("no-heading", !t);
   }
   attributeChangedCallback(t, e, i) {
-    t === "open" && this.syncOpenState(), t === "width" && this.innerEl && (this.innerEl.style.width = i || "400px"), t === "side" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState()), t === "variant" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState());
+    t === "open" && this.syncOpenState(), t === "width" && this.innerEl && (this.innerEl.style.width = i || "320px"), t === "side" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState()), t === "variant" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState());
   }
   syncOpenState() {
     const t = this.hasAttribute("open"), e = this.getAttribute("variant") || "overlay", i = this.getAttribute("z-index"), o = i ? Number(i) : 10, s = i ? Number(i) + 1 : 11;
     e === "overlay" && this.overlayEl && (this.overlayEl.style.visibility = t ? "visible" : "hidden", this.overlayEl.style.opacity = t ? "1" : "0", this.overlayEl.style.zIndex = o.toString(), this.innerEl.style.zIndex = s.toString(), this.inert = !t), e === "push" && this.outer && (this.updateLayout(e, t), this.outer.style.zIndex = s.toString(), this.outer.inert = !t), e === "persistent" && this.outer && (this.updateLayout(e, t), this.outer.inert = !1);
   }
   updateLayout(t, e) {
-    const i = this.getAttribute("width") || "300px", o = this.getAttribute("side") || this._computedSide, s = t === "push" ? this.pushLayout : t === "persistent" ? this.persistentLayout : null;
+    const i = this.getAttribute("width") || "320px", o = this.getAttribute("side") || this._computedSide, s = t === "push" ? this.pushLayout : t === "persistent" ? this.persistentLayout : null;
     if (!s) return;
     if (window.innerWidth <= this.getBreakpoint()) {
       t === "push" ? s.style.removeProperty("grid-template-columns") : t === "persistent" && (s.style.display = "grid", s.style.removeProperty("grid-template-columns"));

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

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
     }, o = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `

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

@@ -17,9 +17,9 @@ class r extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      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*/
     `

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

@@ -17,9 +17,9 @@ class c extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      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*/
     `

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

@@ -17,9 +17,9 @@ class l extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[c] || c || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      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*/
     `

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

@@ -17,9 +17,9 @@ class c extends HTMLElement {
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
-      small: "2.4rem",
-      medium: "3.6rem",
-      large: "4.8rem"
+      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*/
     `