@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/audio.css

@@ -1,153 +1,152 @@
 @layer skin {
-.rf-audio__description {
-	padding: 0.75rem 1rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	line-height: var(--rf-leading-normal);
-}
-.rf-audio__description p {
-	margin: 0;
-}
-.rf-audio__description p + p {
-	margin-top: 0.5rem;
-}
+	.rf-audio__description {
+		padding: 0.75rem 1rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		line-height: var(--rf-leading-normal);
+	}
+	.rf-audio__description p {
+		margin: 0;
+	}
+	.rf-audio__description p + p {
+		margin-top: 0.5rem;
+	}
 
-/* ── Audio Player (web component internals) ── */
+	/* ── Audio Player (web component internals) ── */
 
-.rf-audio-player {
-	padding: 1rem 1.25rem;
-	gap: 0.625rem;
-}
+	.rf-audio-player {
+		padding: 1rem 1.25rem;
+		gap: 0.625rem;
+	}
 
-/* Track info */
-.rf-audio-player__info {
-	gap: 0.125rem;
-}
-.rf-audio-player__name {
-	font-size: var(--rf-text);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.rf-audio-player__artist {
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
+	/* Track info */
+	.rf-audio-player__info {
+		gap: 0.125rem;
+	}
+	.rf-audio-player__name {
+		font-size: var(--rf-text);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.rf-audio-player__artist {
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
 
-/* Controls row */
-.rf-audio-player__controls {
-	gap: 0.625rem;
-}
+	/* Controls row */
+	.rf-audio-player__controls {
+		gap: 0.625rem;
+	}
 
-/* Play / pause button */
-.rf-audio-player__play {
-	border-radius: var(--rf-radius-full, 9999px);
-	border: none;
-	background: var(--rf-color-primary);
-	color: var(--rf-color-on-primary);
-	cursor: pointer;
-	transition: opacity 0.15s ease;
-	padding: 0;
-}
-.rf-audio-player__play:hover {
-	opacity: 0.85;
-}
-.rf-audio-player__play:focus-visible {
-	outline: 2px solid var(--rf-color-primary);
-	outline-offset: 2px;
-}
-.rf-audio-player__play:disabled {
-	opacity: 0.4;
-	cursor: not-allowed;
-}
-.rf-audio-player__play svg {
-	fill: currentColor;
-}
+	/* Play / pause button */
+	.rf-audio-player__play {
+		border-radius: var(--rf-radius-full, 9999px);
+		border: none;
+		background: var(--rf-color-primary);
+		color: var(--rf-color-on-primary);
+		cursor: pointer;
+		transition: opacity 0.15s ease;
+		padding: 0;
+	}
+	.rf-audio-player__play:hover {
+		opacity: 0.85;
+	}
+	.rf-audio-player__play:focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: 2px;
+	}
+	.rf-audio-player__play:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+	.rf-audio-player__play svg {
+		fill: currentColor;
+	}
 
-/* Time displays */
-.rf-audio-player__time {
-	font-size: var(--rf-text-xs);
-	font-variant-numeric: tabular-nums;
-	color: var(--rf-color-muted);
-	user-select: none;
-}
-.rf-audio-player__time--current {
-	text-align: right;
-}
-.rf-audio-player__time--duration {
-	text-align: left;
-}
+	/* Time displays */
+	.rf-audio-player__time {
+		font-size: var(--rf-text-xs);
+		font-variant-numeric: tabular-nums;
+		color: var(--rf-color-muted);
+		user-select: none;
+	}
+	.rf-audio-player__time--current {
+		text-align: right;
+	}
+	.rf-audio-player__time--duration {
+		text-align: left;
+	}
 
-/* Progress bar */
-.rf-audio-player__progress {
-	background: var(--rf-color-surface-active, #e5e7eb);
-	border-radius: var(--rf-radius-full, 9999px);
-	cursor: pointer;
-}
-.rf-audio-player__progress:focus-visible {
-	outline: 2px solid var(--rf-color-primary);
-	outline-offset: 2px;
-}
-.rf-audio-player__progress-bar {
-	background: var(--rf-color-primary);
-	border-radius: var(--rf-radius-full, 9999px);
-	transition: width 0.1s linear;
-}
+	/* Progress bar */
+	.rf-audio-player__progress {
+		background: var(--rf-color-surface-active, #e5e7eb);
+		border-radius: var(--rf-radius-full, 9999px);
+		cursor: pointer;
+	}
+	.rf-audio-player__progress:focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: 2px;
+	}
+	.rf-audio-player__progress-bar {
+		background: var(--rf-color-primary);
+		border-radius: var(--rf-radius-full, 9999px);
+		transition: width 0.1s linear;
+	}
 
-/* Waveform container */
-.rf-audio-player__waveform {
-	border-radius: var(--rf-radius-sm, 4px);
-}
+	/* Waveform container */
+	.rf-audio-player__waveform {
+		border-radius: var(--rf-radius-sm, 4px);
+	}
 
-/* Chapter list */
-.rf-audio-player__chapters {
-	padding: 0;
-	margin: 0.75rem 0 0;
-	padding-top: 0;
-}
-.rf-audio-player__chapter {
-	gap: 0.75rem;
-	padding: 0.375rem 0.5rem;
-	border: none;
-	background: none;
-	cursor: pointer;
-	border-radius: var(--rf-radius-sm, 4px);
-	transition: background 0.15s ease;
-	text-align: left;
-	font-family: inherit;
-}
-.rf-audio-player__chapter:hover {
-	background: var(--rf-color-surface-hover, rgba(0, 0, 0, 0.04));
-}
-.rf-audio-player__chapter:focus-visible {
-	outline: 2px solid var(--rf-color-primary);
-	outline-offset: -2px;
-}
-.rf-audio-player__chapter--active {
-	background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
-}
-.rf-audio-player__chapter--active .rf-audio-player__chapter-name {
-	color: var(--rf-color-primary);
-}
-.rf-audio-player__chapter-name {
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-text);
-}
-.rf-audio-player__chapter-time {
-	font-size: var(--rf-text-xs);
-	font-variant-numeric: tabular-nums;
-	color: var(--rf-color-muted);
-}
-
-/* Active track highlight when connected to audio player */
-.rf-track--active {
-	background: color-mix(in srgb, var(--rf-color-primary) 6%, transparent);
-	border-radius: var(--rf-radius-sm, 4px);
-}
-.rf-track--active .rf-track__track-name {
-	color: var(--rf-color-primary);
-}
+	/* Chapter list */
+	.rf-audio-player__chapters {
+		padding: 0;
+		margin: 0.75rem 0 0;
+		padding-top: 0;
+	}
+	.rf-audio-player__chapter {
+		gap: 0.75rem;
+		padding: 0.375rem 0.5rem;
+		border: none;
+		background: none;
+		cursor: pointer;
+		border-radius: var(--rf-radius-sm, 4px);
+		transition: background 0.15s ease;
+		text-align: left;
+		font-family: inherit;
+	}
+	.rf-audio-player__chapter:hover {
+		background: var(--rf-color-surface-hover, rgba(0, 0, 0, 0.04));
+	}
+	.rf-audio-player__chapter:focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: -2px;
+	}
+	.rf-audio-player__chapter--active {
+		background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
+	}
+	.rf-audio-player__chapter--active .rf-audio-player__chapter-name {
+		color: var(--rf-color-primary);
+	}
+	.rf-audio-player__chapter-name {
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-text);
+	}
+	.rf-audio-player__chapter-time {
+		font-size: var(--rf-text-xs);
+		font-variant-numeric: tabular-nums;
+		color: var(--rf-color-muted);
+	}
 
+	/* Active track highlight when connected to audio player */
+	.rf-track--active {
+		background: color-mix(in srgb, var(--rf-color-primary) 6%, transparent);
+		border-radius: var(--rf-radius-sm, 4px);
+	}
+	.rf-track--active .rf-track__track-name {
+		color: var(--rf-color-primary);
+	}
 }

package/styles/runes/badge.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Badge rune — standalone inline chip.
+	/* Badge rune — standalone inline chip.
  *
  * The universal chip primitive emitted by `{% badge %}` AND by every
  * chip-type field a block renders (`bar` chips, `definition-list` `<dd>`
@@ -11,16 +11,15 @@
  * gives `--meta-color` works without per-status selectors.
  */
 
-.rf-badge {
-	vertical-align: baseline;
-	border: none;
-	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 10%, transparent);
-	color: var(--meta-color, var(--rf-color-muted));
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-medium);
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-	white-space: nowrap;
-}
-
+	.rf-badge {
+		vertical-align: baseline;
+		border: none;
+		background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 10%, transparent);
+		color: var(--meta-color, var(--rf-color-muted));
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-medium);
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--rf-radius-sm);
+		white-space: nowrap;
+	}
 }

