@editora/ui-core 0.1.25 → 0.2.0

package/dist/form.cjs.js

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-DxbvhLJs.js");class _{constructor(){this.fields=new Map}registerField(t,e){if(!t)throw new Error("Field must have a name to register with the form");return this.fields.set(t,e),()=>{this.fields.delete(t)}}getValues(){const t={};for(const[e,i]of this.fields)t[e]=i.getValue();return t}setValue(t,e){const i=this.fields.get(t);i&&typeof i.setValue=="function"&&i.setValue(e)}async validateField(t){const e=this.fields.get(t);if(!e)return{valid:!0};if(typeof e.validate=="function"){const i=await e.validate();return e.setError&&e.setError(i.valid?void 0:i.message),i}return{valid:!0}}async validateAll(){const t={};let e=!0;const i=Array.from(this.fields.entries());for(const[r,s]of i){const n=await this.validateField(r);n.valid||(e=!1,t[r]=n.message||"invalid")}return{valid:e,errors:t}}}const v=new Set(["heading","title","description","state-text","loading-text"]),y=`
   :host {
     --ui-form-gap: 12px;
-    --ui-form-radius: 14px;
-    --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-form-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-form-bg: transparent;
     --ui-form-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-form-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-form-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent);
-    --ui-form-border: 1px solid var(--ui-form-border-color);
+    --ui-form-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent));
+    --ui-form-border: 0;
     --ui-form-shadow:
       none;
-    --ui-form-padding: 16px;
+    --ui-form-padding: 0px;
     --ui-form-header-gap: 12px;
     --ui-form-header-border: color-mix(in srgb, var(--ui-form-border-color) 84%, transparent);
     --ui-form-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
@@ -164,12 +164,19 @@
     padding-top: 2px;
   }
 
