@muibook/components 19.6.0 → 20.1.0

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

@@ -42,7 +42,7 @@ const f = ["neutral", "positive", "info", "warning", "attention"], h = {
   warning: "mui-icon-warning",
   attention: "mui-icon-attention"
 };
-class C extends HTMLElement {
+class y extends HTMLElement {
   constructor() {
     super(), this.contentSlotListener = null, this.attachShadow({ mode: "open" });
   }
@@ -77,7 +77,7 @@ class C extends HTMLElement {
     this.contentSlotListener = n, t.addEventListener("slotchange", this.contentSlotListener), requestAnimationFrame(n);
   }
   render() {
-    const e = this.getAttribute("variant") || "neutral", t = f.includes(e) ? e : "neutral", n = this.getMessageSize(), i = this.getAttribute("heading") || "Heading...", r = this.getAttribute("icon") || z[t], o = S[t], a = w[t], c = h[t], l = p[t], d = k[t], g = n === "large" ? "var(--message-gap-horizontal)" : n === "medium" ? "var(--space-200)" : "var(--space-100)", u = n === "large" ? "var(--message-gap-vertical)" : n === "medium" ? "var(--space-100)" : "var(--space-050)", v = n === "large" ? "var(--font-size-200)" : "var(--font-size-100)", b = n === "large" ? "medium" : "small", m = (
+    const e = this.getAttribute("variant") || "neutral", t = f.includes(e) ? e : "neutral", n = this.getMessageSize(), i = this.getAttribute("heading") || "Heading...", r = this.getAttribute("icon") || z[t], o = S[t], a = w[t], c = h[t], l = p[t], d = k[t], g = n === "large" ? "var(--message-gap-horizontal)" : n === "medium" ? "var(--space-200)" : "var(--space-100)", u = n === "large" ? "var(--message-gap-vertical)" : n === "medium" ? "var(--space-100)" : "var(--space-050)", v = n === "large" ? "var(--font-size-200)" : "var(--font-size-100)", m = n === "large" ? "medium" : "small", b = (
       /*css*/
       `
       :host {
@@ -98,7 +98,8 @@ class C extends HTMLElement {
       }
 
       .heading {
-        font-weight: var(--font-weight-bold);
+        font-family: var(--heading-font-family);
+        font-weight: var(--heading-font-weight);
         font-size: ${v};
         ${a}
       }
@@ -106,12 +107,12 @@ class C extends HTMLElement {
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${m}</style>
+        <style>${b}</style>
     
       <section aria-labelledby="message-heading" aria-live="${l}" role="${d}">
         <mui-h-stack space="${g}">
           <div class="icon">
-            <${r} size="${b}" color="var(${o})"></${r}>
+            <${r} size="${m}" color="var(${o})"></${r}>
           </div>
           <mui-v-stack space="${u}">
             <div class="heading" id="message-heading">${i}</div>
@@ -122,4 +123,4 @@ class C extends HTMLElement {
       `, this.setupContentSlot(n));
   }
 }
-customElements.get("mui-message") || customElements.define("mui-message", C);
+customElements.get("mui-message") || customElements.define("mui-message", y);

package/dist/esm/components/mui-model-viewer/index.js

@@ -0,0 +1,258 @@
+const a = class a extends HTMLElement {
+  constructor() {
+    super(), this.supportsNativeModel = !1, this.scriptLoaded = !1, this.isModelLoading = !0, this.loadError = !1, this.attachShadow({ mode: "open" }), this.supportsNativeModel = typeof window < "u" && "HTMLModelElement" in window;
+  }
+  static get observedAttributes() {
+    return [
+      "src",
+      "ios-src",
+      "poster",
+      "alt",
+      "controls",
+      "camera-controls",
+      "auto-rotate",
+      "ar",
+      "loading"
+    ];
+  }
+  static loadModelViewerScript() {
+    return this.loadScriptPromise ? this.loadScriptPromise : (this.loadScriptPromise = new Promise((e, r) => {
+      if (customElements.get("model-viewer")) {
+        e();
+        return;
+      }
+      const t = document.querySelector('script[src*="model-viewer"]');
+      if (t) {
+        t.addEventListener("load", () => e()), t.addEventListener("error", (i) => r(i));
+        return;
+      }
+      const o = document.createElement("script");
+      o.type = "module", o.src = "https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js", o.onload = () => e(), o.onerror = (i) => r(i), document.head.appendChild(o);
+    }), this.loadScriptPromise);
+  }
+  connectedCallback() {
+    this.render(), this.supportsNativeModel ? this.bindViewerEvents() : a.loadModelViewerScript().then(() => {
+      this.scriptLoaded = !0, this.render(), this.bindViewerEvents();
+    }).catch((e) => {
+      console.error("Failed to load <model-viewer> library", e), this.loadError = !0, this.isModelLoading = !1, this.render();
+    });
+  }
+  disconnectedCallback() {
+  }
+  attributeChangedCallback(e, r, t) {
+    r !== t && (this.render(), (this.scriptLoaded || this.supportsNativeModel) && this.bindViewerEvents());
+  }
+  bindViewerEvents() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const r = e.querySelector("model-viewer") || e.querySelector("model");
+    r && (r.addEventListener("load", () => {
+      this.isModelLoading = !1, this.loadError = !1, this.updateLoadingState();
+    }), r.addEventListener("error", () => {
+      this.isModelLoading = !1, this.loadError = !0, this.updateLoadingState();
+    }));
+  }
+  updateLoadingState() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const r = e.querySelector(".loading-overlay");
+    r && (this.isModelLoading ? r.classList.remove("hidden") : r.classList.add("hidden"));
+    const t = e.querySelector(".error-message");
+    t && (this.loadError ? t.classList.remove("hidden") : t.classList.add("hidden"));
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("src") || "", r = this.getAttribute("ios-src") || "", t = this.getAttribute("poster") || "", o = this.getAttribute("alt") || "3D model", i = this.hasAttribute("controls") || this.hasAttribute("camera-controls"), l = this.hasAttribute("auto-rotate"), n = this.hasAttribute("ar"), c = this.getAttribute("loading") || "lazy", u = this.style.getPropertyValue("--mui-model-viewer-background") || "var(--surface-elevated-200, #f5f5f7)", m = this.style.getPropertyValue("--mui-model-viewer-radius") || "var(--radius-300, 1.2rem)", h = this.style.getPropertyValue("--mui-model-viewer-aspect-ratio") || "16/9", p = (
+      /*css*/
+      `
+      :host {
+        display: block;
+        width: 100%;
+        --mui-model-viewer-background: ${u};
+        --mui-model-viewer-radius: ${m};
+        --mui-model-viewer-aspect-ratio: ${h};
+      }
+
+      .container {
+        position: relative;
+        background: var(--mui-model-viewer-background);
+        border-radius: var(--mui-model-viewer-radius);
+        overflow: hidden;
+        aspect-ratio: var(--mui-model-viewer-aspect-ratio);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: var(--shadow-300, 0 4px 12px rgba(0, 0, 0, 0.08));
+        border: var(--stroke-size-100, 1px) solid var(--border-color, rgba(0, 0, 0, 0.1));
+      }
+
+      model-viewer, model, .fallback-poster {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      .fallback-poster {
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+
+      /* Premium Glassmorphic Loading Overlay */
+      .loading-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(255, 255, 255, 0.4);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+        z-index: 10;
+        gap: var(--space-300, 1.2rem);
+      }
+
+      :host([data-theme="dark"]) .loading-overlay {
+        background: rgba(0, 0, 0, 0.4);
+      }
+
+      .loading-overlay.hidden {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      /* Premium micro-animated spinner */
+      .spinner {
+        width: 2.8rem;
+        height: 2.8rem;
+        border: 3px solid var(--border-color, rgba(0, 0, 0, 0.1));
+        border-top-color: var(--action-primary-background, #0071e3);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      .error-message {
+        position: absolute;
+        background: var(--feedback-error-background, rgba(255, 235, 235, 0.9));
+        border: var(--stroke-size-100, 1px) solid var(--feedback-error-border-color, #ff453a);
+        color: var(--text-color-error, #ff453a);
+        padding: var(--space-300, 1.2rem) var(--space-400, 1.6rem);
+        border-radius: var(--radius-200, 0.8rem);
+        font-family: var(--font-family, system-ui, sans-serif);
+        font-size: var(--text-font-size-xs, 1.2rem);
+        z-index: 20;
+        text-align: center;
+        max-width: 80%;
+      }
+
+      .error-message.hidden {
+        display: none;
+      }
+
+      /* AR trigger quick-look style overlay on iOS when fallback is preferred */
+      .ar-button {
+        position: absolute;
+        bottom: var(--space-400, 1.6rem);
+        right: var(--space-400, 1.6rem);
+        background: var(--surface-elevated-100, #ffffff);
+        color: var(--text-color, #1d1d1f);
+        border: var(--stroke-size-100, 1px) solid var(--border-color, rgba(0, 0, 0, 0.15));
+        padding: var(--space-200, 0.8rem) var(--space-300, 1.2rem);
+        border-radius: var(--radius-pill, 9999px);
+        font-family: var(--font-family, system-ui, sans-serif);
+        font-size: var(--text-font-size-xs, 1.2rem);
+        font-weight: var(--font-weight-medium, 500);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: var(--space-100, 0.6rem);
+        box-shadow: var(--shadow-200, 0 2px 8px rgba(0, 0, 0, 0.1));
+        z-index: 5;
+        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
+        text-decoration: none;
+      }
+
+      .ar-button:hover {
+        transform: scale(1.04);
+        background: var(--surface-elevated-200, #f5f5f7);
+      }
+
+      .ar-icon {
+        width: 1.6rem;
+        height: 1.6rem;
+        fill: currentColor;
+      }
+    `
+    );
+    let s = "";
+    this.supportsNativeModel ? s = /*html*/
+    `
+        <model
+          src="${r || e}"
+          alt="${o}"
+          ${i ? "interactive" : ""}
+        ></model>
+      ` : this.scriptLoaded ? s = /*html*/
+    `
+        <model-viewer
+          src="${e}"
+          ios-src="${r}"
+          poster="${t}"
+          alt="${o}"
+          loading="${c}"
+          ${i ? "camera-controls" : ""}
+          ${l ? "auto-rotate" : ""}
+          ${n ? "ar" : ""}
+        >
+          <slot name="poster"></slot>
+          <slot></slot>
+        </model-viewer>
+      ` : s = /*html*/
+    `
+        <div class="fallback-poster" style="background-image: url('${t}');" aria-label="${o}">
+          <slot></slot>
+        </div>
+      `;
+    const v = n && r && /iPad|iPhone|iPod/.test(navigator.userAgent) && !this.supportsNativeModel ? (
+      /*html*/
+      `
+        <a class="ar-button" rel="ar" href="${r}">
+          <svg class="ar-icon" viewBox="0 0 24 24">
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+          </svg>
+          View in AR
+        </a>
+      `
+    ) : "";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${p}</style>
+      <div class="container">
+        ${s}
+        ${v}
+        
+        <div class="loading-overlay ${this.isModelLoading ? "" : "hidden"}">
+          <div class="spinner"></div>
+          <slot name="loading-text"></slot>
+        </div>
+
+        <div class="error-message ${this.loadError ? "" : "hidden"}">
+          Failed to load 3D model scene. Please check the source URL or CORS configuration.
+        </div>
+      </div>
+    `, this.updateLoadingState();
+  }
+};
+a.loadScriptPromise = null;
+let d = a;
+customElements.get("mui-model-viewer") || customElements.define("mui-model-viewer", d);
+export {
+  d as MuiModelViewer
+};

package/dist/esm/components/mui-progress-ring/index.js

@@ -0,0 +1,349 @@
+import "../mui-icons/checkmark/index.js";
+class E extends HTMLElement {
+  constructor() {
+    super(), this.tooltipOpen = !1, this.boundReposition = () => this.positionTooltip(), this.boundDocPointer = (t) => {
+      t.composedPath().includes(this) || this.closeTooltip(!0);
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "progress",
+      "value",
+      "max",
+      "label",
+      "size",
+      "display",
+      "display-value",
+      "color",
+      "tooltip",
+      "tooltip-trigger",
+      "tooltip-placement"
+    ];
+  }
+  connectedCallback() {
+    if (!this.hasAttribute("size")) {
+      this.setAttribute("size", "medium");
+      return;
+    }
+    this.render();
+  }
+  disconnectedCallback() {
+    this.closeTooltip(!0);
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getProgress() {
+    const t = this.getAttribute("progress");
+    if (t !== null)
+      return Math.min(Math.max(Number(t) || 0, 0), 100);
+    const e = Number(this.getAttribute("value") || 0), r = Number(this.getAttribute("max") || 100);
+    return !Number.isFinite(r) || r <= 0 ? 0 : Math.min(Math.max(e / r * 100, 0), 100);
+  }
+  getDisplayContent(t, e) {
+    const r = this.getAttribute("display") || "auto", i = this.getAttribute("display-value"), o = this.getAttribute("value"), s = this.getAttribute("max");
+    if (r === "none") return { text: "", variant: "empty" };
+    if (i !== null) {
+      const c = i.trim();
+      return c ? { text: c, variant: "text" } : { text: "", variant: "empty" };
+    }
+    return r === "value" ? o !== null && s !== null ? this.getFractionContent(o, s, e) : { text: String(Math.round(t)), variant: "text" } : r === "fraction" && o !== null && s !== null ? this.getFractionContent(o, s, e) : r === "percent" ? { text: String(Math.round(t)), variant: "text" } : { text: "", variant: "empty" };
+  }
+  getFractionContent(t, e, r) {
+    const i = t.trim(), o = e.trim(), s = `${i}/${o}`, c = /^\d+$/.test(i) && /^\d+$/.test(o);
+    return s.length <= 3 ? { text: s, variant: "text" } : c && i.length <= 2 && o.length <= 2 && (r === "small" || r === "medium" || r === "large") ? { text: s, value: i, max: o, variant: "fraction" } : { text: "", variant: "empty" };
+  }
+  getTooltipText(t) {
+    var i;
+    if (this.hasAttribute("tooltip")) return ((i = this.getAttribute("tooltip")) == null ? void 0 : i.trim()) || "";
+    const e = this.getAttribute("value"), r = this.getAttribute("max");
+    return e !== null && r !== null ? `${e} of ${r}` : this.hasAttribute("progress") ? `${Math.round(t)}% complete` : "";
+  }
+  escapeHtml(t) {
+    return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  getTooltipTrigger() {
+    return (this.getAttribute("tooltip-trigger") || "hover") === "click" ? "click" : "hover";
+  }
+  getTooltipPlacement() {
+    const t = this.getAttribute("tooltip-placement") || "top";
+    return ["top", "bottom", "left", "right"].includes(t) ? t : "top";
+  }
+  getIndicatorColor() {
+    const t = this.getAttribute("color"), e = {
+      positive: "var(--progress-bar-background-positive)",
+      warning: "var(--progress-bar-background-warning)",
+      attention: "var(--progress-bar-background-attention)"
+    };
+    return t && e[t] ? e[t] : "var(--progress-bar-background)";
+  }
+  hasTooltip() {
+    return !!this.getTooltipText(this.getProgress());
+  }
+  syncAria(t) {
+    const e = this.getAttribute("value"), r = this.getAttribute("max"), i = this.getAttribute("label");
+    this.setAttribute("role", "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", r || "100"), this.setAttribute("aria-valuenow", e || String(Math.round(t))), i && this.setAttribute("aria-label", i);
+  }
+  setupTooltipEvents() {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".shell");
+    if (!t || !this.hasTooltip()) return;
+    const e = this.getTooltipTrigger();
+    e === "click" ? t.addEventListener("click", () => {
+      if (this.tooltipOpen) {
+        this.closeTooltip(!0);
+        return;
+      }
+      this.openTooltip();
+    }) : (t.addEventListener("mouseenter", () => this.openTooltip()), t.addEventListener("mouseleave", () => this.closeTooltip()), t.addEventListener("focusin", () => this.openTooltip()), t.addEventListener("focusout", () => this.closeTooltip(!0))), t.addEventListener("keydown", (i) => {
+      const o = i.key;
+      if (o === "Escape") {
+        this.closeTooltip(!0);
+        return;
+      }
+      if (e === "click" && (o === "Enter" || o === " ")) {
+        if (i.preventDefault(), this.tooltipOpen) {
+          this.closeTooltip(!0);
+          return;
+        }
+        this.openTooltip();
+      }
+    });
+  }
+  openTooltip() {
+    var e;
+    if (!this.hasTooltip()) return;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".tooltip");
+    t && (this.tooltipOpen = !0, t.classList.add("is-open"), requestAnimationFrame(() => this.positionTooltip()), window.addEventListener("resize", this.boundReposition), window.addEventListener("scroll", this.boundReposition, !0), document.addEventListener("pointerdown", this.boundDocPointer, !0));
+  }
+  closeTooltip(t = !1) {
+    var r;
+    this.tooltipOpen = !1;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".tooltip");
+    e && (e.classList.toggle("is-immediate", t), e.classList.remove("is-open"), t && requestAnimationFrame(() => e.classList.remove("is-immediate"))), window.removeEventListener("resize", this.boundReposition), window.removeEventListener("scroll", this.boundReposition, !0), document.removeEventListener("pointerdown", this.boundDocPointer, !0);
+  }
+  positionTooltip() {
+    var g, m;
+    const t = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".shell"), e = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".tooltip");
+    if (!t || !e || !this.tooltipOpen) return;
+    const r = this.getTooltipPlacement(), i = t.getBoundingClientRect(), o = e.getBoundingClientRect(), s = window.innerHeight, c = window.innerWidth, n = 8, a = 8, u = {
+      top: i.top - n,
+      bottom: s - i.bottom - n,
+      left: i.left - n,
+      right: c - i.right - n
+    }, b = {
+      top: o.height + a,
+      bottom: o.height + a,
+      left: o.width + a,
+      right: o.width + a
+    }, z = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    }, x = ["top", "bottom", "right", "left"];
+    let l = r;
+    const d = z[l];
+    u[l] < b[l] && (u[d] >= b[d] ? l = d : l = x.reduce(
+      (v, f) => u[f] > u[v] ? f : v,
+      l
+    ));
+    let h = 0, p = 0;
+    l === "top" ? (h = i.top - o.height - a, p = i.left + i.width / 2 - o.width / 2) : l === "bottom" ? (h = i.bottom + a, p = i.left + i.width / 2 - o.width / 2) : l === "left" ? (h = i.top + i.height / 2 - o.height / 2, p = i.left - o.width - a) : (h = i.top + i.height / 2 - o.height / 2, p = i.right + a), h = Math.max(n, Math.min(h, s - o.height - n)), p = Math.max(n, Math.min(p, c - o.width - n)), e.setAttribute("data-placement", l), e.style.top = `${h}px`, e.style.left = `${p}px`;
+  }
+  render() {
+    var $;
+    this.closeTooltip(!0);
+    const t = this.getProgress(), e = this.getAttribute("size") || "medium", r = e !== "x-small", i = this.hasAttribute("display-value") && !!(($ = this.getAttribute("display-value")) != null && $.trim()), o = t >= 100, s = r && (!o || i) ? this.getDisplayContent(t, e) : { text: "", variant: "empty" }, c = o && !(r && i), n = e === "x-small" ? 6 : 5, a = 21 - n / 2, u = 2 * Math.PI * a, b = t / 100 * u, z = t > 0 && t < 100 ? n * 1.4 : 0, x = t >= 100 ? u : Math.max(0, Math.min(b, u - z)), l = u - x, d = t <= 0 ? "butt" : "round", h = {
+      "x-small": "var(--action-icon-only-size-x-small)",
+      small: "var(--action-icon-only-size-small)",
+      medium: "var(--action-icon-only-size-medium)",
+      large: "var(--action-icon-only-size-large)"
+    }, p = {
+      "x-small": {
+        fontSize: "calc(var(--text-font-size-s) * 0.8)",
+        lineHeight: "1"
+      },
+      small: {
+        fontSize: "calc(var(--text-font-size-s) * 0.9)",
+        lineHeight: "1"
+      },
+      medium: {
+        fontSize: "var(--text-font-size-s)",
+        lineHeight: "1"
+      },
+      large: {
+        fontSize: "var(--text-font-size-s)",
+        lineHeight: "1"
+      }
+    }, g = {
+      "x-small": {
+        fontSize: "0",
+        lineHeight: "1",
+        width: "0",
+        dividerMargin: "0"
+      },
+      small: {
+        fontSize: "var(--font-size-10)",
+        lineHeight: "1",
+        width: "1em",
+        dividerMargin: "var(--stroke-size-100)"
+      },
+      medium: {
+        fontSize: "var(--font-size-15)",
+        lineHeight: "1",
+        width: "1em",
+        dividerMargin: "var(--stroke-size-200)"
+      },
+      large: {
+        fontSize: "var(--font-size-50)",
+        lineHeight: "1",
+        width: "1.2em",
+        dividerMargin: "var(--stroke-size-200)"
+      }
+    }, m = {
+      "x-small": "xx-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    }, v = h[e] || h.medium, f = p[e] || p.medium, w = g[e] || g.medium, M = m[e] || m.medium, T = this.getTooltipText(t), y = !!T, A = "progress-ring-tooltip", S = this.getTooltipTrigger(), C = this.getTooltipPlacement(), L = this.getIndicatorColor();
+    let k = this.escapeHtml(s.text);
+    c ? k = `<mui-icon-checkmark class="complete-icon" size="${M}" color="currentColor" aria-hidden="true"></mui-icon-checkmark>` : s.variant === "fraction" && (k = `<span class="fraction" aria-hidden="true"><span class="fraction__value">${this.escapeHtml(s.value)}</span><span class="fraction__divider"></span><span class="fraction__max">${this.escapeHtml(s.max)}</span></span>`), this.syncAria(t);
+    const H = (
+      /*css*/
+      `
+      :host {
+        display: inline-flex;
+        place-items: center;
+        inline-size: ${v};
+        block-size: ${v};
+        color: var(--text-color);
+        --progress-ring-fraction-font-size: ${w.fontSize};
+        --progress-ring-fraction-line-height: ${w.lineHeight};
+        --progress-ring-fraction-width: ${w.width};
+        --progress-ring-fraction-divider-margin: ${w.dividerMargin};
+      }
+      .ring {
+        inline-size: 100%;
+        block-size: 100%;
+        overflow: visible;
+        transform: rotate(-90deg);
+      }
+      .track,
+      .indicator {
+        fill: none;
+        stroke-width: ${n};
+      }
+      .track {
+        stroke: var(--progress-track-background);
+      }
+      .indicator {
+        stroke: ${L};
+        stroke-linecap: ${d};
+        stroke-dasharray: ${x} ${l};
+        stroke-dashoffset: 0;
+        transition: stroke-dasharray var(--speed-300) ease;
+      }
+      .content {
+        position: absolute;
+        inset: 0;
+        display: ${s.text || c ? "grid" : "none"};
+        place-items: center;
+        font-size: ${f.fontSize};
+        line-height: ${f.lineHeight};
+        font-weight: var(--font-weight-semi-bold);
+        text-align: center;
+        pointer-events: none;
+        max-inline-size: 64%;
+        margin: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .fraction {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: auto auto auto;
+        align-items: center;
+        justify-content: center;
+        justify-items: center;
+        inline-size: min(var(--progress-ring-fraction-width), 100%);
+        line-height: var(--progress-ring-fraction-line-height);
+        font-size: var(--progress-ring-fraction-font-size);
+      }
+      .fraction__value {
+        justify-self: center;
+      }
+      .fraction__divider {
+        inline-size: 100%;
+        block-size: var(--stroke-size-100);
+        margin-block: var(--progress-ring-fraction-divider-margin);
+        border-radius: var(--radius-500);
+        background: currentColor;
+        opacity: 0.7;
+      }
+      .fraction__max {
+        justify-self: center;
+      }
+      mui-icon-checkmark.complete-icon {
+        color: currentColor;
+        fill: currentColor;
+      }
+      .shell {
+        position: relative;
+        inline-size: 100%;
+        block-size: 100%;
+        border-radius: 50%;
+        outline: none;
+        cursor: ${y ? S === "click" ? "pointer" : "help" : "default"};
+      }
+      .shell:focus-visible {
+        outline: var(--hint-focus-outline, var(--stroke-size-400) var(--stroke-outset) var(--outline-color));
+        outline-offset: var(--hint-focus-outline-offset, var(--stroke-size-200));
+      }
+      .tooltip {
+        display: none;
+        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;
+      }
+      .tooltip.is-immediate {
+        transition-duration: 0ms;
+      }
+      .tooltip.is-open {
+        display: block;
+        opacity: 1;
+      }
+    `
+    );
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${H}</style>
+      <div class="shell" ${y ? `tabindex="0" aria-describedby="${A}"` : ""}>
+        <svg class="ring" viewBox="0 0 42 42" aria-hidden="true">
+          <circle class="track" cx="21" cy="21" r="${a}"></circle>
+          <circle class="indicator" cx="21" cy="21" r="${a}"></circle>
+        </svg>
+        <div class="content">${k}</div>
+      </div>
+      ${y ? `<div id="${A}" class="tooltip" role="tooltip" data-placement="${C}">${this.escapeHtml(T)}</div>` : ""}
+    `, this.setupTooltipEvents();
+  }
+}
+customElements.get("mui-progress-ring") || customElements.define("mui-progress-ring", E);