@muibook/components 10.0.0 → 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

@@ -12,25 +12,26 @@ class l extends HTMLElement {
     (e === "size" || e === "color") && t !== c && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
+    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"
-    }, o = i[e] ?? i.small;
+    }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${o};
-          height: ${o};
+          width: ${i};
+          height: ${i};
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${s};
+          fill: ${o};
         }
         svg {
           width: 100%;
@@ -43,15 +44,9 @@ class l extends HTMLElement {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 36 36"
       >
-    <path
-      d="M27.122 16.88a.643.643 0 0 1-.638-.566c-.651-4.316-1.154-5.034-5.44-5.6a.664.664 0 0 1-.6-.667c0-.327.245-.604.6-.642 4.163-.553 4.728-1.245 5.44-5.6.049-.34.307-.59.638-.59.32 0 .577.238.626.59.614 4.317 1.203 5.022 5.451 5.6.344.038.59.315.59.642 0 .34-.246.617-.59.667-4.137.692-4.714 1.22-5.45 5.6-.062.327-.308.566-.627.566m-24.324-.403c-1.117 0-1.903-.805-1.903-1.963v-1.573c0-2.995 1.67-4.693 4.592-4.693H19.08c-.43.44-.736 1.07-.736 1.8 0 .88.417 1.648 1.019 2.1H6.003c-.86 0-1.302.403-1.302 1.347v1.02c0 1.157-.786 1.962-1.903 1.962m29.826 2.857a.457.457 0 0 1-.455-.415c-.331-2.14-.282-2.152-2.529-2.567a.48.48 0 0 1-.393-.466c0-.24.16-.44.393-.478 2.235-.327 2.21-.365 2.53-2.542.024-.252.208-.44.454-.44.245 0 .417.176.454.44.307 2.101.282 2.127 2.517 2.542.245.05.405.239.405.478 0 .252-.16.415-.442.466-2.185.352-2.16.402-2.48 2.541-.037.252-.209.44-.454.44M8.408 26.032c-1.044 0-1.646-.604-1.646-1.623 0-.265.074-.642.234-1.158l2.185-6.62c.479-1.522 1.338-2.214 2.701-2.214 1.412 0 2.308.705 2.775 2.215l2.198 6.619c.16.516.22.893.22 1.157 0 1.02-.601 1.624-1.632 1.624-.884 0-1.437-.503-1.658-1.56l-.307-1.032h-3.106l-.307 1.031c-.233 1.058-.773 1.56-1.657 1.56m2.541-5.071h1.94l-.909-3.524h-.122zm-8.151 1.783c-1.252 0-2.284-1.057-2.284-2.34 0-1.284 1.032-2.341 2.284-2.341s2.283 1.057 2.283 2.34c0 1.284-1.03 2.341-2.283 2.341m2.689 10.042c-2.922 0-4.592-1.7-4.592-4.694V26.33c0-1.157.786-1.963 1.903-1.963S4.7 25.173 4.7 26.33v1.22c0 .945.442 1.347 1.301 1.347h17.903c.86 0 1.302-.402 1.302-1.346v-7.588c0-.512.153-.955.421-1.29 0 0 .23.522 1.482.522 1.251 0 1.481-.522 1.481-.522.268.335.422.778.422 1.29v8.129c0 2.995-1.658 4.694-4.592 4.694z"
-    ></path>
-    <path
-      d="M19.194 16.084c0-.92.728-1.667 1.626-1.667.899 0 1.627.747 1.627 1.667l.011 8.28c0 .921-.728 1.668-1.626 1.668-.899 0-1.627-.747-1.627-1.667z"
-    ></path>
+        <path d="M29.61 14.63a.616.616 0 0 1-.613-.543c-.624-4.138-1.106-4.825-5.214-5.368a.636.636 0 0 1-.577-.64c0-.313.236-.578.577-.615 3.99-.53 4.531-1.194 5.214-5.368.047-.325.294-.567.612-.567.306 0 .553.23.6.567.589 4.138 1.154 4.813 5.226 5.368A.62.62 0 0 1 36 8.08a.644.644 0 0 1-.565.639c-3.966.663-4.52 1.17-5.226 5.368-.058.314-.294.543-.6.543m-23.32-.386c-1.07 0-1.823-.772-1.823-1.882v-1.508c0-2.87 1.6-4.5 4.401-4.5H21.9a2.47 2.47 0 0 0-.706 1.726c0 .844.4 1.58.977 2.014H9.363c-.824 0-1.248.386-1.248 1.29v.978c0 1.11-.753 1.882-1.824 1.882m5.379 9.16c-1 0-1.577-.58-1.577-1.557 0-.253.07-.615.223-1.11l2.095-6.345c.46-1.46 1.283-2.123 2.59-2.123 1.353 0 2.212.675 2.66 2.123l2.106 6.345c.153.495.212.857.212 1.11 0 .977-.577 1.556-1.565 1.556-.848 0-1.377-.482-1.59-1.496l-.294-.989h-2.977l-.294.99c-.224 1.013-.742 1.495-1.59 1.495m2.436-4.862h1.86l-.871-3.378h-.118zm-7.814 1.71c-1.2 0-2.19-1.014-2.19-2.244s.99-2.244 2.19-2.244 2.19 1.013 2.19 2.244c0 1.23-.99 2.243-2.19 2.243m2.577 9.626c-2.8 0-4.401-1.629-4.401-4.5V23.69c0-1.11.753-1.882 1.824-1.882s1.824.773 1.824 1.882v1.17c0 .905.424 1.291 1.248 1.291h17.163c.823 0 1.247-.386 1.247-1.29v-7.275c0-.49.147-.915.404-1.236 0 0 .22.5 1.42.5s1.42-.5 1.42-.5c.258.321.405.746.405 1.236v7.793c0 2.871-1.59 4.5-4.402 4.5H8.868"></path>
+        <path d="M22.009 13.867c0-.883.698-1.598 1.559-1.598s1.56.715 1.56 1.598l.01 7.938c0 .883-.698 1.598-1.56 1.598-.86 0-1.558-.715-1.558-1.598z"></path>
       </svg>
-
-
     `);
   }
 }

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",