@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/dimensions/checklist.css

@@ -1,52 +1,51 @@
 @layer skin {
-/* === Checklist — skin ===
+	/* === Checklist — skin ===
  * The indicator chrome (fill, border, radius, box-shadow) and the item text
  * treatment per state. The indicator gutter + box placement/size live in
  * @refrakt-md/skeleton (dimensions/checklist.css). */
 
-/* Indicator base chrome. */
-[data-checked]::before {
-	border-radius: var(--rf-radius-sm, 0.25rem);
-	border: 2px solid var(--rf-color-border);
-	background: transparent;
-}
-
-/* Checked — filled with checkmark */
-[data-checked="checked"]::before {
-	background: var(--rf-color-primary);
-	border-color: var(--rf-color-primary);
-}
-
-[data-checked="checked"] {
-	color: var(--rf-color-muted);
-}
-
-/* Active — primary colour with emphasis */
-[data-checked="active"]::before {
-	border-color: var(--rf-color-primary);
-	background: var(--rf-color-primary);
-	box-shadow: 0 0 0 3px color-mix(in oklch, var(--rf-color-primary) 20%, transparent);
-}
-
-[data-checked="active"] {
-	color: var(--rf-color-primary);
-	font-weight: var(--rf-weight-semibold);
-}
-
-/* Skipped — muted with strikethrough */
-[data-checked="skipped"]::before {
-	background: var(--rf-color-muted);
-	border-color: var(--rf-color-muted);
-}
-
-[data-checked="skipped"] {
-	text-decoration: line-through;
-	color: var(--rf-color-muted);
-}
-
-/* Unchecked — empty indicator (inherits base styling) */
-[data-checked="unchecked"]::before {
-	background: transparent;
-}
-
+	/* Indicator base chrome. */
+	[data-checked]::before {
+		border-radius: var(--rf-radius-sm, 0.25rem);
+		border: 2px solid var(--rf-color-border);
+		background: transparent;
+	}
+
+	/* Checked — filled with checkmark */
+	[data-checked="checked"]::before {
+		background: var(--rf-color-primary);
+		border-color: var(--rf-color-primary);
+	}
+
+	[data-checked="checked"] {
+		color: var(--rf-color-muted);
+	}
+
+	/* Active — primary colour with emphasis */
+	[data-checked="active"]::before {
+		border-color: var(--rf-color-primary);
+		background: var(--rf-color-primary);
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--rf-color-primary) 20%, transparent);
+	}
+
+	[data-checked="active"] {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+	}
+
+	/* Skipped — muted with strikethrough */
+	[data-checked="skipped"]::before {
+		background: var(--rf-color-muted);
+		border-color: var(--rf-color-muted);
+	}
+
+	[data-checked="skipped"] {
+		text-decoration: line-through;
+		color: var(--rf-color-muted);
+	}
+
+	/* Unchecked — empty indicator (inherits base styling) */
+	[data-checked="unchecked"]::before {
+		background: transparent;
+	}
 }

package/styles/dimensions/cover.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Cover layout (SPEC-089) — skin.
+	/* Cover layout (SPEC-089) — skin.
  *
  * The grid-overlay *structure* (media well + content share one grid cell, the
  * well fills/crops its guest, the overlay positions via content-place) lives in
@@ -7,83 +7,103 @@
  * media radii, the overlay's surface padding, and the legibility scrim
  * (gradient / frost) painted over the media. */
 
-[data-cover-scope="header"] > [data-name="cover-band"] {
-	border-radius: var(--rf-radius-media);
-}
+	[data-cover-scope="header"] > [data-name="cover-band"] {
+		border-radius: var(--rf-radius-media);
+	}
 
-[data-media-position="cover"] [data-section="media"] {
-	border-radius: var(--rf-radius-media);
-}
+	[data-media-position="cover"] [data-section="media"] {
+		border-radius: var(--rf-radius-media);
+	}
 
-/* A backdrop sandbox sits flush in the well — the well's own radius/overflow
+	/* A backdrop sandbox sits flush in the well — the well's own radius/overflow
  * does the clipping. */
-[data-media-position="cover"] [data-section="media"] .rf-sandbox {
-	border-radius: 0;
-}
+	[data-media-position="cover"] [data-section="media"] .rf-sandbox {
+		border-radius: 0;
+	}
 
