@muibook/components 10.0.1 → 11.0.0

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

@@ -0,0 +1,146 @@
+class y extends HTMLElement {
+  constructor() {
+    super(), this.openTimer = null, this.closeTimer = null, this.hasOpenedOnce = !1, this.boundReposition = () => this.positionTooltip(), this.boundDocPointer = (t) => {
+      t.composedPath().includes(this) || this.close(!0);
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["placement", "open", "delay", "initial-delay"];
+  }
+  connectedCallback() {
+    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents();
+  }
+  attributeChangedCallback() {
+    this.shadowRoot && this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip());
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("placement") || "top";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: max-content;
+          position: relative;
+          vertical-align: middle;
+        }
+        .trigger {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          cursor: help;
+        }
+        .tooltip {
+          position: absolute;
+          z-index: 1000;
+          min-width: max-content;
+          max-width: var(--hint-max-width, 28rem);
+          padding: var(--space-200) var(--space-300);
+          border-radius: var(--radius-200);
+          border: var(--border-thin);
+          border-color: var(--border-color);
+          background: var(--surface-elevated-100);
+          color: var(--text-color);
+          box-shadow: var(--shadow-200, 0 6px 20px rgba(0,0,0,0.18));
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity var(--speed-300, 160ms) ease;
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          box-sizing: border-box;
+        }
+        :host([closing-immediate]) .tooltip {
+          transition-duration: 0ms;
+        }
+        :host([open]) .tooltip {
+          opacity: 1;
+          pointer-events: auto;
+        }
+        .tooltip::before {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-style: solid;
+        }
+        .tooltip[data-placement="top"]::before {
+          left: 50%;
+          top: 100%;
+          transform: translateX(-50%);
+          border-width: 6px 6px 0 6px;
+          border-color: var(--surface-elevated-100) transparent transparent transparent;
+        }
+        .tooltip[data-placement="bottom"]::before {
+          left: 50%;
+          bottom: 100%;
+          transform: translateX(-50%);
+          border-width: 0 6px 6px 6px;
+          border-color: transparent transparent var(--surface-elevated-100) transparent;
+        }
+        .tooltip[data-placement="left"]::before {
+          left: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+          border-width: 6px 0 6px 6px;
+          border-color: transparent transparent transparent var(--surface-elevated-100);
+        }
+        .tooltip[data-placement="right"]::before {
+          right: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+          border-width: 6px 6px 6px 0;
+          border-color: transparent var(--surface-elevated-100) transparent transparent;
+        }
+      </style>
+      <span class="trigger" tabindex="0" aria-describedby="hint-tooltip">
+        <slot name="trigger"></slot>
+      </span>
+      <div id="hint-tooltip" class="tooltip" role="tooltip" data-placement="${t}">
+        <slot></slot>
+      </div>
+    `;
+  }
+  setupEvents() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".trigger");
+    t && (t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("focusin", () => this.openWithDelay()), t.addEventListener("focusout", () => this.close(!0)), this.addEventListener("keydown", (h) => {
+      h.key === "Escape" && this.close(!0);
+    }));
+  }
+  getDelay() {
+    const t = Number(this.getAttribute("delay"));
+    return Number.isFinite(t) ? Math.min(2e3, Math.max(1e3, t)) : 1500;
+  }
+  getInitialDelay() {
+    const t = Number(this.getAttribute("initial-delay"));
+    return Number.isFinite(t) ? Math.min(2e3, Math.max(1e3, t)) : 1500;
+  }
+  openWithDelay() {
+    this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null);
+    const t = this.hasOpenedOnce ? this.getDelay() : this.getInitialDelay();
+    this.openTimer = window.setTimeout(() => this.open(), t);
+  }
+  closeWithDelay() {
+    this.openTimer && (window.clearTimeout(this.openTimer), this.openTimer = null), this.closeTimer = window.setTimeout(() => this.close(), 80);
+  }
+  open() {
+    this.hasOpenedOnce = !0, this.removeAttribute("closing-immediate"), this.setAttribute("open", ""), requestAnimationFrame(() => this.positionTooltip()), window.addEventListener("resize", this.boundReposition), window.addEventListener("scroll", this.boundReposition, !0), document.addEventListener("pointerdown", this.boundDocPointer, !0);
+  }
+  close(t = !1) {
+    this.openTimer && (window.clearTimeout(this.openTimer), this.openTimer = null), this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null), t && this.setAttribute("closing-immediate", ""), this.removeAttribute("open"), t && requestAnimationFrame(() => this.removeAttribute("closing-immediate")), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
+  }
+  positionTooltip() {
+    var u, b, g, f;
+    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".trigger"), o = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".tooltip");
+    if (!o || !t) return;
+    const h = (g = this.shadowRoot) == null ? void 0 : g.querySelector('slot[name="trigger"]'), w = ((f = h == null ? void 0 : h.assignedElements({ flatten: !0 })) == null ? void 0 : f[0]) || null || t, d = this.getAttribute("placement") || "top", e = w.getBoundingClientRect(), p = this.getBoundingClientRect(), i = o.getBoundingClientRect(), c = window.innerHeight, m = window.innerWidth, r = 8, n = 8;
+    let s = d;
+    d === "top" && e.top - i.height - n < r && (s = "bottom"), d === "bottom" && e.bottom + i.height + n > c - r && (s = "top"), d === "left" && e.left - i.width - n < r && (s = "right"), d === "right" && e.right + i.width + n > m - r && (s = "left"), o.setAttribute("data-placement", s);
+    let a = 0, l = 0;
+    s === "top" ? (a = e.top - i.height - n, l = e.left + e.width / 2 - i.width / 2) : s === "bottom" ? (a = e.bottom + n, l = e.left + e.width / 2 - i.width / 2) : s === "left" ? (a = e.top + e.height / 2 - i.height / 2, l = e.left - i.width - n) : (a = e.top + e.height / 2 - i.height / 2, l = e.right + n), a = Math.max(r, Math.min(a, c - i.height - r)), l = Math.max(r, Math.min(l, m - i.width - r));
+    const v = a - p.top, x = l - p.left;
+    o.style.top = `${v}px`, o.style.left = `${x}px`;
+  }
+}
+customElements.get("mui-hint") || customElements.define("mui-hint", y);

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -12,10 +12,11 @@ class l extends HTMLElement {
     (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = t && {
+    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)", s = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
@@ -30,7 +31,7 @@ class l extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${c};
+          fill: ${l};
         }
         svg {
           width: 100%;
@@ -52,4 +53,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-accessibility") || customElements.define("mui-icon-accessibility", l);
+customElements.get("mui-icon-accessibility") || customElements.define("mui-icon-accessibility", c);

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

@@ -16,6 +16,7 @@ class r extends HTMLElement {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",

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

@@ -15,18 +15,19 @@ class l extends HTMLElement {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), o = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[t] || t || "var(--icon-color-default)", s = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = i[e] ?? i.small;
+    }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${s};
-          height: ${s};
+          width: ${i};
+          height: ${i};
           display: inline-flex;
           align-items: center;
           justify-content: center;

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

@@ -16,6 +16,7 @@ class c extends HTMLElement {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", o = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",

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

@@ -8,19 +8,20 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(t, c, e) {
-    (t === "size" || t === "color") && c !== e && this.render();
+  attributeChangedCallback(e, c, t) {
+    (e === "size" || e === "color") && c !== t && this.render();
   }
   render() {
-    const t = this.getAttribute("size") || "small", c = this.getAttribute("color"), s = c && {
+    const e = this.getAttribute("size") || "small", c = this.getAttribute("color"), s = c && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[c] || c || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, o = i[t] ?? i.small;
+    }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

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

@@ -8,19 +8,20 @@ class c extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, i) {
-    (e === "size" || e === "color") && t !== i && this.render();
+  attributeChangedCallback(t, e, i) {
+    (t === "size" || t === "color") && e !== i && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[e] || e || "var(--icon-color-default)", o = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = o[e] ?? o.small;
+    }, s = o[t] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -8,19 +8,20 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, i) {
-    (e === "size" || e === "color") && t !== i && this.render();
+  attributeChangedCallback(t, e, i) {
+    (t === "size" || t === "color") && e !== i && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[e] || e || "var(--icon-color-default)", o = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = o[e] ?? o.small;
+    }, s = o[t] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -30,7 +31,7 @@ class l extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${c};
+          fill: ${l};
         }
         svg {
           width: 100%;
@@ -50,4 +51,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-checkmark") || customElements.define("mui-icon-checkmark", l);
+customElements.get("mui-icon-checkmark") || customElements.define("mui-icon-checkmark", r);

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

@@ -8,19 +8,20 @@ class c extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(t, e, o) {
+    (t === "size" || t === "color") && e !== o && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", s = {
+    }[e] || e || "var(--icon-color-default)", s = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, i = s[e] ?? s.small;
+    }, i = s[t] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

package/dist/esm/components/mui-icons/down-arrow-circle/index.js

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -8,19 +8,20 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(t, e, o) {
+    (t === "size" || t === "color") && e !== o && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[e] || e || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = i[t] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -30,7 +31,7 @@ class l extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${r};
+          fill: ${l};
         }
         svg {
           width: 100%;
@@ -52,4 +53,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-down-arrow-circle") || customElements.define("mui-icon-down-arrow-circle", l);
+customElements.get("mui-icon-down-arrow-circle") || customElements.define("mui-icon-down-arrow-circle", r);

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

@@ -1,4 +1,4 @@
-class n extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -8,19 +8,20 @@ class n extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(t, e, o) {
+    (t === "size" || t === "color") && e !== o && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[e] || e || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = i[t] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +53,4 @@ class n extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-down-chevron") || customElements.define("mui-icon-down-chevron", n);
+customElements.get("mui-icon-down-chevron") || customElements.define("mui-icon-down-chevron", r);

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

@@ -16,6 +16,7 @@ class r extends HTMLElement {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",

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

@@ -0,0 +1,49 @@
+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 = {
+      "xx-small": "1.3rem",
+      "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="M18.013 21.943c-1.554 0-2.357-.917-2.408-2.496l-.28-10.8c-.012-.23-.025-.497-.025-.688 0-1.694 1.031-2.688 2.713-2.688 1.68 0 2.7.994 2.7 2.688 0 .19-.013.458-.026.688l-.267 10.8c-.051 1.58-.866 2.496-2.407 2.496M18 29.7c-1.643 0-2.98-1.26-2.98-2.84s1.337-2.828 2.98-2.828 2.98 1.248 2.98 2.828S19.643 29.7 18 29.7"></path>
+      </svg>
+    `);
+  }
+}
+customElements.get("mui-icon-exclamationmark") || customElements.define("mui-icon-exclamationmark", r);

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

