@lepid-labs/styles 1.0.0 → 1.0.1

package/css.d.ts

@@ -0,0 +1,8 @@
+// Type declaration for every CSS entry point in this package.
+//
+// TypeScript >= 6 (and 5.6+ with noUncheckedSideEffectImports) requires a
+// side-effect import such as `import "@lepid-labs/styles/neon-butterfly"` to
+// resolve to a module with types. CSS files have none, so every CSS subpath
+// in package.json's "exports" carries a "types" condition pointing here.
+// Bundlers and Node keep resolving the "default" condition to the .css file.
+export {};

package/luminous-precision/components/badge.css

@@ -17,3 +17,28 @@
 :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--success { background: rgba(71, 227, 78, 0.15);   color: var(--ld-success); }
 :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--warning { background: rgba(255, 184, 108, 0.15); color: var(--ld-warning); }
 :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--danger  { background: rgba(255, 77, 109, 0.15);  color: var(--ld-danger); }
+
+/* Compact size — dashboard pills inside .ld-status-card__meta and row trails. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--sm {
+  padding: 0.125rem 0.375rem;
+  font-size: 9px;
+  letter-spacing: 0.06em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge[href] { text-decoration: none; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge[href]:hover { filter: brightness(1.1); }
+
+/* Pulse — the one solid, glowing call to action (work is waiting on you). */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--pulse {
+  background: var(--ld-warning);
+  border-color: transparent;
+  color: var(--ld-on-primary);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--ld-warning) 60%, transparent);
+  animation: ld-lp-badge-pulse 2s ease-in-out infinite;
+}
+@keyframes ld-lp-badge-pulse {
+  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--ld-warning) 50%, transparent); }
+  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--ld-warning) 90%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--pulse { animation: none; }
+}

package/luminous-precision/components/button-group.css

