@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/layouts/search.css

@@ -1,150 +1,152 @@
 @layer skin {
-/* Search trigger button */
-.rf-search-trigger {
-	gap: 0.5rem;
-	padding: 0.375rem 0.625rem 0.375rem 0.5rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-full);
-	background: var(--rf-color-surface);
-	color: var(--rf-color-muted);
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-sans);
-	cursor: pointer;
-	transition: border-color 0.15s, color 0.15s, background 0.15s;
-	line-height: 1;
-	white-space: nowrap;
-}
-.rf-search-trigger:hover {
-	border-color: var(--rf-color-primary);
-	color: var(--rf-color-text);
-	background: var(--rf-color-surface-hover);
-}
-.rf-search-trigger__kbd {
-	padding: 0.125rem 0.375rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
-	background: var(--rf-color-bg);
-	font-family: var(--rf-font-sans);
-	font-size: var(--rf-text-xs);
-	line-height: var(--rf-leading-tight);
-	color: var(--rf-color-muted);
-}
-
-/* Search dialog */
-.rf-search-dialog {
-	margin: 0;
-	padding: 0;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	background: var(--rf-color-bg);
-	box-shadow: var(--rf-shadow-lg);
-	font-family: var(--rf-font-sans);
-}
-.rf-search-dialog::backdrop {
-	background: rgba(0, 0, 0, 0.4);
-}
+	/* Search trigger button */
+	.rf-search-trigger {
+		gap: 0.5rem;
+		padding: 0.375rem 0.625rem 0.375rem 0.5rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-full);
+		background: var(--rf-color-surface);
+		color: var(--rf-color-muted);
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-sans);
+		cursor: pointer;
+		transition:
+			border-color 0.15s,
+			color 0.15s,
+			background 0.15s;
+		line-height: 1;
+		white-space: nowrap;
+	}
+	.rf-search-trigger:hover {
+		border-color: var(--rf-color-primary);
+		color: var(--rf-color-text);
+		background: var(--rf-color-surface-hover);
+	}
+	.rf-search-trigger__kbd {
+		padding: 0.125rem 0.375rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
+		background: var(--rf-color-bg);
+		font-family: var(--rf-font-sans);
+		font-size: var(--rf-text-xs);
+		line-height: var(--rf-leading-tight);
+		color: var(--rf-color-muted);
+	}
 
-/* Dialog header */
-.rf-search-dialog__header {
-	gap: 0.75rem;
-	padding: 0.875rem 1rem;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-search-dialog__icon {
-	color: var(--rf-color-muted);
-}
-.rf-search-dialog__input {
-	border: none;
-	outline: none;
-	background: transparent;
-	font-size: var(--rf-text);
-	font-family: var(--rf-font-sans);
-	color: var(--rf-color-text);
-}
-.rf-search-dialog__input::placeholder {
-	color: var(--rf-color-muted);
-}
-.rf-search-dialog__esc {
-	padding: 0.125rem 0.375rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
-	background: var(--rf-color-surface);
-	font-family: var(--rf-font-sans);
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-}
+	/* Search dialog */
+	.rf-search-dialog {
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-lg);
+		background: var(--rf-color-bg);
+		box-shadow: var(--rf-shadow-lg);
+		font-family: var(--rf-font-sans);
+	}
+	.rf-search-dialog::backdrop {
+		background: rgba(0, 0, 0, 0.4);
+	}
 