package/styles/runes/bar.css

@@ -1,13 +1,12 @@
 @layer skin {
-/* Bar rune — composable handle for the SPEC-080 `bar` layout.
+	/* Bar rune — composable handle for the SPEC-080 `bar` layout.
  *
  * Geometry comes from `[data-zone-layout="bar"]` in
  * `dimensions/metadata.css` (flex row, wrap, `[data-align="end"]`
  * right-push). This file only carries the minimum class hook so the rune
  * participates in CSS tree-shaking. */
 
-.rf-bar {
-	margin: 0.5rem 0;
-}
-
+	.rf-bar {
+		margin: 0.5rem 0;
+	}
 }

package/styles/runes/bento.css

@@ -1,81 +1,92 @@
 @layer skin {
-/* Bento — skin. A grid of cells, each a card-in-a-grid-track (SPEC-085). The
+	/* Bento — skin. A grid of cells, each a card-in-a-grid-track (SPEC-085). The
  * container-query grid system, cell flex layout, media placement, sizing knobs,
  * collapse queries, and the stretched link live in @refrakt-md/skeleton
  * (styles/runes/bento.css). What remains here is skin: the grid gap, the cell
  * surface chrome + spacing vars, the media-well chrome, type, and bleed resets. */
 
-.rf-bento__grid {
-	gap: var(--bento-gap, 1rem);
-}
+	.rf-bento__grid {
+		gap: var(--bento-gap, 1rem);
+	}
 
-/* The cell. `:where()` keeps the background at zero specificity so a per-cell
+	/* The cell. `:where()` keeps the background at zero specificity so a per-cell
  * `{% tint %}` can repaint it (tint-deferrable). */
-:where(.rf-bento-cell) {
-	background: var(--rf-color-surface);
-}
-.rf-bento-cell {
-	--rf-title-size: var(--rf-text-lg);
-	border-radius: var(--rf-radius-container);
-	/* Thin-edge inset model: the cell hugs its media with a thin edge; the content
+	:where(.rf-bento-cell) {
+		background: var(--rf-color-surface);
+	}
+	.rf-bento-cell {
+		--rf-title-size: var(--rf-text-lg);
+		border-radius: var(--rf-radius-container);
+		/* Thin-edge inset model: the cell hugs its media with a thin edge; the content
 	 * zone adds the remaining inset back (below). */
-	--container-padding: 1.25rem;
-	--bento-cell-edge: 0.5rem;
-	--bento-media-gap: var(--rf-spacing-md);
-	padding: var(--bento-cell-edge);
-	border: 1px solid var(--rf-color-border);
-	gap: var(--bento-media-gap);
-}
+		--container-padding: 1.25rem;
+		--bento-cell-edge: 0.5rem;
+		--bento-media-gap: var(--rf-spacing-md);
+		padding: var(--bento-cell-edge);
+		border: 1px solid var(--rf-color-border);
+		gap: var(--bento-media-gap);
+	}
 