@@ -8,25 +8,26 @@ class i extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(t, e, o) {
+    (t === "size" || t === "color") && e !== o && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), s = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", c = {
+    }[e] || e || "var(--icon-color-default)", l = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, l = c[e] ?? c.small;
+    }, c = l[t] ?? l.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${l};
-          height: ${l};
+          width: ${c};
+          height: ${c};
           display: inline-flex;
           align-items: center;
           justify-content: center;

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

@@ -8,19 +8,20 @@ class o extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(c, l, t) {
-    (c === "size" || c === "color") && l !== t && this.render();
+  attributeChangedCallback(c, l, e) {
+    (c === "size" || c === "color") && l !== e && this.render();
   }
   render() {
     const c = this.getAttribute("size") || "small", l = this.getAttribute("color"), i = l && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[l] || l || "var(--icon-color-default)", e = {
+    }[l] || l || "var(--icon-color-default)", t = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = e[c] ?? e.small;
+    }, s = t[c] ?? t.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>

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

@@ -1,4 +1,4 @@
-class a extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -8,19 +8,20 @@ class a extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(t, e, o) {
+    (t === "size" || t === "color") && e !== o && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), s = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", c = {
+    }[e] || e || "var(--icon-color-default)", c = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, i = c[e] ?? c.small;
+    }, i = c[t] ?? c.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +53,4 @@ class a extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-globe") || customElements.define("mui-icon-globe", a);
+customElements.get("mui-icon-globe") || customElements.define("mui-icon-globe", l);

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

@@ -16,6 +16,7 @@ class r extends HTMLElement {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -8,19 +8,20 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(t, e, o) {
+    (t === "size" || t === "color") && e !== o && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = t && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), l = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[e] || e || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
       "x-small": "1.6rem",
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = i[t] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -30,7 +31,7 @@ class l extends HTMLElement {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${c};
+          fill: ${l};
         }
         svg {
           width: 100%;
@@ -52,4 +53,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-home") || customElements.define("mui-icon-home", l);
+customElements.get("mui-icon-home") || customElements.define("mui-icon-home", c);