+  /* A plain form is flat; these variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]),
+  :host([variant="elevated"]) {
+    --ui-form-border: 1px solid var(--ui-form-border-color);
+  }
+
   :host([variant="surface"]) {
     --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 14px 28px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="outline"]) {
@@ -182,9 +189,7 @@
     --ui-form-bg: color-mix(in srgb, var(--ui-form-accent) 6%, var(--ui-color-surface, #ffffff));
     --ui-form-border-color: color-mix(in srgb, var(--ui-form-accent) 26%, var(--ui-color-border, #cbd5e1));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 4px rgba(2, 6, 23, 0.04),
-      0 12px 24px rgba(2, 6, 23, 0.06);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="contrast"]) {
@@ -194,9 +199,7 @@
     --ui-form-border-color: #334155;
     --ui-form-padding: 16px;
     --ui-form-focus-ring: #93c5fd;
-    --ui-form-shadow:
-      0 2px 8px rgba(2, 6, 23, 0.24),
-      0 26px 52px rgba(2, 6, 23, 0.38);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="minimal"]) {
@@ -208,9 +211,7 @@
 
   :host([variant="elevated"]) {
     --ui-form-bg: var(--ui-color-surface, #ffffff);
-    --ui-form-shadow:
-      0 2px 10px rgba(2, 6, 23, 0.1),
-      0 28px 56px rgba(2, 6, 23, 0.16);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([tone="success"]) {
@@ -248,15 +249,11 @@
   }
 
   :host([elevation="low"]) {
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 10px 20px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([elevation="high"]) {
-    --ui-form-shadow:
-      0 3px 14px rgba(2, 6, 23, 0.12),
-      0 32px 64px rgba(2, 6, 23, 0.2);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([loading]) .form {

package/dist/form.esm.js

@@ -42,15 +42,15 @@ class g {
 const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-text", "loading-text"]), v = `
   :host {
     --ui-form-gap: 12px;
-    --ui-form-radius: 14px;
-    --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-form-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-form-bg: transparent;
     --ui-form-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-form-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-form-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent);
-    --ui-form-border: 1px solid var(--ui-form-border-color);
+    --ui-form-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 66%, transparent));
+    --ui-form-border: 0;
     --ui-form-shadow:
       none;
-    --ui-form-padding: 16px;
+    --ui-form-padding: 0px;
     --ui-form-header-gap: 12px;
     --ui-form-header-border: color-mix(in srgb, var(--ui-form-border-color) 84%, transparent);
     --ui-form-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
@@ -205,12 +205,19 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
     padding-top: 2px;
   }
 
+  /* A plain form is flat; these variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]),
+  :host([variant="elevated"]) {
+    --ui-form-border: 1px solid var(--ui-form-border-color);
+  }
+
   :host([variant="surface"]) {
     --ui-form-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 14px 28px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="outline"]) {
@@ -223,9 +230,7 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
     --ui-form-bg: color-mix(in srgb, var(--ui-form-accent) 6%, var(--ui-color-surface, #ffffff));
     --ui-form-border-color: color-mix(in srgb, var(--ui-form-accent) 26%, var(--ui-color-border, #cbd5e1));
     --ui-form-padding: 16px;
-    --ui-form-shadow:
-      0 1px 4px rgba(2, 6, 23, 0.04),
-      0 12px 24px rgba(2, 6, 23, 0.06);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="contrast"]) {
@@ -235,9 +240,7 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
     --ui-form-border-color: #334155;
     --ui-form-padding: 16px;
     --ui-form-focus-ring: #93c5fd;
-    --ui-form-shadow:
-      0 2px 8px rgba(2, 6, 23, 0.24),
-      0 26px 52px rgba(2, 6, 23, 0.38);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="minimal"]) {
@@ -249,9 +252,7 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
 
   :host([variant="elevated"]) {
     --ui-form-bg: var(--ui-color-surface, #ffffff);
-    --ui-form-shadow:
-      0 2px 10px rgba(2, 6, 23, 0.1),
-      0 28px 56px rgba(2, 6, 23, 0.16);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([tone="success"]) {
@@ -289,15 +290,11 @@ const _ = /* @__PURE__ */ new Set(["heading", "title", "description", "state-tex
   }
 
   :host([elevation="low"]) {
-    --ui-form-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 10px 20px rgba(2, 6, 23, 0.08);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([elevation="high"]) {
-    --ui-form-shadow:
-      0 3px 14px rgba(2, 6, 23, 0.12),
-      0 32px 64px rgba(2, 6, 23, 0.2);
+    --ui-form-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([loading]) .form {

package/dist/gantt.cjs.js

@@ -23,9 +23,9 @@
   .frame {
     container: ui-gantt / inline-size;
     border: 1px solid var(--ui-gantt-border);
-    border-radius: 12px;
+    border-radius: calc(var(--ui-radius, 6px) + 2px);
     background: var(--ui-gantt-bg);
-    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
+    box-shadow: none;
     overflow: hidden;
   }
 
@@ -67,7 +67,7 @@
     border: 1px solid var(--ui-gantt-border);
     background: var(--ui-gantt-panel);
     color: var(--ui-gantt-text);
-    border-radius: 7px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     min-block-size: 30px;
     font: inherit;
     font-size: 12px;
@@ -96,9 +96,9 @@
   }
 
   .zoom-button[aria-pressed="true"] {
-    border-color: color-mix(in srgb, var(--ui-gantt-accent) 46%, var(--ui-gantt-border));
-    background: color-mix(in srgb, var(--ui-gantt-accent) 10%, var(--ui-gantt-panel));
-    color: color-mix(in srgb, var(--ui-gantt-accent) 82%, var(--ui-gantt-text));
+    border-color: transparent;
+    background: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-gantt-accent) 10%, var(--ui-gantt-panel)));
+    color: var(--ui-color-text-strong, var(--ui-gantt-text));
   }
 
   .viewport {

package/dist/gantt.esm.js

@@ -157,9 +157,9 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
   .frame {
     container: ui-gantt / inline-size;
     border: 1px solid var(--ui-gantt-border);
-    border-radius: 12px;
+    border-radius: calc(var(--ui-radius, 6px) + 2px);
     background: var(--ui-gantt-bg);
-    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
+    box-shadow: none;
     overflow: hidden;
   }
 
@@ -201,7 +201,7 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
     border: 1px solid var(--ui-gantt-border);
     background: var(--ui-gantt-panel);
     color: var(--ui-gantt-text);
-    border-radius: 7px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     min-block-size: 30px;
     font: inherit;
     font-size: 12px;
@@ -230,9 +230,9 @@ const D = 1440 * 60 * 1e3, S = 42, N = 62, Tt = 376, ce = "minmax(170px, 1fr) 82
   }
 
   .zoom-button[aria-pressed="true"] {
-    border-color: color-mix(in srgb, var(--ui-gantt-accent) 46%, var(--ui-gantt-border));
-    background: color-mix(in srgb, var(--ui-gantt-accent) 10%, var(--ui-gantt-panel));
-    color: color-mix(in srgb, var(--ui-gantt-accent) 82%, var(--ui-gantt-text));
+    border-color: transparent;
+    background: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-gantt-accent) 10%, var(--ui-gantt-panel)));
+    color: var(--ui-color-text-strong, var(--ui-gantt-text));
   }
 
   .viewport {

package/dist/hover-card.cjs.js

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),p=require("./positioner-D_fqyx_j.js"),v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),p=require("./positioner-DZ1FW6A9.js"),v=`
   :host {
     --ui-hover-card-z: 1700;
-    --ui-hover-card-radius: var(--base-card-radius, var(--ui-radius, 4px));
-    --ui-hover-card-bg: var(--base-card-bg, var(--color-panel, var(--ui-color-surface, var(--ui-surface, #ffffff))));
+    --ui-hover-card-radius: var(--base-card-radius, calc(var(--ui-radius, 6px) + 2px));
+    --ui-hover-card-bg: var(--base-card-bg, var(--color-panel-solid, var(--ui-color-surface, var(--ui-surface, #ffffff))));
     --ui-hover-card-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-hover-card-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-hover-card-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-hover-card-border: var(--base-card-border, 1px solid var(--ui-hover-card-border-color));
-    --ui-hover-card-shadow: var(--base-card-shadow, var(--shadow-3, none));
-    --ui-hover-card-padding: var(--ui-default-gap, 8px);
+    --ui-hover-card-shadow: var(--base-panel-shadow, var(--shadow-5, none));
+    --ui-hover-card-padding: 16px;
     --ui-hover-card-min-width: 220px;
     --ui-hover-card-max-width: min(380px, calc(100vw - 16px));
-    --ui-hover-card-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, none));
+    --ui-hover-card-backdrop: none;
     --ui-hover-card-arrow-size: 10px;
     --ui-hover-card-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-hover-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));

package/dist/hover-card.esm.js

@@ -1,18 +1,18 @@
 import { E as d } from "./ElementBase-BeZT54Hj.mjs";
-import { e as u } from "./positioner-D0VGxtYU.mjs";
+import { e as u } from "./positioner-BE8Nbho2.mjs";
 const p = `
   :host {
     --ui-hover-card-z: 1700;
-    --ui-hover-card-radius: var(--base-card-radius, var(--ui-radius, 4px));
-    --ui-hover-card-bg: var(--base-card-bg, var(--color-panel, var(--ui-color-surface, var(--ui-surface, #ffffff))));
+    --ui-hover-card-radius: var(--base-card-radius, calc(var(--ui-radius, 6px) + 2px));
+    --ui-hover-card-bg: var(--base-card-bg, var(--color-panel-solid, var(--ui-color-surface, var(--ui-surface, #ffffff))));
     --ui-hover-card-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-hover-card-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-hover-card-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-hover-card-border: var(--base-card-border, 1px solid var(--ui-hover-card-border-color));
-    --ui-hover-card-shadow: var(--base-card-shadow, var(--shadow-3, none));
-    --ui-hover-card-padding: var(--ui-default-gap, 8px);
+    --ui-hover-card-shadow: var(--base-panel-shadow, var(--shadow-5, none));
+    --ui-hover-card-padding: 16px;
     --ui-hover-card-min-width: 220px;
     --ui-hover-card-max-width: min(380px, calc(100vw - 16px));
-    --ui-hover-card-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, none));
+    --ui-hover-card-backdrop: none;
     --ui-hover-card-arrow-size: 10px;
     --ui-hover-card-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-hover-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));

package/dist/icon-cloud.cjs.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-DxbvhLJs.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=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-DxbvhLJs.js"),z="920px",x=.86,O=1,R="20px",$="118px",S="40px",E="118px",N=new Set(["clockwise","counterclockwise"]),D=new Set(["surface","soft","solid","glass","contrast","minimal"]),I=new Set(["brand","neutral","info","success","warning","danger"]),X=new Set(["sm","md","lg","xl","1","2","3","4"]),Y=new Set(["none","low","high"]),c={sm:{radius:"90px",radiusPx:90,itemSize:"32px",itemSizePx:32,centerSize:"84px",padding:"14px",shellRadius:"24px"},md:{radius:$,radiusPx:118,itemSize:S,itemSizePx:40,centerSize:E,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: ${$};
+    --ui-icon-cloud-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-icon-cloud-item-size: ${S};
+    --ui-icon-cloud-center-size: ${E};
+    --ui-icon-cloud-padding: ${R};
     --ui-icon-cloud-perspective: ${z};
     --ui-icon-cloud-depth: ${x};
-    --ui-icon-cloud-shell-radius: ${N};
+    --ui-icon-cloud-shell-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-icon-cloud-tilt-x: 0deg;
     --ui-icon-cloud-tilt-y: 0deg;
     --ui-icon-cloud-fit-scale: 1;
@@ -15,35 +15,18 @@
     --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-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --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-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, 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-shadow: none;
     --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-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-icon-cloud-item-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --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-shadow: none;
     --ui-icon-cloud-item-backdrop: none;
     --ui-icon-cloud-item-radius: 14px;
     --ui-icon-cloud-center-bg:
@@ -282,7 +265,7 @@
     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;
+    opacity: 0.35;
     transform: translateZ(-120px) rotateX(78deg) scaleX(1.06);
     transform-origin: center;
     pointer-events: none;
@@ -335,7 +318,7 @@
     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;
+    opacity: 0.3;
     transform:
       translateZ(-42px)
       rotateX(calc(64deg + (var(--ui-icon-cloud-tilt-x) * 0.5)))
@@ -422,7 +405,7 @@
     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),
+      0 0 0 2px var(--ui-ring-color, var(--ui-icon-cloud-focus-ring)),
       var(--ui-icon-cloud-item-shadow);
   }
 
@@ -430,7 +413,7 @@
     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),
+      0 0 0 2px var(--ui-ring-color, var(--ui-icon-cloud-focus-ring)),
       var(--ui-icon-cloud-shadow);
   }
 
@@ -473,8 +456,8 @@
       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 g(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 s=1-o/(e-1)*2,a=Math.sqrt(Math.max(0,1-s*s)),r=i*o;t.push({x:Math.cos(r)*a,y:s,z:Math.sin(r)*a})}return t}function W(e,t,i){const o=Math.cos(i),n=Math.sin(i),s=Math.cos(t),a=Math.sin(t),r=e.x*o-e.z*n,u=e.x*n+e.z*o,l=e.y;return{x:r,y:l*s-u*a,z:l*a+u*s}}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>