@@ -0,0 +1,130 @@
+/* luminous-precision — button group: one lit-border track on a sunken well;
+ * the segments inside go chromeless and the pressed one lights up in orchid. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  max-width: 100%;
+  padding: 3px;
+  background: var(--ld-surface-sunken);
+  border: 1px solid var(--ld-border-lit);
+  border-radius: var(--ld-radius);
+}
+/* --block: fill the row, equal-width segments */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group--block {
+  display: flex;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group--block > .ld-btn {
+  flex: 1 1 0;
+}
+
+/* segments: the track is the chrome, so the button drops its own */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn {
+  justify-content: center;
+  background: transparent;
+  border-color: transparent;
+  border-radius: calc(var(--ld-radius) - 3px);
+  color: var(--ld-faint);
+  white-space: nowrap;
+  transition:
+    background var(--ld-transition),
+    border-color var(--ld-transition),
+    color var(--ld-transition),
+    box-shadow var(--ld-transition);
+}
+/* variants tint the label only — a solid fill would break the track */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--primary {
+  color: var(--ld-primary);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--accent {
+  color: var(--ld-accent);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--danger {
+  color: var(--ld-danger);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:focus-visible {
+  background: var(--ld-surface);
+  border-color: transparent;
+  color: var(--ld-on-surface);
+  animation: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:focus-visible {
+  /* an outline, not the border: it must stay visible on the pressed segment */
+  outline: 1px solid var(--ld-primary);
+  outline-offset: 1px;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--primary:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--primary:focus-visible {
+  color: var(--ld-primary);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--accent:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--accent:focus-visible {
+  color: var(--ld-accent);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--danger:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--danger:focus-visible {
+  color: var(--ld-danger);
+}
+
+/* pressed segment (toggle / segmented use): raised orchid pane with a soft glow */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--active,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn[aria-pressed="true"] {
+  background: var(--ld-surface);
+  border-color: var(--ld-primary-border);
+  color: var(--ld-primary);
+  box-shadow: 0 0 12px var(--ld-primary-glow);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:disabled {
+  background: transparent;
+  color: var(--ld-faint);
+}
+
+/* Sliding pill: with exactly one pressed segment, its chrome moves to one
+ * lit segment on the track, pinned to the segment by anchor positioning, so a
+ * change of selection travels instead of blinking. Its inline edges transition
+ * separately — with data-ld-dir ("forward" | "back", set by ButtonGroup) the
+ * edge nearer the target leads and the far edge trails, stretching the pill
+ * across the gap; without it the pill just slides. Several pressed segments
+ * (multi-toggle), or no anchor positioning, keep the per-segment chrome above. */
+@supports (anchor-name: --ld-a) and (anchor-scope: --ld-a) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group {
+    position: relative;
+    isolation: isolate;
+    anchor-scope: --ld-btn-group-active;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group:not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))) > :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) {
+    anchor-name: --ld-btn-group-active;
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group:where(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"])):not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))))::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    position-anchor: --ld-btn-group-active;
+    inset-block: anchor(top) anchor(bottom);
+    inset-inline: anchor(start) anchor(end);
+    background: var(--ld-surface);
+    border: 1px solid var(--ld-primary-border);
+    border-radius: calc(var(--ld-radius) - 3px);
+    box-shadow: 0 0 12px var(--ld-primary-glow);
+    pointer-events: none;
+    transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-lead);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group[data-ld-dir="forward"]::before {
+    transition: inset-inline-start var(--ld-slide-trail), inset-inline-end var(--ld-slide-lead);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group[data-ld-dir="back"]::before {
+    transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-trail);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group::before,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group[data-ld-dir]::before {
+    transition: none;
+  }
+}

package/luminous-precision/components/button-hold.css

@@ -0,0 +1,112 @@
+/* luminous-precision — hold-to-confirm button: rose ring, orchid/teal for the other variants, bloom at 100%
+ *
+ * Contract: .ld-btn--hold composes with .ld-btn and any variant. The consumer
+ * writes one number, --ld-hold in [0, 1]; the ring fill is pure CSS.
+ * data-ld-hold="holding" | "fired" carries the behavioural state.
+ */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold {
+  --ld-hold: 0;
+  --ld-hold-color: var(--ld-on-surface); /* neutral on its own */
+  position: relative;
+  gap: var(--ld-space-3);
+  padding: var(--ld-space-2) var(--ld-space-3) var(--ld-space-2) var(--ld-space-2);
+  text-align: left;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none; /* a touch hold must not turn into a scroll */
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold.ld-btn--primary {
+  --ld-hold-color: var(--ld-primary);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold.ld-btn--accent {
+  --ld-hold-color: var(--ld-accent);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold.ld-btn--danger {
+  --ld-hold-color: var(--ld-danger);
+}
+
+/* ring: the icon well, wrapped by a conic fill masked to a 3px stroke */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__ring {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background: var(--ld-surface-sunken);
+  color: var(--ld-hold-color);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--ld-hold-color) calc(var(--ld-hold) * 360deg), var(--ld-border-lit) 0);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__ring > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  line-height: 1.2;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__label {
+  font-weight: var(--ld-font-weight-bold);
+}
+/* the hint and meter restate the ring, so state is never color-only */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__hint {
+  font-size: 11px;
+  font-weight: var(--ld-font-weight);
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__meter {
+  margin-left: auto;
+  min-width: 3.5ch;
+  text-align: right;
+  font-family: var(--ld-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="holding"] .ld-btn__meter {
+  color: var(--ld-hold-color);
+}
+
+/* fired: the post-commit flash */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] {
+  box-shadow: 0 0 24px color-mix(in srgb, var(--ld-hold-color) 45%, transparent);
+  animation: ld-lp-hold-fired 0.6s ease-out;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
+  box-shadow: 0 0 16px color-mix(in srgb, var(--ld-hold-color) 55%, transparent);
+}
+@keyframes ld-lp-hold-fired {
+  from {
+    box-shadow: 0 0 32px color-mix(in srgb, var(--ld-hold-color) 70%, transparent);
+  }
+  to {
+    box-shadow: 0 0 24px color-mix(in srgb, var(--ld-hold-color) 45%, transparent);
+  }
+}
+
+/* reduced motion: the ring still fills (it is the state, not decoration);
+ * only the flash and glow go */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] {
+    animation: none;
+    box-shadow: none;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
+    box-shadow: none;
+  }
+}

package/luminous-precision/components/status-card.css

@@ -0,0 +1,159 @@
+/* luminous-precision — status card: a dense dashboard card whose left edge, ring, and
+ * flash carry state (generalized from pulse's repo card).
+ *   .ld-status-card--<tone>       left edge in the semantic color
+ *   [data-ld-attention="<tone>"]  outline + glow ring calling for action
+ *   [data-ld-changed]             replays the change flash while present */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card {
+  --ld-status-attention: var(--ld-warning);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--ld-surface-glass);
+  border: 1px solid var(--ld-border);
+  border-top-color: var(--ld-border-lit);
+  border-left: 3px solid transparent;
+  border-radius: var(--ld-radius-lg);
+  backdrop-filter: blur(var(--ld-blur));
+  -webkit-backdrop-filter: blur(var(--ld-blur));
+  color: var(--ld-on-surface);
+  overflow: hidden;
+  transition: background var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card:hover { box-shadow: 0 0 12px var(--ld-primary-glow); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card--info    { border-left-color: var(--ld-info); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card--success { border-left-color: var(--ld-success); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card--warning { border-left-color: var(--ld-warning); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card--danger  { border-left-color: var(--ld-danger); }
+
+/* attention ring — the tone rides on the attribute value */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-attention] {
+  outline: 1px solid color-mix(in srgb, var(--ld-status-attention) 70%, transparent);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--ld-status-attention) 35%, transparent);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-attention]:hover {
+  box-shadow: 0 0 18px color-mix(in srgb, var(--ld-status-attention) 55%, transparent);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-attention="info"]    { --ld-status-attention: var(--ld-info); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-attention="success"] { --ld-status-attention: var(--ld-success); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-attention="danger"]  { --ld-status-attention: var(--ld-danger); }
+
+/* change flash — fades from a primary tint back to the resting glass */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-changed] { animation: ld-lp-status-flash 30s ease-out forwards; }
+@keyframes ld-lp-status-flash {
+  from { background: color-mix(in srgb, var(--ld-primary) 20%, var(--ld-surface)); }
+  to   { background: var(--ld-surface-glass); }
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__watermark {
+  position: absolute;
+  top: 0;
+  left: -0.25rem;
+  width: 2rem;
+  height: 2rem;
+  color: var(--ld-on-surface);
+  opacity: 0.12;
+  pointer-events: none;
+  rotate: -25deg;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__watermark > svg { width: 100%; height: 100%; }
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ld-space-2);
+  padding: 0.625rem 0.75rem 0.5rem 0.875rem;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__title {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--ld-font-display);
+  letter-spacing: -0.01em;
+  font-size: var(--ld-text-sm);
+  font-weight: var(--ld-font-weight-medium);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__title[href]:hover { color: var(--ld-primary); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__prefix { color: var(--ld-faint); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__prefix::after { content: " // "; opacity: 0.5; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__note {
+  font-size: 11px;
+  color: var(--ld-faint);
+  white-space: nowrap;
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--ld-border);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: baseline;
+  gap: 0.375rem;
+  padding: 0.3rem 0.75rem 0.3rem 0.875rem;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  transition: background 0.1s;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__row[href]:hover { background: color-mix(in srgb, var(--ld-primary) 8%, transparent); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__row-lead {
+  min-width: 1.5rem;
+  font-size: 11px;
+  font-weight: var(--ld-font-weight-bold);
+  color: var(--ld-faint);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__row-main {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--ld-on-surface);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__row-trail {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-1);
+  flex-shrink: 0;
+  font-size: 10px;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__footer {
+  display: block;
+  padding: 0.3rem 0.875rem;
+  border-top: 1px solid var(--ld-border);
+  font-size: 11px;
+  color: var(--ld-faint);
+  text-decoration: none;
+  transition: color var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__footer[href]:hover { color: var(--ld-accent); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card__empty {
+  margin: 0;
+  padding: 0.375rem 0.875rem 0.5rem;
+  border-top: 1px solid var(--ld-border);
+  font-size: 12px;
+  color: var(--ld-faint);
+  opacity: 0.7;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card { transition: none; }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-status-card[data-ld-changed] { animation: none; }
+}

package/luminous-precision/components/stepper.css

@@ -0,0 +1,108 @@
+/* luminous-precision — stepper: a milestone rail with labelled step nodes.
+ * Orchid rail and complete nodes; the current node lights up electric teal,
+ * the theme's active-path signal.
+ *   .ld-stepper__step--complete   solid orchid node, dark icon
+ *   .ld-stepper__step--current    indigo node, 2px teal border, teal glow
+ *   .ld-stepper__step--upcoming   sunken node, hairline border, faint icon
+ * The fill follows the state modifiers — no progress value to compute. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ld-space-2);
+  text-align: center;
+}
+/* rail segment: from this node's centre to the next node's centre; the track is
+ * ::before, the fill ::after. Segments meet under the nodes, so the rail reads
+ * as one bar and the fill ends exactly at the current node. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step::before,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step::after {
+  content: "";
+  position: absolute;
+  top: 0.75rem;
+  left: 50%;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 1rem;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step:last-child::before,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step:last-child::after { display: none; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step::before {
+  background: var(--ld-surface-sunken);
+  box-shadow: inset 0 0 0 1px var(--ld-border);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step::after {
+  width: 0;
+  background: var(--ld-primary);
+  box-shadow: 0 0 8px var(--ld-primary-glow);
+  transition: width var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--complete::after { width: 100%; }
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__node {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  box-sizing: border-box;
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: var(--ld-font-weight-bold);
+  line-height: 1;
+  transition: background var(--ld-transition), color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__node > svg { width: 1rem; height: 1rem; }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--complete .ld-stepper__node {
+  background: var(--ld-primary);
+  color: var(--ld-on-primary);
+  box-shadow: 0 0 8px var(--ld-primary-glow);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--current .ld-stepper__node {
+  background: var(--ld-surface);
+  border: 2px solid var(--ld-accent);
+  color: var(--ld-accent);
+  box-shadow: 0 0 12px var(--ld-accent-glow);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--upcoming .ld-stepper__node {
+  background: var(--ld-surface-sunken);
+  border: 1px solid var(--ld-border);
+  color: var(--ld-faint);
+}
+
+/* label voice: uppercase 600 mono, tracked 0.05em */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__label {
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: var(--ld-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--ld-tracking-wide);
+  line-height: 1.3;
+  color: var(--ld-faint);
+  transition: color var(--ld-transition), text-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--complete .ld-stepper__label { color: var(--ld-on-surface); }
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--current .ld-stepper__label {
+  color: var(--ld-accent);
+  text-shadow: 0 0 8px var(--ld-accent-glow);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step--upcoming .ld-stepper__label { color: var(--ld-faint); }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__step::after,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__node,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-stepper__label { transition: none; }
+}

package/luminous-precision/components/tabs.css

@@ -31,3 +31,45 @@
 :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabpanel {
   padding: var(--ld-space-3) 0;
 }
+
+/* Sliding indicator: one bar on the tablist, pinned to the active tab by
+ * anchor positioning, takes over the underline. Its inline edges transition
+ * separately — with data-ld-dir ("forward" | "back", set by the Tabs
+ * component) the edge nearer the target leads and the far edge trails, so the
+ * bar reaches for the tab; without it the bar just slides. Browsers without
+ * anchor positioning keep the static underline above. */
+@supports (anchor-name: --ld-a) and (anchor-scope: --ld-a) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs {
+    position: relative;
+    anchor-scope: --ld-tab-active;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs :is(.ld-tab--active, .ld-tab[aria-selected="true"]) {
+    anchor-name: --ld-tab-active;
+    border-bottom-color: transparent;
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs:where(:has(.ld-tab--active, .ld-tab[aria-selected="true"]))::after {
+    content: "";
+    position: absolute;
+    position-anchor: --ld-tab-active;
+    inset-block-end: anchor(bottom);
+    inset-inline: anchor(start) anchor(end);
+    block-size: 2px;
+    background: var(--ld-accent);
+    box-shadow: 0 0 10px var(--ld-accent-glow), 0 0 2px var(--ld-accent);
+    pointer-events: none;
+    transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-lead);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs[data-ld-dir="forward"]::after {
+    transition: inset-inline-start var(--ld-slide-trail), inset-inline-end var(--ld-slide-lead);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs[data-ld-dir="back"]::after {
+    transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-trail);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs::after,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-tabs[data-ld-dir]::after {
+    transition: none;
+  }
+}

package/luminous-precision/design.md

@@ -56,25 +56,56 @@ tonal layers and glow, not drop shadows. Never pure white or pure black.
 Class prefix `ld-` (shared token/class contract with the other themes).
 
 - **Card** `.ld-card` — glass pane, 1rem radius, lit top edge.
+- **Status card** `.ld-status-card` — dense dashboard card, 1rem radius, Sora title (from pulse's repo
+  card): 3px left edge takes a semantic `--<tone>`, `data-ld-attention="<tone>"`
+  adds an outline + glow ring, `data-ld-changed` replays a 30s tint flash.
+  Parts: `__watermark`, `__head`, `__prefix`, `__title`, `__meta`, `__note`,
+  `__rows`, `__row` (`-lead`/`-main`/`-trail`), `__footer`, `__empty`.
 - **NavLink** `.ld-link` — glass list row; hover shifts to solid indigo and
   lights a 2px teal bar on the left edge.
 - **Button** `.ld-btn` — ghost by default; `--primary` is the one solid fill
   (orchid, dark text), `--accent` teal ghost, `--danger` rose ghost. `--sm` is a
   compact size scaled to `.ld-badge`, for inline and table-row actions.
+- **Hold button** `.ld-btn--hold` (+ `__ring`, `__body`, `__label`, `__hint`,
+  `__meter`) — hold-to-confirm: a 3px conic ring around the icon well fills
+  as `--ld-hold` goes 0→1; `--danger` paints it rose, `--primary` orchid,
+  `--accent` teal, neutral alone. `data-ld-hold="fired"` blooms the button
+  and ring in the ring color (dropped under reduced motion; the fill stays).
+  Window: `--ld-hold-duration` 300 ms. The ring *is* the confirmation.
+- **Button group** `.ld-btn-group` (+ `--block`) — one long track with
+  `.ld-btn` segments lined up inside; the track owns the chrome and the
+  segments drop theirs. Lit-border track on the sunken well; faint mono
+  labels. The pressed segment (`aria-pressed="true"` / `.ld-btn--active`) is a
+  raised pane with an orchid border, orchid label and soft glow; no hover
+  pulse inside the track.
+  With one pressed segment the chrome is a single sliding pane: the edge
+  nearer the new segment leads, the far edge trails on a tight spring with barely any overshoot
+  (`--ld-slide-lead` / `--ld-slide-trail`, direction from `data-ld-dir`).
+  Variants tint the label only; `--block` fills the row with equal-width
+  segments. Use `role="group"` + `aria-label`.
 - **Form** `.ld-input`, `.ld-textarea`, `.ld-select`, `.ld-label`,
   `.ld-field`, `.ld-checkbox`, `.ld-radio`, `.ld-switch`, `.ld-choice` —
   checked/focus states glow teal.
 - **Badge** `.ld-badge` — pill chip: 15% tint of its hue behind
-  full-saturation text (+ semantic modifiers).
+  full-saturation text (+ semantic modifiers). `--sm` is the 9px dashboard
+  pill; `--pulse` the one solid amber call to action with a breathing glow.
 - **Alert** `.ld-alert` — glass, 3px left bar carries the semantic color.
 - **Dialog** `.ld-dialog` — native `<dialog>`, indigo pane with orchid glow,
   Sora title, blurred obsidian backdrop.
 - **Tabs** `.ld-tabs`/`.ld-tab`/`.ld-tabpanel` — active tab underlined in
-  teal with text glow.
+  teal with text glow; the underline is one lit bar that reaches for the new
+  tab and settles with barely any overshoot (same slide tokens).
 - **Table** `.ld-table` — lit header rule; row hover shifts glass and lights
   the teal left bar.
 - **Progress** `.ld-progress`, **Spinner** `.ld-spinner` — glowing orchid
   indicators (`--accent` bar variant in teal).
+- **Stepper** `.ld-stepper` (+ `__step`, `__node`, `__label`) — milestone
+  rail: glowing orchid fill on a sunken track, 2rem nodes, uppercase mono
+  labels. `__step--complete` is a solid orchid node; `--current` lights the
+  active path in teal — 2px teal border, teal icon and glow, teal label;
+  `--upcoming` a hairline sunken node in faint. The rail is per-step
+  (`::before` track, `::after` fill), so the fill follows the modifiers and
+  `aria-current="step"` marks the active node.
 - **Muted text** `.ld-muted` — faint secondary/empty-state text;
   `color: var(--ld-faint)`, italic.
 - **Pre / log block** `.ld-pre` — command/log `<pre>`; the surface-sunken