@apliteni/apliteni-ui 0.4.0 → 0.6.0

package/src/styles/motion.css

@@ -0,0 +1,166 @@
+/* ============================================================================
+ * apliteni-ui — MOTION LIBRARY
+ *
+ * A small, token-driven, framework-agnostic motion system: reusable entrance,
+ * micro-interaction, attention, and scroll-reveal effects as plain classes.
+ * Every timing reads the brand motion vocabulary (--duration-* / --easing-*,
+ * synced from design-system) so motion re-themes and stays consistent.
+ *
+ * Per-effect overrides via custom properties on the element:
+ *   --m-dur    duration        (default: per effect)
+ *   --m-ease   timing function (default: per effect)
+ *   --m-delay  start delay      (default: 0s)
+ *   --m-dist   travel distance for slides (default: 16px)
+ *
+ * Scroll reveals need one line of JS — the optional `initReveal()` hook from
+ * apliteni-ui/motion. Without JS, [data-reveal] content stays fully visible
+ * (progressive enhancement, never hidden behind a script that didn't run).
+ *
+ * A single global prefers-reduced-motion block at the end neutralises ALL of
+ * the above — plus any component animation in the kit — as the safety net.
+ * ========================================================================== */
+
+/* -- Entrances -------------------------------------------------------------
+ * `both` fill so the element starts at the "from" frame (hidden) and holds
+ * the "to" frame. Compose with a delay for staggered groups. */
+.m-fade-in,
+.m-slide-up,
+.m-slide-down,
+.m-slide-left,
+.m-slide-right,
+.m-scale-in,
+.m-blur-in {
+  animation-duration: var(--m-dur, var(--dur-slow));
+  animation-timing-function: var(--m-ease, var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)));
+  animation-delay: var(--m-delay, 0s);
+  animation-fill-mode: both;
+}
+.m-fade-in    { animation-name: m-fade; }
+.m-slide-up   { animation-name: m-slide-up; }
+.m-slide-down { animation-name: m-slide-down; }
+.m-slide-left { animation-name: m-slide-left; }
+.m-slide-right{ animation-name: m-slide-right; }
+.m-scale-in   { animation-name: m-scale-in; }
+.m-blur-in    { animation-name: m-blur-in; }
+
+@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes m-slide-up {
+  from { opacity: 0; transform: translateY(var(--m-dist, 16px)); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes m-slide-down {
+  from { opacity: 0; transform: translateY(calc(-1 * var(--m-dist, 16px))); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes m-slide-left {
+  from { opacity: 0; transform: translateX(var(--m-dist, 16px)); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes m-slide-right {
+  from { opacity: 0; transform: translateX(calc(-1 * var(--m-dist, 16px))); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes m-scale-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes m-blur-in {
+  from { opacity: 0; filter: blur(8px); }
+  to   { opacity: 1; filter: blur(0); }
+}
+
+/* -- Micro-interactions ---------------------------------------------------- */
+.m-lift {
+  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
+}
+.m-lift:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
+}
+.m-press {
+  transition: transform var(--duration-instant, 80ms) var(--easing-sharp, cubic-bezier(0.4, 0, 0.6, 1));
+}
+.m-press:active { transform: scale(0.97); }
+
+/* Shimmer / skeleton — a loading placeholder that reads the accent-neutral. */
+.m-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+  border-radius: var(--radius-sm, 8px);
+}
+.m-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--text) 12%, transparent),
+    transparent
+  );
+  animation: m-shimmer var(--duration-crawl, 1s) var(--easing-linear, linear) infinite;
+}
+@keyframes m-shimmer { to { transform: translateX(100%); } }
+
+/* -- Attention ------------------------------------------------------------- */
+.m-pulse { animation: m-pulse 2s var(--ease) infinite; }
+@keyframes m-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.04); opacity: 0.86; }
+}
+
+.m-shake { animation: m-shake var(--dur-slow) var(--ease) both; }
+@keyframes m-shake {
+  0%, 100% { transform: translateX(0); }
+  20%      { transform: translateX(-6px); }
+  40%      { transform: translateX(5px); }
+  60%      { transform: translateX(-3px); }
+  80%      { transform: translateX(2px); }
+}
+
+/* Success draw-in — put on an SVG; strokes draw themselves. Set --m-len to the
+ * path length (getTotalLength) for an exact draw; 48 is a sane default. */
+.m-draw path,
+.m-draw [data-draw] {
+  stroke-dasharray: var(--m-len, 48);
+  stroke-dashoffset: var(--m-len, 48);
+  animation: m-draw var(--dur-slow) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
+  animation-delay: var(--m-delay, 0s);
+}
+@keyframes m-draw { to { stroke-dashoffset: 0; } }
+
+/* -- Scroll reveals --------------------------------------------------------
+ * Progressive enhancement: [data-reveal] is only hidden once JS marks the
+ * document (<html class="js-reveal">). initReveal() then adds .is-revealed as
+ * each element enters the viewport. Stagger a group with --reveal-i (0,1,2…).
+ * If JS never runs, content shows normally — nothing is trapped hidden. */
+.js-reveal [data-reveal] {
+  opacity: 0;
+  transform: translateY(18px);
+  transition:
+    opacity var(--dur-slow) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)),
+    transform var(--dur-slow) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+  transition-delay: calc(var(--reveal-i, 0) * var(--delay-2));
+}
+.js-reveal [data-reveal].is-revealed {
+  opacity: 1;
+  transform: none;
+}
+
+/* -- Global reduced-motion safety net -------------------------------------
+ * Neutralises every animation/transition in the kit — the library's effects,
+ * component motion (button loader, badge pulse, feedback check), and smooth
+ * scroll. iteration-count:1 lets one-shot animations settle on their final
+ * frame (e.g. a checkmark stays drawn) instead of snapping to the start. */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto !important; }
+  *, ::before, ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  [data-reveal] { opacity: 1 !important; transform: none !important; }
+}

