@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/accordion.css

@@ -1,87 +1,96 @@
 @layer skin {
-/* Accordion — skin. The eyebrow stretched-link, items passthrough, header flex +
+	/* Accordion — skin. The eyebrow stretched-link, items passthrough, header flex +
  * chevron box/glyph/rotate mechanism, title/count flex, and the ::details-content
  * collapse mechanism live in @refrakt-md/skeleton (styles/runes/accordion.css).
  * No wrapping border / radius — the only chrome is the divider between items. */
-.rf-accordion__preamble {
-	margin-bottom: 1.5rem;
-}
-.rf-accordion__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-accordion__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-accordion__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
-.rf-accordion__eyebrow:has(a) a::before { border-radius: inherit; }
-.rf-accordion__headline {
-	margin-top: 0;
-}
-.rf-accordion__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-}
-.rf-accordion__image {
-	margin-bottom: 1rem;
-}
-.rf-accordion-item {
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-accordion-item:last-child {
-	border-bottom: none;
-}
-.rf-accordion-item__header {
-	gap: 0.5rem;
-	padding: 0.875rem 0rem;
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text);
-	cursor: pointer;
-	user-select: none;
-}
-/* Chevron tint + rotate animation (the box + glyph + the open-rotate are
+	.rf-accordion__preamble {
+		margin-bottom: 1.5rem;
+	}
+	.rf-accordion__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-accordion__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-accordion__eyebrow:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	.rf-accordion__eyebrow:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-accordion__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-accordion__headline {
+		margin-top: 0;
+	}
+	.rf-accordion__blurb {
+		color: var(--rf-color-muted);
+		margin-bottom: 0;
+	}
+	.rf-accordion__image {
+		margin-bottom: 1rem;
+	}
+	.rf-accordion-item {
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-accordion-item:last-child {
+		border-bottom: none;
+	}
+	.rf-accordion-item__header {
+		gap: 0.5rem;
+		padding: 0.875rem 0rem;
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text);
+		cursor: pointer;
+		user-select: none;
+	}
+	/* Chevron tint + rotate animation (the box + glyph + the open-rotate are
  * skeleton). */
-.rf-accordion-item__header::before {
-	background: var(--rf-color-muted);
-	transition: transform 200ms ease;
-}
-.rf-accordion-item__title {
-	/* flex sizing is skeleton */
-}
-/* Per-group count for collection/relationships group-display="accordion". */
-.rf-accordion-item__count {
-	/* flex-shrink is skeleton */
-}
-.rf-accordion-item::details-content {
-	transition: block-size 250ms ease, content-visibility 250ms allow-discrete;
-}
-.rf-accordion-item__body {
-	padding: 0 1.25rem 1rem;
-}
-/* Prose styles for the standalone accordion rune's bodies. */
-.rf-accordion-item__body:not(:has([data-block])) {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-	color: var(--rf-color-muted);
-}
-.rf-accordion-item__body p:last-child {
-	margin-bottom: 0;
-}
-/* Block-content panels get the small gap (the flex column is skeleton). */
-.rf-accordion-item__body:has([data-block]) {
-	gap: var(--rf-spacing-sm);
-}
-
+	.rf-accordion-item__header::before {
+		background: var(--rf-color-muted);
+		transition: transform 200ms ease;
+	}
+	.rf-accordion-item__title {
+		/* flex sizing is skeleton */
+	}
+	/* Per-group count for collection/relationships group-display="accordion". */
+	.rf-accordion-item__count {
+		/* flex-shrink is skeleton */
+	}
+	.rf-accordion-item::details-content {
+		transition:
+			block-size 250ms ease,
+			content-visibility 250ms allow-discrete;
+	}
+	.rf-accordion-item__body {
+		padding: 0 1.25rem 1rem;
+	}
+	/* Prose styles for the standalone accordion rune's bodies. */
+	.rf-accordion-item__body:not(:has([data-block])) {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+		color: var(--rf-color-muted);
+	}
+	.rf-accordion-item__body p:last-child {
+		margin-bottom: 0;
+	}
+	/* Block-content panels get the small gap (the flex column is skeleton). */
+	.rf-accordion-item__body:has([data-block]) {
+		gap: var(--rf-spacing-sm);
+	}
 }

package/styles/runes/aggregate.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Aggregate — counts and per-group breakdowns from the registry (SPEC-076).
+	/* Aggregate — counts and per-group breakdowns from the registry (SPEC-076).
  *
  * Two modes share the same block class. The no-body inline form is a `<span>`
  * carrying the integer; the body-zoned form is a `<section>` rendering
@@ -9,58 +9,69 @@
  * form.
  */
 