-/* The overlaid box carries the surface padding (density-aware via --rune-padding). */
-[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
-[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
-	padding: var(--rune-padding, var(--rf-spacing-md));
-}
+	/* The overlaid box carries the surface padding (density-aware via --rune-padding). */
+	[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
+	[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+		padding: var(--rune-padding, var(--rf-spacing-md));
+	}
 
-/* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
+	/* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
  * Overlaying text on an arbitrary image without a scrim is a legibility footgun,
  * so cover applies a default gradient scrim weighted toward the content edge.
  * `scrim="none"` opts out. The overlaid foreground is set light by the engine
  * (data-color-scheme) so text reads against the darkened media. */
-[data-media-position="cover"]:not([data-scrim="none"]) [data-section="media"]::after {
-	content: "";
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-	/* `inherit` matches the media zone's `--rf-radius-media`, so a frost scrim's
+	[data-media-position="cover"]:not([data-scrim="none"]) [data-section="media"]::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		/* `inherit` matches the media zone's `--rf-radius-media`, so a frost scrim's
 	 * `backdrop-filter` region clips at the same rounded corners — `overflow:
 	 * hidden` on the media zone doesn't reliably clip backdrop-filter past the
 	 * rounded edge in WebKit, so the pseudo carries its own radius. (The
 	 * gradient variant doesn't strictly need this, but it's harmless and keeps
 	 * the two scrim variants visually congruent.) */
-	border-radius: inherit;
-	/* The scrim shape is `--cover-scrim-image` (custom property override) when
+		border-radius: inherit;
+		/* The scrim shape is `--cover-scrim-image` (custom property override) when
 	 * the engine emits one — for `content-place="center …"` it emits a radial
 	 * ellipse so the dark falls under the centred overlay. For the directional
 	 * cases (`start`/`end` block-axis) the engine sets `--cover-scrim-dir` and
 	 * the linear fallback resolves to the right edge. */
-	background-image: var(--cover-scrim-image, linear-gradient(var(--cover-scrim-dir, to top), rgb(0 0 0 / 0.55), transparent 62%));
-}
+		background-image: var(
+			--cover-scrim-image,
+			linear-gradient(var(--cover-scrim-dir, to top), rgb(0 0 0 / 0.55), transparent 62%)
+		);
+	}
 
-/* Frost treatment (`scrim-type="frost"`) — a frosted-glass blur over the media
+	/* Frost treatment (`scrim-type="frost"`) — a frosted-glass blur over the media
  * instead of a gradient. `scrim-blur` (named scale) sets the blur radius; the
  * tint follows the cover scheme (a dark scheme → a dark frost for light text).
  * The frost is masked to the content edge (following `--cover-scrim-dir`, default
  * bottom) so it reads as a band behind the text, not a blur over the whole
  * image. `--cover-scrim-mask` is the radial equivalent for centred content. */
-[data-media-position="cover"][data-scrim-blur="none"] { --cover-scrim-blur: 0px; }
-[data-media-position="cover"][data-scrim-blur="sm"]   { --cover-scrim-blur: 4px; }
-[data-media-position="cover"][data-scrim-blur="md"]   { --cover-scrim-blur: 8px; }
-[data-media-position="cover"][data-scrim-blur="lg"]   { --cover-scrim-blur: 16px; }
-[data-media-position="cover"][data-scrim-type="frost"]:not([data-scrim="none"]) [data-section="media"]::after {
-	background-image: none;
-	background-color: rgb(0 0 0 / 0.18);
-	-webkit-backdrop-filter: blur(var(--cover-scrim-blur, 8px));
-	backdrop-filter: blur(var(--cover-scrim-blur, 8px));
-	-webkit-mask-image: var(--cover-scrim-mask, linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%));
-	mask-image: var(--cover-scrim-mask, linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%));
-}
-[data-media-position="cover"][data-scrim-type="frost"][data-color-scheme="light"]:not([data-scrim="none"]) [data-section="media"]::after {
-	background-color: rgb(255 255 255 / 0.25);
-}
+	[data-media-position="cover"][data-scrim-blur="none"] {
+		--cover-scrim-blur: 0px;
+	}
+	[data-media-position="cover"][data-scrim-blur="sm"] {
+		--cover-scrim-blur: 4px;
+	}
+	[data-media-position="cover"][data-scrim-blur="md"] {
+		--cover-scrim-blur: 8px;
+	}
+	[data-media-position="cover"][data-scrim-blur="lg"] {
+		--cover-scrim-blur: 16px;
+	}
+	[data-media-position="cover"][data-scrim-type="frost"]:not([data-scrim="none"])
+		[data-section="media"]::after {
+		background-image: none;
+		background-color: rgb(0 0 0 / 0.18);
+		-webkit-backdrop-filter: blur(var(--cover-scrim-blur, 8px));
+		backdrop-filter: blur(var(--cover-scrim-blur, 8px));
+		-webkit-mask-image: var(
+			--cover-scrim-mask,
+			linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%)
+		);
+		mask-image: var(
+			--cover-scrim-mask,
+			linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%)
+		);
+	}
+	[data-media-position="cover"][data-scrim-type="frost"][data-color-scheme="light"]:not(
+			[data-scrim="none"]
+		)
+		[data-section="media"]::after {
+		background-color: rgb(255 255 255 / 0.25);
+	}
 
