@refrakt-md/lumina 0.33.0 → 0.34.0

package/styles/runes/recipe.css

@@ -1,138 +1,136 @@
 @layer skin {
-/* Recipe — editorial cookbook aesthetic */
+	/* Recipe — editorial cookbook aesthetic */
 
-/* Thin-edge inset model (matches `.rf-card`): card outer padding is a thin edge,
+	/* Thin-edge inset model (matches `.rf-card`): card outer padding is a thin edge,
  * the content column adds the remaining inset back so text sits at the full
  * `--rune-padding` without negative-margin bleed. Unlike `card`, the split
  * layout keeps `align-items: start` (no `--split-valign: stretch`) — recipe
  * content can be very tall (ingredients + many steps + tips), so stretching the
  * media to match would crop the image hard. The image keeps its natural ratio
  * and any leftover height in the media column sits as quiet card padding. */
-.rf-recipe {
-	--rf-recipe-edge: 0.5rem;
-	--rf-recipe-media-gap: var(--rf-spacing-lg);
-	--rf-recipe-split-gap: var(--rf-spacing-sm);
-	padding: var(--rf-recipe-edge);
-}
+	.rf-recipe {
+		--rf-recipe-edge: 0.5rem;
+		--rf-recipe-media-gap: var(--rf-spacing-lg);
+		--rf-recipe-split-gap: var(--rf-spacing-sm);
+		padding: var(--rf-recipe-edge);
+	}
 
-.rf-recipe__content {
-	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-recipe-edge)));
-}
+	.rf-recipe__content {
+		padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-recipe-edge)));
+	}
 
-/* Direct grid properties (column-gap / row-gap) rather than overriding shared
+	/* Direct grid properties (column-gap / row-gap) rather than overriding shared
  * media-position layout vars — the per-rune rules win via selector specificity
  * and stay in our control regardless of inline styles. */
-.rf-recipe[data-media-position="start"],
-.rf-recipe[data-media-position="end"] {
-	column-gap: var(--rf-recipe-split-gap);
-	row-gap: var(--rf-recipe-media-gap);
-}
+	.rf-recipe[data-media-position="start"],
+	.rf-recipe[data-media-position="end"] {
+		column-gap: var(--rf-recipe-split-gap);
+		row-gap: var(--rf-recipe-media-gap);
+	}
 
-.rf-recipe[data-media-position="top"] > [data-section="media"] {
-	margin-bottom: var(--rf-recipe-media-gap);
-}
-.rf-recipe[data-media-position="bottom"] > [data-section="media"] {
-	margin-top: var(--rf-recipe-media-gap);
-}
+	.rf-recipe[data-media-position="top"] > [data-section="media"] {
+		margin-bottom: var(--rf-recipe-media-gap);
+	}
+	.rf-recipe[data-media-position="bottom"] > [data-section="media"] {
+		margin-top: var(--rf-recipe-media-gap);
+	}
 
-.rf-recipe .rf-recipe__eyebrow {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	letter-spacing: var(--rf-tracking-wider);
-	text-transform: uppercase;
-	color: var(--rf-color-primary);
-	margin: 0 0 0.375rem;
-}
-.rf-recipe__headline {
-	margin-top: 0;
-	margin-bottom: 0.25rem;
-}
-.rf-recipe .rf-recipe__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-	max-width: 40rem;
-}
-.rf-recipe__image {
-	margin-bottom: 1rem;
-}
+	.rf-recipe .rf-recipe__eyebrow {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		letter-spacing: var(--rf-tracking-wider);
+		text-transform: uppercase;
+		color: var(--rf-color-primary);
+		margin: 0 0 0.375rem;
+	}
+	.rf-recipe__headline {
+		margin-top: 0;
+		margin-bottom: 0.25rem;
+	}
+	.rf-recipe .rf-recipe__blurb {
+		color: var(--rf-color-muted);
+		margin-bottom: 0;
+		max-width: 40rem;
+	}
+	.rf-recipe__image {
+		margin-bottom: 1rem;
+	}
 
-/* Content wrapper */
-.rf-recipe__content {
-	gap: 1.75rem;
-}
+	/* Content wrapper */
+	.rf-recipe__content {
+		gap: 1.75rem;
+	}
 