-/* Block container — vertical rhythm matches collection / relationships. The
+	/* Block container — vertical rhythm matches collection / relationships. The
  * bare selector also matches the inline form's `<span>`, but vertical margin
  * on an inline span has no effect so it's safe to share. */
-.rf-aggregate {
-	margin: var(--rf-spacing-md) 0;
-}
+	.rf-aggregate {
+		margin: var(--rf-spacing-md) 0;
+	}
 
-/* Inline single-number form — `<span class="rf-aggregate" data-aggregate="count">`.
+	/* Inline single-number form — `<span class="rf-aggregate" data-aggregate="count">`.
  * Tabular nums keep digits aligned when the count changes between renders;
  * weight tuned to stand out modestly in prose. */
-.rf-aggregate[data-aggregate='count'] {
-	font-variant-numeric: tabular-nums;
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-}
+	.rf-aggregate[data-aggregate="count"] {
+		font-variant-numeric: tabular-nums;
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+	}
 
-/* Preamble — totals chrome above the breakdown (e.g. a progress bar). Trim
+	/* Preamble — totals chrome above the breakdown (e.g. a progress bar). Trim
  * first/last-child block margins so the rune's outer rhythm wins over the
  * template's inner block margins (same pattern collection uses). */
-.rf-aggregate__preamble > :first-child { margin-top: 0; }
-.rf-aggregate__preamble > :last-child { margin-bottom: 0; }
+	.rf-aggregate__preamble > :first-child {
+		margin-top: 0;
+	}
+	.rf-aggregate__preamble > :last-child {
+		margin-bottom: 0;
+	}
 
-/* Empty state — replaces the breakdown when the query yields nothing. */
-.rf-aggregate__empty {
-	color: var(--rf-color-muted);
-	font-size: 0.9375em;
-}
-.rf-aggregate__empty > :first-child { margin-top: 0; }
-.rf-aggregate__empty > :last-child { margin-bottom: 0; }
+	/* Empty state — replaces the breakdown when the query yields nothing. */
+	.rf-aggregate__empty {
+		color: var(--rf-color-muted);
+		font-size: 0.9375em;
+	}
+	.rf-aggregate__empty > :first-child {
+		margin-top: 0;
+	}
+	.rf-aggregate__empty > :last-child {
+		margin-bottom: 0;
+	}
 
-/* Items — either the per-group breakdown row, or the ungrouped single-render
+	/* Items — either the per-group breakdown row, or the ungrouped single-render
  * slot. Default stack handles the ungrouped case (one block element from the
  * body). With groups, switch to a wrapping inline row so per-group renders
  * (badges, pills, …) flow across the page. */
-.rf-aggregate__items {
-	gap: var(--rf-spacing-sm);
-	margin-top: var(--rf-spacing-sm);
-}
-.rf-aggregate__items:has(.rf-aggregate__group) {
-	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
-}
+	.rf-aggregate__items {
+		gap: var(--rf-spacing-sm);
+		margin-top: var(--rf-spacing-sm);
+	}
+	.rf-aggregate__items:has(.rf-aggregate__group) {
+		gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+	}
 
-/* Direct children of __items (the ungrouped template render) — trim outer
+	/* Direct children of __items (the ungrouped template render) — trim outer
  * block margins so the rune's outer rhythm wins, same pattern as preamble /
  * empty. */
-.rf-aggregate__items > :first-child { margin-top: 0; }
-.rf-aggregate__items > :last-child { margin-bottom: 0; }
-.rf-aggregate__group[data-block] > :first-child {
-	margin-top: 0;
-}
-.rf-aggregate__group[data-block] > :last-child {
-	margin-bottom: 0;
-}
-
+	.rf-aggregate__items > :first-child {
+		margin-top: 0;
+	}
+	.rf-aggregate__items > :last-child {
+		margin-bottom: 0;
+	}
+	.rf-aggregate__group[data-block] > :first-child {
+		margin-top: 0;
+	}
+	.rf-aggregate__group[data-block] > :last-child {
+		margin-bottom: 0;
+	}
 }

package/styles/runes/annotate.css

