@d4gger/design-system 2.7.0 → 3.0.1

package/dist/motion.css

@@ -0,0 +1,512 @@
+/*
+ * D4gger motion vocabulary. Promoted from the /directions decision surface
+ * (apps/playground) where these studies were compared side by side. Core
+ * styles do not import this file — opt in per app, same as brand-effects.css.
+ *
+ * Two families:
+ *   - Entrance reveals (fade, converge, rift, stagger): one-shot, run once on
+ *     mount via `animation-fill-mode: both`, hold their end state.
+ *   - Continuous signals (orbit, pulse, scan): loop for as long as the state
+ *     they represent (loading, live status, progress) is true.
+ *
+ * `rift` is the sharp clip-path directional reveal — reserved for hero media
+ * and auth artwork, not general content.
+ *
+ * Correction (2026-09-13): a Part B pass briefly deleted fade/stagger/orbit/
+ * pulse/scan here as "dead code" on a zero-consumers grep alone, without
+ * actually looking at them first — wrong move for material Direction #2
+ * ("Motion, illustration & voice," not started) exists specifically to
+ * evaluate. Restored. All 13 classes are now genuinely consumed — see
+ * `/motion` in the playground, a standing reference (not a Directions
+ * episode) showing every one of them live, same pattern as `/cursor`. What's
+ * actually adopted on a real screen today: converge, rift, drift, ember,
+ * starfield, aurora, glow. fade/stagger/orbit/pulse/scan are built but
+ * unused on any real page — Direction #2's call, not a grep's.
+ *
+ * 2026-09-14 tuning pass, first real look at all 13 on /motion: fade slowed
+ * (too fast at 320ms), starfield dots enlarged + darkened (too faint to
+ * read), orbit's satellite moved off secondary to raw-white (reads as a
+ * second competing accent otherwise), scan's sweep distance parameterized
+ * (hardcoded ±170px meant most of its cycle was off-screen in anything
+ * narrower than ~340px — the actual "badly implemented" part). Scan is
+ * kept deliberately, not further redesigned — "maybe we can keep the scan,
+ * but it's just badly implemented" was about the mechanics, not the idea.
+ *
+ * 2026-09-15, two additions — direct brief: "the theme is void, like
+ * cosmos, spatial rifts, all of the stuff, but not too fancy," plus "we
+ * also miss some basic motions." A real gap found by inventory, not
+ * invented: every entrance reveal above has no exit counterpart — nothing
+ * in this file animates something LEAVING. `collapse` is that missing
+ * half, converge's literal mirror (materializes out of the void vs.
+ * returns to it). `twinkle` is a second, smaller-scoped ambient primitive
+ * alongside starfield/aurora/glow/drift — one element's slow flicker,
+ * where starfield is a whole background's worth of dots and glow is one
+ * large soft wash; genuinely different scale, not a duplicate. Both
+ * unclaimed on any real screen yet — same as fade/stagger/orbit/pulse/scan
+ * before them, Direction #2's call to make from looking at them live.
+ */
+
+@keyframes dsx-motion-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* 320ms → 520ms → 1040ms, same day, two rounds. First pass (520ms) brought
+   it in line with converge/rift's tempo but direct follow-up said still too
+   fast, "should be slow, like two times more, at least" — so 1040ms is
+   literally 2x the first correction, now the deliberate outlier of the
+   entrance-reveal set (converge 480ms, rift 420ms) rather than matching
+   them, since a plain opacity+lift fade reads as "slow" at a longer
+   duration than a fade paired with scale/blur/clip-path does. */
+.dsx-motion-fade {
+  animation: dsx-motion-fade-in 1040ms var(--dsx-motion-easing-decelerate) both;
+}
+
+@keyframes dsx-motion-converge-in {
+  from {
+    opacity: 0;
+    transform: scale(1.5);
+    filter: blur(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+}
+
+.dsx-motion-converge {
+  animation: dsx-motion-converge-in 480ms var(--dsx-motion-easing-decelerate) both;
+}
+
+@keyframes dsx-motion-rift-in {
+  from {
+    clip-path: inset(0 50%);
+    filter: brightness(2);
+  }
+
+  to {
+    clip-path: inset(0);
+    filter: brightness(1);
+  }
+}
+
+.dsx-motion-rift {
+  animation: dsx-motion-rift-in 420ms var(--dsx-motion-easing-decelerate) both;
+}
+
+@keyframes dsx-motion-stagger-in {
+  from {
+    opacity: 0;
+    transform: translateX(-18px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.dsx-motion-stagger > * {
+  animation: dsx-motion-stagger-in 320ms var(--dsx-motion-easing-decelerate) both;
+}
+
+.dsx-motion-stagger > *:nth-child(1) { animation-delay: 0ms; }
+.dsx-motion-stagger > *:nth-child(2) { animation-delay: 60ms; }
+.dsx-motion-stagger > *:nth-child(3) { animation-delay: 120ms; }
+.dsx-motion-stagger > *:nth-child(4) { animation-delay: 180ms; }
+.dsx-motion-stagger > *:nth-child(5) { animation-delay: 240ms; }
+.dsx-motion-stagger > *:nth-child(6) { animation-delay: 300ms; }
+.dsx-motion-stagger > *:nth-child(7) { animation-delay: 360ms; }
+.dsx-motion-stagger > *:nth-child(8) { animation-delay: 420ms; }
+
+/* dsx-motion-collapse — the exit family's first (and so far only) member, converge's
+   literal mirror: converge materializes an element out of the void (scale down + blur
+   in), collapse returns it there (scale down + blur out). One-shot like the reveals
+   above, but meant to fire on the way OUT — apply it via an exit-animation hook (most
+   animation libraries expose one) or a brief delayed unmount, not on mount. */
+@keyframes dsx-motion-collapse-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.85);
+    filter: blur(6px);
+  }
+}
+
+.dsx-motion-collapse {
+  animation: dsx-motion-collapse-out 320ms var(--dsx-motion-easing-accelerate) both;
+}
+
+@keyframes dsx-motion-orbit-spin {
+  from { transform: rotate(0); }
+  to { transform: rotate(360deg); }
+}
+
+.dsx-motion-orbit {
+  position: relative;
+  width: 74px;
+  height: 74px;
+  border: 1px solid color-mix(in srgb, var(--dsx-color-primary) 53%, transparent);
+  border-radius: 50%;
+  animation: dsx-motion-orbit-spin 2.8s linear infinite;
+}
+
+.dsx-motion-orbit::after {
+  content: '';
+  position: absolute;
+  inset: 23px;
+  border-radius: 50%;
+  background: var(--dsx-color-primary);
+  box-shadow: 0 0 24px var(--dsx-color-primary);
+}
+
+/* Satellite was var(--dsx-color-secondary) — flagged 2026-09-14 ("maybe it
+   should use a different color, I don't know"). Moved to the raw-white
+   token (tokens.css, added earlier the same day for exactly this kind of
+   case — an effect-only value, not a semantic color role): the ring+core
+   are both primary, so a secondary satellite just reads as a second accent
+   competing with the first. Raw white reads as a bright signal spark
+   instead — distinct without introducing a third hue into one indicator. */
+.dsx-motion-orbit__satellite {
+  position: absolute;
+  top: -5px;
+  left: 31px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--dsx-raw-white);
+  box-shadow: 0 0 14px var(--dsx-raw-white);
+}
+
+@keyframes dsx-motion-pulse-ring {
+  0%, 100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dsx-motion-pulse-color, var(--dsx-color-primary)) 53%, transparent);
+  }
+
+  55% {
+    box-shadow: 0 0 0 28px color-mix(in srgb, var(--dsx-motion-pulse-color, var(--dsx-color-primary)) 0%, transparent);
+  }
+}
+
+.dsx-motion-pulse {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--dsx-motion-pulse-color, var(--dsx-color-primary));
+  animation: dsx-motion-pulse-ring 2.4s ease-out infinite;
+}
+
+/* "Scan is just badly implemented" (2026-09-14) — real, findable cause: the
+   sweep traveled a hardcoded ±170px (340px total) regardless of the actual
+   container, so on anything narrower than ~340px the line spent most of
+   its 3s cycle off to the side, invisible, and only flashed briefly near
+   the edges — exactly what reads as "badly implemented." Distance is now a
+   custom property a consumer can size to their own container instead of a
+   constant baked in for one specific layout; --dsx-motion-scan-distance
+   defaults to 80px (160px total) so it stays reasonable in a typical
+   compact usage without the consumer having to set anything. */
+@keyframes dsx-motion-scan-sweep {
+  0% {
+    transform: translateX(calc(-1 * var(--dsx-motion-scan-distance, 80px)));
+    opacity: 0;
+  }
+
+  15%, 75% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(var(--dsx-motion-scan-distance, 80px));
+    opacity: 0;
+  }
+}
+
+.dsx-motion-scan {
+  width: 3px;
+  height: 110px;
+  background: linear-gradient(
+    transparent,
+    var(--dsx-motion-scan-color, var(--dsx-color-secondary)),
+    var(--dsx-raw-white),
+    var(--dsx-motion-scan-color, var(--dsx-color-secondary)),
+    transparent
+  );
+  box-shadow: 0 0 20px var(--dsx-motion-scan-color, var(--dsx-color-secondary));
+  animation: dsx-motion-scan-sweep 3s ease-in-out infinite;
+}
+
+/* Round 14 (2026-08-26), new addition — a real gap in the continuous-signal set: orbit/pulse/
+   scan all read as discrete indicators (a status dot, a ping, a sweep), none of them is a broad
+   ambient wash. "we don't have ambient glow, kinda. It's so static right now" — this fills that
+   specifically: a slow breathing scale+opacity cycle, meant for a large soft glow shape (a
+   radial-gradient blob, a hero backdrop) rather than a small indicator element. Direct
+   correction, same round: the first pass (0.55→0.85 opacity, 1→1.06 scale) was too subtle to
+   read as "on" — "I barely see it." Widened to a real swing (0.35→1, 1→1.15) that's
+   unmistakably alive without strobing (5s stays slow). */
+@keyframes dsx-motion-glow-breathe {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+.dsx-motion-glow {
+  animation: dsx-motion-glow-breathe 5s var(--dsx-motion-easing-standard, ease-in-out) infinite;
+}
+
+/* Round 15 (2026-08-26), new addition — continuous idle motion for a foreground decorative
+   element (as opposed to dsx-motion-glow, meant for a background wash): "we need to have inside
+   of the art on the hero section a continuous motion... fade plus lift should be appended to
+   the kunai. Like, it should disappear, appear, maybe." A gentle, slow opacity+lift cycle,
+   distinct from the one-shot dsx-motion-fade (which never repeats) — meant to pair with rift's
+   one-shot entrance, taking over once that settles. */
+/* Round 18 (2026-08-27) correction, same pattern as dsx-motion-glow-breathe's own round-14 fix
+   above — direct feedback: "Drift is kind of good, but it's not working." It was never actually
+   broken, just under-amplified: a 10px lift reads as nothing once the artwork it's applied to
+   renders far larger than it used to (the hero kunai went from a fixed 150px mark to filling its
+   whole responsive container). Widened lift and added a slight scale breathe so the same cycle
+   stays perceptible at the mark's current size. */
+@keyframes dsx-motion-drift {
+  0%,
+  100% {
+    opacity: 0.8;
+    transform: translateY(0) scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-20px) scale(1.03);
+  }
+}
+
+.dsx-motion-drift {
+  animation: dsx-motion-drift 4s var(--dsx-motion-easing-standard, ease-in-out) infinite;
+}
+
+/* Round 18 (2026-08-27), new addition — direct ask: "you don't need to tunnel vision the tip of
+   the blade. You need to have a full motion idea... it should have variations inside the design
+   system... we can add a lot of stuff that are not mandatory to use, we just decide to use or
+   not." A second, independent idle-motion option alongside dsx-motion-drift, not a replacement —
+   faint motes drifting upward across a whole area instead of one animation anchored to a single
+   point on the artwork. Opt-in and layout-agnostic: `.dsx-motion-ember` only supplies the
+   shared rise-and-fade keyframe; how many motes exist and where each starts is the consumer's
+   own markup (`.dsx-motion-ember__mote` children, positioned via each one's own inline
+   `left`/`bottom`/`animation-delay`) — the class doesn't assume a particle count or a container
+   shape, so the same two classes work behind a small mark or a full section. */
+@keyframes dsx-motion-ember-rise {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  15% {
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: translateY(-140%);
+    opacity: 0;
+  }
+}
+
+.dsx-motion-ember {
+  position: relative;
+}
+
+.dsx-motion-ember__mote {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: var(--dsx-rounded-full);
+  background: var(--dsx-color-primary);
+  animation: dsx-motion-ember-rise 3.6s ease-in infinite;
+  animation-delay: var(--dsx-motion-ember-delay, 0s);
+  pointer-events: none;
+}
+
+/* Round 18 (2026-08-27), new addition — background atmosphere, direct ask: "we have void here,
+   and we have something else... starfield drift... and aurora mesh." Two opt-in ambient
+   background effects, independent of the foreground motion above — CSS-only (no particle
+   markup, unlike dsx-motion-ember), meant for a full-bleed wrapper behind page content. Split
+   across ::before/::after (not two competing ::before rules) specifically so both can be applied
+   to the same element at once — "ambient effect, like all of the stuff" was read as wanting them
+   layered together, not a single either/or choice. */
+/* isolation: isolate is defensive hardening, added 2026-09-14 alongside a
+   /motion review-page bug report ("I cannot see Starfield, Aurora") — that
+   specific case turned out to be a zero-size container in the demo page,
+   not this. But the ::before/::after layers below do use z-index: -1 to
+   sit behind this element's own content, and without a local stacking
+   context a negative z-index escapes past this box entirely to paint
+   behind whatever ANCESTOR happens to establish the nearest stacking
+   context — which could be an opaque surface for some future consumer.
+   isolation: isolate pins the effect to paint just behind THIS element,
+   regardless of what wraps it, so that failure mode can't happen later. */
+.dsx-motion-starfield {
+  position: relative;
+  isolation: isolate;
+}
+
+/* Dot size 1-1.5px @ 0.18 opacity → 2-3px @ 0.4 (2026-09-14, direct
+   feedback: "I cannot see it because it's so vague, I just simply cannot
+   see them well"). This was a real visibility bug, distinct from the same-
+   day zero-size layout bug fixed on /motion's demo page — even rendered at
+   its correct size, the dots themselves were too faint to read on a real
+   screen, not just in the demo. */
+/* 2026-09-30 seam + tempo fix (direct feedback: "no smooth movings...
+   40s before the movement, feels like lagging"). Two stacked causes:
+   60px over 40s is 1.5px/s — below perception — and ease-in-out parks
+   velocity near zero at both ends of every 40s leg, so for seconds at a
+   time literally zero pixels moved. Now a true seamless loop instead of
+   an alternate: the 8-dot field is a 120px tile (background-repeat),
+   the layer is oversized one tile top+bottom so travel never exposes a
+   gap, and the keyframe translates exactly one tile period — end state
+   == start state, so linear infinite has no snap point at all. 120px
+   per 12s (10px/s) reads as alive-but-ambient; no dot sits on a tile
+   boundary (min 15% / max 90% of 120px), so repeats don't clip. */
+.dsx-motion-starfield::before {
+  content: '';
+  position: absolute;
+  inset: -120px 0;
+  background-size: 100% 120px;
+  background-repeat: repeat;
+  background-image: radial-gradient(2px 2px at 12% 22%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(2.5px 2.5px at 32% 68%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(1.5px 1.5px at 52% 15%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(1.5px 1.5px at 68% 55%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(2.5px 2.5px at 84% 30%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(1.5px 1.5px at 92% 75%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(1.5px 1.5px at 8% 85%, var(--dsx-color-on-surface), transparent),
+    radial-gradient(2.5px 2.5px at 45% 90%, var(--dsx-color-on-surface), transparent);
+  opacity: 0.4;
+  animation: dsx-motion-starfield-drift 12s linear infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@keyframes dsx-motion-starfield-drift {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-120px);
+  }
+}
+
+.dsx-motion-aurora {
+  position: relative;
+  isolation: isolate;
+}
+
+.dsx-motion-aurora::after {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  background: radial-gradient(
+      ellipse 40% 55% at 25% 35%,
+      color-mix(in srgb, var(--dsx-color-primary) 30%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 35% 50% at 78% 65%,
+      color-mix(in srgb, var(--dsx-color-secondary) 22%, transparent),
+      transparent 60%
+    );
+  filter: blur(60px);
+  animation: dsx-motion-aurora-drift 14s ease-in-out infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@keyframes dsx-motion-aurora-drift {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  50% {
+    transform: translate(3%, -2%) scale(1.06);
+  }
+}
+
+/* dsx-motion-twinkle — one small element's slow opacity flicker. Distinct from starfield
+   (a whole background's worth of dots) and glow (one large soft wash) by scale, not just
+   duration: this decorates a single existing element — a status accent, a small
+   decorative mark — that wants a living-cosmos quality without pulling in either of
+   those. No colour/geometry of its own, same as drift/glow — the consumer's element
+   supplies both. animation-delay is a custom property so several twinkling elements on
+   one screen don't all flicker in lockstep. */
+@keyframes dsx-motion-twinkle {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.dsx-motion-twinkle {
+  animation: dsx-motion-twinkle 2.6s ease-in-out infinite;
+  animation-delay: var(--dsx-motion-twinkle-delay, 0s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-motion-fade,
+  .dsx-motion-converge,
+  .dsx-motion-rift,
+  .dsx-motion-stagger > *,
+  .dsx-motion-orbit,
+  .dsx-motion-pulse,
+  .dsx-motion-scan,
+  .dsx-motion-glow,
+  .dsx-motion-drift,
+  .dsx-motion-starfield::before,
+  .dsx-motion-aurora::after,
+  .dsx-motion-twinkle {
+    animation: none !important;
+    opacity: 1 !important;
+    filter: none !important;
+    transform: none !important;
+    clip-path: none !important;
+  }
+
+  /* Not merged into the block above on purpose: those force opacity: 1 (skip straight
+     to "fully visible"), correct for an entrance reveal's resting state but backwards
+     for an exit — collapse's whole job is that the element is on its way out, so forcing
+     it back to visible would fight whatever unmount logic is timing the actual removal.
+     Reduced motion here means "skip the transition," not "cancel the exit." */
+  .dsx-motion-collapse {
+    animation: none !important;
+  }
+
+  .dsx-motion-ember__mote {
+    display: none;
+  }
+
+  .dsx-motion-starfield::before,
+  .dsx-motion-aurora::after {
+    animation: none !important;
+  }
+}

package/dist/reset.css

@@ -6,6 +6,43 @@
 
 html {
   -webkit-text-size-adjust: 100%;
+  /* Real bug found live (2026-08-26, technical compliance check): a Carousel's own track
+     legitimately extends its inactive slides off-screen (clipped locally by its own
+     `.dsx-carousel__viewport { overflow: hidden }`), but nothing upstream constrained that from
+     registering on `document.documentElement.scrollWidth` — confirmed at 375px viewport, a
+     landing tier card's duration carousel produced real page-level horizontal scroll. Any
+     locally-clipped-but-still-laid-out content anywhere in a consuming app carries the same
+     risk. Reset-level safety net, not a per-component patch — matches this design system's own
+     stated policy that the page body must never scroll horizontally.
+
+     `clip`, not `hidden` (corrected same day, second real bug found in the same fix): a
+     consuming app's own `html, body { height: 100% }` (a completely normal, common pattern —
+     confirmed present in the playground's own globals.css, not something to change) combines
+     with `overflow-x: hidden` in a way that isn't obvious — per the CSS overflow spec, setting
+     overflow non-`visible` on ONE axis forces the other axis to compute to `auto` too, which
+     turns both `html` and `body` into their own height-constrained, independently-scrolling
+     boxes instead of letting the page scroll normally. Confirmed live: with `hidden`, real page
+     content stayed genuinely there (correct DOM, correct opacity, correct bounding boxes) but
+     `window.scrollY` stayed pinned at 0 through both `scrollTo` and a real mouse-wheel event —
+     the whole site silently stopped scrolling. `overflow-x: clip` blocks the same horizontal
+     overflow without establishing a scroll container on that box at all, so it never triggers
+     the other-axis auto-computation — verified live after this fix: real wheel-driven scrolling
+     restored, horizontal overflow still blocked. */
+  overflow-x: clip;
+  /* Confirmed real bug live (2026-08-30): opening any modal-mode Radix layer (DropdownMenu,
+     Sheet, Dialog...) locks body scroll (`overflow: hidden`), which removes the browser's
+     reserved scrollbar gutter — on a platform with classic (non-overlay) scrollbars, the whole
+     page's available width grows by the scrollbar's width the instant that happens, visibly
+     shifting every fixed/sticky-positioned element (confirmed report: "the page stuff moving
+     when materials menu is being used"). Reserving the gutter permanently, whether or not a
+     scrollbar is currently needed, means locking/unlocking scroll never changes layout width —
+     same reset-level, not-per-component fix as the overflow-x rule above. */
+  scrollbar-gutter: stable;
+}
+
+/* Same fix, same reasoning as html above — see that comment for the full history. */
+body {
+  overflow-x: clip;
 }
 
 body,