npm - @lovett/ui - Versions diffs - 0.0.5 → 0.0.7 - Mend

@lovett/ui 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/index.d.ts +279 -115
package/dist/index.js +479 -66
package/dist/index.js.map +1 -1
package/dist/styles.css +74 -0
package/dist/tokens.css +181 -60
package/package.json +16 -4
package/src/__tests__/button.test.tsx +137 -0
package/src/__tests__/card.test.tsx +103 -0
package/src/__tests__/dead-render.test.tsx +117 -0
package/src/__tests__/input.test.tsx +134 -0
package/src/__tests__/modal.test.tsx +154 -0
package/src/__tests__/page-shell.test.tsx +128 -0
package/src/__tests__/setup.ts +43 -0
package/src/__tests__/token-shape.test.ts +193 -0
package/src/card.tsx +1 -1
package/src/collapsible-card.tsx +85 -0
package/src/data-grid/table-body.tsx +8 -1
package/src/dropdown-menu.tsx +1 -1
package/src/floating-status-bar.tsx +1 -1
package/src/folder-tree-picker.tsx +5 -6
package/src/frame-stack.tsx +27 -10
package/src/hero-form-card.tsx +2 -2
package/src/icons/brand.tsx +187 -0
package/src/index.ts +32 -0
package/src/lib/clipboard.ts +14 -0
package/src/lib/color.ts +111 -0
package/src/meta-cell.tsx +52 -0
package/src/meta-previews/MetaFeedCarousel.tsx +1 -1
package/src/meta-previews/MetaFeedPreview.tsx +1 -1
package/src/modal.tsx +77 -6
package/src/pill-button.tsx +23 -5
package/src/profile-section.tsx +40 -9
package/src/sortable-table.tsx +5 -1
package/src/styles.css +74 -0
package/src/tabs.tsx +4 -0
package/src/tag-chip-input.tsx +1 -1
package/src/theme-v2.css +466 -0
package/src/tokens.css +181 -60
package/src/v2/README.md +208 -0
package/src/v2/__demo__/showcase.tsx +1045 -0
package/src/v2/action.tsx +91 -0
package/src/v2/callout.tsx +76 -0
package/src/v2/document-section.tsx +82 -0
package/src/v2/document-shell.tsx +0 -0
package/src/v2/field-row.tsx +113 -0
package/src/v2/icons.tsx +165 -0
package/src/v2/index.ts +147 -0
package/src/v2/layout.tsx +293 -0
package/src/v2/progress-track.tsx +89 -0
package/src/v2/stat-tile.tsx +129 -0
package/src/v2/states.tsx +271 -0
package/src/v2/status-pill.tsx +74 -0
package/src/v2/theme.css +1861 -0
package/src/v2/timeline.tsx +81 -0
package/src/v2/tokens.ts +228 -0
package/src/value-chip.tsx +76 -0

package/src/v2/theme.css ADDED Viewed

