@editora/ui-core 0.1.9 → 0.1.10

package/dist/animated-list.esm.js

@@ -0,0 +1,1137 @@
+import { E as _ } from "./ElementBase-909688f3.mjs";
+const o = "520ms", l = "90ms", d = "0ms", x = 1400, p = 0.24, y = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), v = /* @__PURE__ */ new Set(["load", "visible", "manual"]), A = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), S = `
+  :host {
+    --ui-animated-list-duration: ${o};
+    --ui-animated-list-stagger: ${l};
+    --ui-animated-list-delay: ${d};
+    --ui-animated-list-gap: 12px;
+    --ui-animated-list-padding: 16px;
+    --ui-animated-list-motion-easing: cubic-bezier(0.2, 0.9, 0.24, 1);
+    --ui-animated-list-motion-duration-scale: 1;
+    --ui-animated-list-motion-distance-scale: 1;
+    --ui-animated-list-motion-blur-scale: 1;
+    --ui-animated-list-motion-rotate-scale: 1;
+    --ui-animated-list-motion-overshoot-y: -2px;
+    --ui-animated-list-motion-overshoot-scale: 1.02;
+    --ui-animated-list-radius: var(--base-animated-list-radius, 20px);
+    --ui-animated-list-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
+        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
+      );
+    --ui-animated-list-color: var(--ui-color-text, #0f172a);
+    --ui-animated-list-border-color:
+      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 80%, transparent);
+    --ui-animated-list-border: 1px solid var(--ui-animated-list-border-color);
+    --ui-animated-list-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 16px 30px rgba(15, 23, 42, 0.08);
+    --ui-animated-list-backdrop: none;
+    --ui-animated-list-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-animated-list-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+
+    --ui-animated-list-item-radius: 16px;
+    --ui-animated-list-item-padding: 14px 16px;
+    --ui-animated-list-item-min-block-size: 56px;
+    --ui-animated-list-item-gap: 6px;
+    --ui-animated-list-item-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent),
+        color-mix(in srgb, var(--ui-animated-list-accent) 4%, var(--ui-color-surface, #ffffff))
+      );
+    --ui-animated-list-item-border:
+      1px solid color-mix(in srgb, var(--ui-animated-list-accent) 10%, var(--ui-animated-list-border-color));
+    --ui-animated-list-item-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.04),
+      0 10px 18px rgba(15, 23, 42, 0.06);
+    --ui-animated-list-item-color: inherit;
+    --ui-animated-list-item-muted: var(--ui-color-muted, #64748b);
+    --ui-animated-list-item-backdrop: none;
+
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color-scheme: light dark;
+    color: var(--ui-animated-list-color);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    contain: layout style;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-animated-list-gap: 10px;
+    --ui-animated-list-padding: 12px;
+    --ui-animated-list-radius: 16px;
+    --ui-animated-list-item-radius: 14px;
+    --ui-animated-list-item-padding: 11px 13px;
+    --ui-animated-list-item-min-block-size: 48px;
+    --ui-animated-list-item-gap: 4px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-animated-list-gap: 12px;
+    --ui-animated-list-padding: 16px;
+    --ui-animated-list-radius: var(--base-animated-list-radius, 20px);
+    --ui-animated-list-item-radius: 16px;
+    --ui-animated-list-item-padding: 14px 16px;
+    --ui-animated-list-item-min-block-size: 56px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-animated-list-gap: 14px;
+    --ui-animated-list-padding: 20px;
+    --ui-animated-list-radius: 24px;
+    --ui-animated-list-item-radius: 18px;
+    --ui-animated-list-item-padding: 16px 18px;
+    --ui-animated-list-item-min-block-size: 64px;
+    --ui-animated-list-item-gap: 8px;
+  }
+
+  :host([animation="calm"]) {
+    --ui-animated-list-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
+    --ui-animated-list-motion-duration-scale: 1.12;
+    --ui-animated-list-motion-distance-scale: 0.78;
+    --ui-animated-list-motion-blur-scale: 0.75;
+    --ui-animated-list-motion-rotate-scale: 0.82;
+    --ui-animated-list-motion-overshoot-y: -1px;
+    --ui-animated-list-motion-overshoot-scale: 1.01;
+  }
+
+  :host(:not([animation])),
+  :host([animation="smooth"]) {
+    --ui-animated-list-motion-easing: cubic-bezier(0.2, 0.9, 0.24, 1);
+    --ui-animated-list-motion-duration-scale: 1;
+    --ui-animated-list-motion-distance-scale: 1;
+    --ui-animated-list-motion-blur-scale: 1;
+    --ui-animated-list-motion-rotate-scale: 1;
+    --ui-animated-list-motion-overshoot-y: -2px;
+    --ui-animated-list-motion-overshoot-scale: 1.02;
+  }
+
+  :host([animation="snappy"]) {
+    --ui-animated-list-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+    --ui-animated-list-motion-duration-scale: 0.88;
+    --ui-animated-list-motion-distance-scale: 1.12;
+    --ui-animated-list-motion-blur-scale: 0.92;
+    --ui-animated-list-motion-rotate-scale: 1.08;
+    --ui-animated-list-motion-overshoot-y: -2.5px;
+    --ui-animated-list-motion-overshoot-scale: 1.028;
+  }
+
+  :host([animation="bouncy"]) {
+    --ui-animated-list-motion-easing: cubic-bezier(0.2, 1.18, 0.28, 1);
+    --ui-animated-list-motion-duration-scale: 1.08;
+    --ui-animated-list-motion-distance-scale: 1.18;
+    --ui-animated-list-motion-blur-scale: 1;
+    --ui-animated-list-motion-rotate-scale: 1.18;
+    --ui-animated-list-motion-overshoot-y: -4px;
+    --ui-animated-list-motion-overshoot-scale: 1.05;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-animated-list-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-animated-list-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-animated-list-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-animated-list-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-animated-list-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-animated-list-bg:
+      color-mix(in srgb, var(--ui-animated-list-accent) 6%, var(--ui-color-surface, #ffffff));
+    --ui-animated-list-border-color:
+      color-mix(in srgb, var(--ui-animated-list-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-animated-list-shadow: none;
+    --ui-animated-list-item-bg:
+      color-mix(in srgb, var(--ui-animated-list-accent) 10%, rgba(255, 255, 255, 0.82));
+    --ui-animated-list-item-border:
+      1px solid color-mix(in srgb, var(--ui-animated-list-accent) 20%, transparent);
+    --ui-animated-list-item-shadow: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-animated-list-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-animated-list-accent) 12%, var(--ui-color-surface, #ffffff)),
+        color-mix(in srgb, var(--ui-animated-list-accent) 6%, var(--ui-color-surface-elevated, #f8fafc))
+      );
+    --ui-animated-list-border-color:
+      color-mix(in srgb, var(--ui-animated-list-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-animated-list-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 18px 36px color-mix(in srgb, var(--ui-animated-list-accent) 10%, rgba(15, 23, 42, 0.08));
+    --ui-animated-list-item-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-animated-list-accent) 14%, rgba(255, 255, 255, 0.92)),
+        color-mix(in srgb, var(--ui-animated-list-accent) 8%, rgba(255, 255, 255, 0.84))
+      );
+    --ui-animated-list-item-border:
+      1px solid color-mix(in srgb, var(--ui-animated-list-accent) 28%, transparent);
+  }
+
+  :host([variant="glass"]) {
+    --ui-animated-list-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, #ffffff 16%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 74%, transparent)
+      );
+    --ui-animated-list-border-color:
+      color-mix(in srgb, #ffffff 28%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-animated-list-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.08),
+      0 24px 48px rgba(15, 23, 42, 0.12);
+    --ui-animated-list-backdrop: blur(16px) saturate(1.08);
+    --ui-animated-list-item-bg: color-mix(in srgb, #ffffff 48%, transparent);
+    --ui-animated-list-item-border: 1px solid color-mix(in srgb, #ffffff 36%, transparent);
+    --ui-animated-list-item-backdrop: blur(10px) saturate(1.05);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-animated-list-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #07162d 92%, var(--ui-animated-list-accent) 8%),
+        color-mix(in srgb, #0f2d57 84%, var(--ui-animated-list-accent) 16%)
+      );
+    --ui-animated-list-color: #f8fbff;
+    --ui-animated-list-border-color: color-mix(in srgb, #9ec5ff 18%, transparent);
+    --ui-animated-list-shadow: 0 28px 56px rgba(2, 6, 23, 0.32);
+    --ui-animated-list-item-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-animated-list-item-border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
+    --ui-animated-list-item-color: #f8fbff;
+    --ui-animated-list-item-muted: color-mix(in srgb, #f8fbff 68%, transparent);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-animated-list-bg: transparent;
+    --ui-animated-list-border: none;
+    --ui-animated-list-shadow: none;
+    --ui-animated-list-item-bg: color-mix(in srgb, var(--ui-animated-list-accent) 8%, transparent);
+    --ui-animated-list-item-border: 1px solid color-mix(in srgb, var(--ui-animated-list-accent) 16%, transparent);
+  }
+
+  :host([radius="none"]) {
+    --ui-animated-list-radius: 0px;
+    --ui-animated-list-item-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-animated-list-radius: 12px;
+    --ui-animated-list-item-radius: 12px;
+  }
+
+  :host([radius="md"]) {
+    --ui-animated-list-radius: 18px;
+    --ui-animated-list-item-radius: 16px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-animated-list-radius: 24px;
+    --ui-animated-list-item-radius: 18px;
+  }
+
+  :host([radius="full"]) {
+    --ui-animated-list-radius: 999px;
+    --ui-animated-list-item-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-animated-list-shadow: none;
+    --ui-animated-list-item-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-animated-list-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 16px 30px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --ui-animated-list-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 28px 54px rgba(15, 23, 42, 0.16);
+    --ui-animated-list-item-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.06),
+      0 18px 34px rgba(15, 23, 42, 0.1);
+  }
+
+  .root {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .surface {
+    display: block;
+    min-inline-size: 0;
+    padding: var(--ui-animated-list-padding);
+    border-radius: var(--ui-animated-list-radius);
+    border: var(--ui-animated-list-border);
+    background: var(--ui-animated-list-bg);
+    color: var(--ui-animated-list-color);
+    box-shadow: var(--ui-animated-list-shadow);
+    backdrop-filter: var(--ui-animated-list-backdrop);
+    box-sizing: border-box;
+    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);
+  }
+
+  .list {
+    display: grid;
+    gap: var(--ui-animated-list-gap);
+    min-inline-size: 0;
+  }
+
+  ::slotted([data-ui-animated-list-item]) {
+    display: grid !important;
+    gap: var(--ui-animated-list-item-gap);
+    min-inline-size: 0;
+    min-block-size: var(--ui-animated-list-item-min-block-size);
+    align-content: center;
+    box-sizing: border-box;
+    padding: var(--ui-animated-list-item-padding);
+    border-radius: var(--ui-animated-list-item-radius);
+    border: var(--ui-animated-list-item-border);
+    background: var(--ui-animated-list-item-bg);
+    color: var(--ui-animated-list-item-color);
+    box-shadow: var(--ui-animated-list-item-shadow);
+    backdrop-filter: var(--ui-animated-list-item-backdrop);
+    transform-origin: 50% 50%;
+    will-change: transform, opacity, filter;
+    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);
+  }
+
+  :host([data-phase="ready"]) ::slotted([data-ui-animated-list-item]),
+  :host([data-phase="idle"]) ::slotted([data-ui-animated-list-item]) {
+    opacity: 0;
+    transform: var(--ui-animated-list-effect-from-transform, translate3d(0, 20px, 0));
+    filter: var(--ui-animated-list-effect-from-filter, none);
+  }
+
+  :host([data-phase="running"]) ::slotted([data-ui-animated-list-item]) {
+    opacity: 0;
+    animation-duration: var(--ui-animated-list-duration);
+    animation-delay:
+      calc(var(--ui-animated-list-delay) + var(--ui-animated-list-index, 0) * var(--ui-animated-list-stagger));
+    animation-fill-mode: both;
+    animation-timing-function: var(--ui-animated-list-motion-easing);
+    animation-play-state: running;
+  }
+
+  :host([paused][data-phase="running"]) ::slotted([data-ui-animated-list-item]) {
+    animation-play-state: paused;
+  }
+
+  :host([data-phase="complete"]) ::slotted([data-ui-animated-list-item]) {
+    opacity: 1;
+    transform: none;
+    filter: none;
+    animation: none;
+  }
+
+  :host(:not([effect])),
+  :host([effect="fade-up"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, 18px, 0);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="fade-down"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, -18px, 0);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="slide-left"]) {
+    --ui-animated-list-effect-from-transform: translate3d(28px, 0, 0);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="slide-right"]) {
+    --ui-animated-list-effect-from-transform: translate3d(-28px, 0, 0);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="scale-in"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, 10px, 0) scale(0.94);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="blur-in"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, 14px, 0) scale(0.98);
+    --ui-animated-list-effect-from-filter: blur(12px);
+  }
+
+  :host([effect="pop"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, 8px, 0) scale(0.88);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="flip-in"]) {
+    --ui-animated-list-effect-from-transform: perspective(900px) rotateX(-18deg) translate3d(0, 14px, 0);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="rotate-in"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, 12px, 0) rotate(-10deg) scale(0.97);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="tilt-in"]) {
+    --ui-animated-list-effect-from-transform: perspective(900px) rotateY(-14deg) translate3d(0, 12px, 0);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="float-up"]) {
+    --ui-animated-list-effect-from-transform: translate3d(0, 26px, 0) scale(0.985);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([effect="swing-in"]) {
+    --ui-animated-list-effect-from-transform: translate3d(-16px, 0, 0) rotate(-7deg);
+    --ui-animated-list-effect-from-filter: none;
+  }
+
+  :host([data-phase="running"]:not([effect])) ::slotted([data-ui-animated-list-item]),
+  :host([data-phase="running"][effect="fade-up"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-fade-up;
+  }
+
+  :host([data-phase="running"][effect="fade-down"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-fade-down;
+  }
+
+  :host([data-phase="running"][effect="slide-left"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-slide-left;
+  }
+
+  :host([data-phase="running"][effect="slide-right"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-slide-right;
+  }
+
+  :host([data-phase="running"][effect="scale-in"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-scale-in;
+  }
+
+  :host([data-phase="running"][effect="blur-in"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-blur-in;
+  }
+
+  :host([data-phase="running"][effect="pop"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-pop;
+  }
+
+  :host([data-phase="running"][effect="flip-in"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-flip-in;
+  }
+
+  :host([data-phase="running"][effect="rotate-in"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-rotate-in;
+  }
+
+  :host([data-phase="running"][effect="tilt-in"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-tilt-in;
+  }
+
+  :host([data-phase="running"][effect="float-up"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-float-up;
+  }
+
+  :host([data-phase="running"][effect="swing-in"]) ::slotted([data-ui-animated-list-item]) {
+    animation-name: ui-animated-list-swing-in;
+  }
+
+  @keyframes ui-animated-list-fade-up {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 18px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-list-fade-down {
+    from {
+      opacity: 0;
+      transform: translate3d(0, -18px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-list-slide-left {
+    from {
+      opacity: 0;
+      transform: translate3d(28px, 0, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-list-slide-right {
+    from {
+      opacity: 0;
+      transform: translate3d(-28px, 0, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-list-scale-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 10px, 0) scale(0.94);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-list-blur-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 14px, 0) scale(0.98);
+      filter: blur(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes ui-animated-list-pop {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 8px, 0) scale(0.88);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -2px, 0) scale(1.02);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-list-flip-in {
+    from {
+      opacity: 0;
+      transform: perspective(900px) rotateX(-18deg) translate3d(0, 14px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: perspective(900px) rotateX(0deg) translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-list-rotate-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 12px, 0) rotate(-10deg) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-list-tilt-in {
+    from {
+      opacity: 0;
+      transform: perspective(900px) rotateY(-14deg) translate3d(0, 12px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: perspective(900px) rotateY(0deg) translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-list-float-up {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 26px, 0) scale(0.985);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -2px, 0) scale(1.01);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-list-swing-in {
+    from {
+      opacity: 0;
+      transform: translate3d(-16px, 0, 0) rotate(-7deg);
+    }
+    70% {
+      opacity: 1;
+      transform: translate3d(1px, 0, 0) rotate(1deg);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) rotate(0deg);
+    }
+  }
+
+  :host(:focus-visible) .surface {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-animated-list-focus-ring) 24%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-animated-list-focus-ring) 18%, transparent),
+      var(--ui-animated-list-shadow);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --ui-animated-list-duration: 1ms;
+      --ui-animated-list-stagger: 0ms;
+      --ui-animated-list-delay: 0ms;
+    }
+
+    :host([data-phase="running"]) ::slotted([data-ui-animated-list-item]) {
+      animation-duration: 1ms !important;
+      animation-delay: 0ms !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .surface,
+    ::slotted([data-ui-animated-list-item]) {
+      box-shadow: none;
+    }
+
+    .surface {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-animated-list-bg: Canvas;
+      --ui-animated-list-color: CanvasText;
+      --ui-animated-list-border-color: CanvasText;
+      --ui-animated-list-shadow: none;
+      --ui-animated-list-item-bg: Canvas;
+      --ui-animated-list-item-border: 1px solid CanvasText;
+      --ui-animated-list-item-color: CanvasText;
+      --ui-animated-list-item-shadow: none;
+    }
+
+    .surface,
+    ::slotted([data-ui-animated-list-item]) {
+      forced-color-adjust: none;
+    }
+  }
+`;
+function n(s, t) {
+  if (s == null || s === "")
+    return t;
+  const e = s.trim();
+  return e ? /^-?\d+(\.\d+)?ms$/i.test(e) ? Math.max(0, Number.parseFloat(e)) : /^-?\d+(\.\d+)?s$/i.test(e) ? Math.max(0, Number.parseFloat(e) * 1e3) : /^-?\d+(\.\d+)?$/i.test(e) ? Math.max(0, Number.parseFloat(e)) : t : t;
+}
+function m(s, t) {
+  if (s == null || s === "")
+    return t;
+  const e = s.trim();
+  return e ? /^-?\d+(\.\d+)?(ms|s)$/i.test(e) ? e : /^-?\d+(\.\d+)?$/i.test(e) ? `${e}ms` : t : t;
+}
+function u(s) {
+  if (s == null || s === "")
+    return null;
+  const t = s.trim();
+  if (!t)
+    return null;
+  const e = t.split(/\s+/).filter(Boolean);
+  return e.length ? e.map((i) => /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : i).join(" ") : null;
+}
+function g(s) {
+  if (s == null || s === "")
+    return p;
+  const t = Number.parseFloat(s);
+  return Number.isFinite(t) ? Math.min(1, Math.max(0, t)) : p;
+}
+class T extends _ {
+  constructor() {
+    super(...arguments), this._slotEl = null, this._items = [], this._phase = "idle", this._playToken = 0, this._hasTriggeredOnce = !1, this._inView = !1, this._completionTimer = null, this._completionStartedAt = 0, this._completionRemaining = 0, this._loopTimer = null, this._loopStartedAt = 0, this._loopRemaining = 0, this._rafA = 0, this._rafB = 0, this._intersectionObserver = null, this._mediaQuery = null, this._animations = [], this._boundSlotChange = this._handleSlotChange.bind(this), this._boundReducedMotionChange = this._handleReducedMotionChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "effect",
+      "trigger",
+      "duration",
+      "stagger",
+      "delay",
+      "animation",
+      "loop",
+      "loop-delay",
+      "paused",
+      "threshold",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "elevation",
+      "padding",
+      "gap"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._bindReducedMotionWatcher();
+  }
+  disconnectedCallback() {
+    var t, e, i, a;
+    this._clearTimers(), this._disconnectIntersectionObserver(), (e = (t = this._mediaQuery) == null ? void 0 : t.removeEventListener) == null || e.call(t, "change", this._boundReducedMotionChange), (a = (i = this._mediaQuery) == null ? void 0 : i.removeListener) == null || a.call(i, this._boundReducedMotionChange), this._mediaQuery = null, super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (!(e === i || !this.isConnected)) {
+      if (t === "paused") {
+        this.hasAttribute("paused") ? (this._pauseTimers(), this._pauseAnimations()) : (this._resumeTimers(), this._resumeAnimations()), this._syncStateAttributes();
+        return;
+      }
+      if (this._syncRuntimeStyles(), t === "trigger" || t === "threshold") {
+        this._syncTrigger(), this._autoStartIfNeeded();
+        return;
+      }
+      if (t === "duration" || t === "stagger" || t === "delay" || t === "loop" || t === "loop-delay") {
+        this._phase === "running" && !this.hasAttribute("paused") ? this._scheduleCompletion(this._totalAnimationMs()) : this._phase === "complete" && this._hasLoop() && !this.hasAttribute("paused") && this._scheduleLoop(this._loopDelayMs());
+        return;
+      }
+      if (t === "effect" || t === "animation") {
+        this._phase === "running" && !this.hasAttribute("paused") && this.replay();
+        return;
+      }
+    }
+  }
+  play() {
+    if (this.hasAttribute("paused") && this._phase === "running") {
+      this.removeAttribute("paused");
+      return;
+    }
+    if (this.hasAttribute("paused") && this.removeAttribute("paused"), this._hasTriggeredOnce = !0, this._clearTimers(), this._prefersReducedMotion() || this._items.length === 0) {
+      this._setPhase("complete");
+      return;
+    }
+    const t = ++this._playToken;
+    this._setPhase("ready"), this._rafA = requestAnimationFrame(() => {
+      t !== this._playToken || !this.isConnected || (this._rafB = requestAnimationFrame(() => {
+        t !== this._playToken || !this.isConnected || (this._setPhase("running"), this._startAnimations(), this.hasAttribute("paused") || this._scheduleCompletion(this._totalAnimationMs()));
+      }));
+    });
+  }
+  pause() {
+    this.hasAttribute("paused") || this.setAttribute("paused", "");
+  }
+  replay() {
+    this.play();
+  }
+  refresh() {
+    this._syncItems(), this._syncRuntimeStyles(), this._syncTrigger(), this._phase === "complete" ? this._setPhase("complete") : this._phase === "running" && !this.hasAttribute("paused") && this._scheduleCompletion(this._totalAnimationMs()), this._autoStartIfNeeded();
+  }
+  render() {
+    var t;
+    this.setContent(`
+      <style>${S}</style>
+      <div class="root" part="root">
+        <div class="surface" part="surface">
+          <div class="list" part="list">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `), this._slotEl = this.root.querySelector("slot"), (t = this._slotEl) == null || t.addEventListener("slotchange", this._boundSlotChange), this._syncRuntimeStyles(), this._syncItems(), this._syncTrigger(), this._autoStartIfNeeded();
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  _handleSlotChange() {
+    this._syncItems(), this._phase === "complete" && this._setPhase("complete"), this._autoStartIfNeeded();
+  }
+  _handleReducedMotionChange() {
+    if (this._prefersReducedMotion()) {
+      this._clearTimers(), this._setPhase("complete");
+      return;
+    }
+    this._autoStartIfNeeded();
+  }
+  _bindReducedMotionWatcher() {
+    var t, e, i, a;
+    typeof window > "u" || typeof window.matchMedia != "function" || this._mediaQuery || (this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), (e = (t = this._mediaQuery).addEventListener) == null || e.call(t, "change", this._boundReducedMotionChange), (a = (i = this._mediaQuery).addListener) == null || a.call(i, this._boundReducedMotionChange));
+  }
+  _prefersReducedMotion() {
+    var t;
+    return !!((t = this._mediaQuery) != null && t.matches);
+  }
+  _itemsFromSlot() {
+    return this._slotEl ? this._slotEl.assignedElements({ flatten: !0 }).filter((t) => t instanceof HTMLElement) : [];
+  }
+  _syncItems() {
+    const t = this._itemsFromSlot(), e = new Set(t);
+    for (const i of this._items)
+      e.has(i) || (i.style.removeProperty("--ui-animated-list-index"), i.removeAttribute("data-ui-animated-list-managed"), i.hasAttribute("data-ui-animated-list-owned") && (i.removeAttribute("data-ui-animated-list-item"), i.removeAttribute("data-ui-animated-list-owned")));
+    t.forEach((i, a) => {
+      i.setAttribute("data-ui-animated-list-managed", ""), i.hasAttribute("data-ui-animated-list-item") || (i.setAttribute("data-ui-animated-list-item", ""), i.setAttribute("data-ui-animated-list-owned", "")), i.style.setProperty("--ui-animated-list-index", String(a));
+    }), this._items = t, this._items.length || this._setPhase("complete");
+  }
+  _syncRuntimeStyles() {
+    this.style.setProperty("--ui-animated-list-duration", m(this.getAttribute("duration"), o)), this.style.setProperty("--ui-animated-list-stagger", m(this.getAttribute("stagger"), l)), this.style.setProperty("--ui-animated-list-delay", m(this.getAttribute("delay"), d));
+    const t = u(this.getAttribute("padding"));
+    t ? this.style.setProperty("--ui-animated-list-padding", t) : this.style.removeProperty("--ui-animated-list-padding");
+    const e = u(this.getAttribute("gap"));
+    e ? this.style.setProperty("--ui-animated-list-gap", e) : this.style.removeProperty("--ui-animated-list-gap");
+    const i = this.getAttribute("radius");
+    if (!i || y.has(i.trim())) {
+      this.style.removeProperty("--ui-animated-list-radius"), this.style.removeProperty("--ui-animated-list-item-radius");
+      return;
+    }
+    const a = u(i);
+    a ? (this.style.setProperty("--ui-animated-list-radius", a), this.style.setProperty("--ui-animated-list-item-radius", a)) : (this.style.removeProperty("--ui-animated-list-radius"), this.style.removeProperty("--ui-animated-list-item-radius"));
+  }
+  _trigger() {
+    const t = this.getAttribute("trigger");
+    return t && v.has(t) ? t : "load";
+  }
+  _hasLoop() {
+    return this.hasAttribute("loop");
+  }
+  _animationPreset() {
+    const t = this.getAttribute("animation");
+    return t && A.has(t) ? t : "smooth";
+  }
+  _motionProfile() {
+    switch (this._animationPreset()) {
+      case "calm":
+        return {
+          durationScale: 1.12,
+          distanceScale: 0.78,
+          blurScale: 0.75,
+          rotateScale: 0.82,
+          overshootY: -1,
+          overshootScale: 1.01,
+          easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+        };
+      case "snappy":
+        return {
+          durationScale: 0.88,
+          distanceScale: 1.12,
+          blurScale: 0.92,
+          rotateScale: 1.08,
+          overshootY: -2.5,
+          overshootScale: 1.028,
+          easing: "cubic-bezier(0.16, 1, 0.3, 1)"
+        };
+      case "bouncy":
+        return {
+          durationScale: 1.08,
+          distanceScale: 1.18,
+          blurScale: 1,
+          rotateScale: 1.18,
+          overshootY: -4,
+          overshootScale: 1.05,
+          easing: "cubic-bezier(0.2, 1.18, 0.28, 1)"
+        };
+      case "smooth":
+      default:
+        return {
+          durationScale: 1,
+          distanceScale: 1,
+          blurScale: 1,
+          rotateScale: 1,
+          overshootY: -2,
+          overshootScale: 1.02,
+          easing: "cubic-bezier(0.2, 0.9, 0.24, 1)"
+        };
+    }
+  }
+  _loopDelayMs() {
+    return n(this.getAttribute("loop-delay"), x);
+  }
+  _totalAnimationMs() {
+    const t = Math.max(this._items.length, 1), e = n(this.getAttribute("duration"), n(o, 520)) * this._motionProfile().durationScale, i = n(this.getAttribute("stagger"), n(l, 90)), a = n(this.getAttribute("delay"), n(d, 0));
+    return Math.max(0, a + e + i * Math.max(0, t - 1));
+  }
+  _scheduleCompletion(t) {
+    if (this._clearCompletionTimer(), this.hasAttribute("paused")) {
+      this._completionRemaining = t;
+      return;
+    }
+    if (this._completionRemaining = t, t <= 0) {
+      queueMicrotask(() => this._completeRun());
+      return;
+    }
+    this._completionStartedAt = Date.now();
+    const e = this._playToken;
+    this._completionTimer = setTimeout(() => {
+      e === this._playToken && (this._completionTimer = null, this._completionRemaining = 0, this._completeRun());
+    }, t);
+  }
+  _scheduleLoop(t) {
+    if (this._clearLoopTimer(), !this._hasLoop() || this.hasAttribute("paused")) {
+      this._loopRemaining = t;
+      return;
+    }
+    if (this._loopRemaining = t, t <= 0) {
+      queueMicrotask(() => this.replay());
+      return;
+    }
+    this._loopStartedAt = Date.now();
+    const e = this._playToken;
+    this._loopTimer = setTimeout(() => {
+      e === this._playToken && (this._loopTimer = null, this._loopRemaining = 0, this.replay());
+    }, t);
+  }
+  _completeRun() {
+    this._setPhase("complete"), this._hasLoop() && !this._prefersReducedMotion() && this._scheduleLoop(this._loopDelayMs());
+  }
+  _pauseTimers() {
+    if (this._completionTimer) {
+      const t = Date.now() - this._completionStartedAt;
+      this._completionRemaining = Math.max(0, this._completionRemaining - t), this._clearCompletionTimer();
+    }
+    if (this._loopTimer) {
+      const t = Date.now() - this._loopStartedAt;
+      this._loopRemaining = Math.max(0, this._loopRemaining - t), this._clearLoopTimer();
+    }
+  }
+  _resumeTimers() {
+    if (this._phase === "running") {
+      this._completionRemaining > 0 ? this._scheduleCompletion(this._completionRemaining) : this._scheduleCompletion(this._totalAnimationMs());
+      return;
+    }
+    this._phase === "complete" && this._hasLoop() && (this._loopRemaining > 0 ? this._scheduleLoop(this._loopRemaining) : this._scheduleLoop(this._loopDelayMs()));
+  }
+  _clearTimers() {
+    this._playToken += 1, this._clearAnimations(), this._clearCompletionTimer(), this._clearLoopTimer(), this._rafA && cancelAnimationFrame(this._rafA), this._rafB && cancelAnimationFrame(this._rafB), this._rafA = 0, this._rafB = 0, this._completionRemaining = 0, this._loopRemaining = 0;
+  }
+  _clearCompletionTimer() {
+    this._completionTimer && (clearTimeout(this._completionTimer), this._completionTimer = null);
+  }
+  _clearLoopTimer() {
+    this._loopTimer && (clearTimeout(this._loopTimer), this._loopTimer = null);
+  }
+  _setPhase(t) {
+    this._phase = t, this.setAttribute("data-phase", t), this._syncStateAttributes();
+  }
+  _syncStateAttributes() {
+    const t = this.hasAttribute("paused") && (this._phase === "running" || this._loopRemaining > 0);
+    this.setAttribute("data-state", t ? "paused" : this._phase);
+  }
+  _syncTrigger() {
+    if (this._trigger() !== "visible") {
+      this._disconnectIntersectionObserver(), this._inView = !0;
+      return;
+    }
+    if (typeof IntersectionObserver > "u") {
+      this._inView = !0;
+      return;
+    }
+    this._disconnectIntersectionObserver(), this._intersectionObserver = new IntersectionObserver(
+      (t) => {
+        const e = t[0];
+        e && (this._inView = e.isIntersecting && e.intersectionRatio >= g(this.getAttribute("threshold")), this._inView && this._autoStartIfNeeded());
+      },
+      { threshold: [0, g(this.getAttribute("threshold")), 1] }
+    ), this._intersectionObserver.observe(this);
+  }
+  _disconnectIntersectionObserver() {
+    var t;
+    (t = this._intersectionObserver) == null || t.disconnect(), this._intersectionObserver = null;
+  }
+  _autoStartIfNeeded() {
+    if (!(!this.isConnected || this.hasAttribute("paused"))) {
+      if (this._prefersReducedMotion()) {
+        this._setPhase("complete");
+        return;
+      }
+      if (this._trigger() === "manual") {
+        this._phase === "idle" && this._setPhase("ready");
+        return;
+      }
+      if (this._trigger() === "visible" && !this._inView) {
+        this._phase === "idle" && this._setPhase("ready");
+        return;
+      }
+      this._hasTriggeredOnce || this.play();
+    }
+  }
+  _pauseAnimations() {
+    for (const t of this._animations)
+      try {
+        t.pause();
+      } catch {
+      }
+  }
+  _resumeAnimations() {
+    for (const t of this._animations)
+      try {
+        t.play();
+      } catch {
+      }
+  }
+  _clearAnimations() {
+    for (const t of this._animations)
+      try {
+        t.cancel();
+      } catch {
+      }
+    this._animations = [];
+  }
+  _effectKeyframes() {
+    const t = this.getAttribute("effect"), e = this._motionProfile(), i = e.distanceScale, a = 12 * e.blurScale, r = e.rotateScale;
+    switch (t) {
+      case "fade-down":
+        return [
+          { opacity: 0, transform: `translate3d(0, ${-18 * i}px, 0)`, filter: "none" },
+          { opacity: 1, transform: "translate3d(0, 0, 0)", filter: "none" }
+        ];
+      case "slide-left":
+        return [
+          { opacity: 0, transform: `translate3d(${28 * i}px, 0, 0)`, filter: "none" },
+          { opacity: 1, transform: "translate3d(0, 0, 0)", filter: "none" }
+        ];
+      case "slide-right":
+        return [
+          { opacity: 0, transform: `translate3d(${-28 * i}px, 0, 0)`, filter: "none" },
+          { opacity: 1, transform: "translate3d(0, 0, 0)", filter: "none" }
+        ];
+      case "scale-in":
+        return [
+          { opacity: 0, transform: `translate3d(0, ${10 * i}px, 0) scale(${1 - 0.06 * i})`, filter: "none" },
+          { opacity: 1, transform: "translate3d(0, 0, 0) scale(1)", filter: "none" }
+        ];
+      case "blur-in":
+        return [
+          {
+            opacity: 0,
+            transform: `translate3d(0, ${14 * i}px, 0) scale(${1 - 0.02 * i})`,
+            filter: `blur(${a}px)`
+          },
+          { opacity: 1, transform: "translate3d(0, 0, 0) scale(1)", filter: "blur(0)" }
+        ];
+      case "pop":
+        return [
+          { opacity: 0, transform: `translate3d(0, ${8 * i}px, 0) scale(${1 - 0.12 * i})`, filter: "none", offset: 0 },
+          {
+            opacity: 1,
+            transform: `translate3d(0, ${e.overshootY}px, 0) scale(${e.overshootScale})`,
+            filter: "none",
+            offset: 0.6
+          },
+          { opacity: 1, transform: "translate3d(0, 0, 0) scale(1)", filter: "none", offset: 1 }
+        ];
+      case "flip-in":
+        return [
+          {
+            opacity: 0,
+            transform: `perspective(900px) rotateX(${-18 * r}deg) translate3d(0, ${14 * i}px, 0)`,
+            filter: "none"
+          },
+          { opacity: 1, transform: "perspective(900px) rotateX(0deg) translate3d(0, 0, 0)", filter: "none" }
+        ];
+      case "rotate-in":
+        return [
+          {
+            opacity: 0,
+            transform: `translate3d(0, ${12 * i}px, 0) rotate(${-10 * r}deg) scale(${1 - 0.03 * i})`,
+            filter: "none"
+          },
+          { opacity: 1, transform: "translate3d(0, 0, 0) rotate(0deg) scale(1)", filter: "none" }
+        ];
+      case "tilt-in":
+        return [
+          {
+            opacity: 0,
+            transform: `perspective(900px) rotateY(${-14 * r}deg) translate3d(0, ${12 * i}px, 0)`,
+            filter: "none"
+          },
+          { opacity: 1, transform: "perspective(900px) rotateY(0deg) translate3d(0, 0, 0)", filter: "none" }
+        ];
+      case "float-up":
+        return [
+          { opacity: 0, transform: `translate3d(0, ${26 * i}px, 0) scale(${1 - 0.015 * i})`, filter: "none", offset: 0 },
+          {
+            opacity: 1,
+            transform: `translate3d(0, ${Math.min(e.overshootY, -1)}px, 0) scale(${Math.max(1.01, e.overshootScale - 5e-3)})`,
+            filter: "none",
+            offset: 0.62
+          },
+          { opacity: 1, transform: "translate3d(0, 0, 0) scale(1)", filter: "none", offset: 1 }
+        ];
+      case "swing-in":
+        return [
+          { opacity: 0, transform: `translate3d(${-16 * i}px, 0, 0) rotate(${-7 * r}deg)`, filter: "none", offset: 0 },
+          { opacity: 1, transform: "translate3d(1px, 0, 0) rotate(1deg)", filter: "none", offset: 0.7 },
+          { opacity: 1, transform: "translate3d(0, 0, 0) rotate(0deg)", filter: "none", offset: 1 }
+        ];
+      case "fade-up":
+      default:
+        return [
+          { opacity: 0, transform: `translate3d(0, ${18 * i}px, 0)`, filter: "none" },
+          { opacity: 1, transform: "translate3d(0, 0, 0)", filter: "none" }
+        ];
+    }
+  }
+  _startAnimations() {
+    var c;
+    if (this._clearAnimations(), typeof ((c = this._items[0]) == null ? void 0 : c.animate) != "function")
+      return;
+    const t = this._motionProfile(), e = n(this.getAttribute("duration"), n(o, 520)) * t.durationScale, i = n(this.getAttribute("stagger"), n(l, 90)), a = n(this.getAttribute("delay"), n(d, 0)), r = this._effectKeyframes();
+    this._animations = this._items.map((f, b) => {
+      f.style.animation = "none";
+      const h = f.animate(r, {
+        duration: e,
+        delay: a + b * i,
+        fill: "both",
+        easing: t.easing
+      });
+      if (this.hasAttribute("paused"))
+        try {
+          h.pause();
+        } catch {
+        }
+      return h;
+    });
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-animated-list") && customElements.define("ui-animated-list", T);
+export {
+  T as UIAnimatedList
+};