@editora/ui-core 0.1.9 → 0.1.12

package/dist/spinning-text.esm.js

@@ -0,0 +1,635 @@
+import { E as C } from "./ElementBase-909688f3.mjs";
+const D = "14s", N = " • ", b = "linear", I = 4, L = 1, O = 12, F = /* @__PURE__ */ new Set(["clockwise", "counterclockwise"]), Q = /* @__PURE__ */ new Set(["default", "surface", "soft", "solid", "glass", "contrast", "minimal"]), U = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), B = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "1", "2", "3", "4"]), j = /* @__PURE__ */ new Set(["none", "low", "high"]), r = {
+  sm: {
+    fontSize: "12px",
+    fontSizePx: 12,
+    radius: "56px",
+    radiusPx: 56,
+    padding: "12px",
+    letterSpacing: "0.16em",
+    letterSpacingPx: 1.92,
+    surfaceRadius: "24px"
+  },
+  md: {
+    fontSize: "14px",
+    fontSizePx: 14,
+    radius: "78px",
+    radiusPx: 78,
+    padding: "16px",
+    letterSpacing: "0.16em",
+    letterSpacingPx: 2.24,
+    surfaceRadius: "28px"
+  },
+  lg: {
+    fontSize: "16px",
+    fontSizePx: 16,
+    radius: "96px",
+    radiusPx: 96,
+    padding: "20px",
+    letterSpacing: "0.18em",
+    letterSpacingPx: 2.88,
+    surfaceRadius: "32px"
+  },
+  xl: {
+    fontSize: "20px",
+    fontSizePx: 20,
+    radius: "122px",
+    radiusPx: 122,
+    padding: "24px",
+    letterSpacing: "0.2em",
+    letterSpacingPx: 4,
+    surfaceRadius: "36px"
+  }
+}, q = `
+  :host {
+    --ui-spinning-text-duration: ${D};
+    --ui-spinning-text-easing: ${b};
+    --ui-spinning-text-font-size: ${r.lg.fontSize};
+    --ui-spinning-text-font-weight: 760;
+    --ui-spinning-text-letter-spacing: ${r.lg.letterSpacing};
+    --ui-spinning-text-radius: ${r.lg.radius};
+    --ui-spinning-text-min-radius: 0px;
+    --ui-spinning-text-effective-radius: max(var(--ui-spinning-text-radius), var(--ui-spinning-text-min-radius));
+    --ui-spinning-text-padding: ${r.lg.padding};
+    --ui-spinning-text-surface-radius: ${r.lg.surfaceRadius};
+    --ui-spinning-text-stage-size:
+      calc((var(--ui-spinning-text-effective-radius) * 2) + (var(--ui-spinning-text-font-size) * 3));
+    --ui-spinning-text-rotation: 1turn;
+    --ui-spinning-text-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-spinning-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-spinning-text-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 92%, transparent) 0%,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 62%,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent) 100%
+      );
+    --ui-spinning-text-border-color:
+      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 84%, transparent);
+    --ui-spinning-text-border: 1px solid var(--ui-spinning-text-border-color);
+    --ui-spinning-text-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-spinning-text-backdrop: none;
+    --ui-spinning-text-orbit-color:
+      color-mix(in srgb, var(--ui-spinning-text-accent) 18%, var(--ui-spinning-text-border-color));
+    --ui-spinning-text-center-bg:
+      radial-gradient(
+        circle at 50% 35%,
+        color-mix(in srgb, #ffffff 90%, transparent) 0%,
+        color-mix(in srgb, var(--ui-spinning-text-accent) 10%, rgba(255, 255, 255, 0.92)) 100%
+      );
+    --ui-spinning-text-center-border:
+      1px solid color-mix(in srgb, var(--ui-spinning-text-accent) 20%, rgba(255, 255, 255, 0.84));
+    --ui-spinning-text-center-shadow:
+      0 12px 28px rgba(15, 23, 42, 0.14),
+      inset 0 1px 0 rgba(255, 255, 255, 0.52);
+    --ui-spinning-text-center-color: inherit;
+    --ui-spinning-text-center-size:
+      clamp(56px, calc(var(--ui-spinning-text-effective-radius) * 0.9), 220px);
+    --ui-spinning-text-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    display: inline-block;
+    min-inline-size: 0;
+    color: var(--ui-spinning-text-color);
+    color-scheme: light dark;
+    font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-spinning-text-font-size: ${r.sm.fontSize};
+    --ui-spinning-text-radius: ${r.sm.radius};
+    --ui-spinning-text-padding: ${r.sm.padding};
+    --ui-spinning-text-letter-spacing: ${r.sm.letterSpacing};
+    --ui-spinning-text-surface-radius: ${r.sm.surfaceRadius};
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-spinning-text-font-size: ${r.md.fontSize};
+    --ui-spinning-text-radius: ${r.md.radius};
+    --ui-spinning-text-padding: ${r.md.padding};
+    --ui-spinning-text-letter-spacing: ${r.md.letterSpacing};
+    --ui-spinning-text-surface-radius: ${r.md.surfaceRadius};
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-spinning-text-font-size: ${r.lg.fontSize};
+    --ui-spinning-text-radius: ${r.lg.radius};
+    --ui-spinning-text-padding: ${r.lg.padding};
+    --ui-spinning-text-letter-spacing: ${r.lg.letterSpacing};
+    --ui-spinning-text-surface-radius: ${r.lg.surfaceRadius};
+  }
+
+  :host([size="xl"]),
+  :host([size="4"]) {
+    --ui-spinning-text-font-size: ${r.xl.fontSize};
+    --ui-spinning-text-radius: ${r.xl.radius};
+    --ui-spinning-text-padding: ${r.xl.padding};
+    --ui-spinning-text-letter-spacing: ${r.xl.letterSpacing};
+    --ui-spinning-text-surface-radius: ${r.xl.surfaceRadius};
+  }
+
+  :host([direction="counterclockwise"]) {
+    --ui-spinning-text-rotation: -1turn;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-spinning-text-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-spinning-text-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-spinning-text-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-spinning-text-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-spinning-text-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-spinning-text-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-spinning-text-accent) 10%, var(--ui-color-surface, #ffffff)) 0%,
+        color-mix(in srgb, var(--ui-spinning-text-accent) 4%, var(--ui-color-surface, #ffffff)) 100%
+      );
+    --ui-spinning-text-shadow: none;
+    --ui-spinning-text-center-shadow: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-spinning-text-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-spinning-text-accent) 12%, var(--ui-color-surface, #ffffff)) 0%,
+        color-mix(in srgb, var(--ui-spinning-text-accent) 4%, var(--ui-color-surface-elevated, #f8fafc)) 100%
+      );
+    --ui-spinning-text-orbit-color:
+      color-mix(in srgb, var(--ui-spinning-text-accent) 26%, var(--ui-spinning-text-border-color));
+  }
+
+  :host([variant="glass"]) {
+    --ui-spinning-text-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, #ffffff 78%, transparent) 0%,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, transparent) 100%
+      );
+    --ui-spinning-text-backdrop: blur(18px) saturate(1.08);
+    --ui-spinning-text-center-shadow:
+      0 10px 22px rgba(15, 23, 42, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.56);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-spinning-text-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, #0b1f3f 92%, var(--ui-spinning-text-accent) 8%) 0%,
+        color-mix(in srgb, #07162d 96%, var(--ui-spinning-text-accent) 4%) 100%
+      );
+    --ui-spinning-text-color: #f8fbff;
+    --ui-spinning-text-border-color: color-mix(in srgb, #9ec5ff 18%, transparent);
+    --ui-spinning-text-center-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-spinning-text-center-border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-spinning-text-center-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
+    --ui-spinning-text-center-color: #f8fbff;
+    --ui-spinning-text-shadow: 0 28px 56px rgba(2, 6, 23, 0.34);
+    --ui-spinning-text-orbit-color: color-mix(in srgb, #ffffff 18%, transparent);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-spinning-text-bg: transparent;
+    --ui-spinning-text-border: none;
+    --ui-spinning-text-shadow: none;
+    --ui-spinning-text-center-bg: transparent;
+    --ui-spinning-text-center-border: 1px solid transparent;
+    --ui-spinning-text-center-shadow: none;
+  }
+
+  :host([elevation="none"]) {
+    --ui-spinning-text-shadow: none;
+    --ui-spinning-text-center-shadow: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-spinning-text-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 34px 64px rgba(15, 23, 42, 0.18);
+    --ui-spinning-text-center-shadow:
+      0 18px 34px rgba(15, 23, 42, 0.16),
+      inset 0 1px 0 rgba(255, 255, 255, 0.42);
+  }
+
+  .root {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .surface {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: fit-content;
+    min-inline-size: 0;
+    padding: var(--ui-spinning-text-padding);
+    border-radius: var(--ui-spinning-text-surface-radius);
+    border: var(--ui-spinning-text-border);
+    background: var(--ui-spinning-text-bg);
+    color: var(--ui-spinning-text-color);
+    box-shadow: var(--ui-spinning-text-shadow);
+    backdrop-filter: var(--ui-spinning-text-backdrop);
+    transition:
+      background-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      backdrop-filter 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+    box-sizing: border-box;
+    isolation: isolate;
+  }
+
+  .stage {
+    position: relative;
+    inline-size: var(--ui-spinning-text-stage-size);
+    block-size: var(--ui-spinning-text-stage-size);
+    min-inline-size: 0;
+  }
+
+  .ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 999px;
+    animation-name: ui-spinning-text-spin;
+    animation-duration: var(--ui-spinning-text-duration);
+    animation-timing-function: var(--ui-spinning-text-easing);
+    animation-iteration-count: infinite;
+    animation-play-state: running;
+    will-change: transform;
+    transform-origin: center;
+  }
+
+  .ring::before {
+    content: "";
+    position: absolute;
+    inset: calc(50% - var(--ui-spinning-text-effective-radius));
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-spinning-text-orbit-color) 70%, transparent);
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  .glyph {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 1ch;
+    transform:
+      translate(-50%, -50%)
+      rotate(calc(var(--ui-spinning-text-step, 12deg) * var(--ui-spinning-text-index, 0)))
+      translateY(calc(var(--ui-spinning-text-effective-radius) * -1))
+      rotate(calc(var(--ui-spinning-text-step, 12deg) * var(--ui-spinning-text-index, 0) * -1));
+    transform-origin: center;
+    white-space: pre;
+    font-size: var(--ui-spinning-text-font-size);
+    font-weight: var(--ui-spinning-text-font-weight);
+    line-height: 1;
+    letter-spacing: var(--ui-spinning-text-letter-spacing);
+    text-transform: uppercase;
+    color: inherit;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: geometricPrecision;
+  }
+
+  .center-shell {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: var(--ui-spinning-text-center-size);
+    block-size: var(--ui-spinning-text-center-size);
+    transform: translate(-50%, -50%);
+    border-radius: 999px;
+    border: var(--ui-spinning-text-center-border);
+    background: var(--ui-spinning-text-center-bg);
+    color: var(--ui-spinning-text-center-color);
+    box-shadow: var(--ui-spinning-text-center-shadow);
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 14px;
+    text-align: center;
+    z-index: 1;
+  }
+
+  .center-shell--empty {
+    display: none;
+  }
+
+  slot[name="center"] {
+    display: contents;
+  }
+
+  slot[name="center"]::slotted(*) {
+    display: grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    color: inherit;
+    box-sizing: border-box;
+  }
+
+  :host(:focus-visible) .surface {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-spinning-text-focus-ring) 24%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-spinning-text-focus-ring) 18%, transparent),
+      var(--ui-spinning-text-shadow);
+  }
+
+  :host([paused]) .ring,
+  :host([pause-on-hover]:hover) .ring,
+  :host([pause-on-focus]:focus-within) .ring {
+    animation-play-state: paused;
+  }
+
+  @keyframes ui-spinning-text-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(var(--ui-spinning-text-rotation)); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ring {
+      animation: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .surface,
+    .center-shell {
+      box-shadow: none;
+    }
+
+    .surface {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-spinning-text-bg: Canvas;
+      --ui-spinning-text-color: CanvasText;
+      --ui-spinning-text-border-color: CanvasText;
+      --ui-spinning-text-shadow: none;
+      --ui-spinning-text-orbit-color: CanvasText;
+      --ui-spinning-text-center-bg: Canvas;
+      --ui-spinning-text-center-border: 1px solid CanvasText;
+      --ui-spinning-text-center-shadow: none;
+      --ui-spinning-text-center-color: CanvasText;
+    }
+
+    .surface,
+    .center-shell,
+    .ring::before {
+      forced-color-adjust: none;
+    }
+  }
+`;
+function G(t) {
+  return t != null && F.has(t) ? t : "clockwise";
+}
+function V(t) {
+  return t != null && Q.has(t) ? t : "default";
+}
+function X(t) {
+  return t != null && U.has(t) ? t : "brand";
+}
+function Y(t) {
+  return t == null || !B.has(t) ? "lg" : t === "1" ? "sm" : t === "2" ? "md" : t === "3" ? "lg" : t === "4" ? "xl" : t;
+}
+function Z(t) {
+  return t != null && j.has(t) ? t : "low";
+}
+function u(t) {
+  if (t == null || t.trim() === "")
+    return null;
+  const e = t.trim().split(/\s+/).filter(Boolean);
+  return e.length ? e.map((i) => /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : i).join(" ") : null;
+}
+function H(t, n, e = Number.POSITIVE_INFINITY) {
+  if (t == null || t.trim() === "")
+    return n;
+  const i = Number.parseInt(t, 10);
+  return !Number.isFinite(i) || i <= 0 ? n : Math.min(i, e);
+}
+function W(t, n) {
+  if (t == null || t.trim() === "")
+    return n;
+  const e = Number.parseFloat(t.replace(/rpm$/i, "").trim());
+  return Number.isFinite(e) && e > 0 ? e : n;
+}
+function f(t, n, e) {
+  if (t == null || t.trim() === "")
+    return e;
+  const i = t.trim();
+  return /^-?\d+(\.\d+)?$/.test(i) || /^-?\d+(\.\d+)?px$/i.test(i) ? Number.parseFloat(i) : /^-?\d+(\.\d+)?em$/i.test(i) ? Number.parseFloat(i) * n : /^-?\d+(\.\d+)?rem$/i.test(i) ? Number.parseFloat(i) * 16 : e;
+}
+function J(t, n) {
+  const e = K(t);
+  if (e)
+    return e;
+  const i = W(n, I);
+  return `${Math.max(60 / i, 0.25)}s`;
+}
+function K(t) {
+  if (t == null || t.trim() === "")
+    return null;
+  const n = t.trim();
+  return /^-?\d+(\.\d+)?(ms|s)$/i.test(n) ? n : /^-?\d+(\.\d+)?$/i.test(n) ? `${n}s` : null;
+}
+function h(t) {
+  const n = t.getAttribute("text");
+  if (n != null)
+    return n;
+  let e = "";
+  for (const i of Array.from(t.childNodes)) {
+    if (i.nodeType === Node.TEXT_NODE) {
+      e += i.textContent || "";
+      continue;
+    }
+    if (i.nodeType !== Node.ELEMENT_NODE)
+      continue;
+    const a = i;
+    a.getAttribute("slot") !== "center" && (e += a.textContent || "");
+  }
+  return e;
+}
+function tt(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function it(t) {
+  if (!t)
+    return [];
+  const n = Intl;
+  if (typeof Intl < "u" && n.Segmenter) {
+    const e = new n.Segmenter(void 0, { granularity: "grapheme" });
+    return Array.from(e.segment(t), (i) => i.segment);
+  }
+  return Array.from(t);
+}
+function nt(t, n, e) {
+  const i = t.replace(/\s+/g, " ").trim();
+  return i ? n <= 1 ? i : Array.from({ length: n }, () => i).join(e) : "";
+}
+function et(t, n, e) {
+  if (t <= 1)
+    return Math.max(n * 1.5, 20);
+  const i = Math.max(n * 0.62 + Math.max(e, 0), n * 0.48), a = t * i;
+  return Math.ceil(a / (2 * Math.PI) + n * 0.6);
+}
+function s(t, n, e) {
+  e == null || e === "" ? t.style.removeProperty(n) : t.style.setProperty(n, e);
+}
+class rt extends C {
+  constructor() {
+    super(), this._lightDomObserver = null, this._mediaQuery = null, this._onLightDomMutation = this._onLightDomMutation.bind(this), this._onReducedMotionChange = this._onReducedMotionChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "text",
+      "repeat",
+      "separator",
+      "speed",
+      "duration",
+      "direction",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "padding",
+      "font-size",
+      "font-weight",
+      "letter-spacing",
+      "color",
+      "accent",
+      "orbit-color",
+      "easing",
+      "elevation",
+      "paused",
+      "pause-on-hover",
+      "pause-on-focus"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "img"), this._observeLightDom(), this._bindReducedMotion(), this._syncState();
+  }
+  disconnectedCallback() {
+    if (this._lightDomObserver && (this._lightDomObserver.disconnect(), this._lightDomObserver = null), this._mediaQuery) {
+      try {
+        this._mediaQuery.removeEventListener("change", this._onReducedMotionChange);
+      } catch {
+        this._mediaQuery.removeListener(this._onReducedMotionChange);
+      }
+      this._mediaQuery = null;
+    }
+    super.disconnectedCallback();
+  }
+  play() {
+    this.removeAttribute("paused"), this._syncState();
+  }
+  pause() {
+    this.setAttribute("paused", ""), this._syncState();
+  }
+  refresh() {
+    this.requestRender();
+  }
+  attributeChangedCallback(n, e, i) {
+    super.attributeChangedCallback(n, e, i), n === "paused" && e !== i && this._syncState();
+  }
+  render() {
+    var d;
+    const n = Y(this.getAttribute("size")), e = r[n], i = h(this), a = H(this.getAttribute("repeat"), L, O), m = this.getAttribute("separator") ?? N, v = nt(i, a, m), o = it(v), z = !!this.querySelector('[slot="center"]'), c = u(this.getAttribute("font-size")), g = u(this.getAttribute("letter-spacing")), y = u(this.getAttribute("padding")), S = u(this.getAttribute("radius")), p = f(c, e.fontSizePx, e.fontSizePx), w = f(g, p, e.letterSpacingPx), A = o.length ? et(o.length, p, w) : 0, _ = J(this.getAttribute("duration"), this.getAttribute("speed")), $ = G(this.getAttribute("direction")), E = V(this.getAttribute("variant")), T = X(this.getAttribute("tone")), R = Z(this.getAttribute("elevation")), M = ((d = this.getAttribute("easing")) == null ? void 0 : d.trim()) || b, P = o.length ? o.map((l, x) => {
+      const k = l === " " ? "&nbsp;" : tt(l);
+      return `
+              <span
+                class="glyph"
+                part="glyph"
+                aria-hidden="true"
+                data-index="${x}"
+                style="--ui-spinning-text-index:${x};"
+              >${k}</span>
+            `;
+    }).join("") : "";
+    s(this, "--ui-spinning-text-duration", _), s(this, "--ui-spinning-text-easing", M), s(this, "--ui-spinning-text-font-size", c), s(this, "--ui-spinning-text-letter-spacing", g), s(this, "--ui-spinning-text-padding", y), s(this, "--ui-spinning-text-radius", S), s(this, "--ui-spinning-text-color", this.getAttribute("color")), s(this, "--ui-spinning-text-accent", this.getAttribute("accent")), s(this, "--ui-spinning-text-orbit-color", this.getAttribute("orbit-color")), s(this, "--ui-spinning-text-font-weight", this.getAttribute("font-weight")), s(this, "--ui-spinning-text-min-radius", `${A}px`), s(this, "--ui-spinning-text-step", o.length ? `${360 / o.length}deg` : null), i.trim() ? this.setAttribute("aria-label", i.replace(/\s+/g, " ").trim()) : this.removeAttribute("aria-label"), this.setAttribute("data-direction", $), this.setAttribute("data-variant", E), this.setAttribute("data-tone", T), this.setAttribute("data-elevation", R), this.setContent(`
+      <style>${q}</style>
+      <div class="root" part="root">
+        <div class="surface" part="surface">
+          <div class="stage" part="stage">
+            <div
+              class="ring"
+              part="ring"
+              aria-hidden="true"
+              data-glyph-count="${o.length}"
+            >${P}</div>
+            <div class="center-shell${z ? "" : " center-shell--empty"}" part="center">
+              <slot name="center"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `), this._syncState();
+  }
+  _observeLightDom() {
+    this._lightDomObserver || typeof MutationObserver > "u" || (this._lightDomObserver = new MutationObserver(this._onLightDomMutation), this._lightDomObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0,
+      attributes: !0,
+      attributeFilter: ["slot"]
+    }));
+  }
+  _bindReducedMotion() {
+    if (!(this._mediaQuery || typeof window > "u" || typeof window.matchMedia != "function")) {
+      this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+      try {
+        this._mediaQuery.addEventListener("change", this._onReducedMotionChange);
+      } catch {
+        this._mediaQuery.addListener(this._onReducedMotionChange);
+      }
+    }
+  }
+  _onLightDomMutation() {
+    this.requestRender();
+  }
+  _onReducedMotionChange() {
+    this._syncState();
+  }
+  _syncState() {
+    var i;
+    if (!h(this).replace(/\s+/g, " ").trim()) {
+      this.setAttribute("data-state", "idle");
+      return;
+    }
+    const e = !!((i = this._mediaQuery) != null && i.matches);
+    this.setAttribute("data-motion", e ? "reduced" : "auto"), this.setAttribute("data-state", e || this.hasAttribute("paused") ? "paused" : "running");
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-spinning-text") && customElements.define("ui-spinning-text", rt);
+export {
+  rt as UISpinningText
+};