@editora/ui-core 0.1.9 → 0.1.12

package/dist/icon-cloud.esm.js

@@ -0,0 +1,828 @@
+import { E as C } from "./ElementBase-909688f3.mjs";
+const z = "920px", x = 0.86, O = 1, R = "20px", S = "118px", E = "40px", A = "118px", $ = "30px", N = /* @__PURE__ */ new Set(["clockwise", "counterclockwise"]), D = /* @__PURE__ */ new Set(["surface", "soft", "solid", "glass", "contrast", "minimal"]), I = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), X = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "1", "2", "3", "4"]), Y = /* @__PURE__ */ 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"
+  }
+}, q = `
+  :host {
+    --ui-icon-cloud-radius: ${S};
+    --ui-icon-cloud-item-size: ${E};
+    --ui-icon-cloud-center-size: ${A};
+    --ui-icon-cloud-padding: ${R};
+    --ui-icon-cloud-perspective: ${z};
+    --ui-icon-cloud-depth: ${x};
+    --ui-icon-cloud-shell-radius: ${$};
+    --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 U(e) {
+  return e != null && N.has(e) ? e : "clockwise";
+}
+function B(e) {
+  return e != null && D.has(e) ? e : "surface";
+}
+function H(e) {
+  return e != null && I.has(e) ? e : "brand";
+}
+function Q(e) {
+  return e != null && Y.has(e) ? e : "low";
+}
+function v(e) {
+  return e == null || !X.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 Z(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 V(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 W extends C {
+  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 = -0.35, this._autoAngleY = 0.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>${q}</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), 0.35, 1.6), d = B(this.getAttribute("variant")), h = H(this.getAttribute("tone")), g = Q(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, 0.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 = Z(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 * 0.62, -0.62, 0.62), this._targetTiltX = f(n * -0.44, -0.44, 0.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) > 2e-3 || Math.abs(this._targetTiltY - this._currentTiltY) > 2e-3 ? 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 = U(this.getAttribute("direction")) === "counterclockwise" ? -1 : 1, s = f(_(this.getAttribute("speed"), O), 0.2, 8);
+      this._autoAngleY += o * 24e-5 * s * a, this._autoAngleX += o * 12e-5 * s * a;
+    }
+    this._currentTiltX += (this._targetTiltX - this._currentTiltX) * 0.08, this._currentTiltY += (this._targetTiltY - this._currentTiltY) * 0.08, this._applyLayout(this._autoAngleX + this._currentTiltX, this._autoAngleY + this._currentTiltY), (!this._effectivePaused() || Math.abs(this._targetTiltX - this._currentTiltX) > 2e-3 || Math.abs(this._targetTiltY - this._currentTiltY) > 2e-3) && (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), 0.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 = V(d, t, i), g = h.z * r * s, y = a / Math.max(a - g, a * 0.28), P = h.x * r * y, w = h.y * r * y, m = (h.z + 1) / 2, T = 0.42 + m * 0.8, F = 0.18 + m * 0.88, k = (1 - m) * 2.4, L = 0.68 + m * 0.5, M = 10 + Math.round(m * 100);
+      u.style.setProperty("--ui-icon-cloud-x", `${P.toFixed(2)}px`), u.style.setProperty("--ui-icon-cloud-y", `${w.toFixed(2)}px`), u.style.setProperty("--ui-icon-cloud-z", `${(g * 0.78).toFixed(2)}px`), u.style.setProperty("--ui-icon-cloud-scale", T.toFixed(3)), u.style.setProperty("--ui-icon-cloud-opacity", F.toFixed(3)), u.style.setProperty("--ui-icon-cloud-z-index", String(M)), u.style.setProperty("--ui-icon-cloud-blur", `${k.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", W);
+export {
+  W as UIIconCloud
+};