package/src/styles/nav.css

@@ -0,0 +1,218 @@
+/* ============================================================================
+ * Navigation — sidebar rail, horizontal tabs, breadcrumbs. One token-driven
+ * class family (ui-nav__…) so every variant re-themes across accents +
+ * light/dark. Mirrors the look the app shells draw inline (.ui-side) but as a
+ * first-class, standalone component. Active/hover surfaces are pure tokens.
+ * ========================================================================== */
+
+.ui-nav { font-family: var(--font-sans); }
+.ui-nav ul, .ui-nav ol { list-style: none; margin: 0; padding: 0; }
+
+/* -- Sidebar rail -------------------------------------------------------- */
+.ui-nav--side {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 216px;
+}
+.ui-nav__section + .ui-nav__section { margin-top: 14px; }
+.ui-nav__list { display: flex; flex-direction: column; gap: 2px; }
+.ui-nav__cap {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 4px 12px 8px;
+}
+
+/* Item row — link, group toggle, and leaf share the same skin */
+.ui-nav__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: 10px;
+  color: var(--text);
+  text-decoration: none;
+  font-size: 14.5px;
+  font-weight: 400;
+  line-height: 1.2;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: background 0.16s var(--ease), color 0.16s var(--ease);
+}
+.ui-nav__item:hover { background: var(--surface-2); color: var(--strong); }
+.ui-nav__item.is-active {
+  background: var(--surface);
+  color: var(--strong);
+  font-weight: 500;
+}
+.ui-nav--side .ui-nav__item.is-active {
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+/* Accent rail marker on the active item */
+.ui-nav--side .ui-nav__item.is-active::before {
+  content: "";
+  position: absolute;
+  left: 4px; top: 50%;
+  width: 3px; height: 17px;
+  border-radius: 3px;
+  background: var(--accent);
+  transform: translateY(-50%);
+}
+.ui-nav__item:focus-visible { outline: none; box-shadow: var(--ring); }
+.ui-nav__item.is-active:focus-visible { box-shadow: var(--ring); }
+
+.ui-nav__ic { display: inline-flex; flex: none; }
+.ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: 0.72; }
+.ui-nav__item.is-active .ui-nav__ic svg,
+.ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: var(--accent); }
+.ui-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.ui-nav__item.is-danger { color: var(--pink); }
+.ui-nav__item.is-danger:hover { background: var(--glow-pink); color: var(--pink); }
+.ui-nav__item.is-disabled { color: var(--muted); opacity: 0.55; cursor: default; pointer-events: none; }
+
+/* Per-item badge / counter */
+.ui-nav__badge {
+  flex: none;
+  min-width: 20px;
+  height: 19px;
+  padding: 0 6px;
+  border-radius: var(--radius-pill);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  background: var(--surface-3);
+  color: var(--dim);
+}
+.ui-nav__badge.is-accent { background: var(--glow-purple); color: var(--accent); }
+.ui-nav__badge.is-live { background: var(--glow-green); color: var(--green); }
+.ui-nav__badge.is-danger { background: var(--glow-pink); color: var(--pink); }
+.ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface-3); color: var(--strong); }
+
+/* Collapsible group */
+.ui-nav__group { display: flex; flex-direction: column; }
+.ui-nav__caret {
+  flex: none;
+  width: 7px; height: 7px;
+  border-right: 1.6px solid var(--muted);
+  border-bottom: 1.6px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform 0.18s var(--ease);
+}
+.ui-nav__group.is-open > .ui-nav__toggle .ui-nav__caret { transform: rotate(45deg); }
+.ui-nav__sub {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 2px 0 2px 15px;
+  padding-left: 11px;
+  border-left: 1px solid var(--border);
+}
+.ui-nav__sub[hidden] { display: none; }
+.ui-nav__item--sub { font-size: 14px; padding: 7px 12px; }
+.ui-nav--side .ui-nav__item--sub.is-active { box-shadow: none; }
+.ui-nav--side .ui-nav__item--sub.is-active::before { left: -12px; height: 15px; }
+
+/* Footer slot (divider + trailing links, e.g. sign-out) */
+.ui-nav__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
+
+/* Collapsed (icon-only) rail */
+.ui-nav--side.is-collapsed { width: 60px; align-items: stretch; }
+.ui-nav--side.is-collapsed .ui-nav__cap,
+.ui-nav--side.is-collapsed .ui-nav__label,
+.ui-nav--side.is-collapsed .ui-nav__badge,
+.ui-nav--side.is-collapsed .ui-nav__caret,
+.ui-nav--side.is-collapsed .ui-nav__sub { display: none; }
+.ui-nav--side.is-collapsed .ui-nav__item { justify-content: center; padding: 11px 0; gap: 0; }
+.ui-nav--side.is-collapsed .ui-nav__ic svg { width: 19px; height: 19px; }
+.ui-nav--side.is-collapsed .ui-nav__item.is-active::before { left: 3px; }
+.ui-nav--side.is-collapsed .ui-nav__foot { text-align: center; }
+
+/* -- Horizontal tabs ----------------------------------------------------- */
+.ui-nav--tabs {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  border-bottom: 1px solid var(--border);
+}
+.ui-nav--tabs.is-pill { border-bottom: 0; gap: 6px; }
+.ui-nav__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 14px;
+  color: var(--dim);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 10px 10px 0 0;
+  transition: color 0.16s var(--ease), background 0.16s var(--ease);
+}
+.ui-nav__tab:hover { color: var(--strong); }
+.ui-nav__tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
+.ui-nav__tab.is-active { color: var(--strong); }
+
+/* underline variant */
+.ui-nav--tabs.is-underline .ui-nav__tab::after {
+  content: "";
+  position: absolute;
+  left: 10px; right: 10px; bottom: -1px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--accent);
+  opacity: 0;
+  transform: scaleX(0.4);
+  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
+}
+.ui-nav--tabs.is-underline .ui-nav__tab.is-active::after { opacity: 1; transform: scaleX(1); }
+
+/* pill variant */
+.ui-nav--tabs.is-pill .ui-nav__tab { border-radius: var(--radius-pill); padding: 8px 15px; }
+.ui-nav--tabs.is-pill .ui-nav__tab:hover { background: var(--surface-2); }
+.ui-nav--tabs.is-pill .ui-nav__tab.is-active {
+  background: var(--glow-purple);
+  color: var(--accent);
+}
+
+.ui-nav__tab.is-disabled { color: var(--muted); opacity: 0.5; cursor: default; }
+.ui-nav__tab .ui-nav__badge { height: 18px; }
+
+/* -- Breadcrumbs --------------------------------------------------------- */
+.ui-nav__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
+.ui-nav__crumb-item { display: inline-flex; align-items: center; }
+.ui-nav__crumb-item + .ui-nav__crumb-item::before {
+  content: "";
+  width: 6px; height: 6px;
+  margin: 0 8px;
+  border-right: 1.4px solid var(--muted);
+  border-bottom: 1.4px solid var(--muted);
+  transform: rotate(-45deg);
+  opacity: 0.7;
+}
+.ui-nav__crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  border-radius: 7px;
+  color: var(--dim);
+  text-decoration: none;
+  font-size: 13px;
+  transition: color 0.16s var(--ease), background 0.16s var(--ease);
+}
+a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface-2); }
+a.ui-nav__crumb:focus-visible { outline: none; box-shadow: var(--ring); }
+.ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }
+.ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