-/* Ingredients — surfaced zone with custom markers */
-.rf-recipe__content ul {
-	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
-	list-style: disc;
-	margin: 0;
-}
-.rf-recipe__content ul li {
-	padding: 0.2rem 0;
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-recipe__content ul li::marker {
-	color: var(--rf-color-primary);
-}
+	/* Ingredients — surfaced zone with custom markers */
+	.rf-recipe__content ul {
+		background: var(--rf-color-surface);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		padding: 1.25rem 1.25rem 1.25rem 2.5rem;
+		list-style: disc;
+		margin: 0;
+	}
+	.rf-recipe__content ul li {
+		padding: 0.2rem 0;
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-recipe__content ul li::marker {
+		color: var(--rf-color-primary);
+	}
 
-/* Steps — numbered with styled counters */
-.rf-recipe__content ol {
-	padding-left: 0;
-	margin: 0;
-}
-.rf-recipe__content ol > li {
-	padding: 0.625rem 0;
-	padding-left: 2.25rem;
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-recipe__content ol > li + li {
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-recipe__content ol > li::before {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-primary);
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-full);
-}
+	/* Steps — numbered with styled counters */
+	.rf-recipe__content ol {
+		padding-left: 0;
+		margin: 0;
+	}
+	.rf-recipe__content ol > li {
+		padding: 0.625rem 0;
+		padding-left: 2.25rem;
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-recipe__content ol > li + li {
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-recipe__content ol > li::before {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-primary);
+		background: var(--rf-color-surface);
+		border-radius: var(--rf-radius-full);
+	}
 
-.rf-recipe__content ol > li > p,
-.rf-recipe__content ul > li > p {
-	margin: 0;
-}
+	.rf-recipe__content ol > li > p,
+	.rf-recipe__content ul > li > p {
+		margin: 0;
+	}
 
-/* Tips — callout accent like hint */
-.rf-recipe__content blockquote {
-	border-left: 2px solid var(--rf-color-primary);
-	background: var(--rf-color-surface);
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
-	padding: 0.75rem 1.25rem;
-	margin: 0;
-	font-size: var(--rf-text-sm);
-	font-style: italic;
-	color: var(--rf-color-muted);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-recipe__content blockquote p {
-	margin: 0;
-}
+	/* Tips — callout accent like hint */
+	.rf-recipe__content blockquote {
+		border-left: 2px solid var(--rf-color-primary);
+		background: var(--rf-color-surface);
+		border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
+		padding: 0.75rem 1.25rem;
+		margin: 0;
+		font-size: var(--rf-text-sm);
+		font-style: italic;
+		color: var(--rf-color-muted);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-recipe__content blockquote p {
+		margin: 0;
+	}
 
-/* Media zone — base sizing/clip come from the shared [data-section="media"]
+	/* Media zone — base sizing/clip come from the shared [data-section="media"]
  * rule in split.css. The image uses the media radius tier so it reads as a
  * guest nested inside the (larger-radius) recipe card. */
-.rf-recipe__media img {
-	border-radius: var(--rf-radius-media);
-}
-@media (max-width: 48rem) {
-	.rf-recipe__metadata {
-		gap: 0.75rem;
-		padding: 0;
-		border: none;
+	.rf-recipe__media img {
+		border-radius: var(--rf-radius-media);
+	}
+	@media (max-width: 48rem) {
+		.rf-recipe__metadata {
+			gap: 0.75rem;
+			padding: 0;
+			border: none;
+		}
 	}
-}
-
-
 }

package/styles/runes/relationships.css

@@ -1,101 +1,102 @@
 @layer skin {
-/* Relationships — an entity's graph edges, grouped by kind (SPEC-072).
+	/* Relationships — an entity's graph edges, grouped by kind (SPEC-072).
  *
  * Generic over kind: the rune emits `data-kind` on each item and a humanized
  * group heading per kind. Mirrors collection's list chrome.
  */
 
-.rf-relationships {
-	margin: var(--rf-spacing-md) 0;
-}
+	.rf-relationships {
+		margin: var(--rf-spacing-md) 0;
+	}
 
-.rf-relationships__preamble > :first-child { margin-top: 0; }
+	.rf-relationships__preamble > :first-child {
+		margin-top: 0;
+	}
 
-.rf-relationships__empty {
-	color: var(--rf-color-muted);
-	font-size: 0.9375em;
-}
+	.rf-relationships__empty {
+		color: var(--rf-color-muted);
+		font-size: 0.9375em;
+	}
 
-.rf-relationships__items {
-	gap: var(--rf-spacing-sm);
-}
+	.rf-relationships__items {
+		gap: var(--rf-spacing-sm);
+	}
 
-/* grid arranges edges into responsive columns; list stays a stacked flow.
+	/* grid arranges edges into responsive columns; list stays a stacked flow.
  * Mirrors collection: item chrome comes from the item (the card built-in, or
  * a {% card %} in the body template), not the layout. */
-.rf-relationships[data-layout='grid'] .rf-relationships__items {
-	gap: var(--rf-spacing-md);
-}
+	.rf-relationships[data-layout="grid"] .rf-relationships__items {
+		gap: var(--rf-spacing-md);
+	}
 
-/* Grouped grid: the grid belongs to each group (its items are the cells), not
+	/* Grouped grid: the grid belongs to each group (its items are the cells), not
  * to __items — whose children are the group blocks (or the accordion wrapper).
  * Left on __items, each group collapses into a single column. So __items stacks
  * the groups and each group becomes the grid, with its title spanning. */
-.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-relationships__group),
-.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-accordion) {
-	gap: var(--rf-spacing-md);
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__group {
-	gap: var(--rf-spacing-md);
-}
+	.rf-relationships[data-layout="grid"] .rf-relationships__items:has(.rf-relationships__group),
+	.rf-relationships[data-layout="grid"] .rf-relationships__items:has(.rf-accordion) {
+		gap: var(--rf-spacing-md);
+	}
+	.rf-relationships[data-layout="grid"] .rf-relationships__group {
+		gap: var(--rf-spacing-md);
+	}
 
-.rf-relationships__group {
-	margin-top: var(--rf-spacing-md);
-	/* Tight default for the built-in inline shape (title + field spans). */
-	gap: var(--rf-spacing-xs);
-}
-.rf-relationships__group:first-child {
-	margin-top: 0;
-}
-/* Modestly roomier when items carry a body template (block content — more than
+	.rf-relationships__group {
+		margin-top: var(--rf-spacing-md);
+		/* Tight default for the built-in inline shape (title + field spans). */
+		gap: var(--rf-spacing-xs);
+	}
+	.rf-relationships__group:first-child {
+		margin-top: 0;
+	}
+	/* Modestly roomier when items carry a body template (block content — more than
  * a one-liner). Body-template items are marked `data-block` by the resolver;
  * the built-in inline title+field rows are not. */
-.rf-relationships__group:has(.rf-relationships__item[data-block]) {
-	gap: var(--rf-spacing-sm);
-}
+	.rf-relationships__group:has(.rf-relationships__item[data-block]) {
+		gap: var(--rf-spacing-sm);
+	}
 
-.rf-relationships__group-title {
-	margin: 0 0 var(--rf-spacing-sm);
-	font-size: 0.875em;
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-	color: var(--rf-color-muted);
-}
+	.rf-relationships__group-title {
+		margin: 0 0 var(--rf-spacing-sm);
+		font-size: 0.875em;
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+		color: var(--rf-color-muted);
+	}
 
-.rf-relationships__item {
-	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
-}
-.rf-relationships__item[data-block] > :first-child {
-	margin-top: 0;
-}
-.rf-relationships__item[data-block] > :last-child {
-	margin-bottom: 0;
-}
+	.rf-relationships__item {
+		gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+	}
+	.rf-relationships__item[data-block] > :first-child {
+		margin-top: 0;
+	}
+	.rf-relationships__item[data-block] > :last-child {
+		margin-bottom: 0;
+	}
 
-/* Card chrome for the grid built-in (mirrors collection's __card). */
-.rf-relationships__card {
-	gap: var(--rf-spacing-xs);
-	padding: var(--rf-spacing-md);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
-}
-.rf-relationships__card:hover {
-	background: var(--rf-color-surface-hover);
-}
+	/* Card chrome for the grid built-in (mirrors collection's __card). */
+	.rf-relationships__card {
+		gap: var(--rf-spacing-xs);
+		padding: var(--rf-spacing-md);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		background: var(--rf-color-surface);
+	}
+	.rf-relationships__card:hover {
+		background: var(--rf-color-surface-hover);
+	}
 
-.rf-relationships__title {
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-	text-decoration: none;
-}
-.rf-relationships__title:hover {
-	color: var(--rf-color-primary);
-}
-
-.rf-relationships__field {
-	font-size: 0.875em;
-	color: var(--rf-color-muted);
-}
+	.rf-relationships__title {
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+		text-decoration: none;
+	}
+	.rf-relationships__title:hover {
+		color: var(--rf-color-primary);
+	}
 
+	.rf-relationships__field {
+		font-size: 0.875em;
+		color: var(--rf-color-muted);
+	}
 }

package/styles/runes/reveal.css

@@ -1,83 +1,94 @@
 @layer skin {
-/* Reveal — skin. The eyebrow stretched-link, steps flex, hidden-step collapse,
+	/* Reveal — skin. The eyebrow stretched-link, steps flex, hidden-step collapse,
  * metadata hide, and control flex live in @refrakt-md/skeleton
  * (styles/runes/reveal.css). */
-.rf-reveal__preamble {
-	margin-bottom: 1.5rem;
-}
-.rf-reveal__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 0 0.5rem;
-}
-.rf-reveal__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-reveal__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-reveal__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
-.rf-reveal__eyebrow:has(a) a::before { border-radius: inherit; }
-.rf-reveal__headline {
-	margin-top: 0;
-}
-.rf-reveal__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-}
-.rf-reveal__image {
-	margin-bottom: 1rem;
-}
-.rf-reveal__steps {
-	gap: 1rem;
-}
-.rf-reveal-step {
-	transition: opacity 0.3s ease, transform 0.3s ease;
-}
-.rf-reveal-step--visible {
-	opacity: 1;
-	transform: translateY(0);
-}
-.rf-reveal-step--hidden {
-	opacity: 0;
-	margin: 0;
-	transform: translateY(0.5rem);
-}
-.rf-reveal-step__content {
-	padding: 1rem 0;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-reveal-step__title {
-	font-size: var(--rf-text-lg);
-	font-weight: var(--rf-weight-semibold);
-	margin: 0 0 0.5rem;
-}
-.rf-reveal-step__body p:last-child { margin-bottom: 0; }
-.rf-reveal__next,
-.rf-reveal__reset {
-	gap: 0.5rem;
-	margin-top: 1rem;
-	padding: 0.5rem 1.25rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
-	color: var(--rf-color-text);
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-medium);
-	cursor: pointer;
-	transition: background 0.15s;
-}
-.rf-reveal__next:hover,
-.rf-reveal__reset:hover {
-	background: var(--rf-color-border);
-}
-
+	.rf-reveal__preamble {
+		margin-bottom: 1.5rem;
+	}
+	.rf-reveal__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 0 0.5rem;
+	}
+	.rf-reveal__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-reveal__eyebrow:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	.rf-reveal__eyebrow:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-reveal__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-reveal__headline {
+		margin-top: 0;
+	}
+	.rf-reveal__blurb {
+		color: var(--rf-color-muted);
+		margin-bottom: 0;
+	}
+	.rf-reveal__image {
+		margin-bottom: 1rem;
+	}
+	.rf-reveal__steps {
+		gap: 1rem;
+	}
+	.rf-reveal-step {
+		transition:
+			opacity 0.3s ease,
+			transform 0.3s ease;
+	}
+	.rf-reveal-step--visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	.rf-reveal-step--hidden {
+		opacity: 0;
+		margin: 0;
+		transform: translateY(0.5rem);
+	}
+	.rf-reveal-step__content {
+		padding: 1rem 0;
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-reveal-step__title {
+		font-size: var(--rf-text-lg);
+		font-weight: var(--rf-weight-semibold);
+		margin: 0 0 0.5rem;
+	}
+	.rf-reveal-step__body p:last-child {
+		margin-bottom: 0;
+	}
+	.rf-reveal__next,
+	.rf-reveal__reset {
+		gap: 0.5rem;
+		margin-top: 1rem;
+		padding: 0.5rem 1.25rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		background: var(--rf-color-surface);
+		color: var(--rf-color-text);
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-medium);
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+	.rf-reveal__next:hover,
+	.rf-reveal__reset:hover {
+		background: var(--rf-color-border);
+	}
 }