@editora/ui-core 0.1.9 → 0.1.10

package/dist/icon-cloud.cjs.js

@@ -0,0 +1,495 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-1b301e7f.js"),z="920px",x=.86,R=1,$="20px",S="118px",E="40px",A="118px",N="30px",D=new Set(["clockwise","counterclockwise"]),I=new Set(["surface","soft","solid","glass","contrast","minimal"]),X=new Set(["brand","neutral","info","success","warning","danger"]),Y=new Set(["sm","md","lg","xl","1","2","3","4"]),q=new Set(["none","low","high"]),c={sm:{radius:"90px",radiusPx:90,itemSize:"32px",itemSizePx:32,centerSize:"84px",padding:"14px",shellRadius:"24px"},md:{radius:S,radiusPx:118,itemSize:E,itemSizePx:40,centerSize:A,padding:"18px",shellRadius:"28px"},lg:{radius:"140px",radiusPx:140,itemSize:"46px",itemSizePx:46,centerSize:"132px",padding:"22px",shellRadius:"32px"},xl:{radius:"164px",radiusPx:164,itemSize:"54px",itemSizePx:54,centerSize:"152px",padding:"26px",shellRadius:"36px"}},U=`
+  :host {
+    --ui-icon-cloud-radius: ${S};
+    --ui-icon-cloud-item-size: ${E};
+    --ui-icon-cloud-center-size: ${A};
+    --ui-icon-cloud-padding: ${$};
+    --ui-icon-cloud-perspective: ${z};
+    --ui-icon-cloud-depth: ${x};
+    --ui-icon-cloud-shell-radius: ${N};
+    --ui-icon-cloud-tilt-x: 0deg;
+    --ui-icon-cloud-tilt-y: 0deg;
+    --ui-icon-cloud-fit-scale: 1;
+    --ui-icon-cloud-fit-inline-size: auto;
+    --ui-icon-cloud-fit-block-size: auto;
+    --ui-icon-cloud-stage-size:
+      calc((var(--ui-icon-cloud-radius) * 2) + var(--ui-icon-cloud-item-size));
+    --ui-icon-cloud-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-icon-cloud-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) 88%, transparent) 100%
+      );
+    --ui-icon-cloud-color: var(--ui-color-text, #0f172a);
+    --ui-icon-cloud-border-color:
+      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 84%, transparent);
+    --ui-icon-cloud-border: 1px solid var(--ui-icon-cloud-border-color);
+    --ui-icon-cloud-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-icon-cloud-backdrop: none;
+    --ui-icon-cloud-grid-color:
+      color-mix(in srgb, var(--ui-icon-cloud-accent) 16%, var(--ui-icon-cloud-border-color));
+    --ui-icon-cloud-item-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #ffffff 96%, transparent),
+        color-mix(in srgb, var(--ui-icon-cloud-accent) 8%, rgba(255, 255, 255, 0.92))
+      );
+    --ui-icon-cloud-item-border:
+      1px solid color-mix(in srgb, var(--ui-icon-cloud-accent) 12%, rgba(255, 255, 255, 0.82));
+    --ui-icon-cloud-item-color: var(--ui-icon-cloud-color);
+    --ui-icon-cloud-item-shadow:
+      0 8px 16px rgba(15, 23, 42, 0.08),
+      0 1px 2px rgba(15, 23, 42, 0.05);
+    --ui-icon-cloud-item-backdrop: none;
+    --ui-icon-cloud-item-radius: 14px;
+    --ui-icon-cloud-center-bg:
+      radial-gradient(
+        circle at 50% 35%,
+        color-mix(in srgb, #ffffff 92%, transparent) 0%,
+        color-mix(in srgb, var(--ui-icon-cloud-accent) 12%, rgba(255, 255, 255, 0.94)) 100%
+      );
+    --ui-icon-cloud-center-border:
+      1px solid color-mix(in srgb, var(--ui-icon-cloud-accent) 20%, rgba(255, 255, 255, 0.84));
+    --ui-icon-cloud-center-shadow:
+      0 12px 28px rgba(15, 23, 42, 0.14),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    --ui-icon-cloud-center-backdrop: none;
+    --ui-icon-cloud-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+
+    display: inline-block;
+    min-inline-size: 0;
+    color: var(--ui-icon-cloud-color);
+    color-scheme: light dark;
+    font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([auto-fit]) {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-icon-cloud-radius: ${c.sm.radius};
+    --ui-icon-cloud-item-size: ${c.sm.itemSize};
+    --ui-icon-cloud-center-size: ${c.sm.centerSize};
+    --ui-icon-cloud-padding: ${c.sm.padding};
+    --ui-icon-cloud-shell-radius: ${c.sm.shellRadius};
+    --ui-icon-cloud-item-radius: 12px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-icon-cloud-radius: ${c.md.radius};
+    --ui-icon-cloud-item-size: ${c.md.itemSize};
+    --ui-icon-cloud-center-size: ${c.md.centerSize};
+    --ui-icon-cloud-padding: ${c.md.padding};
+    --ui-icon-cloud-shell-radius: ${c.md.shellRadius};
+    --ui-icon-cloud-item-radius: 14px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-icon-cloud-radius: ${c.lg.radius};
+    --ui-icon-cloud-item-size: ${c.lg.itemSize};
+    --ui-icon-cloud-center-size: ${c.lg.centerSize};
+    --ui-icon-cloud-padding: ${c.lg.padding};
+    --ui-icon-cloud-shell-radius: ${c.lg.shellRadius};
+    --ui-icon-cloud-item-radius: 16px;
+  }
+
+  :host([size="xl"]),
+  :host([size="4"]) {
+    --ui-icon-cloud-radius: ${c.xl.radius};
+    --ui-icon-cloud-item-size: ${c.xl.itemSize};
+    --ui-icon-cloud-center-size: ${c.xl.centerSize};
+    --ui-icon-cloud-padding: ${c.xl.padding};
+    --ui-icon-cloud-shell-radius: ${c.xl.shellRadius};
+    --ui-icon-cloud-item-radius: 18px;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-icon-cloud-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-icon-cloud-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-icon-cloud-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-icon-cloud-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-icon-cloud-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-icon-cloud-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-icon-cloud-accent) 10%, var(--ui-color-surface, #ffffff)) 0%,
+        color-mix(in srgb, var(--ui-icon-cloud-accent) 4%, var(--ui-color-surface, #ffffff)) 100%
+      );
+    --ui-icon-cloud-shadow: none;
+    --ui-icon-cloud-item-shadow: none;
+    --ui-icon-cloud-center-shadow: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-icon-cloud-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, var(--ui-icon-cloud-accent) 12%, var(--ui-color-surface, #ffffff)) 0%,
+        color-mix(in srgb, var(--ui-icon-cloud-accent) 4%, var(--ui-color-surface-elevated, #f8fafc)) 100%
+      );
+    --ui-icon-cloud-grid-color:
+      color-mix(in srgb, var(--ui-icon-cloud-accent) 24%, var(--ui-icon-cloud-border-color));
+  }
+
+  :host([variant="glass"]) {
+    --ui-icon-cloud-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-icon-cloud-backdrop: blur(18px) saturate(1.08);
+    --ui-icon-cloud-item-backdrop: blur(10px) saturate(1.04);
+    --ui-icon-cloud-center-backdrop: blur(14px) saturate(1.06);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-icon-cloud-bg:
+      radial-gradient(
+        circle at 50% 50%,
+        color-mix(in srgb, #0b1f3f 92%, var(--ui-icon-cloud-accent) 8%) 0%,
+        color-mix(in srgb, #07162d 96%, var(--ui-icon-cloud-accent) 4%) 100%
+      );
+    --ui-icon-cloud-color: #f8fbff;
+    --ui-icon-cloud-border-color: color-mix(in srgb, #9ec5ff 18%, transparent);
+    --ui-icon-cloud-item-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-icon-cloud-item-border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
+    --ui-icon-cloud-item-color: #f8fbff;
+    --ui-icon-cloud-center-bg: color-mix(in srgb, #ffffff 8%, transparent);
+    --ui-icon-cloud-center-border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-icon-cloud-shadow: 0 28px 56px rgba(2, 6, 23, 0.34);
+    --ui-icon-cloud-item-shadow: 0 12px 24px rgba(2, 6, 23, 0.22);
+    --ui-icon-cloud-center-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
+    --ui-icon-cloud-grid-color: color-mix(in srgb, #ffffff 18%, transparent);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-icon-cloud-bg: transparent;
+    --ui-icon-cloud-border: none;
+    --ui-icon-cloud-shadow: none;
+    --ui-icon-cloud-item-bg: transparent;
+    --ui-icon-cloud-item-border: 1px solid transparent;
+    --ui-icon-cloud-item-shadow: none;
+    --ui-icon-cloud-center-bg: transparent;
+    --ui-icon-cloud-center-border: 1px solid transparent;
+    --ui-icon-cloud-center-shadow: none;
+  }
+
+  :host([elevation="none"]) {
+    --ui-icon-cloud-shadow: none;
+    --ui-icon-cloud-item-shadow: none;
+    --ui-icon-cloud-center-shadow: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-icon-cloud-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 34px 64px rgba(15, 23, 42, 0.18);
+    --ui-icon-cloud-item-shadow:
+      0 10px 18px rgba(15, 23, 42, 0.12),
+      0 2px 4px rgba(15, 23, 42, 0.08);
+    --ui-icon-cloud-center-shadow:
+      0 18px 34px rgba(15, 23, 42, 0.16),
+      inset 0 1px 0 rgba(255, 255, 255, 0.42);
+  }
+
+  .root {
+    display: grid;
+    justify-items: center;
+    min-inline-size: 0;
+    inline-size: 100%;
+  }
+
+  .frame {
+    display: grid;
+    place-items: center;
+    inline-size: var(--ui-icon-cloud-fit-inline-size);
+    block-size: var(--ui-icon-cloud-fit-block-size);
+    min-inline-size: 0;
+  }
+
+  .surface {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: fit-content;
+    min-inline-size: 0;
+    padding: var(--ui-icon-cloud-padding);
+    border-radius: var(--ui-icon-cloud-shell-radius);
+    border: var(--ui-icon-cloud-border);
+    background: var(--ui-icon-cloud-bg);
+    color: var(--ui-icon-cloud-color);
+    box-shadow: var(--ui-icon-cloud-shadow);
+    backdrop-filter: var(--ui-icon-cloud-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;
+    overflow: visible;
+    transform: scale(var(--ui-icon-cloud-fit-scale));
+    transform-origin: center;
+  }
+
+  .stage {
+    position: relative;
+    inline-size: var(--ui-icon-cloud-stage-size);
+    block-size: var(--ui-icon-cloud-stage-size);
+    min-inline-size: 0;
+    isolation: isolate;
+    overflow: visible;
+    perspective: var(--ui-icon-cloud-perspective);
+    perspective-origin: 50% 50%;
+    transform-style: preserve-3d;
+  }
+
+  .stage::before {
+    content: "";
+    position: absolute;
+    inset-inline: 14%;
+    inset-block-end: 4%;
+    block-size: 18%;
+    border-radius: 999px;
+    background:
+      radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0.04) 62%, transparent 78%);
+    filter: blur(18px);
+    opacity: 0.9;
+    transform: translateZ(-120px) rotateX(78deg) scaleX(1.06);
+    transform-origin: center;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .guides,
+  .slots {
+    position: absolute;
+    inset: 0;
+    transform-style: preserve-3d;
+  }
+
+  .guide {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-icon-cloud-grid-color) 70%, transparent);
+    box-sizing: border-box;
+    transform-style: preserve-3d;
+    pointer-events: none;
+  }
+
+  .guide--outer {
+    inline-size: calc(var(--ui-icon-cloud-radius) * 2);
+    block-size: calc(var(--ui-icon-cloud-radius) * 2);
+    opacity: 0.95;
+    transform:
+      translate(-50%, -50%)
+      rotateX(calc(72deg + (var(--ui-icon-cloud-tilt-x) * 0.6)))
+      rotateZ(calc(var(--ui-icon-cloud-tilt-y) * 0.35));
+  }
+
+  .guide--middle {
+    inline-size: calc(var(--ui-icon-cloud-radius) * 1.48);
+    block-size: calc(var(--ui-icon-cloud-radius) * 1.48);
+    opacity: 0.82;
+    transform:
+      translate(-50%, -50%)
+      rotateY(90deg)
+      rotateX(calc(72deg - (var(--ui-icon-cloud-tilt-y) * 0.55)))
+      rotateZ(calc(var(--ui-icon-cloud-tilt-x) * -0.4));
+  }
+
+  .glow {
+    position: absolute;
+    inset: 12%;
+    border-radius: 999px;
+    background:
+      radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ui-icon-cloud-accent) 12%, transparent), transparent 64%);
+    filter: blur(18px);
+    opacity: 0.82;
+    transform:
+      translateZ(-42px)
+      rotateX(calc(64deg + (var(--ui-icon-cloud-tilt-x) * 0.5)))
+      rotateZ(calc(var(--ui-icon-cloud-tilt-y) * 0.25))
+      scale(1.08);
+    transform-origin: center;
+    pointer-events: none;
+  }
+
+  slot {
+    display: contents;
+  }
+
+  ::slotted([data-ui-icon-cloud-center]) {
+    position: absolute !important;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: var(--ui-icon-cloud-center-size);
+    block-size: var(--ui-icon-cloud-center-size);
+    transform:
+      translate(-50%, -50%)
+      translateZ(52px)
+      rotateX(calc(var(--ui-icon-cloud-tilt-x) * -0.18))
+      rotateY(calc(var(--ui-icon-cloud-tilt-y) * -0.18));
+    border-radius: 999px;
+    border: var(--ui-icon-cloud-center-border);
+    background: var(--ui-icon-cloud-center-bg);
+    color: var(--ui-icon-cloud-color);
+    box-shadow: var(--ui-icon-cloud-center-shadow);
+    backdrop-filter: var(--ui-icon-cloud-center-backdrop);
+    display: grid !important;
+    place-items: center;
+    padding: 12px;
+    box-sizing: border-box;
+    text-align: center;
+    z-index: 2;
+  }
+
+  ::slotted([data-ui-icon-cloud-item]) {
+    position: absolute !important;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: var(--ui-icon-cloud-item-size);
+    block-size: var(--ui-icon-cloud-item-size);
+    border-radius: var(--ui-icon-cloud-item-radius);
+    border: var(--ui-icon-cloud-item-border);
+    background: var(--ui-icon-cloud-item-bg);
+    color: var(--ui-icon-cloud-item-color);
+    box-shadow: var(--ui-icon-cloud-item-shadow);
+    backdrop-filter: var(--ui-icon-cloud-item-backdrop);
+    display: grid !important;
+    place-items: center;
+    box-sizing: border-box;
+    padding: 0;
+    overflow: visible;
+    transform:
+      translate(-50%, -50%)
+      translate3d(var(--ui-icon-cloud-x, 0px), var(--ui-icon-cloud-y, 0px), var(--ui-icon-cloud-z, 0px))
+      rotateX(calc(var(--ui-icon-cloud-tilt-x) * -0.22))
+      rotateY(calc(var(--ui-icon-cloud-tilt-y) * -0.22))
+      scale(var(--ui-icon-cloud-scale, 1));
+    transform-origin: center;
+    opacity: var(--ui-icon-cloud-opacity, 1);
+    z-index: var(--ui-icon-cloud-z-index, 1);
+    filter: blur(var(--ui-icon-cloud-blur, 0px)) saturate(var(--ui-icon-cloud-saturation, 1));
+    will-change: transform, opacity;
+    user-select: none;
+  }
+
+  ::slotted([data-ui-icon-cloud-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-icon-cloud-clickable]:hover) {
+    filter: brightness(1.03);
+  }
+
+  ::slotted([data-ui-icon-cloud-clickable]:focus-visible) {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-icon-cloud-focus-ring) 30%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-icon-cloud-focus-ring) 20%, transparent),
+      var(--ui-icon-cloud-item-shadow);
+  }
+
+  :host(:focus-visible) .surface {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-icon-cloud-focus-ring) 24%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-icon-cloud-focus-ring) 18%, transparent),
+      var(--ui-icon-cloud-shadow);
+  }
+
+  :host([data-has-center="false"]) .guide--middle {
+    opacity: 0.52;
+  }
+
+  @media (prefers-contrast: more) {
+    .surface,
+    ::slotted([data-ui-icon-cloud-item]),
+    ::slotted([data-ui-icon-cloud-center]) {
+      box-shadow: none;
+    }
+
+    .surface {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-icon-cloud-bg: Canvas;
+      --ui-icon-cloud-color: CanvasText;
+      --ui-icon-cloud-border-color: CanvasText;
+      --ui-icon-cloud-shadow: none;
+      --ui-icon-cloud-item-bg: Canvas;
+      --ui-icon-cloud-item-border: 1px solid CanvasText;
+      --ui-icon-cloud-item-color: CanvasText;
+      --ui-icon-cloud-item-shadow: none;
+      --ui-icon-cloud-center-bg: Canvas;
+      --ui-icon-cloud-center-border: 1px solid CanvasText;
+      --ui-icon-cloud-center-shadow: none;
+      --ui-icon-cloud-grid-color: CanvasText;
+    }
+
+    .surface,
+    .guide,
+    ::slotted([data-ui-icon-cloud-item]),
+    ::slotted([data-ui-icon-cloud-center]) {
+      forced-color-adjust: none;
+    }
+  }
+`;function b(e,t){if(e==null||e==="")return t;const i=e.trim();if(!i)return t;const o=i.split(/\s+/).filter(Boolean);return o.length?o.map(n=>/^-?\d+(\.\d+)?$/.test(n)?`${n}px`:n).join(" "):t}function B(e){return e!=null&&D.has(e)?e:"clockwise"}function H(e){return e!=null&&I.has(e)?e:"surface"}function Q(e){return e!=null&&X.has(e)?e:"brand"}function Z(e){return e!=null&&q.has(e)?e:"low"}function v(e){return e==null||!Y.has(e)?"md":e==="1"?"sm":e==="2"?"md":e==="3"?"lg":e==="4"?"xl":e}function _(e,t){if(e==null||e.trim()==="")return t;const i=Number.parseFloat(e);return Number.isFinite(i)&&i>0?i:t}function p(e,t){if(e==null||e.trim()==="")return t;const i=e.trim();return/^-?\d+(\.\d+)?$/.test(i)||/^-?\d+(\.\d+)?px$/i.test(i)?Number.parseFloat(i):t}function f(e,t,i){return Math.min(i,Math.max(t,e))}function V(e){if(e<=0)return[];if(e===1)return[{x:0,y:0,z:1}];const t=[],i=Math.PI*(3-Math.sqrt(5));for(let o=0;o<e;o+=1){const r=1-o/(e-1)*2,a=Math.sqrt(Math.max(0,1-r*r)),s=i*o;t.push({x:Math.cos(s)*a,y:r,z:Math.sin(s)*a})}return t}function W(e,t,i){const o=Math.cos(i),n=Math.sin(i),r=Math.cos(t),a=Math.sin(t),s=e.x*o-e.z*n,u=e.x*n+e.z*o,l=e.y;return{x:s,y:l*r-u*a,z:l*a+u*r}}class P extends O.ElementBase{constructor(){super(),this._slotEl=null,this._centerSlotEl=null,this._items=[],this._center=null,this._points=[],this._frame=null,this._lastTimestamp=0,this._hovering=!1,this._itemHovering=!1,this._focusWithin=!1,this._autoAngleX=-.35,this._autoAngleY=.25,this._currentTiltX=0,this._currentTiltY=0,this._targetTiltX=0,this._targetTiltY=0,this._lightDomObserver=null,this._mediaQuery=null,this._resizeObserver=null,this._onSlotChange=this._onSlotChange.bind(this),this._onPointerMove=this._onPointerMove.bind(this),this._onPointerEnter=this._onPointerEnter.bind(this),this._onPointerLeave=this._onPointerLeave.bind(this),this._onPointerOver=this._onPointerOver.bind(this),this._onPointerOut=this._onPointerOut.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onLightDomMutation=this._onLightDomMutation.bind(this),this._onReducedMotionChange=this._onReducedMotionChange.bind(this),this._onResize=this._onResize.bind(this)}static get observedAttributes(){return["radius","perspective","depth","speed","direction","item-size","center-size","padding","variant","tone","size","surface-radius","elevation","interactive","auto-fit","paused","pause-on-hover","pause-on-item-hover","pause-on-focus"]}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.addEventListener("pointermove",this._onPointerMove),this.addEventListener("pointerenter",this._onPointerEnter),this.addEventListener("pointerleave",this._onPointerLeave),this.addEventListener("pointerover",this._onPointerOver),this.addEventListener("pointerout",this._onPointerOut),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),this._observeLightDom(),this._bindReducedMotion(),this._ensureResizeObserver()}disconnectedCallback(){if(this._slotEl&&(this._slotEl.removeEventListener("slotchange",this._onSlotChange),this._slotEl=null),this._centerSlotEl&&(this._centerSlotEl.removeEventListener("slotchange",this._onSlotChange),this._centerSlotEl=null),this.removeEventListener("pointermove",this._onPointerMove),this.removeEventListener("pointerenter",this._onPointerEnter),this.removeEventListener("pointerleave",this._onPointerLeave),this.removeEventListener("pointerover",this._onPointerOver),this.removeEventListener("pointerout",this._onPointerOut),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this._lightDomObserver&&(this._lightDomObserver.disconnect(),this._lightDomObserver=null),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mediaQuery){try{this._mediaQuery.removeEventListener("change",this._onReducedMotionChange)}catch{this._mediaQuery.removeListener(this._onReducedMotionChange)}this._mediaQuery=null}this._stopAnimation(),super.disconnectedCallback()}play(){this.removeAttribute("paused"),this._syncState()}pause(){this.setAttribute("paused",""),this._syncState()}refresh(){this.requestRender()}attributeChangedCallback(t,i,o){super.attributeChangedCallback(t,i,o),!(!t||i===o)&&(t==="paused"||t==="interactive"||t==="pause-on-hover"||t==="pause-on-item-hover"||t==="pause-on-focus"||t==="auto-fit"||t==="speed"||t==="direction")&&this._syncState()}render(){this.setContent(`
+      <style>${U}</style>
+      <div class="root" part="root">
+        <div class="frame" part="frame">
+          <div class="surface" part="surface">
+            <div class="stage" part="stage">
+              <div class="guides" aria-hidden="true">
+                <div class="glow"></div>
+                <div class="guide guide--outer"></div>
+                <div class="guide guide--middle"></div>
+              </div>
+              <div class="slots">
+                <slot name="center"></slot>
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `),this._bindSlots(),this._syncMetrics(),this._syncAutoFit(),this._collectChildren(),this._applyLayout(this._autoAngleX+this._currentTiltX,this._autoAngleY+this._currentTiltY),this._syncState(),this._ensureResizeObserver()}_bindSlots(){const t=this.root.querySelector("slot:not([name])"),i=this.root.querySelector('slot[name="center"]');t&&t!==this._slotEl&&(this._slotEl&&this._slotEl.removeEventListener("slotchange",this._onSlotChange),t.addEventListener("slotchange",this._onSlotChange),this._slotEl=t),i&&i!==this._centerSlotEl&&(this._centerSlotEl&&this._centerSlotEl.removeEventListener("slotchange",this._onSlotChange),i.addEventListener("slotchange",this._onSlotChange),this._centerSlotEl=i)}_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()}_onSlotChange(){this.requestRender()}_onResize(){this._syncAutoFit()}_syncMetrics(){const t=v(this.getAttribute("size")),i=c[t],o=b(this.getAttribute("radius"),i.radius),n=b(this.getAttribute("item-size"),i.itemSize),r=b(this.getAttribute("center-size"),i.centerSize),a=b(this.getAttribute("padding"),i.padding),s=b(this.getAttribute("surface-radius"),i.shellRadius),u=b(this.getAttribute("perspective"),z),l=f(_(this.getAttribute("depth"),x),.35,1.6),d=H(this.getAttribute("variant")),h=Q(this.getAttribute("tone")),g=Z(this.getAttribute("elevation"));this.style.setProperty("--ui-icon-cloud-radius",o),this.style.setProperty("--ui-icon-cloud-item-size",n),this.style.setProperty("--ui-icon-cloud-center-size",r),this.style.setProperty("--ui-icon-cloud-padding",a),this.style.setProperty("--ui-icon-cloud-perspective",u),this.style.setProperty("--ui-icon-cloud-depth",String(l)),this.style.setProperty("--ui-icon-cloud-shell-radius",s),this.style.setProperty("--ui-icon-cloud-stage-size",`calc((2 * ${o}) + ${n})`),this.setAttribute("data-variant",d),this.setAttribute("data-tone",h),this.setAttribute("data-elevation",g)}_syncAutoFit(){const t=this._autoFit();if(this.setAttribute("data-auto-fit",t?"true":"false"),!t){this.style.setProperty("--ui-icon-cloud-fit-scale","1"),this.style.setProperty("--ui-icon-cloud-fit-inline-size","auto"),this.style.setProperty("--ui-icon-cloud-fit-block-size","auto"),this.removeAttribute("data-auto-fit-scale");return}const i=v(this.getAttribute("size")),o=c[i],n=this._stageMetrics(o),r=this._paddingMetrics(o.padding),a=n.width+r.inline,s=n.height+r.block,l=this.getBoundingClientRect().width||this.clientWidth||a,d=l>0&&a>0?f(l/a,.2,1):1;this.style.setProperty("--ui-icon-cloud-fit-scale",d.toFixed(4)),this.style.setProperty("--ui-icon-cloud-fit-inline-size",`${(a*d).toFixed(2)}px`),this.style.setProperty("--ui-icon-cloud-fit-block-size",`${(s*d).toFixed(2)}px`),this.setAttribute("data-auto-fit-scale",d.toFixed(4))}_collectChildren(){var o,n;const t=(((o=this._slotEl)==null?void 0:o.assignedElements({flatten:!0}))||[]).filter(r=>r instanceof HTMLElement),i=(((n=this._centerSlotEl)==null?void 0:n.assignedElements({flatten:!0}))||[]).find(r=>r instanceof HTMLElement)||null;this._items=t,this._center=i,this._points=V(t.length),this.setAttribute("data-count",String(t.length)),this.setAttribute("data-has-center",i?"true":"false"),this.setAttribute("data-interactive",this._interactiveEnabled()?"true":"false"),i&&(i.hasAttribute("data-ui-icon-cloud-center")||i.setAttribute("data-ui-icon-cloud-center","")),t.forEach(r=>{r.hasAttribute("data-ui-icon-cloud-item")||r.setAttribute("data-ui-icon-cloud-item",""),this._isElementClickable(r)&&r.setAttribute("data-ui-icon-cloud-clickable","")})}_isElementClickable(t){return t.hasAttribute("data-ui-icon-cloud-clickable")?!0:t.tagName==="BUTTON"||t.tagName==="A"}_onPointerEnter(){this._hovering=!0,this._syncState()}_onPointerLeave(){this._hovering=!1,this._targetTiltX=0,this._targetTiltY=0,this._itemHovering=!1,this._syncState()}_onPointerMove(t){if(!this._interactiveEnabled())return;const i=this.getBoundingClientRect();if(!i.width||!i.height)return;const o=(t.clientX-i.left)/i.width*2-1,n=(t.clientY-i.top)/i.height*2-1;this._targetTiltY=f(o*.62,-.62,.62),this._targetTiltX=f(n*-.44,-.44,.44),this._ensureAnimation()}_onPointerOver(t){const i=t.target;i!=null&&i.closest("[data-ui-icon-cloud-item]")&&(this._itemHovering=!0,this._syncState())}_onPointerOut(t){const i=t.relatedTarget;i!=null&&i.closest("[data-ui-icon-cloud-item]")||(this._itemHovering=!1,this._syncState())}_onFocusIn(){this._focusWithin=!0,this._syncState()}_onFocusOut(t){const i=t.relatedTarget;this._focusWithin=!!(i&&this.contains(i)),this._syncState()}_onReducedMotionChange(){this._syncState()}_effectivePaused(){var t;return!!(this.hasAttribute("paused")||(t=this._mediaQuery)!=null&&t.matches||this.hasAttribute("pause-on-hover")&&this._hovering||this.hasAttribute("pause-on-item-hover")&&this._itemHovering||this.hasAttribute("pause-on-focus")&&this._focusWithin)}_interactiveEnabled(){return this.hasAttribute("interactive")?this.getAttribute("interactive")!=="false":!1}_autoFit(){return j(this.getAttribute("auto-fit"),!1)}_syncState(){const t=this._items.length>0&&!this._effectivePaused();this.setAttribute("data-state",this._items.length?t?"running":"paused":"idle"),this.setAttribute("data-item-hovered",this._itemHovering?"true":"false"),this.setAttribute("data-interactive",this._interactiveEnabled()?"true":"false"),t||Math.abs(this._targetTiltX-this._currentTiltX)>.002||Math.abs(this._targetTiltY-this._currentTiltY)>.002?this._ensureAnimation():(this._applyLayout(this._autoAngleX+this._currentTiltX,this._autoAngleY+this._currentTiltY),this._stopAnimation())}_ensureAnimation(){this._frame!=null||!this.isConnected||!this._items.length||(this._lastTimestamp=0,this._frame=this._requestFrame(t=>this._tick(t)))}_stopAnimation(){this._frame!=null&&(this._cancelFrame(this._frame),this._frame=null,this._lastTimestamp=0)}_tick(t){this._frame=null;const i=this._lastTimestamp||t,o=f(t-i,0,48);if(this._lastTimestamp=t,!this._effectivePaused()){const a=B(this.getAttribute("direction"))==="counterclockwise"?-1:1,s=f(_(this.getAttribute("speed"),R),.2,8);this._autoAngleY+=o*24e-5*s*a,this._autoAngleX+=o*12e-5*s*a}this._currentTiltX+=(this._targetTiltX-this._currentTiltX)*.08,this._currentTiltY+=(this._targetTiltY-this._currentTiltY)*.08,this._applyLayout(this._autoAngleX+this._currentTiltX,this._autoAngleY+this._currentTiltY),(!this._effectivePaused()||Math.abs(this._targetTiltX-this._currentTiltX)>.002||Math.abs(this._targetTiltY-this._currentTiltY)>.002)&&(this._frame=this._requestFrame(r=>this._tick(r)))}_applyLayout(t,i){const o=v(this.getAttribute("size")),n=c[o],r=p(this.style.getPropertyValue("--ui-icon-cloud-radius")||this.getAttribute("radius"),n.radiusPx),a=p(this.style.getPropertyValue("--ui-icon-cloud-perspective")||this.getAttribute("perspective"),920),s=f(_(this.style.getPropertyValue("--ui-icon-cloud-depth")||this.getAttribute("depth"),x),.35,1.6);this.style.setProperty("--ui-icon-cloud-tilt-x",`${t*180/Math.PI}deg`),this.style.setProperty("--ui-icon-cloud-tilt-y",`${i*180/Math.PI}deg`),this._items.forEach((u,l)=>{const d=this._points[l];if(!d)return;const h=W(d,t,i),g=h.z*r*s,y=a/Math.max(a-g,a*.28),w=h.x*r*y,T=h.y*r*y,m=(h.z+1)/2,F=.42+m*.8,k=.18+m*.88,M=(1-m)*2.4,L=.68+m*.5,C=10+Math.round(m*100);u.style.setProperty("--ui-icon-cloud-x",`${w.toFixed(2)}px`),u.style.setProperty("--ui-icon-cloud-y",`${T.toFixed(2)}px`),u.style.setProperty("--ui-icon-cloud-z",`${(g*.78).toFixed(2)}px`),u.style.setProperty("--ui-icon-cloud-scale",F.toFixed(3)),u.style.setProperty("--ui-icon-cloud-opacity",k.toFixed(3)),u.style.setProperty("--ui-icon-cloud-z-index",String(C)),u.style.setProperty("--ui-icon-cloud-blur",`${M.toFixed(2)}px`),u.style.setProperty("--ui-icon-cloud-saturation",L.toFixed(3)),u.style.setProperty("--ui-icon-cloud-depth-ratio",m.toFixed(3))})}_requestFrame(t){return typeof requestAnimationFrame=="function"?requestAnimationFrame(t):window.setTimeout(()=>t(performance.now()),16)}_cancelFrame(t){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(t);return}window.clearTimeout(t)}_ensureResizeObserver(){if(!this.isConnected||!this._autoFit()||typeof ResizeObserver>"u"){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null);return}this._resizeObserver?this._resizeObserver.disconnect():this._resizeObserver=new ResizeObserver(this._onResize),this._resizeObserver.observe(this)}_stageMetrics(t){const i=this.root.querySelector(".stage"),o=i?getComputedStyle(i):null,n=o?Number.parseFloat(o.width):Number.NaN,r=o?Number.parseFloat(o.height):Number.NaN,a=p(this.style.getPropertyValue("--ui-icon-cloud-radius")||this.getAttribute("radius"),t.radiusPx),s=p(this.style.getPropertyValue("--ui-icon-cloud-item-size")||this.getAttribute("item-size"),t.itemSizePx),u=a*2+s;return{width:Number.isFinite(n)&&n>0?n:u,height:Number.isFinite(r)&&r>0?r:u}}_paddingMetrics(t){const i=this.root.querySelector(".surface"),o=i?getComputedStyle(i):null,n=o?Number.parseFloat(o.paddingLeft)+Number.parseFloat(o.paddingRight):Number.NaN,r=o?Number.parseFloat(o.paddingTop)+Number.parseFloat(o.paddingBottom):Number.NaN;if(Number.isFinite(n)&&n>0&&Number.isFinite(r)&&r>0)return{inline:n,block:r};const s=b(this.getAttribute("padding"),t).split(/\s+/).filter(Boolean),u=p(t,20),l=p(s[0]||"",u),d=p(s[1]||s[0]||"",l),h=p(s[2]||s[0]||"",l),g=p(s[3]||s[1]||s[0]||"",d);return s.length===1?{inline:l*2,block:l*2}:s.length===2?{inline:d*2,block:l*2}:s.length===3?{inline:d*2,block:l+h}:{inline:d+g,block:l+h}}}function j(e,t){if(e==null)return t;const i=e.trim().toLowerCase();return i?i==="false"||i==="0"||i==="off"||i==="no"?!1:i==="true"||i==="1"||i==="on"||i==="yes"?!0:t:!0}typeof customElements<"u"&&!customElements.get("ui-icon-cloud")&&customElements.define("ui-icon-cloud",P);exports.UIIconCloud=P;