package/src/styles/success.css

@@ -0,0 +1,189 @@
+/* ============================================================================
+ * Success / confirmation surface — .ui-sx*
+ *   The emotional high point of a flow, with craft: a self-drawing SVG check
+ *   (ring burst + spring), an aurora / glow backdrop, follow-up actions, an
+ *   optional confetti field and an optional auto-redirect countdown. Three
+ *   layouts (hero / split / compact) and three backdrops (aurora / glow / flat).
+ *
+ *   Accent-aware via the kit tokens; the success mark stays on the --green
+ *   family (green = success), the surrounds follow --accent so it re-themes with
+ *   the sub-theme. Every motion path is reduced-motion safe — see the block at
+ *   the foot. Markup comes from success() in components/index (re-exported).
+ * ========================================================================== */
+
+.ui-sx {
+  --sx-green: var(--green);
+  --sx-tint: color-mix(in srgb, var(--green) 18%, transparent);
+  --sx-track: color-mix(in srgb, var(--green) 32%, transparent);
+
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-md);
+  isolation: isolate;
+}
+
+/* ---- Backdrops ----------------------------------------------------------- */
+/* Aurora: two soft blurred blobs — a green wash under the check + an accent
+   blob for identity — so the success matches the rest of the kit's warmth. */
+.ui-sx__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
+.ui-sx__glow {
+  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.9;
+  aspect-ratio: 1; will-change: transform;
+}
+.ui-sx__glow--a {
+  width: 58%; top: -14%; left: 50%; translate: -50% 0;
+  background: radial-gradient(circle at center, var(--sx-tint), transparent 68%);
+  animation: ui-sx-float 14s ease-in-out infinite alternate;
+}
+.ui-sx__glow--b {
+  width: 52%; bottom: -20%; left: 12%;
+  background: radial-gradient(circle at center,
+    color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);
+  animation: ui-sx-float 18s ease-in-out -6s infinite alternate;
+}
+:root[data-theme="light"] .ui-sx__glow { opacity: 0.7; }
+@keyframes ui-sx-float {
+  from { transform: translate(-2%, -2%) scale(1); }
+  to   { transform: translate(3%, 3%) scale(1.14); }
+}
+/* Glow backdrop: reuse the shared .ui-glow--green, parked behind the check. */
+.ui-sx__bg-glow { top: -40%; left: 50%; translate: -50% 0; width: 360px; height: 360px; }
+
+/* ---- Layout shell -------------------------------------------------------- */
+.ui-sx__inner { position: relative; z-index: 1; }
+.ui-sx__content { min-width: 0; }
+.ui-sx__eyebrow {
+  color: var(--green); font-size: 12px; font-weight: var(--weight-semibold);
+  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
+}
+.ui-sx__title {
+  color: var(--strong); font-size: 22px; font-weight: var(--weight-semibold);
+  letter-spacing: -.02em; line-height: 1.2; margin: 0;
+}
+.ui-sx__body {
+  color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 9px 0 0; max-width: 44ch;
+}
+.ui-sx__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
+
+/* hero — centred column, the upgraded default */
+.ui-sx--hero { padding: 44px 32px 40px; text-align: center; }
+.ui-sx--hero .ui-sx__inner { display: flex; flex-direction: column; align-items: center; }
+.ui-sx--hero .ui-sx__visual { margin-bottom: 22px; }
+.ui-sx--hero .ui-sx__body { margin-left: auto; margin-right: auto; }
+.ui-sx--hero .ui-sx__actions { justify-content: center; }
+.ui-sx--hero .ui-sx__check { width: 96px; height: 96px; }
+
+/* split — visual panel beside the copy */
+.ui-sx--split .ui-sx__inner {
+  display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: stretch;
+}
+.ui-sx--split .ui-sx__visual {
+  display: grid; place-items: center; padding: 40px 24px;
+  background: color-mix(in srgb, var(--green) 8%, transparent);
+  border-right: 1px solid var(--border);
+}
+.ui-sx--split .ui-sx__check { width: 120px; height: 120px; }
+.ui-sx--split .ui-sx__content { padding: 40px 36px; align-self: center; }
+
+/* compact — inline, panel/toast-adjacent */
+.ui-sx--compact { padding: 18px 20px; }
+.ui-sx--compact .ui-sx__inner { display: flex; align-items: center; gap: 16px; }
+.ui-sx--compact .ui-sx__visual { flex: none; }
+.ui-sx--compact .ui-sx__check { width: 44px; height: 44px; }
+.ui-sx--compact .ui-sx__title { font-size: 16px; }
+.ui-sx--compact .ui-sx__body { font-size: 13px; margin-top: 3px; }
+.ui-sx--compact .ui-sx__actions { margin-top: 0; margin-left: auto; flex: none; }
+.ui-sx--compact .ui-sx__content { flex: 1; display: flex; align-items: center; gap: 16px; }
+.ui-sx--compact .ui-sx__content > div:first-child,
+.ui-sx--compact .ui-sx__title { min-width: 0; }
+
+/* ---- The self-drawing check --------------------------------------------- */
+.ui-sx__check { display: block; overflow: visible; }
+/* Soft tinted disc that springs in behind the tick. */
+.ui-sx__disc {
+  fill: var(--sx-tint); stroke: var(--sx-track); stroke-width: 1.5;
+  transform-origin: center; animation: ui-sx-pop .5s cubic-bezier(.22,1,.3,1) both;
+}
+/* The tick, stroked on via dash-offset (path length ~34). */
+.ui-sx__tick {
+  fill: none; stroke: var(--sx-green); stroke-width: 5;
+  stroke-linecap: round; stroke-linejoin: round;
+  stroke-dasharray: 34; stroke-dashoffset: 34;
+  animation: ui-sx-draw .5s cubic-bezier(.6,0,.35,1) .28s forwards;
+  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 55%, transparent));
+}
+/* Burst ring that expands and fades once, framing the moment. */
+.ui-sx__ring {
+  fill: none; stroke: var(--sx-green); stroke-width: 2;
+  transform-origin: center; opacity: 0;
+  animation: ui-sx-burst .7s cubic-bezier(.3,.7,.4,1) .2s forwards;
+}
+
+@keyframes ui-sx-pop {
+  0% { transform: scale(.4); opacity: 0; }
+  60% { transform: scale(1.06); opacity: 1; }
+  100% { transform: scale(1); }
+}
+@keyframes ui-sx-draw { to { stroke-dashoffset: 0; } }
+@keyframes ui-sx-burst {
+  0% { transform: scale(.55); opacity: .7; }
+  100% { transform: scale(1.7); opacity: 0; }
+}
+
+/* ---- Confetti (opt-in) --------------------------------------------------- */
+.ui-sx__confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
+.ui-sx__piece {
+  position: absolute; top: -8%; width: 8px; height: 8px; border-radius: 2px;
+  opacity: 0; transform-origin: center;
+  animation: ui-sx-fall 2.4s cubic-bezier(.2,.6,.35,1) var(--sx-d, 0s) forwards;
+  scale: var(--sx-s, 1);
+}
+.ui-sx__piece--a { background: var(--accent); }
+.ui-sx__piece--g { background: var(--green); }
+.ui-sx__piece--c { background: var(--cyan); }
+.ui-sx__piece--p { background: var(--purple-light); }
+.ui-sx__piece--k { background: var(--pink); border-radius: 50%; }
+@keyframes ui-sx-fall {
+  0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
+  12%  { opacity: 1; }
+  100% { opacity: 0; transform: translateY(340px) rotate(var(--sx-r, 40deg)); }
+}
+
+/* ---- Countdown ----------------------------------------------------------- */
+/* Registered angle so the conic sweep can actually interpolate (a plain
+   conic-gradient background is not animatable). */
+@property --sx-a { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
+.ui-sx__count { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; }
+.ui-sx--hero .ui-sx__count { justify-content: center; }
+.ui-sx__count-ring {
+  flex: none; width: 16px; height: 16px; border-radius: 50%;
+  background: conic-gradient(var(--green) var(--sx-a, 360deg), var(--surface-2) 0);
+  mask: radial-gradient(circle, transparent 5px, #000 6px);
+  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
+  animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards;
+}
+@keyframes ui-sx-sweep { from { --sx-a: 360deg; } to { --sx-a: 0deg; } }
+.ui-sx__count-text { color: var(--muted); font-size: 13px; }
+.ui-sx__count-text b { color: var(--dim); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
+
+/* ---- Reduced motion — static check, no burst / confetti / sweep ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .ui-sx__glow--a, .ui-sx__glow--b { animation: none; }
+  .ui-sx__disc { animation: none; }
+  .ui-sx__tick { animation: none; stroke-dashoffset: 0; }
+  .ui-sx__ring { display: none; }
+  .ui-sx__confetti { display: none; }
+  .ui-sx__count-ring { animation: none; background: var(--surface-2); }
+}
+
+/* ---- Narrow — split stacks -------------------------------------------- */
+@media (max-width: 560px) {
+  .ui-sx--split .ui-sx__inner { grid-template-columns: 1fr; }
+  .ui-sx--split .ui-sx__visual { border-right: 0; border-bottom: 1px solid var(--border); padding: 32px 24px; }
+  .ui-sx--split .ui-sx__content { padding: 28px 26px; text-align: center; }
+  .ui-sx--split .ui-sx__actions { justify-content: center; }
+  .ui-sx--compact .ui-sx__content { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .ui-sx--compact .ui-sx__actions { margin-left: 0; }
+}

package/src/styles/table.css

@@ -59,18 +59,5 @@
 .ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
 .ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
 
-/* Empty state inside a table area */
-.ui-empty {
-  text-align: center;
-  padding: 48px 24px;
-  color: var(--muted);
-}
-.ui-empty__icon {
-  width: 44px; height: 44px;
-  margin: 0 auto 14px;
-  color: var(--muted);
-  opacity: 0.6;
-}
-.ui-empty__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
-.ui-empty__title { color: var(--text); font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: 5px; }
-.ui-empty__sub { font-size: var(--text-sm); max-width: 320px; margin: 0 auto; line-height: 1.55; }
+/* The empty state (.ui-empty) — shown when a table/list has no rows — now
+   lives in styles/empty.css as a standalone component (illustration support). */