-/* Results */
-.rf-search-dialog__results {
-	padding: 0.5rem;
-}
-.rf-search-result {
-	padding: 0.625rem 0.75rem;
-	border-radius: var(--rf-radius-md);
-	text-decoration: none;
-	color: var(--rf-color-text);
-	cursor: pointer;
-}
-.rf-search-result:hover,
-.rf-search-result[data-active] {
-	background: var(--rf-color-surface-hover);
-}
-.rf-search-result__title {
-	font-weight: var(--rf-weight-medium);
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-snug);
-	margin-bottom: 0.125rem;
-}
-.rf-search-result__excerpt {
-	font-size: var(--rf-text-xs);
-	line-height: var(--rf-leading-normal);
-	color: var(--rf-color-muted);
-}
-.rf-search-result__excerpt mark {
-	background: var(--rf-color-primary-bg);
-	color: var(--rf-color-text);
-	border-radius: 2px;
-	padding: 0 1px;
-}
+	/* Dialog header */
+	.rf-search-dialog__header {
+		gap: 0.75rem;
+		padding: 0.875rem 1rem;
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-search-dialog__icon {
+		color: var(--rf-color-muted);
+	}
+	.rf-search-dialog__input {
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: var(--rf-text);
+		font-family: var(--rf-font-sans);
+		color: var(--rf-color-text);
+	}
+	.rf-search-dialog__input::placeholder {
+		color: var(--rf-color-muted);
+	}
+	.rf-search-dialog__esc {
+		padding: 0.125rem 0.375rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
+		background: var(--rf-color-surface);
+		font-family: var(--rf-font-sans);
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+	}
 
-/* Empty / unavailable state */
-.rf-search-dialog__empty {
-	text-align: center;
-	padding: 2rem 1rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
+	/* Results */
+	.rf-search-dialog__results {
+		padding: 0.5rem;
+	}
+	.rf-search-result {
+		padding: 0.625rem 0.75rem;
+		border-radius: var(--rf-radius-md);
+		text-decoration: none;
+		color: var(--rf-color-text);
+		cursor: pointer;
+	}
+	.rf-search-result:hover,
+	.rf-search-result[data-active] {
+		background: var(--rf-color-surface-hover);
+	}
+	.rf-search-result__title {
+		font-weight: var(--rf-weight-medium);
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-snug);
+		margin-bottom: 0.125rem;
+	}
+	.rf-search-result__excerpt {
+		font-size: var(--rf-text-xs);
+		line-height: var(--rf-leading-normal);
+		color: var(--rf-color-muted);
+	}
+	.rf-search-result__excerpt mark {
+		background: var(--rf-color-primary-bg);
+		color: var(--rf-color-text);
+		border-radius: 2px;
+		padding: 0 1px;
+	}
 
-/* Footer */
-.rf-search-dialog__footer {
-	gap: 1rem;
-	padding: 0.5rem 1rem;
-	border-top: 1px solid var(--rf-color-border);
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-}
-.rf-search-dialog__footer kbd {
-	padding: 0 0.25rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: 3px;
-	background: var(--rf-color-surface);
-	font-family: var(--rf-font-sans);
-	font-size: var(--rf-text-xs);
-	line-height: var(--rf-leading-snug);
-}
+	/* Empty / unavailable state */
+	.rf-search-dialog__empty {
+		text-align: center;
+		padding: 2rem 1rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
 
-/* Mobile */
-@media (max-width: 768px) {
-	.rf-search-trigger {
-		padding: 0.375rem;
-		/* Collapsed to an icon-only button — keep it fully rounded so it reads
-		 * as a circle matching the adjacent theme toggle, not a small square. */
-		border-radius: var(--rf-radius-full);
+	/* Footer */
+	.rf-search-dialog__footer {
+		gap: 1rem;
+		padding: 0.5rem 1rem;
+		border-top: 1px solid var(--rf-color-border);
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
 	}
-	.rf-search-dialog[open] {
-		border-radius: 0;
-		border: none;
+	.rf-search-dialog__footer kbd {
+		padding: 0 0.25rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: 3px;
+		background: var(--rf-color-surface);
+		font-family: var(--rf-font-sans);
+		font-size: var(--rf-text-xs);
+		line-height: var(--rf-leading-snug);
 	}
-}
 
+	/* Mobile */
+	@media (max-width: 768px) {
+		.rf-search-trigger {
+			padding: 0.375rem;
+			/* Collapsed to an icon-only button — keep it fully rounded so it reads
+		 * as a circle matching the adjacent theme toggle, not a small square. */
+			border-radius: var(--rf-radius-full);
+		}
+		.rf-search-dialog[open] {
+			border-radius: 0;
+			border: none;
+		}
+	}
 }

package/styles/layouts/split.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Shared media + content layout — skin.
+	/* Shared media + content layout — skin.
  *
  * The layout *structure* (start/end grid, top/bottom stack, 3-section placement,
  * the media-zone fill/clip mechanism, responsive collapse) lives in
@@ -7,24 +7,24 @@
  * radius tier, the beside-image depth shadow, the codegroup radius alignment,
  * and the default side-by-side spacing rhythm. */
 
-/* Default side-by-side spacing — applies to every rune using the split layout
+	/* Default side-by-side spacing — applies to every rune using the split layout
  * (hero, feature, step, realm, faction, etc.). Contained-chrome runes
  * (card, recipe, bento-cell, playlist) override `column-gap` / `row-gap` with
  * higher-specificity selectors to hug their internal media well; everything
  * else inherits this comfortable default so columns don't sit flush. */
-[data-media-position="start"],
-[data-media-position="end"] {
-	column-gap: var(--rf-spacing-lg);
-	row-gap: var(--rf-spacing-lg);
-}
+	[data-media-position="start"],
+	[data-media-position="end"] {
+		column-gap: var(--rf-spacing-lg);
+		row-gap: var(--rf-spacing-lg);
+	}
 
-/* Media guests use the smaller media radius tier so they never read as more
+	/* Media guests use the smaller media radius tier so they never read as more
  * rounded than the (larger-radius) container they sit in. */
-[data-section="media"] {
-	border-radius: var(--rf-radius-media);
-}
+	[data-section="media"] {
+		border-radius: var(--rf-radius-media);
+	}
 
-/* `data-guest-fit` (emitted from rune config) is the chrome/containment axis:
+	/* `data-guest-fit` (emitted from rune config) is the chrome/containment axis:
  *
  *   clip  — a framed well (card, bento-cell, recipe, playlist). Every guest
  *           adopts the slot radius so it reads as one surface with the well.
@@ -35,44 +35,44 @@
  *           chrome of its own, so a bare hero image stays rounded).
  *
  * Absence of the attribute reads as `clip` (the historical default). */
-[data-section="media"]:not([data-guest-fit="bleed"]) > * {
-	border-radius: inherit;
-}
-[data-section="media"]:not([data-guest-fit="bleed"]) .rf-codegroup {
-	border-radius: var(--rf-radius-media);
-}
+	[data-section="media"]:not([data-guest-fit="bleed"]) > * {
+		border-radius: inherit;
+	}
+	[data-section="media"]:not([data-guest-fit="bleed"]) .rf-codegroup {
+		border-radius: var(--rf-radius-media);
+	}
 
-/* Bleed host: leaf media adopts the slot radius; a rune guest does not, and the
+	/* Bleed host: leaf media adopts the slot radius; a rune guest does not, and the
  * slot drops its own radius so its clip never rounds the guest's corners. */
-[data-section="media"][data-guest-fit="bleed"] > :is(img, video, svg, .rf-placeholder) {
-	border-radius: inherit;
-}
-[data-section="media"][data-guest-fit="bleed"]:has(> [data-rune]) {
-	border-radius: 0;
-}
+	[data-section="media"][data-guest-fit="bleed"] > :is(img, video, svg, .rf-placeholder) {
+		border-radius: inherit;
+	}
+	[data-section="media"][data-guest-fit="bleed"]:has(> [data-rune]) {
+		border-radius: 0;
+	}
 
-/* `preview` (negative-margin breakout) and a displaced `showcase` (peek spill)
+	/* `preview` (negative-margin breakout) and a displaced `showcase` (peek spill)
  * want the slot fully de-chromed so the bleed reads as edge-to-edge. Juxtapose
  * keeps the slot's rounded corners (it still reads as part of the card surface). */
-[data-section="media"]:is(
-	:has(> [data-rune="preview"]),
-	:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
-) {
-	border-radius: 0;
-}
-[data-section="media"]:is(
-	:has(> [data-rune="preview"]),
-	:has(> [data-rune="juxtapose"]),
-	:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
-) > * {
-	border-radius: 0;
-}
+	[data-section="media"]:is(
+		:has(> [data-rune="preview"]),
+		:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+	) {
+		border-radius: 0;
+	}
+	[data-section="media"]:is(
+			:has(> [data-rune="preview"]),
+			:has(> [data-rune="juxtapose"]),
+			:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell))
+		)
+		> * {
+		border-radius: 0;
+	}
 
-/* Beside-layout images get subtle depth. Block runes carry their own visual
+	/* Beside-layout images get subtle depth. Block runes carry their own visual
  * weight (topbars, frames) so the shadow is image-only. */
-[data-media-position="start"] > [data-section="media"] > img,
-[data-media-position="end"] > [data-section="media"] > img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
+	[data-media-position="start"] > [data-section="media"] > img,
+	[data-media-position="end"] > [data-section="media"] > img {
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+	}
 }