-/* Media slot shares the cell surface chrome (1px border + recessed well). */
-:where(.rf-bento-cell) [data-section="media"] {
-	border: 1px solid var(--rf-color-border);
-	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
-}
+	/* Media slot shares the cell surface chrome (1px border + recessed well). */
+	:where(.rf-bento-cell) [data-section="media"] {
+		border: 1px solid var(--rf-color-border);
+		background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+	}
 
-.rf-bento-cell[data-media-position="start"] > .rf-bento-cell__media,
-.rf-bento-cell[data-media-position="end"] > .rf-bento-cell__media {
-	margin-bottom: 0;
-}
+	.rf-bento-cell[data-media-position="start"] > .rf-bento-cell__media,
+	.rf-bento-cell[data-media-position="end"] > .rf-bento-cell__media {
+		margin-bottom: 0;
+	}
 
-.rf-bento-cell__media { margin-bottom: 0; }
+	.rf-bento-cell__media {
+		margin-bottom: 0;
+	}
 
-/* Add the remaining inset back on top of the cell's thin edge, so text sits at
+	/* Add the remaining inset back on top of the cell's thin edge, so text sits at
  * the full `--container-padding`. */
-.rf-bento-cell__content {
-	padding: calc(var(--container-padding) - var(--bento-cell-edge));
-}
-.rf-bento-cell__title {
-	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	.rf-bento-cell__content {
+		padding: calc(var(--container-padding) - var(--bento-cell-edge));
+	}
+	.rf-bento-cell__title {
+		/* WORK-538 — read the prominence override first; the fallback is this rune's
 	 * resting size, stated as --rf-title-size on the root so the prominence ramp
 	 * can compute from it. */
-	font-size: var(--rf-prominence-size, var(--rf-title-size));
-	font-weight: var(--rf-weight-semibold);
-	margin: 0 0 0.5rem;
-}
-.rf-bento-cell__body > :first-child { margin-top: 0; }
-.rf-bento-cell__body p:last-child { margin-bottom: 0; }
-.rf-bento-cell__footer {
-	padding-top: 0.5rem;
-	border-top: 1px solid var(--rf-color-border);
-	font-size: 0.8125em;
-	color: var(--rf-color-muted);
-}
-.rf-bento-cell__body img {
-	border-radius: var(--rf-radius-sm);
-	margin-bottom: 0.75rem;
-}
+		font-size: var(--rf-prominence-size, var(--rf-title-size));
+		font-weight: var(--rf-weight-semibold);
+		margin: 0 0 0.5rem;
+	}
+	.rf-bento-cell__body > :first-child {
+		margin-top: 0;
+	}
+	.rf-bento-cell__body p:last-child {
+		margin-bottom: 0;
+	}
+	.rf-bento-cell__footer {
+		padding-top: 0.5rem;
+		border-top: 1px solid var(--rf-color-border);
+		font-size: 0.8125em;
+		color: var(--rf-color-muted);
+	}
+	.rf-bento-cell__body img {
+		border-radius: var(--rf-radius-sm);
+		margin-bottom: 0.75rem;
+	}
 