+`;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(r=>/^-?\d+(\.\d+)?$/.test(r)?`${r}px`:r).join(" "):t}function B(e){return e!=null&&N.has(e)?e:"clockwise"}function U(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 s=1-o/(e-1)*2,u=Math.sqrt(Math.max(0,1-s*s)),n=i*o;t.push({x:Math.cos(n)*u,y:s,z:Math.sin(n)*u})}return t}function V(e,t,i){const o=Math.cos(i),r=Math.sin(i),s=Math.cos(t),u=Math.sin(t),n=e.x*o-e.z*r,a=e.x*r+e.z*o,l=e.y;return{x:n,y:l*s-a*u,z:l*u+a*s}}class A extends C.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>${q}</style>
       <div class="root" part="root">
         <div class="frame" part="frame">
           <div class="surface" part="surface">
@@ -492,4 +475,4 @@
           </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),s=b(this.getAttribute("center-size"),i.centerSize),a=b(this.getAttribute("padding"),i.padding),r=b(this.getAttribute("surface-radius"),i.shellRadius),u=b(this.getAttribute("perspective"),z),l=g(_(this.getAttribute("depth"),x),.35,1.6),d=H(this.getAttribute("variant")),h=Q(this.getAttribute("tone")),f=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",s),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",r),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",f)}_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),s=this._paddingMetrics(o.padding),a=n.width+s.inline,r=n.height+s.block,l=this.getBoundingClientRect().width||this.clientWidth||a,d=l>0&&a>0?g(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",`${(r*d).toFixed(2)}px`),this.setAttribute("data-auto-fit-scale",d.toFixed(4))}_collectChildren(){const t=(this._slotEl?.assignedElements({flatten:!0})||[]).filter(o=>o instanceof HTMLElement),i=(this._centerSlotEl?.assignedElements({flatten:!0})||[]).find(o=>o 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(o=>{o.hasAttribute("data-ui-icon-cloud-item")||o.setAttribute("data-ui-icon-cloud-item",""),this._isElementClickable(o)&&o.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=g(o*.62,-.62,.62),this._targetTiltX=g(n*-.44,-.44,.44),this._ensureAnimation()}_onPointerOver(t){t.target?.closest("[data-ui-icon-cloud-item]")&&(this._itemHovering=!0,this._syncState())}_onPointerOut(t){t.relatedTarget?.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(){return!!(this.hasAttribute("paused")||this._mediaQuery?.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=g(t-i,0,48);if(this._lastTimestamp=t,!this._effectivePaused()){const a=B(this.getAttribute("direction"))==="counterclockwise"?-1:1,r=g(_(this.getAttribute("speed"),R),.2,8);this._autoAngleY+=o*24e-5*r*a,this._autoAngleX+=o*12e-5*r*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(s=>this._tick(s)))}_applyLayout(t,i){const o=v(this.getAttribute("size")),n=c[o],s=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),r=g(_(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),f=h.z*s*r,y=a/Math.max(a-f,a*.28),w=h.x*s*y,T=h.y*s*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",`${(f*.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,s=o?Number.parseFloat(o.height):Number.NaN,a=p(this.style.getPropertyValue("--ui-icon-cloud-radius")||this.getAttribute("radius"),t.radiusPx),r=p(this.style.getPropertyValue("--ui-icon-cloud-item-size")||this.getAttribute("item-size"),t.itemSizePx),u=a*2+r;return{width:Number.isFinite(n)&&n>0?n:u,height:Number.isFinite(s)&&s>0?s: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,s=o?Number.parseFloat(o.paddingTop)+Number.parseFloat(o.paddingBottom):Number.NaN;if(Number.isFinite(n)&&n>0&&Number.isFinite(s)&&s>0)return{inline:n,block:s};const r=b(this.getAttribute("padding"),t).split(/\s+/).filter(Boolean),u=p(t,20),l=p(r[0]||"",u),d=p(r[1]||r[0]||"",l),h=p(r[2]||r[0]||"",l),f=p(r[3]||r[1]||r[0]||"",d);return r.length===1?{inline:l*2,block:l*2}:r.length===2?{inline:d*2,block:l*2}:r.length===3?{inline:d*2,block:l+h}:{inline:d+f,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;
+    `),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),r=b(this.getAttribute("item-size"),i.itemSize),s=b(this.getAttribute("center-size"),i.centerSize),u=b(this.getAttribute("padding"),i.padding),n=b(this.getAttribute("surface-radius"),i.shellRadius),a=b(this.getAttribute("perspective"),z),l=f(_(this.getAttribute("depth"),x),.35,1.6),d=U(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",r),this.style.setProperty("--ui-icon-cloud-center-size",s),this.style.setProperty("--ui-icon-cloud-padding",u),this.style.setProperty("--ui-icon-cloud-perspective",a),this.style.setProperty("--ui-icon-cloud-depth",String(l)),this.style.setProperty("--ui-icon-cloud-shell-radius",n),this.style.setProperty("--ui-icon-cloud-stage-size",`calc((2 * ${o}) + ${r})`),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],r=this._stageMetrics(o),s=this._paddingMetrics(o.padding),u=r.width+s.inline,n=r.height+s.block,l=this.getBoundingClientRect().width||this.clientWidth||u,d=l>0&&u>0?f(l/u,.2,1):1;this.style.setProperty("--ui-icon-cloud-fit-scale",d.toFixed(4)),this.style.setProperty("--ui-icon-cloud-fit-inline-size",`${(u*d).toFixed(2)}px`),this.style.setProperty("--ui-icon-cloud-fit-block-size",`${(n*d).toFixed(2)}px`),this.setAttribute("data-auto-fit-scale",d.toFixed(4))}_collectChildren(){const t=(this._slotEl?.assignedElements({flatten:!0})||[]).filter(o=>o instanceof HTMLElement),i=(this._centerSlotEl?.assignedElements({flatten:!0})||[]).find(o=>o 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(o=>{o.hasAttribute("data-ui-icon-cloud-item")||o.setAttribute("data-ui-icon-cloud-item",""),this._isElementClickable(o)&&o.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,r=(t.clientY-i.top)/i.height*2-1;this._targetTiltY=f(o*.62,-.62,.62),this._targetTiltX=f(r*-.44,-.44,.44),this._ensureAnimation()}_onPointerOver(t){t.target?.closest("[data-ui-icon-cloud-item]")&&(this._itemHovering=!0,this._syncState())}_onPointerOut(t){t.relatedTarget?.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(){return!!(this.hasAttribute("paused")||this._mediaQuery?.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 W(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 u=B(this.getAttribute("direction"))==="counterclockwise"?-1:1,n=f(_(this.getAttribute("speed"),O),.2,8);this._autoAngleY+=o*24e-5*n*u,this._autoAngleX+=o*12e-5*n*u}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(s=>this._tick(s)))}_applyLayout(t,i){const o=v(this.getAttribute("size")),r=c[o],s=p(this.style.getPropertyValue("--ui-icon-cloud-radius")||this.getAttribute("radius"),r.radiusPx),u=p(this.style.getPropertyValue("--ui-icon-cloud-perspective")||this.getAttribute("perspective"),920),n=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((a,l)=>{const d=this._points[l];if(!d)return;const h=V(d,t,i),g=h.z*s*n,y=u/Math.max(u-g,u*.28),P=h.x*s*y,w=h.y*s*y,m=(h.z+1)/2,T=.42+m*.8,F=.18+m*.88,k=(1-m)*2.4,M=.68+m*.5,L=10+Math.round(m*100);a.style.setProperty("--ui-icon-cloud-x",`${P.toFixed(2)}px`),a.style.setProperty("--ui-icon-cloud-y",`${w.toFixed(2)}px`),a.style.setProperty("--ui-icon-cloud-z",`${(g*.78).toFixed(2)}px`),a.style.setProperty("--ui-icon-cloud-scale",T.toFixed(3)),a.style.setProperty("--ui-icon-cloud-opacity",F.toFixed(3)),a.style.setProperty("--ui-icon-cloud-z-index",String(L)),a.style.setProperty("--ui-icon-cloud-blur",`${k.toFixed(2)}px`),a.style.setProperty("--ui-icon-cloud-saturation",M.toFixed(3)),a.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,r=o?Number.parseFloat(o.width):Number.NaN,s=o?Number.parseFloat(o.height):Number.NaN,u=p(this.style.getPropertyValue("--ui-icon-cloud-radius")||this.getAttribute("radius"),t.radiusPx),n=p(this.style.getPropertyValue("--ui-icon-cloud-item-size")||this.getAttribute("item-size"),t.itemSizePx),a=u*2+n;return{width:Number.isFinite(r)&&r>0?r:a,height:Number.isFinite(s)&&s>0?s:a}}_paddingMetrics(t){const i=this.root.querySelector(".surface"),o=i?getComputedStyle(i):null,r=o?Number.parseFloat(o.paddingLeft)+Number.parseFloat(o.paddingRight):Number.NaN,s=o?Number.parseFloat(o.paddingTop)+Number.parseFloat(o.paddingBottom):Number.NaN;if(Number.isFinite(r)&&r>0&&Number.isFinite(s)&&s>0)return{inline:r,block:s};const n=b(this.getAttribute("padding"),t).split(/\s+/).filter(Boolean),a=p(t,20),l=p(n[0]||"",a),d=p(n[1]||n[0]||"",l),h=p(n[2]||n[0]||"",l),g=p(n[3]||n[1]||n[0]||"",d);return n.length===1?{inline:l*2,block:l*2}:n.length===2?{inline:d*2,block:l*2}:n.length===3?{inline:d*2,block:l+h}:{inline:d+g,block:l+h}}}function W(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",A);exports.UIIconCloud=A;