package/styles/layouts/theme-toggle.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Theme-mode toggle button (SPEC-073).
+	/* Theme-mode toggle button (SPEC-073).
  *
  * Layout chrome — a peer of the search trigger, placed in the header/toolbar.
  * The `theme-toggle` behavior cycles auto → light → dark and reflects the
@@ -8,37 +8,39 @@
  * attribute. Chrome (surface fill, full radius, muted colour, primary hover
  * accent) is kept in sync with the search trigger so the two header buttons
  * read as a matched set. */
-.rf-theme-toggle {
-	padding: 0;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-full);
-	background: var(--rf-color-surface);
-	color: var(--rf-color-muted);
-	cursor: pointer;
-	transition: border-color 0.15s, color 0.15s, background 0.15s;
-}
-.rf-theme-toggle:hover {
-	border-color: var(--rf-color-primary);
-	color: var(--rf-color-text);
-	background: var(--rf-color-surface-hover);
-}
-.rf-theme-toggle:focus-visible {
-	outline: 2px solid var(--rf-color-primary);
-	outline-offset: 2px;
-}
+	.rf-theme-toggle {
+		padding: 0;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-full);
+		background: var(--rf-color-surface);
+		color: var(--rf-color-muted);
+		cursor: pointer;
+		transition:
+			border-color 0.15s,
+			color 0.15s,
+			background 0.15s;
+	}
+	.rf-theme-toggle:hover {
+		border-color: var(--rf-color-primary);
+		color: var(--rf-color-text);
+		background: var(--rf-color-surface-hover);
+	}
+	.rf-theme-toggle:focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: 2px;
+	}
 
