@muibook/components 20.0.0 → 20.1.0

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

@@ -1,17 +1,20 @@
-class T extends HTMLElement {
+const g = class g extends HTMLElement {
   constructor() {
-    super(), this.openTimer = null, this.closeTimer = null, this.hasOpenedOnce = !1, this.boundReposition = () => this.positionTooltip(), this.boundDocPointer = (t) => {
+    super(), this.openTimer = null, this.closeTimer = null, this.hasOpenedOnce = !1, this.ignoreNextFocus = !1, this.portalTooltipElement = null, this.hintId = `hint-${Math.random().toString(36).slice(2)}`, 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", "size"];
+    return ["placement", "open", "delay", "initial-delay", "size", "disable-on-touch"];
   }
   connectedCallback() {
-    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents(), this.syncTriggerSize();
+    this.hasAttribute("placement") || this.setAttribute("placement", "top"), this.render(), this.setupEvents(), this.syncTriggerSize(), this.syncDisabledState();
+  }
+  disconnectedCallback() {
+    this.restoreTooltip(), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
   }
   attributeChangedCallback() {
-    this.shadowRoot && (this.syncTriggerSize(), this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip()));
+    this.shadowRoot && (this.syncTriggerSize(), this.syncDisabledState(), !this.isDisabledOnCoarsePointer() && this.hasAttribute("open") && requestAnimationFrame(() => this.positionTooltip()));
   }
   render() {
     if (!this.shadowRoot) return;
@@ -24,32 +27,46 @@ class T extends HTMLElement {
           width: max-content;
           position: relative;
           vertical-align: middle;
+          --hint-focus-outline: var(--stroke-size-400) var(--stroke-outset) var(--outline-color);
+          --hint-focus-outline-offset: var(--stroke-size-200);
+          --hint-focus-radius: var(--radius-200);
         }
         .trigger {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           cursor: help;
+          border-radius: var(--hint-focus-radius);
+          outline: none;
+        }
+        .trigger.is-interactive {
+          cursor: auto;
+        }
+        .trigger:focus-visible {
+          outline: var(--hint-focus-outline);
+          outline-offset: var(--hint-focus-outline-offset);
         }
         .tooltip {
           display: none;
-          position: absolute;
+          position: fixed;
           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));
+          border-color: var(--hint-border-color, var(--border-color));
+          background: var(--hint-background, var(--surface-elevated-100));
+          color: var(--hint-text-color, var(--text-color));
+          box-shadow: var(--hint-shadow, var(--shadow-medium, 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;
+          top: 0;
+          left: 0;
         }
         :host([closing-immediate]) .tooltip {
           transition-duration: 0ms;
@@ -59,78 +76,85 @@ class T extends HTMLElement {
           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;
+        :host([portaled]) .tooltip {
+          visibility: hidden;
         }
       </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}">
+      <div id="hint-tooltip" class="tooltip" role="tooltip" data-placement="${t}" data-owner="${this.hintId}">
         <slot></slot>
       </div>
     `;
   }
   setupEvents() {
-    var r, p;
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".trigger");
+    var i, r;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".trigger");
     if (!t) return;
-    const o = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="trigger"]');
-    t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("focusin", () => this.openWithDelay()), t.addEventListener("focusout", () => this.close(!0)), o == null || o.addEventListener("slotchange", () => this.syncTriggerSize()), this.addEventListener("keydown", (m) => {
-      m.key === "Escape" && this.close(!0);
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="trigger"]');
+    t.addEventListener("mouseenter", () => this.openWithDelay()), t.addEventListener("mouseleave", () => this.closeWithDelay()), t.addEventListener("pointerdown", (n) => {
+      n.pointerType === "touch" && (this.ignoreNextFocus = !0, this.close(!0), window.setTimeout(() => {
+        this.ignoreNextFocus = !1;
+      }, 0));
+    }), t.addEventListener("focusin", () => {
+      this.ignoreNextFocus || this.openWithDelay();
+    }), t.addEventListener("focusout", () => this.close(!0)), e == null || e.addEventListener("slotchange", () => {
+      this.syncTriggerSize(), this.syncDisabledState();
+    }), this.addEventListener("keydown", (n) => {
+      n.key === "Escape" && this.close(!0);
     });
   }
   syncTriggerSize() {
-    var u, i;
-    const t = (u = this.shadowRoot) == null ? void 0 : u.querySelector('slot[name="trigger"]');
+    var s, m;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="trigger"]');
     if (!t) return;
-    const o = this.getAttribute("size") || ((i = this.closest("mui-body")) == null ? void 0 : i.getAttribute("size")) || "medium", r = {
+    const e = this.getAttribute("size") || ((m = this.closest("mui-body")) == null ? void 0 : m.getAttribute("size")) || "medium", i = {
       "x-small": "x-small",
       small: "small",
       medium: "small",
       large: "medium"
-    }, p = {
+    }, r = {
       "x-small": "xx-small",
       small: "x-small",
       medium: "small",
       large: "medium"
-    }, m = r[o] || "small", h = p[o] || "small";
-    t.assignedElements({ flatten: !0 }).forEach((s) => {
-      s.tagName.startsWith("MUI-ICON-") && !s.hasAttribute("size") && s.setAttribute("size", m), s.tagName === "MUI-BADGE" && !s.hasAttribute("size") && s.setAttribute("size", h);
+    }, n = i[e] || "small", a = r[e] || "small";
+    t.assignedElements({ flatten: !0 }).forEach((l) => {
+      l.tagName.startsWith("MUI-ICON-") && !l.hasAttribute("size") && l.setAttribute("size", n), l.tagName === "MUI-BADGE" && !l.hasAttribute("size") && l.setAttribute("size", a);
     });
   }
+  syncTriggerFocus() {
+    var r, n;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".trigger"), e = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="trigger"]');
+    if (!t || !e) return;
+    if (this.isDisabledOnCoarsePointer()) {
+      t.removeAttribute("tabindex");
+      return;
+    }
+    const i = e.assignedElements({ flatten: !0 }).some((a) => this.isFocusableTrigger(a));
+    if (t.classList.toggle("is-interactive", i), i) {
+      t.removeAttribute("tabindex");
+      return;
+    }
+    t.setAttribute("tabindex", "0");
+  }
+  syncDisabledState() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".trigger");
+    if (this.isDisabledOnCoarsePointer()) {
+      this.close(!0), t == null || t.removeAttribute("aria-describedby"), t == null || t.removeAttribute("tabindex");
+      return;
+    }
+    t == null || t.setAttribute("aria-describedby", "hint-tooltip"), this.syncTriggerFocus();
+  }
+  isFocusableTrigger(t) {
+    if (!(t instanceof HTMLElement) || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true") return !1;
+    const e = t.tagName.toLowerCase(), i = t.getAttribute("tabindex");
+    return i !== null && i !== "-1" || e === "a" && t.hasAttribute("href") || ["button", "input", "select", "textarea", "summary"].includes(e) || e === "mui-button" || e === "mui-link" ? !0 : !!t.querySelector(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"]), mui-button, mui-link'
+    );
+  }
   getDelay() {
     const t = Number(this.getAttribute("delay"));
     return Number.isFinite(t) ? Math.min(2e3, Math.max(250, t)) : 500;
@@ -140,6 +164,10 @@ class T extends HTMLElement {
     return Number.isFinite(t) ? Math.min(2e3, Math.max(250, t)) : 500;
   }
   openWithDelay() {
+    if (this.isDisabledOnCoarsePointer()) {
+      this.close(!0);
+      return;
+    }
     this.closeTimer && (window.clearTimeout(this.closeTimer), this.closeTimer = null);
     const t = this.hasOpenedOnce ? this.getDelay() : this.getInitialDelay();
     this.openTimer = window.setTimeout(() => this.open(), t);
@@ -148,22 +176,100 @@ class T extends HTMLElement {
     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);
+    if (this.isDisabledOnCoarsePointer()) {
+      this.close(!0);
+      return;
+    }
+    this.hasOpenedOnce = !0, this.removeAttribute("closing-immediate"), this.portalTooltip(), 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);
+    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")), this.restoreTooltip(), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
+  }
+  isDisabledOnCoarsePointer() {
+    var t, e;
+    return this.hasAttribute("disable-on-touch") ? !!((t = window.matchMedia) != null && t.call(window, "(pointer: coarse)").matches || (e = window.matchMedia) != null && e.call(window, "(hover: none)").matches || navigator.maxTouchPoints > 0) : !1;
+  }
+  portalTooltip() {
+    var i, r;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".tooltip"), e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
+    !t || !e || (this.ensurePortalStyles(), this.portalTooltipElement || (this.portalTooltipElement = document.createElement("div"), this.portalTooltipElement.className = "mui-hint-portal", this.portalTooltipElement.setAttribute("role", "tooltip"), this.portalTooltipElement.dataset.owner = this.hintId, document.body.appendChild(this.portalTooltipElement)), this.portalTooltipElement.innerHTML = "", e.assignedNodes({ flatten: !0 }).forEach((n) => {
+      var a;
+      (a = this.portalTooltipElement) == null || a.appendChild(n.cloneNode(!0));
+    }), this.syncPortalStyles(this.portalTooltipElement), this.portalTooltipElement.classList.add("is-open"), this.setAttribute("portaled", ""));
+  }
+  restoreTooltip() {
+    var t;
+    this.removeAttribute("portaled"), (t = this.portalTooltipElement) == null || t.remove(), this.portalTooltipElement = null;
+  }
+  ensurePortalStyles() {
+    if (g.portalStylesInjected) return;
+    const t = document.createElement("style");
+    t.textContent = `
+      .mui-hint-portal {
+        display: block;
+        position: fixed;
+        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(--hint-border-color, var(--border-color));
+        background: var(--hint-background, var(--surface-elevated-100));
+        color: var(--hint-text-color, var(--text-color));
+        box-shadow: var(--hint-shadow, var(--shadow-medium, 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;
+        top: 0;
+        left: 0;
+      }
+      .mui-hint-portal.is-open {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    `, document.head.appendChild(t), g.portalStylesInjected = !0;
+  }
+  syncPortalStyles(t) {
+    const e = window.getComputedStyle(this);
+    ["--hint-background", "--hint-border-color", "--hint-max-width", "--hint-shadow", "--hint-text-color"].forEach((i) => {
+      const r = e.getPropertyValue(i);
+      r && t.style.setProperty(i, r);
+    });
   }
   positionTooltip() {
-    var b, f, w, v;
-    const t = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".trigger"), o = (f = this.shadowRoot) == null ? void 0 : f.querySelector(".tooltip");
-    if (!o || !t) return;
-    const r = (w = this.shadowRoot) == null ? void 0 : w.querySelector('slot[name="trigger"]'), m = ((v = r == null ? void 0 : r.assignedElements({ flatten: !0 })) == null ? void 0 : v[0]) || null || t, h = this.getAttribute("placement") || "top", e = m.getBoundingClientRect(), u = this.getBoundingClientRect(), i = o.getBoundingClientRect(), s = window.innerHeight, g = window.innerWidth, n = 8, a = 8;
-    let l = h;
-    h === "top" && e.top - i.height - a < n && (l = "bottom"), h === "bottom" && e.bottom + i.height + a > s - n && (l = "top"), h === "left" && e.left - i.width - a < n && (l = "right"), h === "right" && e.right + i.width + a > g - n && (l = "left"), o.setAttribute("data-placement", l);
-    let d = 0, c = 0;
-    l === "top" ? (d = e.top - i.height - a, c = e.left + e.width / 2 - i.width / 2) : l === "bottom" ? (d = e.bottom + a, c = e.left + e.width / 2 - i.width / 2) : l === "left" ? (d = e.top + e.height / 2 - i.height / 2, c = e.left - i.width - a) : (d = e.top + e.height / 2 - i.height / 2, c = e.right + a), d = Math.max(n, Math.min(d, s - i.height - n)), c = Math.max(n, Math.min(c, g - i.width - n));
-    const x = d - u.top, y = c - u.left;
-    o.style.top = `${x}px`, o.style.left = `${y}px`;
-  }
-}
-customElements.get("mui-hint") || customElements.define("mui-hint", T);
+    var T, E, A, S;
+    const t = (T = this.shadowRoot) == null ? void 0 : T.querySelector(".trigger"), e = this.portalTooltipElement || ((E = this.shadowRoot) == null ? void 0 : E.querySelector(".tooltip"));
+    if (!e || !t) return;
+    const i = (A = this.shadowRoot) == null ? void 0 : A.querySelector('slot[name="trigger"]'), n = ((S = i == null ? void 0 : i.assignedElements({ flatten: !0 })) == null ? void 0 : S[0]) || null || t, a = this.getAttribute("placement") || "top", o = n.getBoundingClientRect(), s = e.getBoundingClientRect(), m = window.innerHeight, l = window.innerWidth, h = 8, d = 8, f = {
+      top: o.top - h,
+      bottom: m - o.bottom - h,
+      left: o.left - h,
+      right: l - o.right - h
+    }, y = {
+      top: s.height + d,
+      bottom: s.height + d,
+      left: s.width + d,
+      right: s.width + d
+    }, D = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    }, x = ["top", "bottom", "right", "left"], b = x.includes(a) ? a : "top";
+    let p = b;
+    const v = D[b];
+    f[b] < y[b] && (f[v] >= y[v] ? p = v : p = x.reduce(
+      (z, R) => f[R] > f[z] ? R : z,
+      b
+    )), e.setAttribute("data-placement", p);
+    let c = 0, u = 0;
+    p === "top" ? (c = o.top - s.height - d, u = o.left + o.width / 2 - s.width / 2) : p === "bottom" ? (c = o.bottom + d, u = o.left + o.width / 2 - s.width / 2) : p === "left" ? (c = o.top + o.height / 2 - s.height / 2, u = o.left - s.width - d) : (c = o.top + o.height / 2 - s.height / 2, u = o.right + d), c = Math.max(h, Math.min(c, m - s.height - h)), u = Math.max(h, Math.min(u, l - s.width - h)), e.style.top = `${c}px`, e.style.left = `${u}px`;
+  }
+};
+g.portalStylesInjected = !1;
+let w = g;
+customElements.get("mui-hint") || customElements.define("mui-hint", w);

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

@@ -0,0 +1,54 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "xx-small": "1.3rem",
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, s = i[e] ?? i.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="M10.975 9.318V6.154q0-2.147 1.13-3.29 1.143-1.143 3.277-1.143h4.558q1.23 0 2.185.352a4.6 4.6 0 0 1 1.732 1.13l6.115 6.253q.803.828 1.142 1.795.34.954.34 2.336v9.517q0 2.147-1.143 3.29-1.13 1.142-3.265 1.142H24.51v-3.24h2.135q.803 0 1.18-.389.39-.401.39-1.167v-9.794h-4.948q-1.293 0-2.021-.715-.716-.729-.716-2.022V4.961h-4.759q-.79 0-1.18.402-.377.39-.377 1.155v2.8zm12.016.565q0 .314.138.464.15.138.465.138h3.779L22.99 6.053zM4.546 29.846V12.91q0-2.148 1.13-3.29Q6.82 8.476 8.954 8.476h4.281q1.269 0 2.11.277.854.263 1.682 1.117l6.604 6.667q.566.578.867 1.13.3.54.414 1.206.113.652.113 1.57v9.403q0 2.147-1.143 3.29-1.13 1.143-3.264 1.143H8.954q-2.135 0-3.278-1.143-1.13-1.13-1.13-3.29m3.24-.351q0 .753.377 1.142.388.402 1.18.402h10.886q.79 0 1.167-.402.39-.39.39-1.142V21.07H15.96q-1.633 0-2.424-.779-.79-.79-.79-2.435v-6.14h-3.39q-.804 0-1.193.402-.378.39-.377 1.142zM16.21 18.42h5.31l-6.114-6.19v5.386q0 .414.189.615.2.189.615.189"
+        ></path>
+      </svg>
+    `);
+  }
+}
+customElements.get("mui-icon-copy") || customElements.define("mui-icon-copy", r);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as a } from "../icon-helper/index.js";
+a(
+  "mui-icon-fullscreen",
+  '<path d="M5 16.53a1.5 1.5 0 0 1 1.5 1.5v2.5H11a1.5 1.5 0 0 1 0 3H6a2.5 2.5 0 0 1-2.5-2.5v-3a1.5 1.5 0 0 1 1.5-1.5m18 0a1.5 1.5 0 0 1 1.5 1.5v3a2.5 2.5 0 0 1-2.5 2.5h-5a1.5 1.5 0 0 1 0-3h4.5v-2.5a1.5 1.5 0 0 1 1.5-1.5m-12-12a1.5 1.5 0 0 1 0 3H6.5v2.5a1.5 1.5 0 0 1-3 0v-3A2.5 2.5 0 0 1 6 4.53zm11 0a2.5 2.5 0 0 1 2.5 2.5v3a1.5 1.5 0 0 1-3 0v-2.5H17a1.5 1.5 0 0 1 0-3z"></path>'
+);

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

@@ -0,0 +1,56 @@
+function d(i, l, r = "0 0 28 28") {
+  class n extends HTMLElement {
+    static get observedAttributes() {
+      return ["size", "color"];
+    }
+    constructor() {
+      super(), this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+      this.render();
+    }
+    attributeChangedCallback(e, t, s) {
+      (e === "size" || e === "color") && t !== s && this.render();
+    }
+    render() {
+      const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = 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",
+        "x-large": "3.6rem",
+        "xx-large": "4.8rem"
+      };
+      this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+      `
+        <style>
+          :host {
+            width: ${o[e] ?? o.small};
+            height: ${o[e] ?? o.small};
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            fill: ${c};
+          }
+          svg {
+            width: 100%;
+            display: block;
+            fill: inherit;
+          }
+        </style>
+
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="${r}">
+          ${l}
+        </svg>
+      `);
+    }
+  }
+  customElements.get(i) || customElements.define(i, n);
+}
+export {
+  d as defineMuiIcon
+};

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

@@ -39,9 +39,22 @@ import "./ai/index.js";
 import "./rectangle/index.js";
 import "./rectangle-media-text/index.js";
 import "./rectangle-dashed/index.js";
+import "./fullscreen/index.js";
 import "./rectangle-left-drawer/index.js";
-import "./rectangle-bottom-panel/index.js";
+import "./rectangle-right-drawer/index.js";
+import "./panel/index.js";
+import "./pause/index.js";
+import "./picture-in-picture/index.js";
+import "./play-fill/index.js";
+import "./reload/index.js";
+import "./speaker-mute/index.js";
+import "./speaker-one-wave/index.js";
+import "./speaker-two-wave/index.js";
+import "./stop-fill/index.js";
 import "./pin/index.js";
 import "./pin-slash/index.js";
 import "./text-below-folder/index.js";
 import "./spinner/index.js";
+import "./vertical-ellipsis/index.js";
+import "./timer/index.js";
+import "./copy/index.js";

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

@@ -44,9 +44,11 @@ class r extends HTMLElement {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 36 36"
       >
+
         <path
-          d="M25.982 22.513c1.697 0 3.455-.32 4.465-.776.55-.274 1.024-.411 1.467-.411.643 0 1.086.456 1.086 1.157 0 .365-.107.867-.352 1.43C30.34 29.301 24.79 33 18.52 33 9.62 33 3 26.531 3 17.657c0-6.27 3.807-12.054 9.572-14.368.49-.198.933-.289 1.284-.289.765 0 1.223.518 1.223 1.187 0 .396-.137.853-.397 1.37-.596 1.142-.963 3.227-.963 5.069 0 7.351 4.724 11.887 12.263 11.887"
+          d="M24.96 21.953c1.48 0 3.014-.28 3.893-.68.48-.24.894-.36 1.28-.36.56 0 .947.4.947 1.014 0 .32-.093.76-.306 1.253-2.014 4.72-6.854 7.96-12.32 7.96-7.76 0-13.534-5.667-13.534-13.44 0-5.493 3.32-10.56 8.347-12.587.426-.173.813-.253 1.12-.253.666 0 1.066.453 1.066 1.04 0 .346-.12.746-.346 1.2-.52 1-.84 2.827-.84 4.44 0 6.44 4.12 10.413 10.693 10.413"
         ></path>
+
       </svg>
 
 

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

@@ -12,7 +12,7 @@ class s extends HTMLElement {
     (e === "size" || e === "color") && t !== l && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), i = 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)", c = {
@@ -21,17 +21,17 @@ class s extends HTMLElement {
       small: "2.1rem",
       medium: "2.4rem",
       large: "2.8rem"
-    }, o = c[e] ?? c.small;
+    }, i = c[e] ?? c.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: ${i};
+          fill: ${o};
         }
         svg {
           width: 100%;
@@ -56,4 +56,4 @@ class s extends HTMLElement {
     `);
   }
 }
-customElements.get("mui-icon-rectangle-bottom-panel") || customElements.define("mui-icon-rectangle-bottom-panel", s);
+customElements.get("mui-icon-panel") || customElements.define("mui-icon-panel", s);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as q } from "../icon-helper/index.js";
+q(
+  "mui-icon-pause",
+  '<path d="M9.342 22.076q-.645 0-.977-.332-.322-.332-.322-.976V7.223q0-.645.322-.967.332-.332.977-.332h2.226q.636 0 .967.312.333.313.332.987v13.545q0 .645-.332.976-.331.332-.967.332zm7.1 0q-.645 0-.977-.332-.333-.332-.332-.976V7.223q0-.645.332-.967.332-.332.976-.332h2.217q.645 0 .967.312.332.313.332.987v13.545q0 .645-.332.976-.322.332-.967.332z"></path>'
+);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as c } from "../icon-helper/index.js";
+c(
+  "mui-icon-picture-in-picture",
+  '<path d="M25.665 19.47a4 4 0 0 1-4 4H6.335a4 4 0 0 1-4-4V8.53a4 4 0 0 1 4-4h15.33a4 4 0 0 1 4 4zM6.335 7.53a1 1 0 0 0-1 1v10.94a1 1 0 0 0 1 1h15.33a1 1 0 0 0 1-1V8.53a1 1 0 0 0-1-1z"></path><path d="M17.999 17.301v2h-2.998v-2zM19.5 15.8c0-.744-.003-1.152-.032-1.441l-.004-.025-.024-.003c-.29-.03-.697-.032-1.441-.032h-2.998c-.744 0-1.152.003-1.441.032l-.025.003-.003.025c-.03.29-.032.697-.032 1.441s.003 1.152.032 1.441l.003.024q.012.001.025.004c.29.03.697.032 1.441.032v2l-.93-.006c-.747-.014-1.22-.069-1.586-.272l-.096-.06a2 2 0 0 1-.435-.393l-.116-.158c-.253-.378-.317-.868-.333-1.682l-.005-.93c0-1.318 0-2.017.278-2.516l.06-.096a2 2 0 0 1 .393-.435l.158-.116c.378-.253.868-.317 1.681-.333l.931-.005h2.998c1.405 0 2.108 0 2.612.338.218.146.405.333.551.55.338.505.338 1.208.338 2.613l-.005.93c-.016.814-.08 1.304-.333 1.682l-.116.158a2 2 0 0 1-.435.393c-.378.253-.868.316-1.681.332l-.931.006v-2c.744 0 1.152-.003 1.441-.032l.024-.004q.001-.011.004-.024c.03-.29.032-.697.032-1.441"></path>'
+);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as i } from "../icon-helper/index.js";
+i(
+  "mui-icon-play-fill",
+  '<path d="M7 20.97V6.093q0-.803.397-1.178.396-.386.943-.386.482 0 .986.278l12.484 7.299q.664.386.922.696.268.3.268.729 0 .417-.268.729-.257.31-.922.696L9.326 22.255q-.504.279-.986.279-.548 0-.943-.386Q7 21.763 7 20.969"></path>'
+);

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

@@ -0,0 +1,56 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    (t === "size" || t === "color") && e !== i && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), s = e && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[e] || e || "var(--icon-color-default)", r = {
+      "xx-small": "1.3rem",
+      "x-small": "1.6rem",
+      small: "2.1rem",
+      medium: "2.4rem",
+      large: "2.8rem"
+    }, o = r[t] ?? r.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${s};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M8.145 30.177a5.143 5.143 0 0 1-5.143-5.143V10.966a5.143 5.143 0 0 1 5.143-5.143h19.71a5.143 5.143 0 0 1 5.143 5.143v14.068a5.143 5.143 0 0 1-5.143 5.143zM20.947 9.68H8.145c-.71 0-1.285.576-1.286 1.285v14.067c0 .71.576 1.285 1.286 1.285h12.802zm6.908 16.637c.71 0 1.286-.576 1.286-1.286V10.966c0-.71-.576-1.285-1.286-1.285h-4.337v16.637z"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-rectangle-right-drawer") || customElements.define("mui-icon-rectangle-right-drawer", l);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as a } from "../icon-helper/index.js";
+a(
+  "mui-icon-reload",
+  '<path d="M10.849 3.93q.368-.07.735.109l4.348 2.102q.375.165.463.565a.8.8 0 0 1-.181.717l-3.065 3.725q-.258.315-.622.407a.94.94 0 0 1-.675-.088q-.308-.17-.41-.633l-.142-.65-.123-.555q-.754.41-1.364 1.014h-.001q-.81.81-1.268 1.887a5.8 5.8 0 0 0-.457 2.296 5.8 5.8 0 0 0 .457 2.295l.12.263a6 6 0 0 0 1.149 1.624l.207.198a6 6 0 0 0 1.681 1.072q1.073.456 2.295.457 1.23 0 2.295-.457a5.9 5.9 0 0 0 1.888-1.269l.197-.208a6 6 0 0 0 1.072-1.68q.465-1.073.466-2.295 0-.79-.184-1.485a5.5 5.5 0 0 0-.545-1.339 7 7 0 0 0-.888-1.217l-.004-.004a2.5 2.5 0 0 1-.593-1.227c-.078-.48.08-.916.444-1.292a1.6 1.6 0 0 1 1.2-.493c.487.007.93.233 1.328.642l.212.222a8.7 8.7 0 0 1 1.23 1.722q.578 1.05.866 2.197.289 1.136.289 2.274A9.1 9.1 0 0 1 22.717 18l-.17.424a9.4 9.4 0 0 1-1.993 2.942 9.3 9.3 0 0 1-2.951 2.003 9.05 9.05 0 0 1-3.607.721 9 9 0 0 1-3.598-.721 9.3 9.3 0 0 1-2.627-1.69l-.325-.312a9.3 9.3 0 0 1-1.803-2.532l-.19-.41a9 9 0 0 1-.722-3.6q0-1.915.722-3.598a9.35 9.35 0 0 1 4.953-4.944l.03-.013-.265-1.209q-.104-.474.102-.769a.87.87 0 0 1 .576-.363"></path>'
+);

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

@@ -0,0 +1,5 @@
+import { defineMuiIcon as q } from "../icon-helper/index.js";
+q(
+  "mui-icon-speaker-mute",
+  '<path d="M15.44 22.5q-.493 0-.903-.197-.402-.187-.867-.616l-3.432-3.191a.24.24 0 0 0-.134-.036H7.699q-1.305 0-2.002-.733T5 15.645v-3.29q0-1.35.697-2.073.697-.733 2.002-.733h2.414q.053 0 .134-.063l3.423-3.164q.483-.447.894-.634.411-.188.867-.188.768 0 1.287.527.518.519.518 1.278v13.398q0 .76-.518 1.279a1.74 1.74 0 0 1-1.278.518m6.103-5.602q-.36.36-.86.354a1.2 1.2 0 0 1-.859-.379 1.24 1.24 0 0 1-.385-.866q0-.493.36-.853l4.07-4.07q.367-.367.853-.36.493.012.866.385t.38.86q.012.492-.355.86zm-1.744-4.07a1.15 1.15 0 0 1-.36-.853q.012-.493.385-.866.373-.372.86-.38.492-.012.86.355l4.07 4.07q.36.36.347.853 0 .493-.373.866t-.872.38a1.14 1.14 0 0 1-.847-.355z"></path>'
+);

package/dist/esm/components/mui-icons/speaker-one-wave/index.js

@@ -0,0 +1,5 @@
+import { defineMuiIcon as a } from "../icon-helper/index.js";
+a(
+  "mui-icon-speaker-one-wave",
+  '<path d="M15.44 22.5q-.493 0-.903-.197-.402-.187-.867-.616l-3.432-3.191a.24.24 0 0 0-.134-.036H7.699q-1.305 0-2.002-.733T5 15.645v-3.29q0-1.35.697-2.073.697-.733 2.002-.733h2.414q.053 0 .134-.063l3.423-3.164q.483-.447.894-.634.411-.188.867-.188.768 0 1.287.527.518.519.518 1.278v13.398q0 .76-.518 1.279a1.74 1.74 0 0 1-1.278.518m3.79-3.825a1.36 1.36 0 0 1-.671-.975q-.108-.634.366-1.465.287-.492.438-1.064.153-.572.152-1.18 0-.607-.152-1.18a4.1 4.1 0 0 0-.438-1.063q-.482-.831-.375-1.466.116-.644.68-.974a1.5 1.5 0 0 1 1.09-.215q.572.107.884.536a7.6 7.6 0 0 1 1.002 2.038q.366 1.11.366 2.324 0 1.215-.366 2.324a7.4 7.4 0 0 1-1.001 2.02 1.33 1.33 0 0 1-.885.554 1.56 1.56 0 0 1-1.09-.214"></path>'
+);