-/* Drop padding on bleed edges when a showcase bleeds (clipped to a peek by
+	/* Drop padding on bleed edges when a showcase bleeds (clipped to a peek by
  * the media-zone + cell overflow). */
-.rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) { padding-bottom: 0; }
-.rf-bento-cell:has(.rf-showcase[data-bleed="end"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) { padding-inline-end: 0; }
-.rf-bento-cell:has(.rf-showcase[data-bleed="top"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
-.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) { padding-top: 0; }
-
+	.rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
+	.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
+	.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) {
+		padding-bottom: 0;
+	}
+	.rf-bento-cell:has(.rf-showcase[data-bleed="end"]),
+	.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]),
+	.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
+		padding-inline-end: 0;
+	}
+	.rf-bento-cell:has(.rf-showcase[data-bleed="top"]),
+	.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
+	.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
+		padding-top: 0;
+	}
 }

package/styles/runes/bg.css

@@ -1,54 +1,69 @@
 @layer skin {
-/* Background — Directive rune for background images, video, overlays, blur */
+	/* Background — Directive rune for background images, video, overlays, blur */
 
-/* Background layer — absolute positioned behind content. `border-radius:
+	/* Background layer — absolute positioned behind content. `border-radius:
  * inherit` rounds the gradient/image to whatever shape the parent surface has,
  * so a card / bento-cell / any rounded host clips the bg to its own corners
  * without needing `overflow: hidden` (though hosts with thin-edge padding
  * still need it so the bg can't poke past the rounded outer edge). */
-[data-name="bg"] {
-	border-radius: inherit;
-	background-image: var(--bg-image);
-	background-size: var(--bg-fit, cover);
-	background-position: var(--bg-position, center);
-	background-repeat: no-repeat;
-}
-/* Blur and opacity applied when set via custom properties */
-[data-name="bg"][style*="--bg-blur"] {
-	filter: blur(var(--bg-blur));
-}
-[data-name="bg"][style*="--bg-opacity"] {
-	opacity: var(--bg-opacity);
-}
-/* Fixed (parallax) background */
-[data-name="bg"][data-bg-fixed] {
-	background-attachment: fixed;
-}
-[data-name="bg-video"][style*="--bg-blur"] {
-	filter: blur(var(--bg-blur));
-}
-[data-name="bg-video"][style*="--bg-opacity"] {
-	opacity: var(--bg-opacity);
-}
-[data-name="bg-overlay"][data-bg-overlay="dark"] {
-	background: rgba(0, 0, 0, 0.5);
-}
-[data-name="bg-overlay"][data-bg-overlay="light"] {
-	background: rgba(255, 255, 255, 0.6);
-}
-[data-name="scrim"][data-scrim-tone="dark"]  { --scrim-color: 0 0 0; }
-[data-name="scrim"][data-scrim-tone="light"] { --scrim-color: 255 255 255; }
-[data-name="scrim"][data-scrim-dir="top"]    { --scrim-grad-dir: to top; }
-[data-name="scrim"][data-scrim-dir="bottom"] { --scrim-grad-dir: to bottom; }
-[data-name="scrim"][data-scrim-dir="left"]   { --scrim-grad-dir: to left; }
-[data-name="scrim"][data-scrim-dir="right"]  { --scrim-grad-dir: to right; }
-[data-name="scrim"][data-scrim="gradient"] {
-	background-image: linear-gradient(var(--scrim-grad-dir, to top), transparent, rgb(var(--scrim-color, 0 0 0) / var(--scrim-strength, 0.55)));
-}
-[data-name="scrim"][data-scrim="frost"] {
-	-webkit-backdrop-filter: blur(var(--scrim-blur, 8px));
-	backdrop-filter: blur(var(--scrim-blur, 8px));
-	background: rgb(var(--scrim-color, 0 0 0) / 0.18);
-}
-
+	[data-name="bg"] {
+		border-radius: inherit;
+		background-image: var(--bg-image);
+		background-size: var(--bg-fit, cover);
+		background-position: var(--bg-position, center);
+		background-repeat: no-repeat;
+	}
+	/* Blur and opacity applied when set via custom properties */
+	[data-name="bg"][style*="--bg-blur"] {
+		filter: blur(var(--bg-blur));
+	}
+	[data-name="bg"][style*="--bg-opacity"] {
+		opacity: var(--bg-opacity);
+	}
+	/* Fixed (parallax) background */
+	[data-name="bg"][data-bg-fixed] {
+		background-attachment: fixed;
+	}
+	[data-name="bg-video"][style*="--bg-blur"] {
+		filter: blur(var(--bg-blur));
+	}
+	[data-name="bg-video"][style*="--bg-opacity"] {
+		opacity: var(--bg-opacity);
+	}
+	[data-name="bg-overlay"][data-bg-overlay="dark"] {
+		background: rgba(0, 0, 0, 0.5);
+	}
+	[data-name="bg-overlay"][data-bg-overlay="light"] {
+		background: rgba(255, 255, 255, 0.6);
+	}
+	[data-name="scrim"][data-scrim-tone="dark"] {
+		--scrim-color: 0 0 0;
+	}
+	[data-name="scrim"][data-scrim-tone="light"] {
+		--scrim-color: 255 255 255;
+	}
+	[data-name="scrim"][data-scrim-dir="top"] {
+		--scrim-grad-dir: to top;
+	}
+	[data-name="scrim"][data-scrim-dir="bottom"] {
+		--scrim-grad-dir: to bottom;
+	}
+	[data-name="scrim"][data-scrim-dir="left"] {
+		--scrim-grad-dir: to left;
+	}
+	[data-name="scrim"][data-scrim-dir="right"] {
+		--scrim-grad-dir: to right;
+	}
+	[data-name="scrim"][data-scrim="gradient"] {
+		background-image: linear-gradient(
+			var(--scrim-grad-dir, to top),
+			transparent,
+			rgb(var(--scrim-color, 0 0 0) / var(--scrim-strength, 0.55))
+		);
+	}
+	[data-name="scrim"][data-scrim="frost"] {
+		-webkit-backdrop-filter: blur(var(--scrim-blur, 8px));
+		backdrop-filter: blur(var(--scrim-blur, 8px));
+		background: rgb(var(--scrim-color, 0 0 0) / 0.18);
+	}
 }