@refrakt-md/lumina 0.33.0 → 0.34.0

package/styles/dimensions/metadata.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* ─── Metadata Dimensions — skin ───────────────────────────────────────
+	/* ─── Metadata Dimensions — skin ───────────────────────────────────────
  * SPEC-080 typography / geometry split. The zone-layout *structure* (bar +
  * definition-list display/grid, the rating flex row, the sr-only label
  * mechanism) lives in @refrakt-md/skeleton (dimensions/metadata.css). What
@@ -9,136 +9,143 @@
  *  - Sentiment rules drive `--meta-color`, inherited by chips + tinted text.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Sentiment ────────────────────────────────────────────────────── */
+	/* ─── Sentiment ────────────────────────────────────────────────────── */
 
-[data-meta-sentiment="positive"] { --meta-color: var(--rf-color-success, #10b981); }
-[data-meta-sentiment="negative"] { --meta-color: var(--rf-color-danger, #ef4444); }
-[data-meta-sentiment="caution"]  { --meta-color: var(--rf-color-warning, #f59e0b); }
-[data-meta-sentiment="neutral"]  { --meta-color: var(--rf-color-muted, #64748b); }
+	[data-meta-sentiment="positive"] {
+		--meta-color: var(--rf-color-success, #10b981);
+	}
+	[data-meta-sentiment="negative"] {
+		--meta-color: var(--rf-color-danger, #ef4444);
+	}
+	[data-meta-sentiment="caution"] {
+		--meta-color: var(--rf-color-warning, #f59e0b);
+	}
+	[data-meta-sentiment="neutral"] {
+		--meta-color: var(--rf-color-muted, #64748b);
+	}
 
-/* ─── Meta Types — typography only ─────────────────────────────────── */
+	/* ─── Meta Types — typography only ─────────────────────────────────── */
 
-[data-meta-type="id"],
-[data-meta-type="code"] {
-	font-family: var(--rf-font-mono, monospace);
-	font-size: var(--meta-font-size, var(--rf-text-sm));
-}
+	[data-meta-type="id"],
+	[data-meta-type="code"] {
+		font-family: var(--rf-font-mono, monospace);
+		font-size: var(--meta-font-size, var(--rf-text-sm));
+	}
 
-/* IDs read as primary-coloured references wherever they appear (eyebrow
+	/* IDs read as primary-coloured references wherever they appear (eyebrow
  * bars, metadata def-lists, etc.) — a semantic treatment of the `id` type,
  * not a per-layout one. `code` (e.g. API paths) stays neutral monospace. */
-[data-meta-type="id"] {
-	color: var(--rf-color-primary);
-	font-weight: var(--rf-weight-medium);
-}
+	[data-meta-type="id"] {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-medium);
+	}
 
-[data-meta-type="quantity"] {
-	font-variant-numeric: tabular-nums;
-	font-size: var(--meta-font-size, 0.8125rem);
-}
+	[data-meta-type="quantity"] {
+		font-variant-numeric: tabular-nums;
+		font-size: var(--meta-font-size, 0.8125rem);
+	}
 
-[data-meta-type="temporal"] {
-	font-variant-numeric: tabular-nums;
-	font-size: var(--meta-font-size, 0.8125rem);
-}
+	[data-meta-type="temporal"] {
+		font-variant-numeric: tabular-nums;
+		font-size: var(--meta-font-size, 0.8125rem);
+	}
 
-/* Rating — `value` filled marks out of `total`; each mark carries
+	/* Rating — `value` filled marks out of `total`; each mark carries
  * `data-filled`. Stars via colour (filled = primary, empty = border). The
  * inline-flex row is structure (skeleton); the glyph + spacing + colours are
  * skin. */
-[data-meta-type="rating"] {
-	gap: 0.0625rem;
-	line-height: 1;
-}
-[data-meta-type="rating"] span::before {
-	content: '★';
-}
-[data-meta-type="rating"] span[data-filled="true"] {
-	color: var(--rf-color-primary);
-}
-[data-meta-type="rating"] span[data-filled="false"] {
-	color: var(--rf-color-border);
-}
+	[data-meta-type="rating"] {
+		gap: 0.0625rem;
+		line-height: 1;
+	}
+	[data-meta-type="rating"] span::before {
+		content: "★";
+	}
+	[data-meta-type="rating"] span[data-filled="true"] {
+		color: var(--rf-color-primary);
+	}
+	[data-meta-type="rating"] span[data-filled="false"] {
+		color: var(--rf-color-border);
+	}
 
-[data-meta-type="status"],
-[data-meta-type="category"],
-[data-meta-type="tag"] {
-	font-size: var(--meta-font-size, 0.8125rem);
-}
+	[data-meta-type="status"],
+	[data-meta-type="category"],
+	[data-meta-type="tag"] {
+		font-size: var(--meta-font-size, 0.8125rem);
+	}
 
-/* Linked eyebrow content (matches today's hero behaviour). */
-[data-zone="eyebrow"] a {
-	color: var(--rf-color-primary);
-	text-decoration: underline;
-	text-underline-offset: 0.15em;
-}
+	/* Linked eyebrow content (matches today's hero behaviour). */
+	[data-zone="eyebrow"] a {
+		color: var(--rf-color-primary);
+		text-decoration: underline;
+		text-underline-offset: 0.15em;
+	}
 
-/* ─── Layout: bar — spacing ────────────────────────────────────────── */
-/* The flex row + end-push are structure (skeleton); the gap is skin. */
-[data-zone-layout="bar"] {
-	gap: 0.5rem;
-}
+	/* ─── Layout: bar — spacing ────────────────────────────────────────── */
+	/* The flex row + end-push are structure (skeleton); the gap is skin. */
+	[data-zone-layout="bar"] {
+		gap: 0.5rem;
+	}
 
-/* ─── Layout: definition-list — spacing + chrome ───────────────────── */
-/* The grid + row stacking are structure (skeleton); the gaps, the per-row
+	/* ─── Layout: definition-list — spacing + chrome ───────────────────── */
+	/* The grid + row stacking are structure (skeleton); the gaps, the per-row
  * border/padding/radius card chrome, and the dt/dd type are skin. */
-[data-zone-layout="definition-list"] {
-	gap: 0.75rem;
-	margin: 1.25rem 0;
-}
+	[data-zone-layout="definition-list"] {
+		gap: 0.75rem;
+		margin: 1.25rem 0;
+	}
 
-[data-zone-layout="definition-list"] > [data-name="row"] {
-	gap: 0.125rem;
-	padding: 0.625rem 0.75rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
-}
+	[data-zone-layout="definition-list"] > [data-name="row"] {
+		gap: 0.125rem;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
+	}
 
-[data-zone-layout="definition-list"] dt {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-muted);
-}
+	[data-zone-layout="definition-list"] dt {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-muted);
+	}
 
-[data-zone-layout="definition-list"] dd {
-	font-size: var(--rf-text-sm);
-}
+	[data-zone-layout="definition-list"] dd {
+		font-size: var(--rf-text-sm);
+	}
 
-[data-zone-layout="definition-list"] dd[data-multi-value] {
-	gap: 0.25rem;
-}
+	[data-zone-layout="definition-list"] dd[data-multi-value] {
+		gap: 0.25rem;
+	}
 
-/* ─── Labels ──────────────────────────────────────────────────────── */
+	/* ─── Labels ──────────────────────────────────────────────────────── */
 
-/* Label element within a chip — thin, muted; pairs visually with the value */
-[data-meta-label] {
-	font-weight: var(--rf-weight-normal);
-	opacity: 0.65;
-}
+	/* Label element within a chip — thin, muted; pairs visually with the value */
+	[data-meta-label] {
+		font-weight: var(--rf-weight-normal);
+		opacity: 0.65;
+	}
 
-/* ─── Mobile: compact ──────────────────────────────────────────────── */
+	/* ─── Mobile: compact ──────────────────────────────────────────────── */
 
-@media (max-width: 48rem) {
-	[data-zone-layout="bar"] {
-		gap: 0.375rem;
-	}
+	@media (max-width: 48rem) {
+		[data-zone-layout="bar"] {
+			gap: 0.375rem;
+		}
 
-	/* The border + padding move to the list itself so the whole group reads as
+		/* The border + padding move to the list itself so the whole group reads as
 	 * one bordered card (the per-row box is dropped by the skeleton's
 	 * `display: contents`). */
-	[data-zone-layout="definition-list"] {
-		gap: 0.25rem 1rem;
-		padding: 0.75rem 1rem;
-		border: 1px solid var(--rf-color-border);
-		border-radius: var(--rf-radius-sm);
-	}
-
-	/* Header rhythm stays skin with sections.css (deferred until the split layout
+		[data-zone-layout="definition-list"] {
+			gap: 0.25rem 1rem;
+			padding: 0.75rem 1rem;
+			border: 1px solid var(--rf-color-border);
+			border-radius: var(--rf-radius-sm);
+		}
+
+		/* Header rhythm stays skin with sections.css (deferred until the split layout
 	 * + sections promote together). */
-	[data-section="header"] {
-		gap: 0.375rem;
-		margin-bottom: 1.5rem;
+		[data-section="header"] {
+			gap: 0.375rem;
+			margin-bottom: 1.5rem;
+		}
 	}
 }
-
-}

package/styles/dimensions/motion.css

@@ -26,12 +26,32 @@
 	/* Per-character offsets — set on the `[data-reveal]` container and inherited by
 	 * staggered children, so the single hidden-state block below covers every
 	 * character. `none` carries no offsets (it never animates). */
-	[data-reveal="fade"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: 0; }
-	[data-reveal="slide"] { --reveal-x: 0; --reveal-y: var(--rf-reveal-distance, 1.5rem); --reveal-scale: 1;             --reveal-blur: 0; }
-	[data-reveal="scale"] { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: var(--rf-reveal-scale-start, 0.95); --reveal-blur: 0; }
+	[data-reveal="fade"] {
+		--reveal-x: 0;
+		--reveal-y: 0;
+		--reveal-scale: 1;
+		--reveal-blur: 0;
+	}
+	[data-reveal="slide"] {
+		--reveal-x: 0;
+		--reveal-y: var(--rf-reveal-distance, 1.5rem);
+		--reveal-scale: 1;
+		--reveal-blur: 0;
+	}
+	[data-reveal="scale"] {
+		--reveal-x: 0;
+		--reveal-y: 0;
+		--reveal-scale: var(--rf-reveal-scale-start, 0.95);
+		--reveal-blur: 0;
+	}
 	/* `blur` is focus-led; it animates `filter` (not compositor-cheap), so a theme
 	 * or low-power path may downgrade it to `fade` by zeroing the blur token. */
-	[data-reveal="blur"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: var(--rf-reveal-blur, 8px); }
+	[data-reveal="blur"] {
+		--reveal-x: 0;
+		--reveal-y: 0;
+		--reveal-scale: 1;
+		--reveal-blur: var(--rf-reveal-blur, 8px);
+	}
 
 	/* The animated unit:
 	 *   • non-staggered → the `[data-reveal]` element itself,
@@ -43,19 +63,21 @@
 	 * the `transform` shorthand, so it composes with the rune transforms Lumina
 	 * already uses (hover-lifts on card/cta/feature, frame displacement, drawer/nav
 	 * slides) instead of clobbering them. */
-	[data-animate] :where(
+	[data-animate]
+	:where(
 		[data-reveal]:not([data-reveal="none"]):not([data-stagger]),
 		[data-stagger]:not([data-reveal="none"]) [style*="--rf-reveal-index"]
 	) {
 		transition:
-			opacity   var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			opacity var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
 			translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
-			scale     var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
-			filter    var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
+			scale var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			filter var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
 	}
 
 	/* Pre-entrance (hidden) — until the unit's trigger fires. */
-	[data-animate] :where(
+	[data-animate]
+	:where(
 		[data-reveal]:not([data-reveal="none"]):not([data-stagger]):not([data-in-view]),
 		[data-stagger]:not([data-reveal="none"]):not([data-in-view]) [style*="--rf-reveal-index"]
 	) {
@@ -70,7 +92,8 @@
 	 * transition `translate`/`scale`/`filter` to-or-from `none`, so reverting to
 	 * the default would snap (no motion on iOS) — only opacity would animate.
 	 * Transitioning between two explicit values animates everywhere. */
-	[data-animate] :where(
+	[data-animate]
+	:where(
 		[data-reveal]:not([data-reveal="none"]):not([data-stagger])[data-in-view],
 		[data-stagger][data-in-view] [style*="--rf-reveal-index"]
 	) {
@@ -90,11 +113,17 @@
 	 * sliding section, let the media arrive a beat behind the content for a subtle
 	 * two-part entrance. Demonstrated on the named anatomy the theme already styles;
 	 * a theme adds or drops this freely. */
-	[data-animate] [data-reveal="slide"]:not([data-stagger]):not([data-in-view]) > * > [data-section="media"] {
+	[data-animate]
+		[data-reveal="slide"]:not([data-stagger]):not([data-in-view])
+		> *
+		> [data-section="media"] {
 		translate: 0 calc(var(--rf-reveal-distance, 1.5rem) * 1.5);
 	}
-	[data-animate] [data-reveal="slide"]:not([data-stagger])[data-in-view] > * > [data-section="media"] {
-		translate: 0 0;  /* explicit identity end-state — see the WebKit note above */
+	[data-animate]
+		[data-reveal="slide"]:not([data-stagger])[data-in-view]
+		> *
+		> [data-section="media"] {
+		translate: 0 0; /* explicit identity end-state — see the WebKit note above */
 	}
 	[data-animate] [data-reveal="slide"]:not([data-stagger]) > * > [data-section="media"] {
 		transition: translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);

package/styles/dimensions/reading.css

@@ -1,35 +1,35 @@
 @layer skin {
-/* Reading register (SPEC-108) — Lumina's editorial treatment of `[data-reading]`.
+	/* Reading register (SPEC-108) — Lumina's editorial treatment of `[data-reading]`.
  * The measure cap + niceties are structural (skeleton); this is the type, rhythm,
  * and drop-cap glyph. `ui` (the default) is left to the base body styling. */
 
-/* Prose — long-form reading. */
-[data-reading="prose"] {
-	line-height: var(--rf-leading-relaxed);
-}
-[data-reading="prose"] > p {
-	margin-bottom: 1em;
-}
-[data-reading="prose"] a {
-	text-underline-offset: 0.15em;
-}
+	/* Prose — long-form reading. */
+	[data-reading="prose"] {
+		line-height: var(--rf-leading-relaxed);
+	}
+	[data-reading="prose"] > p {
+		margin-bottom: 1em;
+	}
+	[data-reading="prose"] a {
+		text-underline-offset: 0.15em;
+	}
 
-/* Drop-cap glyph — the theme owns the treatment; the author owns where (the
+	/* Drop-cap glyph — the theme owns the treatment; the author owns where (the
  * `dropcap` opt-in, honoured only on a prose body). */
-[data-reading="prose"][data-dropcap] > p:first-child::first-letter {
-	font-size: 3.5em;
-	font-weight: var(--rf-weight-bold);
-	line-height: 0.8;
-	padding-right: 0.1em;
-	margin-top: 0.05em;
-	color: var(--rf-color-primary);
-	font-family: Georgia, 'Times New Roman', serif;
-}
+	[data-reading="prose"][data-dropcap] > p:first-child::first-letter {
+		font-size: 3.5em;
+		font-weight: var(--rf-weight-bold);
+		line-height: 0.8;
+		padding-right: 0.1em;
+		margin-top: 0.05em;
+		color: var(--rf-color-primary);
+		font-family: Georgia, "Times New Roman", serif;
+	}
 
-/* Fine print — captions, footnotes, asides: smaller and quieter. */
-[data-reading="fine"] {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-normal);
-	color: var(--rf-color-muted);
-}
+	/* Fine print — captions, footnotes, asides: smaller and quieter. */
+	[data-reading="fine"] {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-normal);
+		color: var(--rf-color-muted);
+	}
 }

package/styles/dimensions/sections.css

@@ -1,67 +1,66 @@
 @layer skin {
-/* ─── Section Anatomy Dimension — skin ──────────────────────────────────
+	/* ─── Section Anatomy Dimension — skin ──────────────────────────────────
  * Zone rhythm (margins, gaps, padding), typography, and borders for the 6
  * standard section roles. The flex zone *containers* (header / preamble /
  * footer) live in @refrakt-md/skeleton (dimensions/sections.css). Rhythm stays
  * here so rune zone overrides resolve against it by source order.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Header: chrome metadata row (badges, status, icons) ────────── */
-[data-section="header"] {
-	gap: 0.5rem;
-	margin-bottom: 3rem;
-}
+	/* ─── Header: chrome metadata row (badges, status, icons) ────────── */
+	[data-section="header"] {
+		gap: 0.5rem;
+		margin-bottom: 3rem;
+	}
 
-/* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */
-[data-section="preamble"] {
-	gap: 0.25rem;
-}
+	/* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */
+	[data-section="preamble"] {
+		gap: 0.25rem;
+	}
 
-/* ─── Title: primary heading ──────────────────────────────────────── */
-/* Two inputs, in priority order:
+	/* ─── Title: primary heading ──────────────────────────────────────── */
+	/* Two inputs, in priority order:
  *   --rf-prominence-size  an explicit author `prominence=` (surfaces.css)
  *   --rf-title-size       the resting size for this density (density.css)
  * They were one variable until v0.32.0, which meant a rune could not state its
  * own resting size without also clobbering the author's override — the reason
  * `prominence` was inert on eight runes (WORK-538). Splitting them lets a rune
  * pin its default while `prominence` still wins. */
-[data-section="title"] {
-	font-family: var(--rf-font-sans);
-	font-size: var(--rf-prominence-size, var(--rf-title-size, var(--rf-text-2xl)));
-	font-weight: var(--rf-weight-bold);
-	line-height: var(--rf-leading-tight);
-	color: var(--rf-color-text);
-	margin: 0;
-}
+	[data-section="title"] {
+		font-family: var(--rf-font-sans);
+		font-size: var(--rf-prominence-size, var(--rf-title-size, var(--rf-text-2xl)));
+		font-weight: var(--rf-weight-bold);
+		line-height: var(--rf-leading-tight);
+		color: var(--rf-color-text);
+		margin: 0;
+	}
 
-/* ─── Description: secondary text ─────────────────────────────────── */
-[data-section="description"] {
-	font-size: var(--rf-text);
-	line-height: var(--rf-leading-normal);
-	color: var(--rf-color-muted);
-	margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
-}
+	/* ─── Description: secondary text ─────────────────────────────────── */
+	[data-section="description"] {
+		font-size: var(--rf-text);
+		line-height: var(--rf-leading-normal);
+		color: var(--rf-color-muted);
+		margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
+	}
 
-/* ─── Body: main content ──────────────────────────────────────────── */
-[data-section="body"] {
-	line-height: var(--rf-leading-relaxed);
-	color: var(--rf-color-text);
-}
+	/* ─── Body: main content ──────────────────────────────────────────── */
+	[data-section="body"] {
+		line-height: var(--rf-leading-relaxed);
+		color: var(--rf-color-text);
+	}
 
-/* ─── Footer: actions and links ───────────────────────────────────── */
-[data-section="footer"] {
-	gap: var(--rf-spacing-sm);
-	margin-top: var(--rf-spacing-md);
-	padding-top: var(--rf-spacing-sm);
-	border-top: 1px solid var(--rf-color-border);
-}
+	/* ─── Footer: actions and links ───────────────────────────────────── */
+	[data-section="footer"] {
+		gap: var(--rf-spacing-sm);
+		margin-top: var(--rf-spacing-md);
+		padding-top: var(--rf-spacing-sm);
+		border-top: 1px solid var(--rf-color-border);
+	}
 
-/* ─── Media: visual content ───────────────────────────────────────── */
-[data-section="media"] {
-	/* Media zones manage their own spacing via their layout (split gap, cell
+	/* ─── Media: visual content ───────────────────────────────────────── */
+	[data-section="media"] {
+		/* Media zones manage their own spacing via their layout (split gap, cell
 	 * padding, flow margins); a blanket block margin here misaligns media in
 	 * flex/beside layouts, so keep it neutral. */
-	margin: 0;
-}
-
+		margin: 0;
+	}
 }

package/styles/dimensions/sequence.css

@@ -1,64 +1,63 @@
 @layer skin {
-/* === Sequential Items — skin ===
+	/* === Sequential Items — skin ===
  * The connector lines (borders), the marker chrome (fill, radius, shadow), the
  * counter type, and the layout gaps. The counter mechanism, list resets, item
  * geometry, and marker box placement live in @refrakt-md/skeleton
  * (dimensions/sequence.css). */
 
-/* Numbered — counter circle chrome + type. */
-[data-sequence="numbered"] > li::before {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	font-variant-numeric: tabular-nums;
-	color: var(--rf-color-primary);
-	background: var(--rf-color-surface-active);
-	border-radius: 50%;
-}
-
-[data-sequence="numbered"] > li + li {
-	border-top: 1px solid var(--rf-color-border);
-}
-
-/* Connected vertical — the line is a left border; the dot is the marker. */
-[data-sequence="connected"] > li {
-	border-left: 2px solid var(--rf-color-border);
-}
-
-[data-sequence="connected"] > li:last-child {
-	border-left-color: transparent;
-}
-
-[data-sequence="connected"] > li::before {
-	border-radius: 50%;
-	background: var(--rf-color-primary);
-	border: 2px solid var(--rf-color-bg);
-	box-shadow: 0 0 0 2px var(--rf-color-primary);
-}
-
-/* Connected horizontal — the line moves to the top border; gap spaces the items. */
-[data-sequence="connected"][data-sequence-direction="horizontal"] {
-	gap: 2rem;
-}
-
-[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
-	border-left: none;
-	border-top: 2px solid var(--rf-color-border);
-}
-
-[data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
-	border-top-color: var(--rf-color-border);
-}
-
-/* === Density interaction === */
-
-/* Compact: smaller circle keeps the same type scale. */
-[data-density="compact"] [data-sequence="numbered"] > li::before {
-	font-size: var(--rf-text-xs);
-}
-
-/* Minimal: drop the connector line on the collapsed list. */
-[data-density="minimal"] [data-sequence="connected"] > li {
-	border-left: none;
-}
-
+	/* Numbered — counter circle chrome + type. */
+	[data-sequence="numbered"] > li::before {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		font-variant-numeric: tabular-nums;
+		color: var(--rf-color-primary);
+		background: var(--rf-color-surface-active);
+		border-radius: 50%;
+	}
+
+	[data-sequence="numbered"] > li + li {
+		border-top: 1px solid var(--rf-color-border);
+	}
+
+	/* Connected vertical — the line is a left border; the dot is the marker. */
+	[data-sequence="connected"] > li {
+		border-left: 2px solid var(--rf-color-border);
+	}
+
+	[data-sequence="connected"] > li:last-child {
+		border-left-color: transparent;
+	}
+
+	[data-sequence="connected"] > li::before {
+		border-radius: 50%;
+		background: var(--rf-color-primary);
+		border: 2px solid var(--rf-color-bg);
+		box-shadow: 0 0 0 2px var(--rf-color-primary);
+	}
+
+	/* Connected horizontal — the line moves to the top border; gap spaces the items. */
+	[data-sequence="connected"][data-sequence-direction="horizontal"] {
+		gap: 2rem;
+	}
+
+	[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
+		border-left: none;
+		border-top: 2px solid var(--rf-color-border);
+	}
+
+	[data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
+		border-top-color: var(--rf-color-border);
+	}
+
+	/* === Density interaction === */
+
+	/* Compact: smaller circle keeps the same type scale. */
+	[data-density="compact"] [data-sequence="numbered"] > li::before {
+		font-size: var(--rf-text-xs);
+	}
+
+	/* Minimal: drop the connector line on the collapsed list. */
+	[data-density="minimal"] [data-sequence="connected"] > li {
+		border-left: none;
+	}
 }