@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/index.css

@@ -0,0 +1,122 @@
+/* src/components/ambient-field/ambient-field.css */
+@property --ambient-lead { syntax: "<color>"; inherits: true; initial-value: transparent; }
+@layer base {
+  [data-slot=ambient-field] {
+    --ambient-lead: var(--ambient-a, transparent);
+    transition: --ambient-lead var(--t-base) var(--ease-standard);
+  }
+  [data-slot=ambient-field][data-ambient-tint] {
+    --ambient-lead: var(--ambient-tint, var(--ambient-a, transparent));
+  }
+  [data-slot=ambient-field]::before {
+    content: "";
+    position: absolute;
+    inset: -40px;
+    pointer-events: none;
+    background-image:
+      radial-gradient(
+        at 18% 22%,
+        color-mix(in oklab, var(--ambient-lead) calc(var(--ambient-alpha) * 100%), transparent) 0,
+        transparent 55%),
+      radial-gradient(
+        at 82% 18%,
+        color-mix(in oklab, var(--ambient-b, transparent) calc(var(--ambient-alpha) * 100%), transparent) 0,
+        transparent 50%),
+      radial-gradient(
+        at 55% 88%,
+        color-mix(in oklab, var(--ambient-c, transparent) calc(var(--ambient-alpha) * 100%), transparent) 0,
+        transparent 55%);
+    filter: blur(48px);
+    -webkit-mask-image: var(--deco-fade-edges);
+    mask-image: var(--deco-fade-edges);
+  }
+  [data-slot=ambient-field][data-drift]::before {
+    will-change: transform;
+    animation: brand-ui-ambient-drift calc(20s / max(var(--motion-factor), 0.01)) linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :root:not([data-motion-pref=full]) [data-slot=ambient-field][data-drift]::before {
+      animation-play-state: paused;
+      will-change: auto;
+    }
+  }
+  [data-motion-pref=reduced] [data-slot=ambient-field][data-drift]::before {
+    animation-play-state: paused;
+    will-change: auto;
+  }
+  @keyframes brand-ui-ambient-drift {
+    0%, 100% {
+      transform: translate3d(0, 0, 0);
+    }
+    33% {
+      transform: translate3d(28px, -16px, 0);
+    }
+    66% {
+      transform: translate3d(-20px, 24px, 0);
+    }
+  }
+}
+
+/* src/components/parallax-plane/parallax-plane.css */
+@layer base {
+  [data-slot=parallax-plane][data-parallax=timeline] {
+    animation: brand-ui-parallax-plane linear both;
+    animation-timeline: scroll(root block);
+    animation-range: 0px var(--parallax-range);
+  }
+  @keyframes brand-ui-parallax-plane {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(var(--parallax-travel));
+    }
+  }
+}
+
+/* src/components/reveal-on-enter/reveal-on-enter.css */
+@layer base {
+  [data-slot=reveal-on-enter] {
+    --reveal-stagger-step: 60ms;
+  }
+  [data-slot=reveal-on-enter][data-reveal]:not([data-stagger]),
+  [data-slot=reveal-on-enter][data-reveal][data-stagger] > * {
+    transition-property: opacity, transform;
+    transition-duration: var(--t-base);
+    transition-timing-function: var(--ease-entrance);
+  }
+  [data-slot=reveal-on-enter][data-reveal][data-stagger] > * {
+    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger-step) * var(--motion-factor));
+  }
+  [data-slot=reveal-on-enter][data-reveal=hidden]:not([data-stagger]),
+  [data-slot=reveal-on-enter][data-reveal=hidden][data-stagger] > * {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+}
+
+/* src/components/token-spotlight/token-spotlight.css */
+@layer base {
+  [data-token-consumer] {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    animation: brand-ui-token-consumer-pulse var(--t-fast) var(--ease-standard);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :root:not([data-motion-pref=full]) [data-token-consumer] {
+      animation: none;
+    }
+  }
+  [data-motion-pref=reduced] [data-token-consumer] {
+    animation: none;
+  }
+  @keyframes brand-ui-token-consumer-pulse {
+    from {
+      outline-color: transparent;
+    }
+    to {
+      outline-color: var(--ring);
+    }
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ambient-field/ambient-field.css","../src/components/parallax-plane/parallax-plane.css","../src/components/reveal-on-enter/reveal-on-enter.css","../src/components/token-spotlight/token-spotlight.css"],"sourcesContent":["/*\n * AmbientField — a soft radial mesh of two or three token colours behind a page or region.\n * Decoration policy (packages/tokens/src/decoration.css): the mesh paints on a masked `::before`\n * LAYER, never on the host (a mask on the host would fade its children), and never inside a\n * control. Colours are token references passed in by the component (`--ambient-a|b|c`), mixed\n * to `--ambient-alpha` (clamped ≤ 0.18 in the component) — no literal colour lives here.\n *\n * Motion gate: the drift is a transform loop whose duration is divided by `--motion-factor`, and\n * it is paused whenever the gate is at its floor — the same two selectors the tokens use for\n * `--motion-factor` itself (OS reduce unless the reader chose \"full\", or an explicit \"reduced\").\n */\n\n/* Registered so the tint crossfades: an unregistered custom property cannot interpolate. */\n@property --ambient-lead {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@layer base {\n  [data-slot=\"ambient-field\"] {\n    --ambient-lead: var(--ambient-a, transparent);\n    transition: --ambient-lead var(--t-base) var(--ease-standard);\n  }\n\n  /* Tint API: `data-ambient-tint=\"<token>\"` + `--ambient-tint` shift the first stop. */\n  [data-slot=\"ambient-field\"][data-ambient-tint] {\n    --ambient-lead: var(--ambient-tint, var(--ambient-a, transparent));\n  }\n\n  [data-slot=\"ambient-field\"]::before {\n    content: \"\";\n    position: absolute;\n    /* Headroom for the drift so the layer's edge never enters the host. */\n    inset: -40px;\n    pointer-events: none;\n    background-image:\n      radial-gradient(\n        at 18% 22%,\n        color-mix(in oklab, var(--ambient-lead) calc(var(--ambient-alpha) * 100%), transparent) 0,\n        transparent 55%\n      ),\n      radial-gradient(\n        at 82% 18%,\n        color-mix(\n            in oklab,\n            var(--ambient-b, transparent) calc(var(--ambient-alpha) * 100%),\n            transparent\n          )\n          0,\n        transparent 50%\n      ),\n      radial-gradient(\n        at 55% 88%,\n        color-mix(\n            in oklab,\n            var(--ambient-c, transparent) calc(var(--ambient-alpha) * 100%),\n            transparent\n          )\n          0,\n        transparent 55%\n      );\n    filter: blur(48px);\n    -webkit-mask-image: var(--deco-fade-edges);\n    mask-image: var(--deco-fade-edges);\n  }\n\n  [data-slot=\"ambient-field\"][data-drift]::before {\n    will-change: transform;\n    animation: brand-ui-ambient-drift calc(20s / max(var(--motion-factor), 0.01)) linear infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root:not([data-motion-pref=\"full\"]) [data-slot=\"ambient-field\"][data-drift]::before {\n      animation-play-state: paused;\n      will-change: auto;\n    }\n  }\n\n  [data-motion-pref=\"reduced\"] [data-slot=\"ambient-field\"][data-drift]::before {\n    animation-play-state: paused;\n    will-change: auto;\n  }\n\n  /* ≤ 40px from rest on either axis; starts and ends at rest so the loop has no seam. */\n  @keyframes brand-ui-ambient-drift {\n    0%,\n    100% {\n      transform: translate3d(0, 0, 0);\n    }\n    33% {\n      transform: translate3d(28px, -16px, 0);\n    }\n    66% {\n      transform: translate3d(-20px, 24px, 0);\n    }\n  }\n}\n","/*\n * ParallaxPlane — the scroll-driven path (`animation-timeline: scroll(root)`).\n * The component sets `data-parallax=\"timeline\"` only after hydration, only when the motion gate\n * is open and the browser supports scroll timelines, and passes the geometry in:\n *   --parallax-travel  signed end offset (never more than 60px from the content plane)\n *   --parallax-range   scroll distance over which that offset is reached (travel / |1 − rate|)\n * Past the range the plane holds its offset (`both` fill), so the total travel stays clamped at\n * every scroll position. Under reduced motion the attribute is never set: no animation, no\n * transform. `transform` only — nothing here triggers layout.\n */\n@layer base {\n  [data-slot=\"parallax-plane\"][data-parallax=\"timeline\"] {\n    animation: brand-ui-parallax-plane linear both;\n    animation-timeline: scroll(root block);\n    animation-range: 0px var(--parallax-range);\n  }\n\n  @keyframes brand-ui-parallax-plane {\n    from {\n      transform: translateY(0);\n    }\n    to {\n      transform: translateY(var(--parallax-travel));\n    }\n  }\n}\n","/*\n * RevealOnEnter — once-only entrance. The server HTML never carries the hidden state: the\n * component sets `data-reveal=\"hidden\"` only after hydration, only when the motion gate is open,\n * only for content still outside the viewport, and flips it to \"shown\" the first time it\n * intersects (never back). Timing and easing are the gated tokens (`--t-base`,\n * `--ease-entrance`); the stagger step scales with `--motion-factor`. `opacity`/`transform` only.\n */\n@layer base {\n  [data-slot=\"reveal-on-enter\"] {\n    /* Per-child delay step for `stagger`; multiplied by --motion-factor below. */\n    --reveal-stagger-step: 60ms;\n  }\n\n  [data-slot=\"reveal-on-enter\"][data-reveal]:not([data-stagger]),\n  [data-slot=\"reveal-on-enter\"][data-reveal][data-stagger] > * {\n    transition-property: opacity, transform;\n    transition-duration: var(--t-base);\n    transition-timing-function: var(--ease-entrance);\n  }\n\n  [data-slot=\"reveal-on-enter\"][data-reveal][data-stagger] > * {\n    transition-delay: calc(\n      var(--reveal-index, 0) * var(--reveal-stagger-step) * var(--motion-factor)\n    );\n  }\n\n  [data-slot=\"reveal-on-enter\"][data-reveal=\"hidden\"]:not([data-stagger]),\n  [data-slot=\"reveal-on-enter\"][data-reveal=\"hidden\"][data-stagger] > * {\n    opacity: 0;\n    transform: translateY(24px);\n  }\n}\n","/*\n * TokenSpotlight — the outline pulse a hovered/focused chip draws on every element that\n * consumes its token (RM-103, wave-4 ruling 20). Tokens only (`--ring`, `--t-fast`,\n * `--ease-standard`); no HTML sink, no inline style — `data-token-consumer` is the only\n * hook, added/removed by the component itself (precedent: `ambient-field.css`).\n */\n@layer base {\n  [data-token-consumer] {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n    animation: brand-ui-token-consumer-pulse var(--t-fast) var(--ease-standard);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root:not([data-motion-pref=\"full\"]) [data-token-consumer] {\n      animation: none;\n    }\n  }\n\n  [data-motion-pref=\"reduced\"] [data-token-consumer] {\n    animation: none;\n  }\n\n  @keyframes brand-ui-token-consumer-pulse {\n    from {\n      outline-color: transparent;\n    }\n    to {\n      outline-color: var(--ring);\n    }\n  }\n}\n"],"mappings":"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","names":[]}