@editora/ui-core 0.1.9 → 0.1.10

package/dist/orbiter.esm.js

@@ -0,0 +1,831 @@
+import { E as U } from "./ElementBase-909688f3.mjs";
+const V = "18s", D = "0s", A = "88px", w = "44px", E = "128px", $ = "28px", R = "20px", N = -90, X = 6, B = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), W = /* @__PURE__ */ new Set(["clockwise", "counterclockwise", "alternate"]), j = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), _ = {
+  xs: {
+    orbitRadius: "54px",
+    itemSize: "30px",
+    centerSize: "80px",
+    ringGap: "16px",
+    padding: "12px",
+    panelRadius: "22px"
+  },
+  sm: {
+    orbitRadius: "68px",
+    itemSize: "36px",
+    centerSize: "96px",
+    ringGap: "20px",
+    padding: "14px",
+    panelRadius: "24px"
+  },
+  md: {
+    orbitRadius: A,
+    itemSize: w,
+    centerSize: E,
+    ringGap: $,
+    padding: R,
+    panelRadius: "28px"
+  },
+  lg: {
+    orbitRadius: "108px",
+    itemSize: "52px",
+    centerSize: "148px",
+    ringGap: "32px",
+    padding: "24px",
+    panelRadius: "32px"
+  },
+  xl: {
+    orbitRadius: "132px",
+    itemSize: "64px",
+    centerSize: "172px",
+    ringGap: "38px",
+    padding: "28px",
+    panelRadius: "36px"
+  }
+}, F = {
+  calm: {
+    durationScale: 1.28,
+    accentOpacity: 0.12
+  },
+  smooth: {
+    durationScale: 1,
+    accentOpacity: 0.16
+  },
+  snappy: {
+    durationScale: 0.82,
+    accentOpacity: 0.18
+  },
+  bouncy: {
+    durationScale: 0.92,
+    accentOpacity: 0.22
+  }
+}, Z = `
+  :host {
+    --ui-orbiter-duration: ${V};
+    --ui-orbiter-delay: ${D};
+    --ui-orbiter-orbit-radius: ${A};
+    --ui-orbiter-item-size: ${w};
+    --ui-orbiter-center-size: ${E};
+    --ui-orbiter-ring-gap: ${$};
+    --ui-orbiter-padding: ${R};
+    --ui-orbiter-radius: 28px;
+    --ui-orbiter-stage-size:
+      calc((2 * var(--ui-orbiter-farthest-radius, ${A})) + var(--ui-orbiter-item-size));
+    --ui-orbiter-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-orbiter-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) 64%,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, transparent) 100%
+      );
+    --ui-orbiter-color: var(--ui-color-text, #0f172a);
+    --ui-orbiter-border-color:
+      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 86%, transparent);
+    --ui-orbiter-border: 1px solid var(--ui-orbiter-border-color);
+    --ui-orbiter-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-orbiter-backdrop: none;
+    --ui-orbiter-path-color:
+      color-mix(in srgb, var(--ui-orbiter-accent) 16%, var(--ui-orbiter-border-color));
+    --ui-orbiter-path-opacity: 0.95;
+    --ui-orbiter-item-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #ffffff 96%, transparent),
+        color-mix(in srgb, var(--ui-orbiter-accent) 8%, rgba(255, 255, 255, 0.9))
+      );
+    --ui-orbiter-item-color: var(--ui-orbiter-color);
+    --ui-orbiter-item-border:
+      1px solid color-mix(in srgb, var(--ui-orbiter-accent) 12%, rgba(255, 255, 255, 0.82));
+    --ui-orbiter-item-shadow:
+      0 8px 14px rgba(15, 23, 42, 0.08),
+      0 1px 2px rgba(15, 23, 42, 0.05);
+    --ui-orbiter-item-backdrop: none;
+    --ui-orbiter-center-bg:
+      radial-gradient(
+        circle at 50% 35%,
+        color-mix(in srgb, #ffffff 92%, transparent) 0%,
+        color-mix(in srgb, var(--ui-orbiter-accent) 12%, rgba(255, 255, 255, 0.94)) 100%
+      );
+    --ui-orbiter-center-border:
+      1px solid color-mix(in srgb, var(--ui-orbiter-accent) 20%, rgba(255, 255, 255, 0.84));
+    --ui-orbiter-center-shadow:
+      0 12px 28px rgba(15, 23, 42, 0.14),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    --ui-orbiter-center-backdrop: none;
+    --ui-orbiter-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    display: inline-block;
+    min-inline-size: 0;
+    color: var(--ui-orbiter-color);
+    color-scheme: light dark;
+    font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([size="xs"]),
+  :host([size="0"]) {
+    --ui-orbiter-orbit-radius: 54px;
+    --ui-orbiter-item-size: 30px;
+    --ui-orbiter-center-size: 80px;
+    --ui-orbiter-ring-gap: 16px;
+    --ui-orbiter-padding: 12px;
+    --ui-orbiter-radius: 22px;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-orbiter-orbit-radius: 68px;
+    --ui-orbiter-item-size: 36px;
+    --ui-orbiter-center-size: 96px;
+    --ui-orbiter-ring-gap: 20px;
+    --ui-orbiter-padding: 14px;
+    --ui-orbiter-radius: 24px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-orbiter-orbit-radius: ${A};
+    --ui-orbiter-item-size: ${w};
+    --ui-orbiter-center-size: ${E};
+    --ui-orbiter-ring-gap: ${$};
+    --ui-orbiter-padding: ${R};
+    --ui-orbiter-radius: 28px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-orbiter-orbit-radius: 108px;
+    --ui-orbiter-item-size: 52px;
+    --ui-orbiter-center-size: 148px;
+    --ui-orbiter-ring-gap: 32px;
+    --ui-orbiter-padding: 24px;
+    --ui-orbiter-radius: 32px;
+  }
+
+  :host([size="xl"]),
+  :host([size="4"]) {
+    --ui-orbiter-orbit-radius: 132px;
+    --ui-orbiter-item-size: 64px;
+    --ui-orbiter-center-size: 172px;
+    --ui-orbiter-ring-gap: 38px;
+    --ui-orbiter-padding: 28px;
+    --ui-orbiter-radius: 36px;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-orbiter-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-orbiter-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-orbiter-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-orbiter-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-orbiter-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-orbiter-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-orbiter-accent) 10%, var(--ui-color-surface, #ffffff)) 0%,
+        color-mix(in srgb, var(--ui-orbiter-accent) 4%, var(--ui-color-surface, #ffffff)) 100%
+      );
+    --ui-orbiter-shadow: none;
+    --ui-orbiter-item-shadow: none;
+    --ui-orbiter-center-shadow: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-orbiter-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-orbiter-accent) 12%, var(--ui-color-surface, #ffffff)) 0%,
+        color-mix(in srgb, var(--ui-orbiter-accent) 4%, var(--ui-color-surface-elevated, #f8fafc)) 100%
+      );
+    --ui-orbiter-path-color:
+      color-mix(in srgb, var(--ui-orbiter-accent) 24%, var(--ui-orbiter-border-color));
+  }
+
+  :host([variant="glass"]) {
+    --ui-orbiter-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, #ffffff 76%, transparent) 0%,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 78%, transparent) 100%
+      );
+    --ui-orbiter-backdrop: blur(18px) saturate(1.08);
+    --ui-orbiter-item-backdrop: blur(10px) saturate(1.05);
+    --ui-orbiter-center-backdrop: blur(14px) saturate(1.06);
+    --ui-orbiter-path-color:
+      color-mix(in srgb, #ffffff 40%, var(--ui-orbiter-border-color));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-orbiter-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, #0b1f3f 92%, var(--ui-orbiter-accent) 8%) 0%,
+        color-mix(in srgb, #07162d 96%, var(--ui-orbiter-accent) 4%) 100%
+      );
+    --ui-orbiter-color: #f8fbff;
+    --ui-orbiter-border-color: color-mix(in srgb, #9ec5ff 18%, transparent);
+    --ui-orbiter-item-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-orbiter-item-border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
+    --ui-orbiter-item-color: #f8fbff;
+    --ui-orbiter-center-bg: color-mix(in srgb, #ffffff 8%, transparent);
+    --ui-orbiter-center-border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-orbiter-path-color: color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-orbiter-shadow: 0 28px 56px rgba(2, 6, 23, 0.34);
+    --ui-orbiter-item-shadow: 0 12px 24px rgba(2, 6, 23, 0.22);
+    --ui-orbiter-center-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-orbiter-bg: transparent;
+    --ui-orbiter-border: none;
+    --ui-orbiter-shadow: none;
+    --ui-orbiter-item-shadow: none;
+    --ui-orbiter-center-shadow: none;
+    --ui-orbiter-item-bg: transparent;
+    --ui-orbiter-item-border: 1px solid transparent;
+    --ui-orbiter-center-bg: transparent;
+    --ui-orbiter-center-border: 1px solid transparent;
+  }
+
+  :host([surface-radius="none"]) {
+    --ui-orbiter-radius: 0px;
+  }
+
+  :host([surface-radius="sm"]) {
+    --ui-orbiter-radius: 18px;
+  }
+
+  :host([surface-radius="md"]) {
+    --ui-orbiter-radius: 24px;
+  }
+
+  :host([surface-radius="lg"]) {
+    --ui-orbiter-radius: 32px;
+  }
+
+  :host([surface-radius="full"]) {
+    --ui-orbiter-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-orbiter-shadow: none;
+    --ui-orbiter-item-shadow: none;
+    --ui-orbiter-center-shadow: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-orbiter-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 34px 64px rgba(15, 23, 42, 0.18);
+    --ui-orbiter-item-shadow:
+      0 10px 18px rgba(15, 23, 42, 0.12),
+      0 2px 4px rgba(15, 23, 42, 0.08);
+    --ui-orbiter-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 {
+    display: grid;
+    place-items: center;
+    min-inline-size: 0;
+    inline-size: fit-content;
+    padding: var(--ui-orbiter-padding);
+    border-radius: var(--ui-orbiter-radius);
+    border: var(--ui-orbiter-border);
+    background: var(--ui-orbiter-bg);
+    color: var(--ui-orbiter-color);
+    box-shadow: var(--ui-orbiter-shadow);
+    backdrop-filter: var(--ui-orbiter-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);
+  }
+
+  .stage {
+    position: relative;
+    inline-size: var(--ui-orbiter-stage-size);
+    block-size: var(--ui-orbiter-stage-size);
+    min-inline-size: 0;
+    isolation: isolate;
+    overflow: visible;
+  }
+
+  .paths,
+  .center-shell {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .path {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    border-radius: 999px;
+    border: 1px solid var(--ui-orbiter-path-color);
+    opacity: var(--ui-orbiter-path-opacity);
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+  }
+
+  :host([data-path-visible="false"]) .paths {
+    display: none;
+  }
+
+  ::slotted([data-ui-orbiter-center]) {
+    position: absolute !important;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: var(--ui-orbiter-center-size);
+    block-size: var(--ui-orbiter-center-size);
+    transform: translate(-50%, -50%);
+    border-radius: 999px;
+    border: var(--ui-orbiter-center-border);
+    background: var(--ui-orbiter-center-bg);
+    color: var(--ui-orbiter-color);
+    box-shadow: var(--ui-orbiter-center-shadow);
+    backdrop-filter: var(--ui-orbiter-center-backdrop);
+    display: grid !important;
+    place-items: center;
+    padding: 12px;
+    box-sizing: border-box;
+    text-align: center;
+    z-index: 1;
+  }
+
+  ::slotted([data-ui-orbiter-item]) {
+    position: absolute !important;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: var(--ui-orbiter-item-size);
+    block-size: var(--ui-orbiter-item-size);
+    border-radius: 999px;
+    border: var(--ui-orbiter-item-border);
+    background: var(--ui-orbiter-item-bg);
+    color: var(--ui-orbiter-item-color);
+    box-shadow: var(--ui-orbiter-item-shadow);
+    backdrop-filter: var(--ui-orbiter-item-backdrop);
+    display: grid !important;
+    place-items: center;
+    box-sizing: border-box;
+    padding: 0;
+    overflow: visible;
+    transform:
+      translate(-50%, -50%)
+      rotate(var(--ui-orbit-start-angle, 0deg))
+      translateX(var(--ui-orbit-radius, var(--ui-orbiter-orbit-radius)))
+      rotate(var(--ui-orbit-start-angle-inverse, 0deg));
+    transform-origin: center;
+    will-change: transform;
+    z-index: 2;
+    pointer-events: auto;
+  }
+
+  ::slotted([data-ui-orbit-runtime]) {
+    animation: none !important;
+  }
+
+  ::slotted([data-ui-orbiter-clickable]) {
+    cursor: pointer;
+    transition:
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      background-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      filter 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  ::slotted([data-ui-orbiter-clickable]:hover) {
+    filter: brightness(1.03);
+  }
+
+  ::slotted([data-ui-orbiter-clickable]:focus-visible) {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-orbiter-focus-ring) 30%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-orbiter-focus-ring) 20%, transparent),
+      var(--ui-orbiter-item-shadow);
+  }
+
+  :host([variant="minimal"]) ::slotted([data-ui-orbiter-item]) {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+
+  :host([variant="minimal"]) ::slotted([data-ui-orbiter-center]) {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+    padding: 0;
+  }
+
+  :host([paused]) ::slotted([data-ui-orbiter-item]),
+  :host([pause-on-hover]:hover) ::slotted([data-ui-orbiter-item]),
+  :host([pause-on-item-hover][data-item-hovered="true"]) ::slotted([data-ui-orbiter-item]),
+  :host([pause-on-focus]:focus-within) ::slotted([data-ui-orbiter-item]) {
+    animation-play-state: paused;
+  }
+
+  @keyframes ui-orbiter-orbit {
+    from {
+      transform:
+        translate(-50%, -50%)
+        rotate(var(--ui-orbit-start-angle, 0deg))
+        translateX(var(--ui-orbit-radius, var(--ui-orbiter-orbit-radius)))
+        rotate(var(--ui-orbit-start-angle-inverse, 0deg));
+    }
+    25% {
+      transform:
+        translate(-50%, -50%)
+        rotate(var(--ui-orbit-quarter-angle, 90deg))
+        translateX(var(--ui-orbit-radius, var(--ui-orbiter-orbit-radius)))
+        rotate(var(--ui-orbit-quarter-angle-inverse, -90deg));
+    }
+    50% {
+      transform:
+        translate(-50%, -50%)
+        rotate(var(--ui-orbit-half-angle, 180deg))
+        translateX(var(--ui-orbit-radius, var(--ui-orbiter-orbit-radius)))
+        rotate(var(--ui-orbit-half-angle-inverse, -180deg));
+    }
+    75% {
+      transform:
+        translate(-50%, -50%)
+        rotate(var(--ui-orbit-three-quarter-angle, 270deg))
+        translateX(var(--ui-orbit-radius, var(--ui-orbiter-orbit-radius)))
+        rotate(var(--ui-orbit-three-quarter-angle-inverse, -270deg));
+    }
+    to {
+      transform:
+        translate(-50%, -50%)
+        rotate(var(--ui-orbit-end-angle, 360deg))
+        translateX(var(--ui-orbit-radius, var(--ui-orbiter-orbit-radius)))
+        rotate(var(--ui-orbit-end-angle-inverse, -360deg));
+    }
+  }
+
+  :host(:focus-visible) .surface {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-orbiter-focus-ring) 24%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-orbiter-focus-ring) 18%, transparent),
+      var(--ui-orbiter-shadow);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted([data-ui-orbiter-item]) {
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .surface,
+    ::slotted([data-ui-orbiter-item]),
+    ::slotted([data-ui-orbiter-center]) {
+      box-shadow: none;
+    }
+
+    .surface {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-orbiter-bg: Canvas;
+      --ui-orbiter-color: CanvasText;
+      --ui-orbiter-border-color: CanvasText;
+      --ui-orbiter-shadow: none;
+      --ui-orbiter-item-bg: Canvas;
+      --ui-orbiter-item-border: 1px solid CanvasText;
+      --ui-orbiter-item-color: CanvasText;
+      --ui-orbiter-item-shadow: none;
+      --ui-orbiter-center-bg: Canvas;
+      --ui-orbiter-center-border: 1px solid CanvasText;
+      --ui-orbiter-center-shadow: none;
+      --ui-orbiter-path-color: CanvasText;
+    }
+
+    .surface,
+    .path,
+    ::slotted([data-ui-orbiter-item]),
+    ::slotted([data-ui-orbiter-center]) {
+      forced-color-adjust: none;
+    }
+  }
+`;
+function d(i, t) {
+  if (i == null || i === "")
+    return t;
+  const e = i.trim();
+  if (!e)
+    return t;
+  const a = e.split(/\s+/).filter(Boolean);
+  return a.length ? a.map((n) => /^-?\d+(\.\d+)?$/.test(n) ? `${n}px` : n).join(" ") : t;
+}
+function M(i, t) {
+  if (i == null || i === "")
+    return t;
+  const e = i.trim();
+  return e ? /^-?\d+(\.\d+)?(ms|s)$/i.test(e) ? e : /^-?\d+(\.\d+)?$/i.test(e) ? `${e}s` : t : t;
+}
+function q(i, t) {
+  if (i == null || i === "")
+    return t;
+  const e = i.trim();
+  return e ? /^-?\d+(\.\d+)?ms$/i.test(e) ? Number.parseFloat(e) : /^-?\d+(\.\d+)?s$/i.test(e) || /^-?\d+(\.\d+)?$/i.test(e) ? Number.parseFloat(e) * 1e3 : t : t;
+}
+function g(i, t) {
+  if (i == null || i === "")
+    return t;
+  const e = Number.parseFloat(i);
+  return Number.isFinite(e) ? e : t;
+}
+function z(i, t) {
+  const e = g(i, t);
+  return Number.isFinite(e) && e > 0 ? e : t;
+}
+function O(i, t) {
+  if (i == null)
+    return t;
+  const e = i.trim().toLowerCase();
+  return e ? e === "false" || e === "0" || e === "off" || e === "no" ? !1 : e === "true" || e === "1" || e === "on" || e === "yes" ? !0 : t : !0;
+}
+function y(i, t) {
+  return `translate(-50%, -50%) rotate(${i}deg) translateX(${t}) rotate(${-i}deg)`;
+}
+function P(i) {
+  const t = Math.round(g(i, 1));
+  return Math.min(X, Math.max(1, t || 1));
+}
+class Q extends U {
+  constructor() {
+    super(), this._itemSlot = null, this._centerSlot = null, this._pathsEl = null, this._items = [], this._centerNodes = [], this._animations = /* @__PURE__ */ new Map(), this._hovering = !1, this._itemHovering = !1, this._focusWithin = !1, this._itemHoverHandlers = /* @__PURE__ */ new WeakMap(), this._boundSlotChange = this._handleSlotChange.bind(this), this._boundPointerEnter = () => {
+      this._hovering = !0, this._syncState();
+    }, this._boundPointerLeave = () => {
+      this._hovering = !1, this._syncState();
+    }, this._boundFocusIn = () => {
+      this._focusWithin = !0, this._syncState();
+    }, this._boundFocusOut = () => {
+      this._focusWithin = this.matches(":focus-within"), this._syncState();
+    }, this.addEventListener("pointerenter", this._boundPointerEnter), this.addEventListener("pointerleave", this._boundPointerLeave), this.addEventListener("focusin", this._boundFocusIn), this.addEventListener("focusout", this._boundFocusOut);
+  }
+  static get observedAttributes() {
+    return [
+      "duration",
+      "delay",
+      "speed",
+      "reverse",
+      "radius",
+      "orbit-radius",
+      "icon-size",
+      "item-size",
+      "center-size",
+      "ring-gap",
+      "rings",
+      "start-angle",
+      "direction",
+      "animation",
+      "variant",
+      "tone",
+      "size",
+      "surface-radius",
+      "elevation",
+      "padding",
+      "path",
+      "show-paths",
+      "pause-on-hover",
+      "pause-on-item-hover",
+      "pause-on-focus",
+      "paused"
+    ];
+  }
+  play() {
+    this.hasAttribute("paused") && this.removeAttribute("paused"), this._syncState();
+  }
+  pause() {
+    this.hasAttribute("paused") || this.setAttribute("paused", ""), this._syncState();
+  }
+  refresh() {
+    this._syncRuntimeStyles(), this._syncItems(), this._renderPaths(), this._syncAnimations(), this._syncState();
+  }
+  disconnectedCallback() {
+    this._cancelAllAnimations(), this._hovering = !1, this._itemHovering = !1, this._focusWithin = !1, super.disconnectedCallback();
+  }
+  render() {
+    var t, e;
+    this.setContent(`
+      <style>${Z}</style>
+      <div class="root" part="root">
+        <div class="surface" part="surface">
+          <div class="stage" part="stage">
+            <div class="paths" part="paths"></div>
+            <div class="center-shell" part="center">
+              <slot name="center"></slot>
+            </div>
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `), this._itemSlot = this.root.querySelector("slot:not([name])"), this._centerSlot = this.root.querySelector('slot[name="center"]'), this._pathsEl = this.root.querySelector(".paths"), (t = this._itemSlot) == null || t.addEventListener("slotchange", this._boundSlotChange), (e = this._centerSlot) == null || e.addEventListener("slotchange", this._boundSlotChange), this._syncRuntimeStyles(), this._syncItems(), this._renderPaths(), this._syncAnimations(), this._syncState();
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  attributeChangedCallback(t, e, a) {
+    if (!(e === a || !this.isConnected)) {
+      if (t === "paused") {
+        this._syncState();
+        return;
+      }
+      this._syncRuntimeStyles(), t === "orbit-radius" || t === "radius" || t === "icon-size" || t === "item-size" || t === "center-size" || t === "ring-gap" || t === "rings" || t === "start-angle" || t === "direction" || t === "reverse" || t === "size" ? (this._syncItems(), this._renderPaths(), this._syncAnimations()) : (t === "duration" || t === "delay" || t === "speed" || t === "animation") && this._syncAnimations(), this._syncState();
+    }
+  }
+  _handleSlotChange() {
+    this._syncItems(), this._renderPaths(), this._syncAnimations(), this._syncState();
+  }
+  _itemsFromSlot() {
+    return this._itemSlot ? this._itemSlot.assignedElements({ flatten: !0 }).filter((t) => t instanceof HTMLElement) : [];
+  }
+  _centerFromSlot() {
+    return this._centerSlot ? this._centerSlot.assignedElements({ flatten: !0 }).filter((t) => t instanceof HTMLElement) : [];
+  }
+  _syncItems() {
+    const t = this._itemsFromSlot(), e = this._centerFromSlot(), a = new Set(t), n = new Set(e);
+    for (const r of this._items)
+      a.has(r) || (this._unbindItemHover(r), this._cancelAnimation(r), r.removeAttribute("data-ui-orbiter-managed"), r.removeAttribute("data-ui-orbit-runtime"), r.style.removeProperty("--ui-orbit-index"), r.style.removeProperty("--ui-orbit-ring"), r.style.removeProperty("--ui-orbit-radius"), r.style.removeProperty("--ui-orbit-start-angle"), r.style.removeProperty("--ui-orbit-quarter-angle"), r.style.removeProperty("--ui-orbit-half-angle"), r.style.removeProperty("--ui-orbit-three-quarter-angle"), r.style.removeProperty("--ui-orbit-end-angle"), r.style.removeProperty("--ui-orbit-start-angle-inverse"), r.style.removeProperty("--ui-orbit-quarter-angle-inverse"), r.style.removeProperty("--ui-orbit-half-angle-inverse"), r.style.removeProperty("--ui-orbit-three-quarter-angle-inverse"), r.style.removeProperty("--ui-orbit-end-angle-inverse"), r.style.removeProperty("--ui-orbit-duration"), r.style.removeProperty("--ui-orbit-duration-scale"), r.style.removeProperty("animation"), r.style.removeProperty("transform"), r.hasAttribute("data-ui-orbiter-owned") && (r.removeAttribute("data-ui-orbiter-item"), r.removeAttribute("data-ui-orbiter-owned")));
+    for (const r of this._centerNodes)
+      n.has(r) || (r.removeAttribute("data-ui-orbiter-managed"), r.hasAttribute("data-ui-orbiter-owned") && (r.removeAttribute("data-ui-orbiter-center"), r.removeAttribute("data-ui-orbiter-owned")));
+    e.forEach((r) => {
+      r.setAttribute("data-ui-orbiter-managed", ""), r.hasAttribute("data-ui-orbiter-center") || (r.setAttribute("data-ui-orbiter-center", ""), r.setAttribute("data-ui-orbiter-owned", "")), r.setAttribute("slot", "center");
+    });
+    const u = P(this.getAttribute("rings")), b = d(this._orbitRadiusValue(), this._sizePreset().orbitRadius), h = d(this.getAttribute("ring-gap"), this._sizePreset().ringGap), o = g(this.getAttribute("start-angle"), N), l = Array.from({ length: u }, () => []);
+    t.forEach((r, c) => {
+      r.setAttribute("data-ui-orbiter-managed", ""), r.hasAttribute("data-ui-orbiter-item") || (r.setAttribute("data-ui-orbiter-item", ""), r.setAttribute("data-ui-orbiter-owned", "")), this._bindItemHover(r), l[c % u].push({ item: r, index: c });
+    }), l.forEach((r, c) => {
+      const f = r.length ? 360 / r.length : 360, x = r.length > 1 && c % 2 === 1 ? f / 2 : 0, p = c === 0 ? b : `calc(${b} + ${c} * ${h})`, v = 360 * this._directionSign(c);
+      r.forEach(({ item: s, index: S }, G) => {
+        const m = o + x + G * f, k = m + v, I = m + v * 0.25, L = m + v * 0.5, H = m + v * 0.75, C = 1 + c * 0.14;
+        s.style.setProperty("--ui-orbit-index", String(S)), s.style.setProperty("--ui-orbit-ring", String(c)), s.style.setProperty("--ui-orbit-radius", p), s.style.setProperty("--ui-orbit-duration", `calc(var(--ui-orbiter-duration) * ${C})`), s.style.setProperty("--ui-orbit-duration-scale", String(C)), s.style.setProperty("--ui-orbit-start-angle", `${m}deg`), s.style.setProperty("--ui-orbit-quarter-angle", `${I}deg`), s.style.setProperty("--ui-orbit-half-angle", `${L}deg`), s.style.setProperty("--ui-orbit-three-quarter-angle", `${H}deg`), s.style.setProperty("--ui-orbit-end-angle", `${k}deg`), s.style.setProperty("--ui-orbit-start-angle-inverse", `${-m}deg`), s.style.setProperty("--ui-orbit-quarter-angle-inverse", `${-I}deg`), s.style.setProperty("--ui-orbit-half-angle-inverse", `${-L}deg`), s.style.setProperty("--ui-orbit-three-quarter-angle-inverse", `${-H}deg`), s.style.setProperty("--ui-orbit-end-angle-inverse", `${-k}deg`), s.style.setProperty("transform", y(m, p));
+      });
+    }), this._items = t, this._centerNodes = e, this._itemHovering = this._items.some((r) => r.matches(":hover")), this.setAttribute("data-item-count", String(this._items.length)), this.setAttribute("data-center-count", String(this._centerNodes.length)), this.setAttribute("data-ring-count", String(u));
+  }
+  _renderPaths() {
+    if (!this._pathsEl)
+      return;
+    const t = P(this.getAttribute("rings")), e = d(this._orbitRadiusValue(), this._sizePreset().orbitRadius), a = d(this.getAttribute("ring-gap"), this._sizePreset().ringGap), n = Array.from({ length: t }, (u, b) => {
+      const h = b === 0 ? e : `calc(${e} + ${b} * ${a})`;
+      return `<div class="path" part="path path-${b + 1}" style="inline-size:calc(2 * (${h}));block-size:calc(2 * (${h}));"></div>`;
+    }).join("");
+    this._pathsEl.innerHTML = n, this._pathsEl.toggleAttribute("hidden", !this._pathVisible());
+  }
+  _bindItemHover(t) {
+    if (this._itemHoverHandlers.has(t))
+      return;
+    const e = () => {
+      this._itemHovering = !0, this._syncState();
+    }, a = (n) => {
+      const u = n.relatedTarget instanceof HTMLElement ? n.relatedTarget : null, b = u == null ? void 0 : u.closest("[data-ui-orbiter-item]");
+      this._itemHovering = b instanceof HTMLElement ? this._items.includes(b) : !1, this._syncState();
+    };
+    t.addEventListener("pointerenter", e), t.addEventListener("pointerleave", a), this._itemHoverHandlers.set(t, { enter: e, leave: a });
+  }
+  _unbindItemHover(t) {
+    const e = this._itemHoverHandlers.get(t);
+    e && (t.removeEventListener("pointerenter", e.enter), t.removeEventListener("pointerleave", e.leave), this._itemHoverHandlers.delete(t));
+  }
+  _sizePreset() {
+    switch (this.getAttribute("size")) {
+      case "xs":
+      case "0":
+        return _.xs;
+      case "sm":
+      case "1":
+        return _.sm;
+      case "lg":
+      case "3":
+        return _.lg;
+      case "xl":
+      case "4":
+        return _.xl;
+      case "md":
+      case "2":
+      default:
+        return _.md;
+    }
+  }
+  _motionPreset() {
+    const t = this.getAttribute("animation");
+    return t && j.has(t) ? F[t] : F.smooth;
+  }
+  _direction() {
+    const t = this.getAttribute("direction");
+    return t && W.has(t) ? t : "clockwise";
+  }
+  _directionSign(t) {
+    const e = this._direction();
+    let a = e === "counterclockwise" || e === "alternate" && t % 2 === 1 ? -1 : 1;
+    return O(this.getAttribute("reverse"), this.hasAttribute("reverse")) && (a *= -1), a;
+  }
+  _pathVisible() {
+    const t = this.getAttribute("path");
+    return t != null ? O(t, !0) : (this.hasAttribute("show-paths"), !0);
+  }
+  _orbitRadiusValue() {
+    return this.getAttribute("radius") ?? this.getAttribute("orbit-radius");
+  }
+  _iconSizeValue() {
+    return this.getAttribute("icon-size") ?? this.getAttribute("item-size");
+  }
+  _syncRuntimeStyles() {
+    const t = this._sizePreset(), e = this._motionPreset(), a = M(this.getAttribute("duration"), V), n = M(this.getAttribute("delay"), D), u = d(this._orbitRadiusValue(), t.orbitRadius), b = d(this._iconSizeValue(), t.itemSize), h = d(this.getAttribute("center-size"), t.centerSize), o = d(this.getAttribute("ring-gap"), t.ringGap), l = d(this.getAttribute("padding"), t.padding), r = P(this.getAttribute("rings")), c = z(this.getAttribute("speed"), 1), f = r <= 1 ? u : `calc(${u} + ${r - 1} * ${o})`, x = `calc((2 * (${f})) + ${b})`;
+    this.style.setProperty("--ui-orbiter-duration", `calc((${a}) * ${e.durationScale} / ${c})`), this.style.setProperty("--ui-orbiter-delay", n), this.style.setProperty("--ui-orbiter-orbit-radius", u), this.style.setProperty("--ui-orbiter-item-size", b), this.style.setProperty("--ui-orbiter-center-size", h), this.style.setProperty("--ui-orbiter-ring-gap", o), this.style.setProperty("--ui-orbiter-padding", l), this.style.setProperty("--ui-orbiter-farthest-radius", f), this.style.setProperty("--ui-orbiter-stage-size", x), this.style.setProperty("--ui-orbiter-path-opacity", String(e.accentOpacity > 0.18 ? 1 : 0.95));
+    const p = this.getAttribute("surface-radius");
+    !p || B.has(p.trim()) ? this.style.removeProperty("--ui-orbiter-radius") : this.style.setProperty("--ui-orbiter-radius", d(p, t.panelRadius));
+  }
+  _syncAnimations() {
+    var h;
+    const t = this._items, e = new Set(t);
+    for (const [o, l] of this._animations.entries())
+      e.has(o) || (l.cancel(), this._animations.delete(o));
+    if (typeof window < "u" && ((h = window.matchMedia) != null && h.call(window, "(prefers-reduced-motion: reduce)").matches)) {
+      this._cancelAllAnimations(), t.forEach((o) => o.removeAttribute("data-ui-orbit-runtime"));
+      return;
+    }
+    if (typeof HTMLElement > "u" || typeof HTMLElement.prototype.animate != "function") {
+      t.forEach((o) => o.removeAttribute("data-ui-orbit-runtime"));
+      return;
+    }
+    const a = this._motionPreset(), n = q(this.getAttribute("duration"), 18e3), u = q(this.getAttribute("delay"), 0), b = z(this.getAttribute("speed"), 1);
+    for (const o of t) {
+      const l = o.style.getPropertyValue("--ui-orbit-radius") || "var(--ui-orbiter-orbit-radius)", r = g(o.style.getPropertyValue("--ui-orbit-start-angle"), N), c = g(o.style.getPropertyValue("--ui-orbit-quarter-angle"), r + 90), f = g(o.style.getPropertyValue("--ui-orbit-half-angle"), r + 180), x = g(o.style.getPropertyValue("--ui-orbit-three-quarter-angle"), r + 270), p = g(o.style.getPropertyValue("--ui-orbit-end-angle"), r + 360), T = z(o.style.getPropertyValue("--ui-orbit-duration-scale"), 1), v = n * a.durationScale * T / b, s = this._animations.get(o);
+      s == null || s.cancel(), o.setAttribute("data-ui-orbit-runtime", "");
+      const S = o.animate(
+        [
+          { transform: y(r, l), offset: 0 },
+          { transform: y(c, l), offset: 0.25 },
+          { transform: y(f, l), offset: 0.5 },
+          { transform: y(x, l), offset: 0.75 },
+          { transform: y(p, l), offset: 1 }
+        ],
+        {
+          duration: Math.max(1, v),
+          delay: Math.max(0, u),
+          easing: "linear",
+          iterations: Number.POSITIVE_INFINITY,
+          fill: "both"
+        }
+      );
+      this._animations.set(o, S);
+    }
+  }
+  _cancelAnimation(t) {
+    const e = this._animations.get(t);
+    t.removeAttribute("data-ui-orbit-runtime"), e && (e.cancel(), this._animations.delete(t));
+  }
+  _cancelAllAnimations() {
+    for (const t of this._animations.values())
+      t.cancel();
+    this._animations.clear(), this._items.forEach((t) => {
+      t.removeAttribute("data-ui-orbit-runtime"), this._unbindItemHover(t);
+    });
+  }
+  _effectivePaused() {
+    return !!(this.hasAttribute("paused") || this.hasAttribute("pause-on-hover") && this._hovering || this.hasAttribute("pause-on-item-hover") && this._itemHovering || this.hasAttribute("pause-on-focus") && this._focusWithin);
+  }
+  _syncState() {
+    const t = this._effectivePaused() ? "paused" : "running";
+    this.setAttribute("data-state", t), this.setAttribute("data-path-visible", this._pathVisible() ? "true" : "false"), this.setAttribute("data-item-hovered", this._itemHovering ? "true" : "false");
+    for (const e of this._animations.values())
+      t === "paused" ? e.pause() : e.play();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-orbiter") && customElements.define("ui-orbiter", Q);
+export {
+  Q as UIOrbiter
+};