-/* The overlay carries the cover colour-scheme (set by the engine) so its text
+	/* The overlay carries the cover colour-scheme (set by the engine) so its text
  * reads against the darkened media. The standalone `[data-color-scheme]` rule
  * also paints a `background-color`; null it out here so the overlay stays
  * see-through over the media (the scrim, not a solid box, does the legibility). */
-[data-media-position="cover"] [data-name="content"][data-color-scheme],
-[data-cover-scope="header"] > [data-name="cover-band"][data-color-scheme] {
-	background-color: transparent;
-	/* Muted text (the blurb) is barely legible over a photo, so on the overlay it
+	[data-media-position="cover"] [data-name="content"][data-color-scheme],
+	[data-cover-scope="header"] > [data-name="cover-band"][data-color-scheme] {
+		background-color: transparent;
+		/* Muted text (the blurb) is barely legible over a photo, so on the overlay it
 	 * reads at full foreground strength — the same colour as the headline. */
-	--rf-color-muted: var(--rf-color-text);
-}
-
+		--rf-color-muted: var(--rf-color-text);
+	}
 }

package/styles/dimensions/density.css

@@ -1,103 +1,107 @@
 @layer skin {
-/* ─── Density Dimension ─────────────────────────────────────────────────
+	/* ─── Density Dimension ─────────────────────────────────────────────────
  * Controls spacing, visibility, and detail level across all runes.
  * Three levels: full (dedicated page), compact (grid/card), minimal (list).
  *
  * Sets --rune-padding which surfaces consume for container padding.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Full: all content visible, generous spacing ─────────────────── */
+	/* ─── Full: all content visible, generous spacing ─────────────────── */
 
-[data-density="full"] {
-	--rune-padding: var(--rf-spacing-md);
-	--rf-title-size: var(--rf-text-2xl);
-}
+	[data-density="full"] {
+		--rune-padding: var(--rf-spacing-md);
+		--rf-title-size: var(--rf-text-2xl);
+	}
 
-/* ─── Compact: truncated descriptions, tight spacing ──────────────── */
+	/* ─── Compact: truncated descriptions, tight spacing ──────────────── */
 
-[data-density="compact"] {
-	--rune-padding: var(--rf-spacing-sm);
-	--rf-title-size: var(--rf-text-xl);
-}
+	[data-density="compact"] {
+		--rune-padding: var(--rf-spacing-sm);
+		--rf-title-size: var(--rf-text-xl);
+	}
 
-[data-density="compact"] [data-section="description"] {
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
+	[data-density="compact"] [data-section="description"] {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
 
-[data-density="compact"] [data-meta-rank="secondary"] {
-	display: none;
-}
+	[data-density="compact"] [data-meta-rank="secondary"] {
+		display: none;
+	}
 
-/* ─── Minimal: title and primary metadata only ────────────────────── */
+	/* ─── Minimal: title and primary metadata only ────────────────────── */
 
-[data-density="minimal"] {
-	--rune-padding: var(--rf-spacing-xs);
-	--rf-title-size: var(--rf-text);
-}
+	[data-density="minimal"] {
+		--rune-padding: var(--rf-spacing-xs);
+		--rf-title-size: var(--rf-text);
+	}
 
-/* Every rune root clears the prominence override so an ancestor's `prominence=`
+	/* Every rune root clears the prominence override so an ancestor's `prominence=`
  * cannot leak into a nested rune's title — the same protection the density
  * declarations above already give --rf-title-size. Declared here because this
  * file is imported before dimensions/surfaces.css, so a rune carrying both
  * `data-density` and `data-prominence` still keeps its own. */
-[data-density] {
-	--rf-prominence-size: initial;
-}
+	[data-density] {
+		--rf-prominence-size: initial;
+	}
 
-[data-density="minimal"] [data-section="description"] {
-	display: none;
-}
+	[data-density="minimal"] [data-section="description"] {
+		display: none;
+	}
 
-[data-density="minimal"] [data-section="body"] {
-	display: none;
-}
+	[data-density="minimal"] [data-section="body"] {
+		display: none;
+	}
 
-/* Most runes put the title beside the body; card puts its leading heading
+	/* Most runes put the title beside the body; card puts its leading heading
  * *inside* the body slot. The blanket hide above would take the title with it
  * and leave an empty surface, so where a title is nested in the body, keep the
  * body box and hide only its other children — "title and primary metadata only"
  * then means what it says on those runes too. (SPEC-125 Phase 1: card only
  * gained a `body` role in v0.31.0, so this case could not arise before.) */
-[data-density="minimal"] [data-section="body"]:has(> [data-name="title"]) {
-	display: revert;
-}
+	[data-density="minimal"] [data-section="body"]:has(> [data-name="title"]) {
+		display: revert;
+	}
 
-[data-density="minimal"] [data-section="body"]:has(> [data-name="title"]) > :not([data-name="title"]) {
-	display: none;
-}
+	[data-density="minimal"]
+		[data-section="body"]:has(> [data-name="title"])
+		> :not([data-name="title"]) {
+		display: none;
+	}
 
-[data-density="minimal"] [data-section="footer"] {
-	display: none;
-}
+	[data-density="minimal"] [data-section="footer"] {
+		display: none;
+	}
 
-[data-density="minimal"] [data-meta-rank="secondary"] {
-	display: none;
-}
+	[data-density="minimal"] [data-meta-rank="secondary"] {
+		display: none;
+	}
 
-/* ─── Nested density scoping ─────────────────────────────────────── *
+	/* ─── Nested density scoping ─────────────────────────────────────── *
  * Density rules use descendant selectors that leak into nested runes
  * with their own density. These resets ensure each rune's density is
  * self-contained — e.g. a full-density recipe inside a compact-density
  * preview should not have its description truncated.
  * ──────────────────────────────────────────────────────────────────── */
 
-[data-density="compact"] [data-density="full"] [data-section="description"] {
-	display: block;
-	-webkit-line-clamp: unset;
-	-webkit-box-orient: initial;
-	overflow: visible;
-}
-
-[data-density="compact"] [data-density="full"] [data-meta-rank="secondary"],
-[data-density="minimal"] [data-density="full"] [data-section="description"],
-[data-density="minimal"] [data-density="full"] [data-section="body"],
-[data-density="minimal"] [data-density="full"] [data-section="footer"],
-[data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"],
-[data-density="minimal"] [data-density="full"] [data-section="body"]:has(> [data-name="title"]) > :not([data-name="title"]) {
-	display: revert;
-}
-
+	[data-density="compact"] [data-density="full"] [data-section="description"] {
+		display: block;
+		-webkit-line-clamp: unset;
+		-webkit-box-orient: initial;
+		overflow: visible;
+	}
+
+	[data-density="compact"] [data-density="full"] [data-meta-rank="secondary"],
+	[data-density="minimal"] [data-density="full"] [data-section="description"],
+	[data-density="minimal"] [data-density="full"] [data-section="body"],
+	[data-density="minimal"] [data-density="full"] [data-section="footer"],
+	[data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"],
+	[data-density="minimal"]
+		[data-density="full"]
+		[data-section="body"]:has(> [data-name="title"])
+		> :not([data-name="title"]) {
+		display: revert;
+	}
 }