@@ -0,0 +1,1861 @@
+/*
+ * @lovett/ui v2 — theme.css
+ * =========================
+ *
+ * The v2 design layer. Everything here is namespaced `--lv-*` and `.lv-*`,
+ * so this file can load alongside v1's `tokens.css` / `styles.css` without
+ * touching a single v1 token. v1 keeps working byte-identically.
+ *
+ * Usage:
+ *   import '@lovett/ui/src/v2/theme.css'
+ *   <div className="lv-root"> … </div>
+ *
+ * Appearance:
+ *   - default            follows the OS (`prefers-color-scheme`)
+ *   - <html data-theme="dark">   forces dark
+ *   - <html data-theme="light">  forces light
+ *   Both directions win over the OS, in both directions.
+ *
+ * Colour is authored in OKLCH. Ramps are constant-hue; chroma is a
+ * percentage of each hue's sRGB maximum at that lightness, so no step
+ * clips and no hue outranks another by accident.
+ *
+ * The surface ladder is the spine of the whole system:
+ *
+ *     page  →  shell  →  section  →  card  →  [inset]
+ *     ────────────── brighter ──────────────►   ◄─ recessed
+ *
+ * Each tier is one notch brighter than the one behind it. The `inset`
+ * tier deliberately goes the other way: a recessed panel *inside* a card
+ * is the single most premium move in the system, and recession is what
+ * makes it read as recessed.
+ *
+ * Depth is shadow + a top-edge inner highlight. It is never a 1px border:
+ * a hairline used for depth reads as a form field. Hairlines here are
+ * strictly structural (dividers, table rules, field outlines).
+ */
+/* ══════════════════════════════════════════════════════════════════════
+   1. RAMPS — appearance-independent. Never consume these directly in a
+      component; consume the semantic tokens in §2.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-root,
+:root {
+  /* ── Neutral. Hue 255 (navy-tinted), chroma held under 0.023 so it
+     never reads as "blue", only as "not-quite-black". A pure-grey ramp
+     goes dead next to a warm accent; this one stays alive. ────────── */
+  --lv-n-0: oklch(1 0 0);
+  --lv-n-25: oklch(0.988 0.002 255);
+  --lv-n-50: oklch(0.976 0.003 255);
+  --lv-n-100: oklch(0.955 0.005 255);
+  --lv-n-150: oklch(0.932 0.006 255);
+  --lv-n-200: oklch(0.906 0.008 255);
+  --lv-n-300: oklch(0.851 0.011 255);
+  --lv-n-400: oklch(0.715 0.017 255);
+  --lv-n-500: oklch(0.585 0.021 255);
+  --lv-n-600: oklch(0.487 0.022 255);
+  --lv-n-700: oklch(0.396 0.022 255);
+  --lv-n-750: oklch(0.342 0.022 255);
+  --lv-n-800: oklch(0.287 0.021 255);
+  --lv-n-850: oklch(0.236 0.019 255);
+  --lv-n-900: oklch(0.192 0.017 255);
+  --lv-n-950: oklch(0.148 0.014 255);
+  --lv-n-975: oklch(0.115 0.012 255);
+  --lv-n-1000: oklch(0.09 0.01 255);
+  /* ── Accent. The house red, hue 27.5. sRGB pure red is
+     oklch(0.628 0.258 29.2), so the ramp peaks at 500 and every step
+     sits at ~85% of that hue's maximum chroma for its lightness. ──── */
+  --lv-a-50: oklch(0.972 0.012 27.5);
+  --lv-a-100: oklch(0.94 0.026 27.5);
+  --lv-a-200: oklch(0.885 0.052 27.5);
+  --lv-a-300: oklch(0.806 0.098 27.5);
+  --lv-a-400: oklch(0.707 0.17 27.5);
+  --lv-a-500: oklch(0.628 0.216 27.5);
+  --lv-a-600: oklch(0.554 0.204 27.5);
+  --lv-a-700: oklch(0.47 0.176 27.5);
+  --lv-a-800: oklch(0.385 0.142 27.5);
+  --lv-a-900: oklch(0.305 0.108 27.5);
+  --lv-a-950: oklch(0.222 0.074 27.5);
+  /* ── Semantic hues. Held far apart on the wheel so no two states can
+     be confused at a glance, and every one of them is ALSO carried by
+     an icon and a word in the components that use them.
+       success  150°  green
+       warning   95°  gold
+       danger    48°  burnt orange
+       info     290°  violet
+     danger is not red. The brand IS red, and a red brand plus a red
+     danger state cannot be told apart when both appear on one screen.
+     Moving the meaning is the only fix that works — see README. ──── */
+  --lv-ok-text-l: oklch(0.46 0.115 150);
+  --lv-ok-text-d: oklch(0.8 0.14 150);
+  --lv-ok-mark-l: oklch(0.58 0.145 150);
+  --lv-ok-mark-d: oklch(0.72 0.15 150);
+  --lv-wa-text-l: oklch(0.46 0.09 95);
+  --lv-wa-text-d: oklch(0.82 0.13 95);
+  --lv-wa-mark-l: oklch(0.62 0.115 95);
+  --lv-wa-mark-d: oklch(0.76 0.14 95);
+  --lv-da-text-l: oklch(0.47 0.11 48);
+  --lv-da-text-d: oklch(0.8 0.13 48);
+  --lv-da-mark-l: oklch(0.58 0.135 48);
+  --lv-da-mark-d: oklch(0.73 0.15 48);
+  --lv-in-text-l: oklch(0.47 0.19 290);
+  --lv-in-text-d: oklch(0.78 0.14 290);
+  --lv-in-mark-l: oklch(0.55 0.21 290);
+  --lv-in-mark-d: oklch(0.7 0.17 290);
+  /* ── Categorical series. Constant L (0.60) so no series outranks
+     another; chroma is per-hue so each is equally vivid rather than
+     equally saturated. Ships for charts; never used for state. ───── */
+  --lv-series-1: oklch(0.6 0.2 27.5);
+  --lv-series-2: oklch(0.6 0.19 290);
+  --lv-series-3: oklch(0.6 0.145 150);
+  --lv-series-4: oklch(0.6 0.115 95);
+  --lv-series-5: oklch(0.6 0.16 245);
+  --lv-series-6: oklch(0.6 0.1 195);
+  --lv-series-7: oklch(0.6 0.19 340);
+  --lv-series-8: oklch(0.6 0.13 128);
+  /* ══════════════════════════════════════════════════════════════════
+     SPACING — one 4px scale, honoured everywhere. Off-scale one-off
+     values are the single most common reason a nice UI feels "off".
+     ══════════════════════════════════════════════════════════════════ */
+  --lv-space-0: 0px;
+  --lv-space-1: 4px;
+  --lv-space-2: 8px;
+  --lv-space-3: 12px;
+  --lv-space-4: 16px;
+  --lv-space-5: 20px;
+  --lv-space-6: 24px;
+  --lv-space-7: 28px;
+  --lv-space-8: 32px;
+  --lv-space-10: 40px;
+  --lv-space-12: 48px;
+  --lv-space-14: 56px;
+  --lv-space-16: 64px;
+  --lv-space-20: 80px;
+  --lv-space-24: 96px;
+  /* ══════════════════════════════════════════════════════════════════
+     RADIUS — sharp edges. Concentric by construction: a card at `lg`
+     (10px) carries a 4px frame, so its tray lands on `md` (6px).
+     outer = inner + padding, in both directions.
+     ══════════════════════════════════════════════════════════════════ */
+  --lv-radius-xs: 3px;
+  --lv-radius-sm: 4px;
+  --lv-radius-md: 6px;
+  --lv-radius-lg: 10px;
+  --lv-radius-xl: 14px;
+  --lv-radius-full: 9999px;
+  /* ══════════════════════════════════════════════════════════════════
+     TYPE — named by role, not by size. Deviate from this set as little
+     as possible; hard-coded sizes are how a scale dies.
+     ══════════════════════════════════════════════════════════════════ */
+  --lv-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Inter,
+    'Helvetica Neue', Arial, sans-serif;
+  --lv-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
+    'Liberation Mono', monospace;
+  /* Small uppercase labels get positive tracking; large display type
+     gets negative. Body copy at reading size gets neither. */
+  --lv-text-2xs: 11px;
+  --lv-lh-2xs: 1.45;
+  --lv-tr-2xs: 0.06em;
+  --lv-text-xs: 12px;
+  --lv-lh-xs: 1.45;
+  --lv-tr-xs: 0.01em;
+  --lv-text-sm: 13px;
+  --lv-lh-sm: 1.5;
+  --lv-tr-sm: 0em;
+  --lv-text-base: 14px;
+  --lv-lh-base: 1.55;
+  --lv-tr-base: 0em;
+  --lv-text-md: 15px;
+  --lv-lh-md: 1.6;
+  --lv-tr-md: 0em;
+  --lv-text-lg: 17px;
+  --lv-lh-lg: 1.4;
+  --lv-tr-lg: -0.006em;
+  --lv-text-xl: 20px;
+  --lv-lh-xl: 1.3;
+  --lv-tr-xl: -0.012em;
+  --lv-text-2xl: 25px;
+  --lv-lh-2xl: 1.24;
+  --lv-tr-2xl: -0.016em;
+  --lv-text-3xl: 31px;
+  --lv-lh-3xl: 1.18;
+  --lv-tr-3xl: -0.02em;
+  /* Stat display — always tabular, always in a reserved slot. */
+  --lv-text-stat: 28px;
+  --lv-lh-stat: 1.1;
+  --lv-tr-stat: -0.02em;
+  /* Long-form prose. Briefs and dossiers are read, not scanned. */
+  --lv-prose-size: 16px;
+  --lv-prose-lh: 1.62;
+  --lv-measure: 68ch;
+  --lv-weight-normal: 400;
+  --lv-weight-medium: 500;
+  --lv-weight-semibold: 600;
+  --lv-weight-bold: 680;
+  /* ══════════════════════════════════════════════════════════════════
+     MOTION — spring on small, ease on large. Every duration is a token
+     so `prefers-reduced-motion` can collapse all of them at once.
+     ══════════════════════════════════════════════════════════════════ */
+  --lv-dur-instant: 80ms;
+  --lv-dur-fast: 140ms;
+  --lv-dur-base: 200ms;
+  --lv-dur-slow: 320ms;
+  --lv-ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --lv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  /* Small elements only — buttons, toggles, badges. Never on a panel,
+     never on a data value: overshoot on a number reads as imprecise. */
+  --lv-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
+  /* ══════════════════════════════════════════════════════════════════
+     LAYOUT CONSTANTS — mirrored in tokens.ts for JS that needs numbers
+     (IntersectionObserver rootMargin, sticky offsets).
+     ══════════════════════════════════════════════════════════════════ */
+  --lv-doc-header-h: 56px;
+  --lv-doc-nav-w: 224px;
+  --lv-scroll-offset: 88px;
+  --lv-dl-label-w: 184px;
+  --lv-state-min-h: 216px;
+}
+/* ══════════════════════════════════════════════════════════════════════
+   2. SEMANTIC TOKENS — LIGHT
+   These are what components consume. Nothing below §2 touches a ramp.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-root,
+:root {
+  color-scheme: light dark;
+  /* Surface ladder — page is the floor, card is the top, inset digs. */
+  --lv-surface-page: var(--lv-n-100);
+  --lv-surface-shell: var(--lv-n-50);
+  --lv-surface-section: var(--lv-n-25);
+  --lv-surface-card: var(--lv-n-0);
+  --lv-surface-inset: oklch(0.964 0.006 255);
+  --lv-surface-raised: var(--lv-n-0);
+  --lv-surface-overlay: oklch(0.2 0.017 255 / 0.42);
+  /* Ghost/hover wash. Tinted with the neutral hue, never pure black. */
+  --lv-surface-hover: oklch(0.585 0.021 255 / 0.06);
+  --lv-surface-active: oklch(0.585 0.021 255 / 0.11);
+  --lv-surface-selected: oklch(0.628 0.216 27.5 / 0.07);
+  /* Ink. Type carries hierarchy before colour does, so there are only
+     four steps here — any more and weight/size stop doing their job. */
+  --lv-text-primary: var(--lv-n-950);
+  --lv-text-secondary: var(--lv-n-600);
+  --lv-text-tertiary: var(--lv-n-500);
+  --lv-text-faint: var(--lv-n-400);
+  --lv-text-on-accent: oklch(1 0 0);
+  --lv-text-disabled: var(--lv-n-400);
+  /* Hairlines — STRUCTURE ONLY. Depth is §elevation. */
+  --lv-hairline: oklch(0 0 0 / 0.07);
+  --lv-hairline-strong: oklch(0 0 0 / 0.12);
+  --lv-border-field: oklch(0 0 0 / 0.14);
+  /* Accent. Scarce by contract: one filled accent surface per view. */
+  --lv-accent: var(--lv-a-600);
+  --lv-accent-hover: var(--lv-a-700);
+  --lv-accent-active: var(--lv-a-800);
+  --lv-accent-text: var(--lv-a-600);
+  --lv-accent-mark: var(--lv-a-500);
+  --lv-accent-soft: oklch(0.628 0.216 27.5 / 0.1);
+  --lv-accent-rule: oklch(0.628 0.216 27.5 / 0.42);
+  --lv-focus: var(--lv-a-500);
+  /* Semantic states. `-text` is the AA-safe reading colour, `-mark` is
+     the dot/icon/track colour (larger, so it may be brighter). */
+  --lv-success-text: var(--lv-ok-text-l);
+  --lv-success-mark: var(--lv-ok-mark-l);
+  --lv-success-soft: oklch(0.58 0.145 150 / 0.1);
+  --lv-success-rule: oklch(0.58 0.145 150 / 0.5);
+  --lv-warning-text: var(--lv-wa-text-l);
+  --lv-warning-mark: var(--lv-wa-mark-l);
+  --lv-warning-soft: oklch(0.62 0.115 95 / 0.14);
+  --lv-warning-rule: oklch(0.62 0.115 95 / 0.55);
+  --lv-danger-text: var(--lv-da-text-l);
+  --lv-danger-mark: var(--lv-da-mark-l);
+  --lv-danger-soft: oklch(0.58 0.135 48 / 0.12);
+  --lv-danger-rule: oklch(0.58 0.135 48 / 0.55);
+  --lv-info-text: var(--lv-in-text-l);
+  --lv-info-mark: var(--lv-in-mark-l);
+  --lv-info-soft: oklch(0.55 0.21 290 / 0.1);
+  --lv-info-rule: oklch(0.55 0.21 290 / 0.45);
+  /* Elevation = shadow + a top-edge inner highlight. The highlight is
+     what separates "a box with a shadow" from "a lit surface". */
+  --lv-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.9);
+  --lv-elev-0: none;
+  --lv-elev-1: 0 1px 1px -0.5px oklch(0.2 0.02 255 / 0.06),
+    0 1px 2px -1px oklch(0.2 0.02 255 / 0.05), var(--lv-highlight);
+  --lv-elev-2: 0 1px 2px -1px oklch(0.2 0.02 255 / 0.08),
+    0 3px 6px -2px oklch(0.2 0.02 255 / 0.07), var(--lv-highlight);
+  --lv-elev-3: 0 2px 4px -2px oklch(0.2 0.02 255 / 0.09),
+    0 8px 18px -6px oklch(0.2 0.02 255 / 0.11), var(--lv-highlight);
+  --lv-elev-4: 0 4px 8px -4px oklch(0.2 0.02 255 / 0.1),
+    0 20px 44px -12px oklch(0.2 0.02 255 / 0.18), var(--lv-highlight);
+  /* The recessed panel. Inner shadow at the top edge + a whisper of a
+     containing ring. No outer shadow — it is a hole, not a block. */
+  --lv-elev-inset: inset 0 1px 2px 0 oklch(0.2 0.02 255 / 0.07),
+    inset 0 0 0 1px oklch(0 0 0 / 0.035);
+  --lv-skeleton-base: oklch(0.585 0.021 255 / 0.1);
+  --lv-skeleton-sheen: oklch(0.585 0.021 255 / 0.05);
+}
+/* ══════════════════════════════════════════════════════════════════════
+   3. SEMANTIC TOKENS — DARK
+   Not a mechanical inversion. The ladder is rebuilt from different steps
+   of the same ramps, then every pair was re-checked: chroma comes UP on
+   accents (a light-mode accent goes muddy once its surround darkens) and
+   the layered depth shadows come DOWN to a single ring plus one drop,
+   because stacked soft shadows are invisible on a dark surface.
+   ══════════════════════════════════════════════════════════════════════ */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']),
+  .lv-root:not([data-theme='light']),
+  /* A nested .lv-root re-declares the whole light ramp at its own specificity, so without
+     this it resets its subtree to light under an OS-dark root. */
+  :root:not([data-theme='light']) .lv-root:not([data-theme='light']) {
+    color-scheme: dark;
+    --lv-surface-page: var(--lv-n-975);
+    --lv-surface-shell: var(--lv-n-900);
+    --lv-surface-section: oklch(0.222 0.018 255);
+    --lv-surface-card: oklch(0.252 0.019 255);
+    --lv-surface-inset: oklch(0.178 0.016 255);
+    --lv-surface-raised: oklch(0.298 0.02 255);
+    --lv-surface-overlay: oklch(0.09 0.01 255 / 0.7);
+    --lv-surface-hover: oklch(1 0 0 / 0.055);
+    --lv-surface-active: oklch(1 0 0 / 0.09);
+    --lv-surface-selected: oklch(0.707 0.17 27.5 / 0.14);
+    --lv-text-primary: oklch(0.972 0.003 255);
+    --lv-text-secondary: oklch(0.78 0.012 255);
+    --lv-text-tertiary: oklch(0.655 0.015 255);
+    --lv-text-faint: oklch(0.545 0.016 255);
+    --lv-text-on-accent: oklch(1 0 0);
+    --lv-text-disabled: oklch(0.5 0.015 255);
+    --lv-hairline: oklch(1 0 0 / 0.09);
+    --lv-hairline-strong: oklch(1 0 0 / 0.16);
+    --lv-border-field: oklch(1 0 0 / 0.18);
+    --lv-accent: var(--lv-a-500);
+    --lv-accent-hover: var(--lv-a-400);
+    --lv-accent-active: var(--lv-a-300);
+    --lv-accent-text: var(--lv-a-400);
+    --lv-accent-mark: var(--lv-a-400);
+    --lv-accent-soft: oklch(0.707 0.17 27.5 / 0.16);
+    --lv-accent-rule: oklch(0.707 0.17 27.5 / 0.5);
+    --lv-focus: var(--lv-a-400);
+    --lv-success-text: var(--lv-ok-text-d);
+    --lv-success-mark: var(--lv-ok-mark-d);
+    --lv-success-soft: oklch(0.72 0.15 150 / 0.16);
+    --lv-success-rule: oklch(0.72 0.15 150 / 0.55);
+    --lv-warning-text: var(--lv-wa-text-d);
+    --lv-warning-mark: var(--lv-wa-mark-d);
+    --lv-warning-soft: oklch(0.76 0.14 95 / 0.16);
+    --lv-warning-rule: oklch(0.76 0.14 95 / 0.55);
+    --lv-danger-text: var(--lv-da-text-d);
+    --lv-danger-mark: var(--lv-da-mark-d);
+    --lv-danger-soft: oklch(0.73 0.15 48 / 0.16);
+    --lv-danger-rule: oklch(0.73 0.15 48 / 0.55);
+    --lv-info-text: var(--lv-in-text-d);
+    --lv-info-mark: var(--lv-in-mark-d);
+    --lv-info-soft: oklch(0.7 0.17 290 / 0.18);
+    --lv-info-rule: oklch(0.7 0.17 290 / 0.5);
+    --lv-series-1: oklch(0.72 0.17 27.5);
+    --lv-series-2: oklch(0.72 0.15 290);
+    --lv-series-3: oklch(0.72 0.15 150);
+    --lv-series-4: oklch(0.72 0.13 95);
+    --lv-series-5: oklch(0.72 0.14 245);
+    --lv-series-6: oklch(0.72 0.1 195);
+    --lv-series-7: oklch(0.72 0.16 340);
+    --lv-series-8: oklch(0.72 0.14 128);
+    --lv-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.055);
+    --lv-elev-0: none;
+    --lv-elev-1: 0 0 0 1px oklch(1 0 0 / 0.06), var(--lv-highlight);
+    --lv-elev-2: 0 0 0 1px oklch(1 0 0 / 0.07),
+      0 2px 6px -2px oklch(0 0 0 / 0.5), var(--lv-highlight);
+    --lv-elev-3: 0 0 0 1px oklch(1 0 0 / 0.08),
+      0 8px 20px -6px oklch(0 0 0 / 0.6), var(--lv-highlight);
+    --lv-elev-4: 0 0 0 1px oklch(1 0 0 / 0.1),
+      0 22px 48px -12px oklch(0 0 0 / 0.7), var(--lv-highlight);
+    --lv-elev-inset: inset 0 1px 3px 0 oklch(0 0 0 / 0.45),
+      inset 0 0 0 1px oklch(1 0 0 / 0.04);
+    --lv-skeleton-base: oklch(1 0 0 / 0.07);
+    --lv-skeleton-sheen: oklch(1 0 0 / 0.04);
+  }
+}
+/* Explicit override. Duplicated on purpose — a media query and an
+   attribute selector cannot share a rule, and the attribute must win in
+   BOTH directions (forced dark under a light OS, forced light under a
+   dark OS). Keep the two dark blocks in sync. */
+:root[data-theme='dark'],
+.lv-root[data-theme='dark'],
+/* Forced dark must reach nested .lv-root subtrees (artifact bodies, the gallery), which
+   otherwise stay light because .lv-root re-declares the light tokens unconditionally. */
+:root[data-theme='dark'] .lv-root:not([data-theme='light']) {
+  color-scheme: dark;
+  --lv-surface-page: var(--lv-n-975);
+  --lv-surface-shell: var(--lv-n-900);
+  --lv-surface-section: oklch(0.222 0.018 255);
+  --lv-surface-card: oklch(0.252 0.019 255);
+  --lv-surface-inset: oklch(0.178 0.016 255);
+  --lv-surface-raised: oklch(0.298 0.02 255);
+  --lv-surface-overlay: oklch(0.09 0.01 255 / 0.7);
+  --lv-surface-hover: oklch(1 0 0 / 0.055);
+  --lv-surface-active: oklch(1 0 0 / 0.09);
+  --lv-surface-selected: oklch(0.707 0.17 27.5 / 0.14);
+  --lv-text-primary: oklch(0.972 0.003 255);
+  --lv-text-secondary: oklch(0.78 0.012 255);
+  --lv-text-tertiary: oklch(0.655 0.015 255);
+  --lv-text-faint: oklch(0.545 0.016 255);
+  --lv-text-on-accent: oklch(1 0 0);
+  --lv-text-disabled: oklch(0.5 0.015 255);
+  --lv-hairline: oklch(1 0 0 / 0.09);
+  --lv-hairline-strong: oklch(1 0 0 / 0.16);
+  --lv-border-field: oklch(1 0 0 / 0.18);
+  --lv-accent: var(--lv-a-500);
+  --lv-accent-hover: var(--lv-a-400);
+  --lv-accent-active: var(--lv-a-300);
+  --lv-accent-text: var(--lv-a-400);
+  --lv-accent-mark: var(--lv-a-400);
+  --lv-accent-soft: oklch(0.707 0.17 27.5 / 0.16);
+  --lv-accent-rule: oklch(0.707 0.17 27.5 / 0.5);
+  --lv-focus: var(--lv-a-400);
+  --lv-success-text: var(--lv-ok-text-d);
+  --lv-success-mark: var(--lv-ok-mark-d);
+  --lv-success-soft: oklch(0.72 0.15 150 / 0.16);
+  --lv-success-rule: oklch(0.72 0.15 150 / 0.55);
+  --lv-warning-text: var(--lv-wa-text-d);
+  --lv-warning-mark: var(--lv-wa-mark-d);
+  --lv-warning-soft: oklch(0.76 0.14 95 / 0.16);
+  --lv-warning-rule: oklch(0.76 0.14 95 / 0.55);
+  --lv-danger-text: var(--lv-da-text-d);
+  --lv-danger-mark: var(--lv-da-mark-d);
+  --lv-danger-soft: oklch(0.73 0.15 48 / 0.16);
+  --lv-danger-rule: oklch(0.73 0.15 48 / 0.55);
+  --lv-info-text: var(--lv-in-text-d);
+  --lv-info-mark: var(--lv-in-mark-d);
+  --lv-info-soft: oklch(0.7 0.17 290 / 0.18);
+  --lv-info-rule: oklch(0.7 0.17 290 / 0.5);
+  --lv-series-1: oklch(0.72 0.17 27.5);
+  --lv-series-2: oklch(0.72 0.15 290);
+  --lv-series-3: oklch(0.72 0.15 150);
+  --lv-series-4: oklch(0.72 0.13 95);
+  --lv-series-5: oklch(0.72 0.14 245);
+  --lv-series-6: oklch(0.72 0.1 195);
+  --lv-series-7: oklch(0.72 0.16 340);
+  --lv-series-8: oklch(0.72 0.14 128);
+  --lv-highlight: inset 0 1px 0 0 oklch(1 0 0 / 0.055);
+  --lv-elev-0: none;
+  --lv-elev-1: 0 0 0 1px oklch(1 0 0 / 0.06), var(--lv-highlight);
+  --lv-elev-2: 0 0 0 1px oklch(1 0 0 / 0.07), 0 2px 6px -2px oklch(0 0 0 / 0.5),
+    var(--lv-highlight);
+  --lv-elev-3: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 20px -6px oklch(0 0 0 / 0.6),
+    var(--lv-highlight);
+  --lv-elev-4: 0 0 0 1px oklch(1 0 0 / 0.1), 0 22px 48px -12px oklch(0 0 0 / 0.7),
+    var(--lv-highlight);
+  --lv-elev-inset: inset 0 1px 3px 0 oklch(0 0 0 / 0.45),
+    inset 0 0 0 1px oklch(1 0 0 / 0.04);
+  --lv-skeleton-base: oklch(1 0 0 / 0.07);
+  --lv-skeleton-sheen: oklch(1 0 0 / 0.04);
+}
+/* Forced light under a dark OS. The §2 block already holds every light
+   value, so this only needs to re-assert `color-scheme`; the cascade
+   does the rest because the dark map lives behind
+   `:not([data-theme='light'])`. */
+:root[data-theme='light'],
+.lv-root[data-theme='light'] {
+  color-scheme: light;
+}
+/* ══════════════════════════════════════════════════════════════════════
+   4. ROOT
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-root {
+  font-family: var(--lv-font-sans);
+  font-size: var(--lv-text-base);
+  line-height: var(--lv-lh-base);
+  color: var(--lv-text-primary);
+  background: var(--lv-surface-page);
+  /* macOS renders text heavier than intended; correct once, at the root. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+/* One focus treatment, on everything, in one place. `outline-offset`
+   does the ring gap without needing to know the surface behind it. */
+.lv-root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
+.lv-root:focus-visible {
+  outline: 2px solid var(--lv-focus);
+  outline-offset: 2px;
+  border-radius: inherit;
+}
+.lv-root ::selection {
+  background: var(--lv-accent-soft);
+  color: var(--lv-text-primary);
+}
+/* Any comparable number. Not opt-in. */
+.lv-num {
+  font-variant-numeric: tabular-nums;
+}
+.lv-mono {
+  font-family: var(--lv-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.lv-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.lv-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+/* Reduced motion — jump to the final state. Collapsing the duration
+   tokens covers every transition authored against the scale; the two
+   `!important` rules catch keyframes and anything a consumer nests. */
+@media (prefers-reduced-motion: reduce) {
+  .lv-root,
+  .lv-root * {
+    --lv-dur-instant: 1ms;
+    --lv-dur-fast: 1ms;
+    --lv-dur-base: 1ms;
+    --lv-dur-slow: 1ms;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* ══════════════════════════════════════════════════════════════════════
+   5. LAYOUT PRIMITIVES
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-stack {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.lv-inline {
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+}
+.lv-grid {
+  display: grid;
+  min-width: 0;
+}
+/* Section — a titled region sitting one tier above its shell. */
+.lv-section {
+  background: var(--lv-surface-section);
+  border-radius: var(--lv-radius-lg);
+  box-shadow: var(--lv-elev-1);
+  padding: var(--lv-space-5);
+  min-width: 0;
+}
+.lv-section[data-flush='true'] {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+.lv-section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--lv-space-4);
+  /* Reserved so a section without actions is the same height as one
+     with them — the actions slot never resizes the header. */
+  min-height: 28px;
+  margin-bottom: var(--lv-space-4);
+}
+.lv-section-eyebrow {
+  font-size: var(--lv-text-2xs);
+  line-height: var(--lv-lh-2xs);
+  letter-spacing: var(--lv-tr-2xs);
+  text-transform: uppercase;
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-tertiary);
+  margin-bottom: var(--lv-space-1);
+}
+.lv-section-title {
+  font-size: var(--lv-text-lg);
+  line-height: var(--lv-lh-lg);
+  letter-spacing: var(--lv-tr-lg);
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-primary);
+  text-wrap: balance;
+  margin: 0;
+}
+.lv-section-desc {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  color: var(--lv-text-secondary);
+  text-wrap: pretty;
+  max-width: var(--lv-measure);
+  margin-top: var(--lv-space-1);
+}
+/* Panel — THE recessed inset. A hole cut into whatever surface holds
+   it. Never gets an outer shadow; never gets a hard border. */
+.lv-panel {
+  background: var(--lv-surface-inset);
+  border-radius: var(--lv-radius-sm);
+  box-shadow: var(--lv-elev-inset);
+  padding: var(--lv-space-4);
+  min-width: 0;
+}
+.lv-panel[data-tone='quiet'] {
+  box-shadow: inset 0 0 0 1px var(--lv-hairline);
+  background: transparent;
+}
+.lv-panel[data-tone='raised'] {
+  background: var(--lv-surface-raised);
+  box-shadow: var(--lv-elev-2);
+  border-radius: var(--lv-radius-md);
+}
+/* Toolbar — controls float above content; the hairline is structural. */
+.lv-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--lv-space-2);
+  /* Reserved so an empty toolbar does not collapse the layout. */
+  min-height: 40px;
+  padding-inline: var(--lv-space-1);
+  min-width: 0;
+}
+.lv-toolbar[data-sticky='true'] {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--lv-surface-shell);
+  padding-block: var(--lv-space-2);
+  box-shadow: inset 0 -1px 0 0 var(--lv-hairline);
+}
+.lv-toolbar-spacer {
+  flex: 1 1 auto;
+  min-width: var(--lv-space-2);
+}
+.lv-toolbar-divider {
+  flex: 0 0 auto;
+  align-self: stretch;
+  width: 1px;
+  margin-inline: var(--lv-space-1);
+  margin-block: var(--lv-space-2);
+  background: var(--lv-hairline);
+}
+/* ══════════════════════════════════════════════════════════════════════
+   6. ACTION (button)
+   Exactly one `primary` per view. Everything else is secondary or ghost.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-action {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lv-space-2);
+  flex: 0 0 auto;
+  height: 32px;
+  padding-inline: var(--lv-space-3);
+  border: 0;
+  border-radius: var(--lv-radius-md);
+  font-family: inherit;
+  font-size: var(--lv-text-sm);
+  font-weight: var(--lv-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  /* Never `all`. */
+  transition-property: background-color, color, box-shadow, scale, opacity;
+  transition-duration: var(--lv-dur-fast);
+  transition-timing-function: var(--lv-ease-out);
+}
+.lv-action[data-size='sm'] {
+  height: 26px;
+  padding-inline: var(--lv-space-2);
+  font-size: var(--lv-text-xs);
+  border-radius: var(--lv-radius-sm);
+}
+.lv-action[data-size='lg'] {
+  height: 40px;
+  padding-inline: var(--lv-space-4);
+  font-size: var(--lv-text-base);
+}
+.lv-action[data-icon-only='true'] {
+  width: 32px;
+  padding-inline: 0;
+}
+.lv-action[data-icon-only='true'][data-size='sm'] {
+  width: 26px;
+}
+.lv-action[data-icon-only='true'][data-size='lg'] {
+  width: 40px;
+}
+/* Tactile press. 0.96 exactly — below 0.95 reads as exaggerated. */
+.lv-action:not(:disabled):active {
+  scale: 0.96;
+  transition-duration: var(--lv-dur-instant);
+  transition-timing-function: var(--lv-ease-spring);
+}
+.lv-action:disabled,
+.lv-action[aria-disabled='true'] {
+  cursor: not-allowed;
+  /* Size is unchanged; only the paint changes. */
+  opacity: 0.5;
+}
+.lv-action[data-variant='primary'] {
+  background: var(--lv-accent);
+  color: var(--lv-text-on-accent);
+  box-shadow: var(--lv-elev-1);
+}
+.lv-action[data-variant='primary']:not(:disabled):hover {
+  background: var(--lv-accent-hover);
+}
+.lv-action[data-variant='secondary'] {
+  background: var(--lv-surface-card);
+  color: var(--lv-text-primary);
+  box-shadow: var(--lv-elev-1);
+}
+.lv-action[data-variant='secondary']:not(:disabled):hover {
+  background: var(--lv-surface-hover);
+}
+.lv-action[data-variant='ghost'] {
+  background: transparent;
+  color: var(--lv-text-secondary);
+}
+.lv-action[data-variant='ghost']:not(:disabled):hover {
+  background: var(--lv-surface-hover);
+  color: var(--lv-text-primary);
+}
+.lv-action[data-variant='danger'] {
+  background: transparent;
+  color: var(--lv-danger-text);
+  box-shadow: inset 0 0 0 1px var(--lv-danger-rule);
+}
+.lv-action[data-variant='danger']:not(:disabled):hover {
+  background: var(--lv-danger-soft);
+}
+/* Loading: the label stays in the DOM (holding the width) and goes
+   invisible; the spinner sits on top. The box never resizes. */
+.lv-action[data-loading='true'] {
+  cursor: progress;
+}
+.lv-action[data-loading='true'] .lv-action-label {
+  visibility: hidden;
+}
+.lv-action-spinner {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.lv-spin {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--lv-radius-full);
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  opacity: 0.85;
+  animation: lv-spin 720ms linear infinite;
+}
+@keyframes lv-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* ══════════════════════════════════════════════════════════════════════
+   7. DOCUMENT SHELL
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-doc {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--lv-space-6);
+  align-items: start;
+  background: var(--lv-surface-shell);
+  min-width: 0;
+}
+/* Hold the two-column structure until the content genuinely stops
+   fitting — not at a device preset. 900px is where a 224px rail plus a
+   readable measure runs out of room. */
+@media (min-width: 900px) {
+  .lv-doc {
+    grid-template-columns: var(--lv-doc-nav-w) minmax(0, 1fr);
+  }
+}
+.lv-doc-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: var(--lv-space-4);
+  /* Reserved: the header is this tall whether or not it has actions,
+     a status pill, or a two-line title. */
+  min-height: var(--lv-doc-header-h);
+  padding: var(--lv-space-3) var(--lv-space-5);
+  background: var(--lv-surface-shell);
+  box-shadow: inset 0 -1px 0 0 var(--lv-hairline);
+}
+.lv-doc-headline {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.lv-doc-eyebrow {
+  font-size: var(--lv-text-2xs);
+  line-height: var(--lv-lh-2xs);
+  letter-spacing: var(--lv-tr-2xs);
+  text-transform: uppercase;
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-tertiary);
+  /* Reserved so a document with no eyebrow is the same height. */
+  min-height: calc(var(--lv-text-2xs) * var(--lv-lh-2xs));
+}
+.lv-doc-title {
+  font-size: var(--lv-text-xl);
+  line-height: var(--lv-lh-xl);
+  letter-spacing: var(--lv-tr-xl);
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-primary);
+  margin: 0;
+}
+.lv-doc-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--lv-space-2);
+  flex: 0 0 auto;
+}
+/* Nav rail. On narrow viewports it becomes a horizontal scroller with
+   the next item peeking past the edge, so hidden items announce
+   themselves instead of silently disappearing. */
+.lv-doc-nav {
+  position: sticky;
+  top: var(--lv-doc-header-h);
+  align-self: start;
+  padding: var(--lv-space-4) var(--lv-space-2) var(--lv-space-4)
+    var(--lv-space-5);
+  min-width: 0;
+}
+@media (max-width: 899px) {
+  .lv-doc-nav {
+    position: sticky;
+    top: var(--lv-doc-header-h);
+    z-index: 9;
+    display: flex;
+    gap: var(--lv-space-1);
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding: var(--lv-space-2) var(--lv-space-5);
+    background: var(--lv-surface-shell);
+    box-shadow: inset 0 -1px 0 0 var(--lv-hairline);
+    /* Let the next item peek so the scroller never looks complete. */
+    scroll-padding-inline: var(--lv-space-6);
+  }
+  .lv-doc-nav::-webkit-scrollbar {
+    display: none;
+  }
+  .lv-doc-nav-list {
+    display: contents;
+  }
+  .lv-doc-nav-item {
+    flex: 0 0 auto;
+  }
+}
+.lv-doc-nav-label {
+  font-size: var(--lv-text-2xs);
+  line-height: var(--lv-lh-2xs);
+  letter-spacing: var(--lv-tr-2xs);
+  text-transform: uppercase;
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-faint);
+  padding-inline-start: var(--lv-space-3);
+  margin-bottom: var(--lv-space-2);
+}
+@media (max-width: 899px) {
+  .lv-doc-nav-label {
+    display: none;
+  }
+}
+.lv-doc-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.lv-doc-nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--lv-space-2);
+  width: 100%;
+  min-height: 30px;
+  padding: var(--lv-space-1) var(--lv-space-3);
+  border: 0;
+  background: transparent;
+  /* The active indicator is ALWAYS present, just transparent. Adding a
+     rule on activation would shift every label by 2px. */
+  border-inline-start: 2px solid transparent;
+  border-radius: 0 var(--lv-radius-sm) var(--lv-radius-sm) 0;
+  font-family: inherit;
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  font-weight: var(--lv-weight-medium);
+  color: var(--lv-text-secondary);
+  text-align: start;
+  cursor: pointer;
+  transition-property: background-color, color, border-color;
+  transition-duration: var(--lv-dur-fast);
+  transition-timing-function: var(--lv-ease-out);
+}
+.lv-doc-nav-item:hover {
+  background: var(--lv-surface-hover);
+  color: var(--lv-text-primary);
+}
+.lv-doc-nav-item[aria-current='true'] {
+  color: var(--lv-text-primary);
+  border-inline-start-color: var(--lv-accent-mark);
+  background: var(--lv-surface-selected);
+  font-weight: var(--lv-weight-semibold);
+}
+@media (max-width: 899px) {
+  .lv-doc-nav-item {
+    border-inline-start: 0;
+    border-block-end: 2px solid transparent;
+    border-radius: var(--lv-radius-sm);
+    white-space: nowrap;
+  }
+  .lv-doc-nav-item[aria-current='true'] {
+    border-block-end-color: var(--lv-accent-mark);
+  }
+}
+.lv-doc-nav-count {
+  margin-inline-start: auto;
+  font-size: var(--lv-text-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--lv-text-faint);
+  /* Reserved slot: a count appearing must not shove the label. */
+  min-width: 2ch;
+  text-align: end;
+}
+.lv-doc-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lv-space-6);
+  padding: var(--lv-space-4) var(--lv-space-5) var(--lv-space-20);
+  min-width: 0;
+}
+/* ── Document section ─────────────────────────────────────────────── */
+.lv-docsection {
+  scroll-margin-top: var(--lv-scroll-offset);
+  min-width: 0;
+}
+.lv-docsection-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--lv-space-4);
+  min-height: 28px;
+  margin-bottom: var(--lv-space-3);
+}
+.lv-docsection-title {
+  font-size: var(--lv-text-lg);
+  line-height: var(--lv-lh-lg);
+  letter-spacing: var(--lv-tr-lg);
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-primary);
+  text-wrap: balance;
+  margin: 0;
+  scroll-margin-top: var(--lv-scroll-offset);
+}
+.lv-docsection-desc {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  color: var(--lv-text-secondary);
+  text-wrap: pretty;
+  max-width: var(--lv-measure);
+  margin-top: var(--lv-space-1);
+}
+.lv-docsection-body {
+  min-width: 0;
+}
+/* Long-form prose inside a document section. */
+.lv-prose {
+  font-size: var(--lv-prose-size);
+  line-height: var(--lv-prose-lh);
+  color: var(--lv-text-secondary);
+  max-width: var(--lv-measure);
+  text-wrap: pretty;
+}
+.lv-prose > * + * {
+  margin-top: var(--lv-space-4);
+}
+/* ══════════════════════════════════════════════════════════════════════
+   8. FIELD ROW / DEFINITION LIST
+   Every row shares one label column, so labels and values across
+   unrelated rows sit on the same two edges.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-dl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lv-space-1);
+  margin: 0;
+  min-width: 0;
+}
+.lv-dl[data-dividers='true'] .lv-field-row + .lv-field-row {
+  border-block-start: 1px solid var(--lv-hairline);
+  padding-block-start: var(--lv-space-2);
+  margin-block-start: var(--lv-space-1);
+}
+.lv-field-row {
+  display: grid;
+  grid-template-columns: var(--lv-dl-label-w) minmax(0, 1fr);
+  gap: var(--lv-space-4);
+  align-items: baseline;
+  min-width: 0;
+  padding-block: var(--lv-space-1);
+}
+/* Below this the label column eats the value; stack instead of
+   truncating something the reader came for. */
+@media (max-width: 639px) {
+  .lv-field-row,
+  .lv-field-row[data-layout='inline'] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+}
+.lv-field-row[data-layout='stacked'] {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2px;
+}
+.lv-field-label {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  font-weight: var(--lv-weight-medium);
+  color: var(--lv-text-tertiary);
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.lv-field-value {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  color: var(--lv-text-primary);
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: break-word;
+  /* Reserved: an empty value keeps the row at one line's height. */
+  min-height: calc(var(--lv-text-sm) * var(--lv-lh-sm));
+}
+.lv-field-value[data-empty='true'] {
+  color: var(--lv-text-faint);
+}
+.lv-field-hint {
+  display: block;
+  font-size: var(--lv-text-xs);
+  line-height: var(--lv-lh-xs);
+  color: var(--lv-text-faint);
+  margin-top: 2px;
+}
+/* ══════════════════════════════════════════════════════════════════════
+   9. STAT TILE
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lv-space-1);
+  padding: var(--lv-space-3) var(--lv-space-4);
+  background: var(--lv-surface-card);
+  border-radius: var(--lv-radius-md);
+  box-shadow: var(--lv-elev-1);
+  min-width: 0;
+}
+.lv-stat[data-inset='true'] {
+  background: var(--lv-surface-inset);
+  box-shadow: var(--lv-elev-inset);
+  border-radius: var(--lv-radius-sm);
+}
+.lv-stat-label {
+  font-size: var(--lv-text-2xs);
+  line-height: var(--lv-lh-2xs);
+  letter-spacing: var(--lv-tr-2xs);
+  text-transform: uppercase;
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lv-stat-valuerow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--lv-space-1);
+  /* Reserved so the tile's height never depends on whether a value has
+     arrived yet. */
+  min-height: calc(var(--lv-text-stat) * var(--lv-lh-stat));
+}
+.lv-stat-value {
+  font-size: var(--lv-text-stat);
+  line-height: var(--lv-lh-stat);
+  letter-spacing: var(--lv-tr-stat);
+  font-weight: var(--lv-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--lv-text-primary);
+  /* The slot. Sized in `ch` for the largest plausible value, so a
+     counter ticking 9 → 10 → 100 never reflows its neighbours. */
+  min-width: calc(var(--lv-stat-slots, 6) * 1ch);
+  display: inline-block;
+}
+.lv-stat-unit {
+  font-size: var(--lv-text-sm);
+  font-weight: var(--lv-weight-medium);
+  color: var(--lv-text-tertiary);
+  white-space: nowrap;
+}
+/* The delta row is ALWAYS in the box. When there is no delta it is
+   hidden, not removed — `display: none` would resize the tile. */
+.lv-stat-footrow {
+  display: flex;
+  align-items: center;
+  gap: var(--lv-space-1);
+  font-size: var(--lv-text-xs);
+  line-height: var(--lv-lh-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--lv-text-tertiary);
+  min-height: calc(var(--lv-text-xs) * var(--lv-lh-xs));
+}
+.lv-stat-footrow[data-hidden='true'] {
+  visibility: hidden;
+}
+.lv-stat-delta[data-tone='up'] {
+  color: var(--lv-success-text);
+}
+.lv-stat-delta[data-tone='down'] {
+  color: var(--lv-danger-text);
+}
+.lv-stat-delta[data-tone='flat'] {
+  color: var(--lv-text-tertiary);
+}
+.lv-stat-hint {
+  color: var(--lv-text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+/* ══════════════════════════════════════════════════════════════════════
+   10. CALLOUT
+   Tone is carried by an icon, a word, and a leading rule — never by
+   colour alone.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-callout {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: var(--lv-space-3);
+  align-items: start;
+  padding: var(--lv-space-3) var(--lv-space-4);
+  border-radius: var(--lv-radius-md);
+  /* Leading rule, not a full border. A boxed callout reads as a form
+     field; a ruled one reads as an aside. */
+  border-inline-start: 2px solid var(--lv-info-rule);
+  background: var(--lv-info-soft);
+  min-width: 0;
+}
+.lv-callout[data-tone='info'] {
+  border-inline-start-color: var(--lv-info-rule);
+  background: var(--lv-info-soft);
+}
+.lv-callout[data-tone='success'] {
+  border-inline-start-color: var(--lv-success-rule);
+  background: var(--lv-success-soft);
+}
+.lv-callout[data-tone='warn'] {
+  border-inline-start-color: var(--lv-warning-rule);
+  background: var(--lv-warning-soft);
+}
+.lv-callout[data-tone='danger'] {
+  border-inline-start-color: var(--lv-danger-rule);
+  background: var(--lv-danger-soft);
+}
+.lv-callout-icon {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  /* Optical: nudge onto the title's cap-height rather than its box. */
+  margin-top: 1px;
+  flex: 0 0 auto;
+}
+.lv-callout[data-tone='info'] .lv-callout-icon {
+  color: var(--lv-info-text);
+}
+.lv-callout[data-tone='success'] .lv-callout-icon {
+  color: var(--lv-success-text);
+}
+.lv-callout[data-tone='warn'] .lv-callout-icon {
+  color: var(--lv-warning-text);
+}
+.lv-callout[data-tone='danger'] .lv-callout-icon {
+  color: var(--lv-danger-text);
+}
+.lv-callout-title {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-primary);
+  margin: 0;
+}
+.lv-callout-body {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  color: var(--lv-text-secondary);
+  text-wrap: pretty;
+  max-width: var(--lv-measure);
+  margin-top: 2px;
+  overflow-wrap: break-word;
+}
+.lv-callout-actions {
+  display: flex;
+  gap: var(--lv-space-2);
+  margin-top: var(--lv-space-3);
+}
+/* ══════════════════════════════════════════════════════════════════════
+   11. STATUS PILL
+   The marker SHAPE differs per tone as well as the colour, so the pill
+   still reads correctly in greyscale.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lv-space-1);
+  /* Fixed height. A pill changing tone must not change size. */
+  height: 20px;
+  padding-inline: var(--lv-space-2);
+  border-radius: var(--lv-radius-full);
+  font-size: var(--lv-text-2xs);
+  line-height: 1;
+  letter-spacing: 0.01em;
+  font-weight: var(--lv-weight-semibold);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  max-width: 100%;
+  min-width: 0;
+  background: var(--lv-surface-hover);
+  color: var(--lv-text-secondary);
+  box-shadow: inset 0 0 0 1px var(--lv-hairline);
+}
+.lv-pill-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.lv-pill-mark {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  background: currentColor;
+}
+/* Shape per tone — filled dot, ring, square, triangle. */
+.lv-pill-mark[data-shape='dot'] {
+  border-radius: var(--lv-radius-full);
+}
+.lv-pill-mark[data-shape='ring'] {
+  border-radius: var(--lv-radius-full);
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px currentColor;
+}
+.lv-pill-mark[data-shape='square'] {
+  border-radius: 1px;
+}
+.lv-pill-mark[data-shape='triangle'] {
+  background: transparent;
+  width: 0;
+  height: 0;
+  border-inline: 4px solid transparent;
+  border-block-end: 7px solid currentColor;
+}
+.lv-pill-mark[data-shape='bar'] {
+  width: 3px;
+  height: 9px;
+  border-radius: 1px;
+}
+.lv-pill[data-tone='accent'] {
+  background: var(--lv-accent-soft);
+  color: var(--lv-accent-text);
+  box-shadow: inset 0 0 0 1px var(--lv-accent-rule);
+}
+.lv-pill[data-tone='success'] {
+  background: var(--lv-success-soft);
+  color: var(--lv-success-text);
+  box-shadow: inset 0 0 0 1px var(--lv-success-rule);
+}
+.lv-pill[data-tone='warning'] {
+  background: var(--lv-warning-soft);
+  color: var(--lv-warning-text);
+  box-shadow: inset 0 0 0 1px var(--lv-warning-rule);
+}
+.lv-pill[data-tone='danger'] {
+  background: var(--lv-danger-soft);
+  color: var(--lv-danger-text);
+  box-shadow: inset 0 0 0 1px var(--lv-danger-rule);
+}
+.lv-pill[data-tone='info'] {
+  background: var(--lv-info-soft);
+  color: var(--lv-info-text);
+  box-shadow: inset 0 0 0 1px var(--lv-info-rule);
+}
+/* ══════════════════════════════════════════════════════════════════════
+   12. PROGRESS TRACK
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lv-space-2);
+  min-width: 0;
+}
+.lv-progress-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--lv-space-3);
+  /* Reserved: label row exists whether or not a label was passed. */
+  min-height: calc(var(--lv-text-xs) * var(--lv-lh-xs));
+}
+.lv-progress-label {
+  font-size: var(--lv-text-xs);
+  line-height: var(--lv-lh-xs);
+  font-weight: var(--lv-weight-medium);
+  color: var(--lv-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.lv-progress-value {
+  font-size: var(--lv-text-xs);
+  line-height: var(--lv-lh-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-tertiary);
+  /* Slot for "100%" so 9% → 100% never nudges the label. */
+  min-width: 4ch;
+  text-align: end;
+  flex: 0 0 auto;
+}
+/* The track is a recessed groove — the inset treatment, in miniature. */
+.lv-progress-track {
+  position: relative;
+  height: 6px;
+  border-radius: var(--lv-radius-full);
+  background: var(--lv-surface-inset);
+  box-shadow: var(--lv-elev-inset);
+  overflow: hidden;
+}
+.lv-progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--lv-accent-mark);
+  /* Ease, never spring: overshoot on a measured value reads as wrong. */
+  transition-property: width;
+  transition-duration: var(--lv-dur-slow);
+  transition-timing-function: var(--lv-ease-out);
+}
+.lv-progress[data-tone='success'] .lv-progress-fill {
+  background: var(--lv-success-mark);
+}
+.lv-progress[data-tone='warning'] .lv-progress-fill {
+  background: var(--lv-warning-mark);
+}
+.lv-progress[data-tone='danger'] .lv-progress-fill {
+  background: var(--lv-danger-mark);
+}
+.lv-progress[data-tone='neutral'] .lv-progress-fill {
+  background: var(--lv-text-faint);
+}
+.lv-progress-indeterminate {
+  position: absolute;
+  inset-block: 0;
+  inline-size: 40%;
+  border-radius: inherit;
+  background: var(--lv-accent-mark);
+  animation: lv-indeterminate 1.4s var(--lv-ease-in-out) infinite;
+}
+@keyframes lv-indeterminate {
+  0% {
+    transform: translateX(-110%);
+  }
+  100% {
+    transform: translateX(320%);
+  }
+}
+/* Reduced motion: no travelling bar. Show a static, obviously-partial
+   fill instead — the final state, not a frozen animation. */
+@media (prefers-reduced-motion: reduce) {
+  .lv-progress-indeterminate {
+    animation: none;
+    inline-size: 100%;
+    opacity: 0.4;
+    transform: none;
+  }
+}
+/* ══════════════════════════════════════════════════════════════════════
+   13. TIMELINE
+   The rail is a structural line, which is exactly what a border is for.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-timeline {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+.lv-timeline-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: var(--lv-space-3);
+  padding-block-end: var(--lv-space-5);
+  min-width: 0;
+}
+.lv-timeline-item:last-child {
+  padding-block-end: 0;
+}
+/* The rail. Drawn on the marker column, stopped on the last item. */
+.lv-timeline-item::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 18px;
+  inset-block-end: 0;
+  inset-inline-start: 9px;
+  width: 2px;
+  background: var(--lv-hairline-strong);
+}
+.lv-timeline-item:last-child::before {
+  display: none;
+}
+.lv-timeline-marker {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--lv-radius-full);
+  background: var(--lv-surface-card);
+  box-shadow: inset 0 0 0 2px var(--lv-hairline-strong);
+  color: var(--lv-text-tertiary);
+}
+.lv-timeline-item[data-state='done'] .lv-timeline-marker {
+  background: var(--lv-success-soft);
+  box-shadow: inset 0 0 0 2px var(--lv-success-rule);
+  color: var(--lv-success-text);
+}
+.lv-timeline-item[data-state='current'] .lv-timeline-marker {
+  background: var(--lv-accent-soft);
+  box-shadow: inset 0 0 0 2px var(--lv-accent-rule);
+  color: var(--lv-accent-text);
+}
+.lv-timeline-item[data-state='blocked'] .lv-timeline-marker {
+  background: var(--lv-danger-soft);
+  box-shadow: inset 0 0 0 2px var(--lv-danger-rule);
+  color: var(--lv-danger-text);
+}
+.lv-timeline-content {
+  min-width: 0;
+  padding-block-start: 1px;
+}
+.lv-timeline-titlerow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--lv-space-2);
+  justify-content: space-between;
+  min-width: 0;
+}
+.lv-timeline-title {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-primary);
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.lv-timeline-meta {
+  font-size: var(--lv-text-xs);
+  line-height: var(--lv-lh-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--lv-text-faint);
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+.lv-timeline-desc {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  color: var(--lv-text-secondary);
+  text-wrap: pretty;
+  max-width: var(--lv-measure);
+  margin-top: 2px;
+  overflow-wrap: break-word;
+}
+/* ══════════════════════════════════════════════════════════════════════
+   14. STATES — empty / loading / error
+   All three share ONE frame with the same reserved min-height, so the
+   swap between them (and to the loaded content) shifts nothing.
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lv-space-3);
+  text-align: center;
+  padding: var(--lv-space-8) var(--lv-space-6);
+  min-height: var(--lv-state-min-h);
+  min-width: 0;
+}
+.lv-state[data-surface='inset'] {
+  background: var(--lv-surface-inset);
+  border-radius: var(--lv-radius-sm);
+  box-shadow: var(--lv-elev-inset);
+}
+.lv-state[data-surface='card'] {
+  background: var(--lv-surface-card);
+  border-radius: var(--lv-radius-md);
+  box-shadow: var(--lv-elev-1);
+}
+.lv-state-icon {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--lv-radius-full);
+  background: var(--lv-surface-hover);
+  color: var(--lv-text-tertiary);
+}
+.lv-state[data-tone='error'] .lv-state-icon {
+  background: var(--lv-danger-soft);
+  color: var(--lv-danger-text);
+}
+.lv-state-title {
+  font-size: var(--lv-text-md);
+  line-height: var(--lv-lh-md);
+  font-weight: var(--lv-weight-semibold);
+  color: var(--lv-text-primary);
+  text-wrap: balance;
+  margin: 0;
+}
+.lv-state-body {
+  font-size: var(--lv-text-sm);
+  line-height: var(--lv-lh-sm);
+  color: var(--lv-text-secondary);
+  text-wrap: pretty;
+  max-width: 46ch;
+  margin: 0;
+}
+.lv-state-detail {
+  width: 100%;
+  max-width: 56ch;
+  margin-top: var(--lv-space-1);
+  text-align: start;
+}
+.lv-state-detail summary {
+  font-size: var(--lv-text-xs);
+  color: var(--lv-text-tertiary);
+  cursor: pointer;
+  list-style: none;
+  text-align: center;
+}
+.lv-state-detail summary::-webkit-details-marker {
+  display: none;
+}
+.lv-state-detail pre {
+  margin-top: var(--lv-space-2);
+  padding: var(--lv-space-3);
+  background: var(--lv-surface-inset);
+  box-shadow: var(--lv-elev-inset);
+  border-radius: var(--lv-radius-sm);
+  font-family: var(--lv-font-mono);
+  font-size: var(--lv-text-xs);
+  line-height: 1.5;
+  color: var(--lv-text-secondary);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+.lv-state-actions {
+  display: flex;
+  gap: var(--lv-space-2);
+  margin-top: var(--lv-space-1);
+  /* Reserved so an action-less state is the same height. */
+  min-height: 32px;
+  align-items: center;
+}
+/* ── Skeleton ─────────────────────────────────────────────────────── */
+.lv-skeleton {
+  display: block;
+  background: var(--lv-skeleton-base);
+  border-radius: var(--lv-radius-sm);
+  position: relative;
+  overflow: hidden;
+}
+.lv-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--lv-skeleton-sheen),
+    transparent
+  );
+  transform: translateX(-100%);
+  animation: lv-sheen 1.6s var(--lv-ease-in-out) infinite;
+}
+@keyframes lv-sheen {
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* Reduced motion: no sheen at all. The static bar IS the final state. */
+@media (prefers-reduced-motion: reduce) {
+  .lv-skeleton::after {
+    display: none;
+  }
+}
+.lv-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lv-space-2);
+  min-width: 0;
+}
+/* Same surfaces as .lv-state, so a skeleton and the empty/error state it
+   swaps with sit on the identical box. */
+.lv-skeleton-group[data-surface='inset'] {
+  background: var(--lv-surface-inset);
+  border-radius: var(--lv-radius-sm);
+  box-shadow: var(--lv-elev-inset);
+  padding: var(--lv-space-4);
+}
+.lv-skeleton-group[data-surface='card'] {
+  background: var(--lv-surface-card);
+  border-radius: var(--lv-radius-md);
+  box-shadow: var(--lv-elev-1);
+  padding: var(--lv-space-4);
+}
+/* ══════════════════════════════════════════════════════════════════════
+   15. SHOWCASE-ONLY helpers (the demo page uses these; apps do not).
+   ══════════════════════════════════════════════════════════════════════ */
+.lv-swatch {
+  height: 44px;
+  border-radius: var(--lv-radius-sm);
+  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
+}