-/* Icon — a currentColor-tinted mask. Defaults to the auto glyph so the SSR'd
+	/* Icon — a currentColor-tinted mask. Defaults to the auto glyph so the SSR'd
  * button shows an icon before the behavior sets data-theme-pref; the light and
  * dark glyphs swap in by state. */
-.rf-theme-toggle__icon {
-	background: currentColor;
-	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a10 10 0 0 0 0 20Z' fill='currentColor'/></svg>");
-}
-.rf-theme-toggle[data-theme-pref="light"] .rf-theme-toggle__icon {
-	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
-}
-.rf-theme-toggle[data-theme-pref="dark"] .rf-theme-toggle__icon {
-	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
-}
-
+	.rf-theme-toggle__icon {
+		background: currentColor;
+		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a10 10 0 0 0 0 20Z' fill='currentColor'/></svg>");
+	}
+	.rf-theme-toggle[data-theme-pref="light"] .rf-theme-toggle__icon {
+		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
+	}
+	.rf-theme-toggle[data-theme-pref="dark"] .rf-theme-toggle__icon {
+		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
+	}
 }

package/styles/layouts/version-switcher.css

@@ -1,44 +1,45 @@
 @layer skin {
-/* Version Switcher — page-level version dropdown */
+	/* Version Switcher — page-level version dropdown */
 
-.rf-version-switcher {
-	gap: 0.5rem;
-	margin-bottom: 1.5rem;
-	font-size: var(--rf-text-sm);
-}
-
-.rf-version-switcher__label {
-	color: var(--rf-color-muted);
-	font-weight: var(--rf-weight-medium);
-	font-size: var(--rf-text-xs);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wide);
-}
+	.rf-version-switcher {
+		gap: 0.5rem;
+		margin-bottom: 1.5rem;
+		font-size: var(--rf-text-sm);
+	}
 
-.rf-version-switcher__select {
-	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm, 0.25rem);
-	color: var(--rf-color-text);
-	font-size: var(--rf-text-sm);
-	font-family: inherit;
-	padding: 0.3rem 2rem 0.3rem 0.6rem;
-	cursor: pointer;
-	line-height: var(--rf-leading-snug);
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-	background-repeat: no-repeat;
-	background-position: right 0.5rem center;
-	transition: border-color 150ms ease, box-shadow 150ms ease;
-}
+	.rf-version-switcher__label {
+		color: var(--rf-color-muted);
+		font-weight: var(--rf-weight-medium);
+		font-size: var(--rf-text-xs);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wide);
+	}
 
-.rf-version-switcher__select:hover {
-	border-color: var(--rf-color-primary);
-}
+	.rf-version-switcher__select {
+		background: var(--rf-color-surface);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm, 0.25rem);
+		color: var(--rf-color-text);
+		font-size: var(--rf-text-sm);
+		font-family: inherit;
+		padding: 0.3rem 2rem 0.3rem 0.6rem;
+		cursor: pointer;
+		line-height: var(--rf-leading-snug);
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: right 0.5rem center;
+		transition:
+			border-color 150ms ease,
+			box-shadow 150ms ease;
+	}
 
-.rf-version-switcher__select:focus-visible {
-	outline: none;
-	border-color: var(--rf-color-primary);
-	box-shadow: 0 0 0 2px var(--rf-color-primary-bg);
-}
+	.rf-version-switcher__select:hover {
+		border-color: var(--rf-color-primary);
+	}
 
+	.rf-version-switcher__select:focus-visible {
+		outline: none;
+		border-color: var(--rf-color-primary);
+		box-shadow: 0 0 0 2px var(--rf-color-primary-bg);
+	}
 }