@editora/ui-core 0.1.9 → 0.1.12

package/dist/orbiter.cjs.js

@@ -0,0 +1,495 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-1b301e7f.js"),V="18s",D="0s",A="88px",w="44px",E="128px",$="28px",R="20px",M=-90,X=6,W=new Set(["none","sm","md","lg","full"]),j=new Set(["clockwise","counterclockwise","alternate"]),Z=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"}},N={calm:{durationScale:1.28,accentOpacity:.12},smooth:{durationScale:1,accentOpacity:.16},snappy:{durationScale:.82,accentOpacity:.18},bouncy:{durationScale:.92,accentOpacity:.22}},Q=`
+  :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 F(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 G extends B.ElementBase{constructor(){super(),this._itemSlot=null,this._centerSlot=null,this._pathsEl=null,this._items=[],this._centerNodes=[],this._animations=new Map,this._hovering=!1,this._itemHovering=!1,this._focusWithin=!1,this._itemHoverHandlers=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>${Q}</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"),M),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},U)=>{const m=o+x+U*f,k=m+v,I=m+v*.25,L=m+v*.5,H=m+v*.75,C=1+c*.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&&Z.has(t)?N[t]:N.smooth}_direction(){const t=this.getAttribute("direction");return t&&j.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=F(this.getAttribute("duration"),V),n=F(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>.18?1:.95));const p=this.getAttribute("surface-radius");!p||W.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"),M),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:.25},{transform:y(f,l),offset:.5},{transform:y(x,l),offset:.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",G);exports.UIOrbiter=G;