@@ -1,51 +1,52 @@
 @layer skin {
-/* Annotate — skin. The body passthrough, margin float, inline/tooltip display +
+	/* Annotate — skin. The body passthrough, margin float, inline/tooltip display +
  * positioning + hover reveal, and metadata hide live in @refrakt-md/skeleton
  * (styles/runes/annotate.css). */
-.rf-annotate--margin .rf-annotate-note {
-	margin: 0.25rem 0 0.5rem 1rem;
-	padding: 0.5rem 0 0.5rem 1rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	border-left: 2px solid var(--rf-color-border);
-}
-.rf-annotate--inline .rf-annotate-note {
-	margin: 0 0.25rem;
-	padding: 0.125rem 0 0.125rem 0.5rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	border-left: 2px solid var(--rf-color-border);
-}
-.rf-annotate--tooltip .rf-annotate-note {
-	margin: 0 0.25rem;
-	padding: 0;
-	font-size: 0;
-}
-.rf-annotate--tooltip .rf-annotate-note::before {
-	content: '?';
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-primary);
-	border: 1px solid var(--rf-color-primary);
-	border-radius: var(--rf-radius-full, 50%);
-	cursor: help;
-}
-.rf-annotate--tooltip .rf-annotate-note__body {
-	padding: 0.75rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-text);
-	background: var(--rf-color-bg);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	margin-bottom: 0.5rem;
-}
-.rf-annotate-note__body p:last-child { margin-bottom: 0; }
-@media (max-width: 768px) {
 	.rf-annotate--margin .rf-annotate-note {
-		margin: 0.5rem 0 1rem;
-		padding: 0.75rem 1rem;
+		margin: 0.25rem 0 0.5rem 1rem;
+		padding: 0.5rem 0 0.5rem 1rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		border-left: 2px solid var(--rf-color-border);
+	}
+	.rf-annotate--inline .rf-annotate-note {
+		margin: 0 0.25rem;
+		padding: 0.125rem 0 0.125rem 0.5rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		border-left: 2px solid var(--rf-color-border);
+	}
+	.rf-annotate--tooltip .rf-annotate-note {
+		margin: 0 0.25rem;
+		padding: 0;
+		font-size: 0;
+	}
+	.rf-annotate--tooltip .rf-annotate-note::before {
+		content: "?";
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-primary);
+		border: 1px solid var(--rf-color-primary);
+		border-radius: var(--rf-radius-full, 50%);
+		cursor: help;
+	}
+	.rf-annotate--tooltip .rf-annotate-note__body {
+		padding: 0.75rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-text);
+		background: var(--rf-color-bg);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		margin-bottom: 0.5rem;
+	}
+	.rf-annotate-note__body p:last-child {
+		margin-bottom: 0;
+	}
+	@media (max-width: 768px) {
+		.rf-annotate--margin .rf-annotate-note {
+			margin: 0.5rem 0 1rem;
+			padding: 0.75rem 1rem;
+		}
 	}
-}
-
 }

package/styles/runes/api.css

@@ -1,29 +1,28 @@
 @layer skin {
-/* Api */
+	/* Api */
 
-/* SPEC-080: the endpoint header is a projected `eyebrow` bar (method + path
+	/* SPEC-080: the endpoint header is a projected `eyebrow` bar (method + path
  * + auth). Geometry + the auth right-push come from `[data-zone-layout="bar"]`
  * in dimensions/metadata.css; field shape (method/auth chips, path mono code)
  * is intrinsic to metaType. */
-.rf-api__eyebrow {
-	padding: 0.5rem 0;
-}
-.rf-api__body {
-	padding: 0;
-}
-.rf-api__body pre {
-	border-radius: var(--rf-radius-md);
-	margin: 1rem 0;
-}
-.rf-api__body blockquote {
-	border-left: 3px solid var(--rf-color-border);
-	padding: 0.5rem 1rem;
-	margin: 0.75rem 0;
-	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
-	font-size: var(--rf-text);
-}
-.rf-api__body blockquote::before {
-	content: none;
-}
-
+	.rf-api__eyebrow {
+		padding: 0.5rem 0;
+	}
+	.rf-api__body {
+		padding: 0;
+	}
+	.rf-api__body pre {
+		border-radius: var(--rf-radius-md);
+		margin: 1rem 0;
+	}
+	.rf-api__body blockquote {
+		border-left: 3px solid var(--rf-color-border);
+		padding: 0.5rem 1rem;
+		margin: 0.75rem 0;
+		border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
+		font-size: var(--rf-text);
+	}
+	.rf-api__body blockquote::before {
+		content: none;
+	}
 }