@refrakt-md/lumina 0.33.0 → 0.35.0

package/styles/runes/sandbox.css

@@ -1,8 +1,8 @@
 @layer skin {
-/* Sandbox — skin. The iframe clip/fill + banner/poster/activate layout live in
+	/* Sandbox — skin. The iframe clip/fill + banner/poster/activate layout live in
  * @refrakt-md/skeleton (styles/runes/sandbox.css). */
 
-/* The iframe canvas is opaque (the behaviour writes `color-scheme` onto the
+	/* The iframe canvas is opaque (the behaviour writes `color-scheme` onto the
  * srcdoc `<html>`, so the UA paints a solid backdrop — `background: transparent`
  * can't make it see-through). A rounded shape therefore can't come from inside
  * the sandbox; the embedding element has to clip it. The sandbox owns its
@@ -13,62 +13,61 @@
  * (hero/feature) where the guest keeps its own chrome — while a clip-host well
  * rounds it to the smaller media tier via the shared `[data-section="media"]
  * > *` rule. A full-bleed cover/backdrop sandbox sits flush. */
-.rf-sandbox {
-	border-radius: var(--rf-radius-container);
-}
-[data-media-position="cover"] .rf-sandbox {
-	border-radius: 0;
-}
-.rf-sandbox iframe {
-	border: none;
-	border-radius: inherit;
-}
-/* Static fallback (pre/code shown before hydration) */
-.rf-sandbox pre {
-	margin: 0;
-}
-/* When inside preview, remove sandbox margin */
-.rf-preview .rf-sandbox {
-	margin: 0;
-}
-/* Untrusted-mode affordance. */
-.rf-sandbox[data-security-mode="untrusted"] {
-	border: 1px solid var(--rf-color-warning, #b45309);
-}
-.rf-sandbox__untrusted-banner {
-	padding: 0.5rem 0.75rem;
-	font-size: var(--rf-text-sm);
-	line-height: 1.25rem;
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-warning);
-	background: var(--rf-color-warning-bg, #fef3c7);
-	border-bottom: 1px solid var(--rf-color-warning, #b45309);
-}
-.rf-sandbox__poster {
-	background: var(--rf-color-surface-2, var(--rf-color-surface, #f4f4f5));
-}
-.rf-sandbox__activate {
-	gap: 0.5ch;
-	padding: 0.5rem 1rem;
-	font: inherit;
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-on-accent, #fff);
-	background: var(--rf-color-accent, #2563eb);
-	border: none;
-	border-radius: var(--rf-radius-md);
-	cursor: pointer;
-	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
-}
-.rf-sandbox__activate::before {
-	content: "▶";
-	font-size: 0.85em;
-}
-.rf-sandbox__activate:hover {
-	background: var(--rf-color-accent-hover, var(--rf-color-accent, #1d4ed8));
-}
-.rf-sandbox__activate:focus-visible {
-	outline: 2px solid var(--rf-color-accent, #2563eb);
-	outline-offset: 2px;
-}
-
+	.rf-sandbox {
+		border-radius: var(--rf-radius-container);
+	}
+	[data-media-position="cover"] .rf-sandbox {
+		border-radius: 0;
+	}
+	.rf-sandbox iframe {
+		border: none;
+		border-radius: inherit;
+	}
+	/* Static fallback (pre/code shown before hydration) */
+	.rf-sandbox pre {
+		margin: 0;
+	}
+	/* When inside preview, remove sandbox margin */
+	.rf-preview .rf-sandbox {
+		margin: 0;
+	}
+	/* Untrusted-mode affordance. */
+	.rf-sandbox[data-security-mode="untrusted"] {
+		border: 1px solid var(--rf-color-warning, #b45309);
+	}
+	.rf-sandbox__untrusted-banner {
+		padding: 0.5rem 0.75rem;
+		font-size: var(--rf-text-sm);
+		line-height: 1.25rem;
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-warning);
+		background: var(--rf-color-warning-bg, #fef3c7);
+		border-bottom: 1px solid var(--rf-color-warning, #b45309);
+	}
+	.rf-sandbox__poster {
+		background: var(--rf-color-surface-2, var(--rf-color-surface, #f4f4f5));
+	}
+	.rf-sandbox__activate {
+		gap: 0.5ch;
+		padding: 0.5rem 1rem;
+		font: inherit;
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-on-accent, #fff);
+		background: var(--rf-color-accent, #2563eb);
+		border: none;
+		border-radius: var(--rf-radius-md);
+		cursor: pointer;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+	}
+	.rf-sandbox__activate::before {
+		content: "▶";
+		font-size: 0.85em;
+	}
+	.rf-sandbox__activate:hover {
+		background: var(--rf-color-accent-hover, var(--rf-color-accent, #1d4ed8));
+	}
+	.rf-sandbox__activate:focus-visible {
+		outline: 2px solid var(--rf-color-accent, #2563eb);
+		outline-offset: 2px;
+	}
 }

package/styles/runes/section.css

@@ -1,56 +1,63 @@
 @layer skin {
-/* Section — a generic page section: an eyebrow/headline/blurb header above
+	/* Section — a generic page section: an eyebrow/headline/blurb header above
    arbitrary body content. Header styling mirrors the shared page-section look
    (reveal/feature); the body is content-agnostic and full width. */
-.rf-section {
-	gap: 1.5rem;
-}
-
-/* Header */
-.rf-section__preamble {
-	gap: 0.5rem;
-	max-width: var(--rf-measure, 65ch);
-	margin: 0;
-}
-.rf-section__eyebrow {
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-semibold);
-	letter-spacing: var(--rf-tracking-wider);
-	text-transform: uppercase;
-	color: var(--rf-color-primary);
-	margin: 0;
-}
-.rf-section__eyebrow:has(a) {
-	padding: 0.25rem 0.875rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-full);
-	color: var(--rf-color-text);
-	font-weight: var(--rf-weight-normal);
-	text-transform: none;
-	letter-spacing: var(--rf-tracking-normal);
-	transition: border-color 150ms ease;
-}
-.rf-section__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-section__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
-.rf-section__eyebrow:has(a) a::before { border-radius: inherit; }
-.rf-section__headline {
-	margin: 0;
-}
-.rf-section__blurb {
-	color: var(--rf-color-muted);
-	margin: 0;
-}
-.rf-section__image {
-	margin: 0;
-	border-radius: var(--rf-radius-md);
-}
+	.rf-section {
+		gap: 1.5rem;
+	}
 
-/* Header alignment (the body stays full width). */
-.rf-section[data-align="center"] .rf-section__preamble {
-	text-align: center;
-}
-.rf-section[data-align="end"] .rf-section__preamble {
-	text-align: end;
-}
+	/* Header */
+	.rf-section__preamble {
+		gap: 0.5rem;
+		max-width: var(--rf-measure, 65ch);
+		margin: 0;
+	}
+	.rf-section__eyebrow {
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-semibold);
+		letter-spacing: var(--rf-tracking-wider);
+		text-transform: uppercase;
+		color: var(--rf-color-primary);
+		margin: 0;
+	}
+	.rf-section__eyebrow:has(a) {
+		padding: 0.25rem 0.875rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-full);
+		color: var(--rf-color-text);
+		font-weight: var(--rf-weight-normal);
+		text-transform: none;
+		letter-spacing: var(--rf-tracking-normal);
+		transition: border-color 150ms ease;
+	}
+	.rf-section__eyebrow:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	.rf-section__eyebrow:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-section__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-section__headline {
+		margin: 0;
+	}
+	.rf-section__blurb {
+		color: var(--rf-color-muted);
+		margin: 0;
+	}
+	.rf-section__image {
+		margin: 0;
+		border-radius: var(--rf-radius-md);
+	}
 
+	/* Header alignment (the body stays full width). */
+	.rf-section[data-align="center"] .rf-section__preamble {
+		text-align: center;
+	}
+	.rf-section[data-align="end"] .rf-section__preamble {
+		text-align: end;
+	}
 }

package/styles/runes/showcase.css

@@ -1,21 +1,40 @@
 @layer skin {
-/* Spacing — vertical margin around the showcase */
-.rf-showcase[data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
-.rf-showcase[data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }
-.rf-showcase[data-spacing="loose"]   { margin-top: var(--rf-spacing-section-loose, 8rem); margin-bottom: var(--rf-spacing-section-loose, 8rem); }
-.rf-showcase[data-spacing="breathe"] { margin-top: var(--rf-spacing-section-breathe, 12rem); margin-bottom: var(--rf-spacing-section-breathe, 12rem); }
-/* Inset — all-around padding (not just inline, since showcase is a contained frame) */
-.rf-showcase[data-inset="flush"]   { padding: 0; }
-.rf-showcase[data-inset="tight"]   { padding: var(--rf-inset-tight, 1rem); }
-.rf-showcase[data-inset="loose"]   { padding: var(--rf-inset-loose, 4rem); }
-.rf-showcase[data-inset="breathe"] { padding: var(--rf-inset-breathe, 8rem); }
-/* Responsive: collapse bleed on mobile */
-@media (max-width: 768px) {
-	.rf-showcase[data-bleed] {
+	/* Spacing — vertical margin around the showcase */
+	.rf-showcase[data-spacing="flush"] {
 		margin-top: 0;
 		margin-bottom: 0;
-		margin-inline-end: 0;
 	}
-}
-
+	.rf-showcase[data-spacing="tight"] {
+		margin-top: var(--rf-spacing-section-tight, 1.5rem);
+		margin-bottom: var(--rf-spacing-section-tight, 1.5rem);
+	}
+	.rf-showcase[data-spacing="loose"] {
+		margin-top: var(--rf-spacing-section-loose, 8rem);
+		margin-bottom: var(--rf-spacing-section-loose, 8rem);
+	}
+	.rf-showcase[data-spacing="breathe"] {
+		margin-top: var(--rf-spacing-section-breathe, 12rem);
+		margin-bottom: var(--rf-spacing-section-breathe, 12rem);
+	}
+	/* Inset — all-around padding (not just inline, since showcase is a contained frame) */
+	.rf-showcase[data-inset="flush"] {
+		padding: 0;
+	}
+	.rf-showcase[data-inset="tight"] {
+		padding: var(--rf-inset-tight, 1rem);
+	}
+	.rf-showcase[data-inset="loose"] {
+		padding: var(--rf-inset-loose, 4rem);
+	}
+	.rf-showcase[data-inset="breathe"] {
+		padding: var(--rf-inset-breathe, 8rem);
+	}
+	/* Responsive: collapse bleed on mobile */
+	@media (max-width: 768px) {
+		.rf-showcase[data-bleed] {
+			margin-top: 0;
+			margin-bottom: 0;
+			margin-inline-end: 0;
+		}
+	}
 }

package/styles/runes/sidenote.css

@@ -1,29 +1,32 @@
 @layer skin {
-/* Sidenote */
-.rf-sidenote {
-	margin: 1rem 0;
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-sidenote--sidenote {
-	border-left: 3px solid var(--rf-color-primary);
-	padding: 0.75rem 1rem;
-	color: var(--rf-color-muted);
-}
-.rf-sidenote--footnote {
-	border-top: 1px solid var(--rf-color-border);
-	padding-top: 0.75rem;
-	margin-top: 2rem;
-	color: var(--rf-color-muted);
-}
-.rf-sidenote--tooltip {
-	background: var(--rf-color-surface-hover);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	padding: 0.75rem 1rem;
-	color: var(--rf-color-muted);
-}
-.rf-sidenote__body p { margin: 0; }
-.rf-sidenote__body p + p { margin-top: 0.5rem; }
-
+	/* Sidenote */
+	.rf-sidenote {
+		margin: 1rem 0;
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-sidenote--sidenote {
+		border-left: 3px solid var(--rf-color-primary);
+		padding: 0.75rem 1rem;
+		color: var(--rf-color-muted);
+	}
+	.rf-sidenote--footnote {
+		border-top: 1px solid var(--rf-color-border);
+		padding-top: 0.75rem;
+		margin-top: 2rem;
+		color: var(--rf-color-muted);
+	}
+	.rf-sidenote--tooltip {
+		background: var(--rf-color-surface-hover);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		padding: 0.75rem 1rem;
+		color: var(--rf-color-muted);
+	}
+	.rf-sidenote__body p {
+		margin: 0;
+	}
+	.rf-sidenote__body p + p {
+		margin-top: 0.5rem;
+	}
 }

package/styles/runes/snippet.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Snippet — file embedded as a code block.
+	/* Snippet — file embedded as a code block.
  *
  * The standalone form is a `<figure class="rf-snippet">` wrapping the
  * existing `<pre class="rf-code-block">`. Nested forms (snippet inside
@@ -14,17 +14,16 @@
  * SPEC-062.
  */
 
-.rf-snippet {
-	/* Override the UA `<figure>` defaults — browsers ship with
+	.rf-snippet {
+		/* Override the UA `<figure>` defaults — browsers ship with
 	 * margin-inline: 40px and margin-block: 1em which makes the snippet
 	 * figure look indented inside any container. The longhand resets
 	 * cover both physical and logical margin properties because the
 	 * physical longhands set by `margin:` don't always cascade-override
 	 * the UA's logical longhands. */
-	margin: var(--rf-spacing-md) 0;
-	margin-inline-start: 0;
-	margin-inline-end: 0;
-	padding: 0;
-}
-
+		margin: var(--rf-spacing-md) 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+		padding: 0;
+	}
 }

package/styles/runes/spacing.css

@@ -1,98 +1,96 @@
 @layer skin {
-
-/* WORK-538 — resting title size, so the prominence ramp computes from it
+	/* WORK-538 — resting title size, so the prominence ramp computes from it
  * rather than from the density default. */
-.rf-spacing {
-	--rf-title-size: var(--rf-text-lg);
-}
+	.rf-spacing {
+		--rf-title-size: var(--rf-text-lg);
+	}
 
-/* Spacing — spacing scale, radii, and shadow display */
-.rf-spacing__title {
-	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	/* Spacing — spacing scale, radii, and shadow display */
+	.rf-spacing__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-bottom: 1rem;
-}
-.rf-spacing__section {
-	margin-bottom: 2rem;
-}
-.rf-spacing__section:last-child {
-	margin-bottom: 0;
-}
-.rf-spacing__section-title {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-	color: var(--rf-color-muted);
-	margin-bottom: 0.75rem;
-}
-
-/* Spacing scale — proportional bars */
-.rf-spacing__scale {
-	gap: 0.375rem;
-}
-.rf-spacing__scale-item {
-	gap: 0.75rem;
-}
-.rf-spacing__scale-bar {
-	background: var(--rf-color-primary);
-	border-radius: var(--rf-radius-sm, 4px);
-	opacity: 0.8;
-}
-.rf-spacing__scale-label {
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-text, #1a1a2e);
-	white-space: nowrap;
-}
-.rf-spacing__scale-multiplier {
-	color: var(--rf-color-muted);
-	margin-left: 0.25rem;
-}
+		font-size: var(--rf-prominence-size, var(--rf-title-size));
+		font-weight: var(--rf-weight-semibold);
+		margin-bottom: 1rem;
+	}
+	.rf-spacing__section {
+		margin-bottom: 2rem;
+	}
+	.rf-spacing__section:last-child {
+		margin-bottom: 0;
+	}
+	.rf-spacing__section-title {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+		color: var(--rf-color-muted);
+		margin-bottom: 0.75rem;
+	}
 
-/* Radius — rounded corner samples */
-.rf-spacing__radii {
-	gap: 1.25rem;
-}
-.rf-spacing__radius-item {
-	gap: 0.375rem;
-}
-.rf-spacing__radius-sample {
-	border: 2px solid var(--rf-color-border, #e5e7eb);
-	background: var(--rf-color-surface-raised, #f9fafb);
-}
-.rf-spacing__radius-label {
-	font-weight: var(--rf-weight-medium);
-	font-size: var(--rf-text-xs);
-}
-.rf-spacing__radius-value {
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-muted);
-}
+	/* Spacing scale — proportional bars */
+	.rf-spacing__scale {
+		gap: 0.375rem;
+	}
+	.rf-spacing__scale-item {
+		gap: 0.75rem;
+	}
+	.rf-spacing__scale-bar {
+		background: var(--rf-color-primary);
+		border-radius: var(--rf-radius-sm, 4px);
+		opacity: 0.8;
+	}
+	.rf-spacing__scale-label {
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-mono, monospace);
+		color: var(--rf-color-text, #1a1a2e);
+		white-space: nowrap;
+	}
+	.rf-spacing__scale-multiplier {
+		color: var(--rf-color-muted);
+		margin-left: 0.25rem;
+	}
 
-/* Shadows — sample cards */
-.rf-spacing__shadows {
-	gap: 1.5rem;
-}
-.rf-spacing__shadow-item {
-	gap: 0.5rem;
-}
-.rf-spacing__shadow-sample {
-	background: var(--rf-color-surface, #fff);
-	border-radius: var(--rf-radius-md, 8px);
-}
-.rf-spacing__shadow-label {
-	font-weight: var(--rf-weight-medium);
-	font-size: var(--rf-text-xs);
-}
+	/* Radius — rounded corner samples */
+	.rf-spacing__radii {
+		gap: 1.25rem;
+	}
+	.rf-spacing__radius-item {
+		gap: 0.375rem;
+	}
+	.rf-spacing__radius-sample {
+		border: 2px solid var(--rf-color-border, #e5e7eb);
+		background: var(--rf-color-surface-raised, #f9fafb);
+	}
+	.rf-spacing__radius-label {
+		font-weight: var(--rf-weight-medium);
+		font-size: var(--rf-text-xs);
+	}
+	.rf-spacing__radius-value {
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-mono, monospace);
+		color: var(--rf-color-muted);
+	}
 
-/* Context-aware: no outer margin when inside design-context */
-.rf-spacing--in-design-context {
-	margin: 0;
-}
+	/* Shadows — sample cards */
+	.rf-spacing__shadows {
+		gap: 1.5rem;
+	}
+	.rf-spacing__shadow-item {
+		gap: 0.5rem;
+	}
+	.rf-spacing__shadow-sample {
+		background: var(--rf-color-surface, #fff);
+		border-radius: var(--rf-radius-md, 8px);
+	}
+	.rf-spacing__shadow-label {
+		font-weight: var(--rf-weight-medium);
+		font-size: var(--rf-text-xs);
+	}
 
+	/* Context-aware: no outer margin when inside design-context */
+	.rf-spacing--in-design-context {
+		margin: 0;
+	}
 }

package/styles/runes/spec.css

@@ -1,33 +1,32 @@
 @layer skin {
-/* Spec */
+	/* Spec */
 
-/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+	/* SPEC-079: eyebrow + metadata zone names replace header-primary /
  * header-secondary. Layout-level geometry lives on [data-zone-layout]
  * selectors. */
 
-.rf-spec__eyebrow {
-	margin-bottom: 0.75rem;
-}
-.rf-spec__title h1,
-.rf-spec__title h2,
-.rf-spec__title h3 {
-	margin-top: 0;
-}
-
-.rf-spec__metadata {
-	margin-bottom: 1.5rem;
-}
+	.rf-spec__eyebrow {
+		margin-bottom: 0.75rem;
+	}
+	.rf-spec__title h1,
+	.rf-spec__title h2,
+	.rf-spec__title h3 {
+		margin-top: 0;
+	}
 
-.rf-spec__body {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-spec__body blockquote {
-	border-left: 3px solid var(--rf-color-border);
-	padding: 0.5rem 1rem;
-	margin: 0.75rem 0;
-	font-style: italic;
-	color: var(--rf-color-muted);
-}
+	.rf-spec__metadata {
+		margin-bottom: 1.5rem;
+	}
 
+	.rf-spec__body {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-spec__body blockquote {
+		border-left: 3px solid var(--rf-color-border);
+		padding: 0.5rem 1rem;
+		margin: 0.75rem 0;
+		font-style: italic;
+		color: var(--rf-color-muted);
+	}
 }