@editora/ui-core 0.1.9 → 0.1.12

package/dist/animated-list.cjs.js

@@ -0,0 +1,672 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-1b301e7f.js"),o="520ms",l="90ms",d="0ms",y=1400,p=.24,v=new Set(["none","sm","md","lg","full"]),A=new Set(["load","visible","manual"]),S=new Set(["calm","smooth","snappy","bouncy"]),T=`
+  :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 b extends x.ElementBase{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>${T}</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||v.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&&A.has(t)?t:"load"}_hasLoop(){return this.hasAttribute("loop")}_animationPreset(){const t=this.getAttribute("animation");return t&&S.has(t)?t:"smooth"}_motionProfile(){switch(this._animationPreset()){case"calm":return{durationScale:1.12,distanceScale:.78,blurScale:.75,rotateScale:.82,overshootY:-1,overshootScale:1.01,easing:"cubic-bezier(0.22, 1, 0.36, 1)"};case"snappy":return{durationScale:.88,distanceScale:1.12,blurScale:.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"),y)}_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-.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-.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-.12*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${e.overshootY}px, 0) scale(${e.overshootScale})`,filter:"none",offset:.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-.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-.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-.005)})`,filter:"none",offset:.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:.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,_)=>{f.style.animation="none";const h=f.animate(r,{duration:e,delay:a+_*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",b);exports.UIAnimatedList=b;