@refrakt-md/lumina 0.22.0 → 0.23.0

package/styles/runes/progress.css

@@ -1,49 +1,30 @@
-/* progress — generic completion bar (SPEC-072 / WORK-285).
- *
- * Presentational: the fill width is driven by the `--rf-progress` custom
- * property set on the root from the computed percent. Generalized from the
- * former plan milestone progress bar.
- */
-
+@layer skin {
+/* progress — skin. The flex row, value auto-push, track box, and fill box live in
+ * @refrakt-md/skeleton (styles/runes/progress.css). */
 .rf-progress {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
 	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
 	margin: var(--rf-spacing-sm) 0;
 }
-
 .rf-progress__label {
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
-
 .rf-progress__value {
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
-	margin-left: auto;
 }
-
 .rf-progress__track {
-	flex-basis: 100%;
-	height: 0.5rem;
 	border-radius: var(--rf-radius-pill, 999px);
 	background: var(--rf-color-surface-hover);
-	overflow: hidden;
 }
-
 .rf-progress__fill {
-	display: block;
-	height: 100%;
-	width: var(--rf-progress, 0%);
 	border-radius: inherit;
 	background: var(--rf-color-primary);
 	transition: width 0.3s ease;
 }
-
-/* Sentiment variants tint the fill; the neutral default uses the primary.
- * Token names follow the sentiment scheme in dimensions/metadata.css
- * (positive→success, caution→warning, negative→danger). */
+/* Sentiment variants tint the fill. */
 .rf-progress--positive .rf-progress__fill { background: var(--rf-color-success); }
 .rf-progress--caution .rf-progress__fill { background: var(--rf-color-warning); }
 .rf-progress--negative .rf-progress__fill { background: var(--rf-color-danger); }
+
+}

package/styles/runes/pullquote.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* PullQuote */
 .rf-pullquote {
 	margin: 2rem 0;
@@ -10,13 +11,9 @@
 	color: var(--rf-color-text);
 	background: none;
 	border-radius: 0;
-	position: relative;
 }
 .rf-pullquote::before {
 	content: '\201C';
-	position: absolute;
-	top: -0.25rem;
-	left: 0;
 	/* Decorative oversized quote glyph — a display one-off above the type scale. */
 	font-size: 4rem;
 	font-style: normal;
@@ -36,40 +33,23 @@
 .rf-pullquote--center {
 	text-align: center;
 	max-width: 80%;
-	margin-left: auto;
-	margin-right: auto;
-}
-.rf-pullquote--center::before {
-	left: 50%;
-	transform: translateX(-50%);
 }
 .rf-pullquote--left {
 	text-align: left;
 	border-left: 2px solid var(--rf-color-primary);
 	padding-left: 1.5rem;
 }
-.rf-pullquote--left::before {
-	display: none;
-}
 .rf-pullquote--right {
 	text-align: right;
 	border-right: 2px solid var(--rf-color-primary);
 	padding-right: 1.5rem;
-	margin-left: auto;
-}
-.rf-pullquote--right::before {
-	display: none;
 }
 
 /* Float modes — left/right pull quotes can float for text wrapping */
 .rf-pullquote[data-align="left"] {
-	float: left;
-	width: 40%;
 	margin: 0.5rem 2rem 1rem 0;
 }
 .rf-pullquote[data-align="right"] {
-	float: right;
-	width: 40%;
 	margin: 0.5rem 0 1rem 2rem;
 }
 
@@ -92,9 +72,6 @@
 	font-family: Georgia, 'Times New Roman', serif;
 	letter-spacing: var(--rf-tracking-normal);
 }
-.rf-pullquote--editorial::before {
-	display: none;
-}
 
 /* Reset inner blockquote — global blockquote styles shouldn't apply here */
 .rf-pullquote blockquote {
@@ -113,11 +90,11 @@
 @media (max-width: 768px) {
 	.rf-pullquote[data-align="left"],
 	.rf-pullquote[data-align="right"] {
-		float: none;
-		width: 100%;
 		margin: 1.5rem 0;
 	}
 	.rf-pullquote--center {
 		max-width: 100%;
 	}
 }
+
+}

package/styles/runes/realm.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Realm — split/stacked geometry, the title, and the metadata def-list all
  * come from the shared layers: layouts/split.css ([data-layout] +
  * [data-section="media"]), dimensions/sections.css ([data-section="title"] /
@@ -28,12 +29,6 @@
 	row-gap: var(--rf-realm-media-gap);
 }
 
-/* Stacked layouts — beside layouts handled by shared split.css */
-.rf-realm[data-media-position="top"] {
-	display: flex;
-	flex-direction: column;
-}
-
 .rf-realm[data-media-position="top"] > .rf-realm__scene {
 	margin-bottom: var(--rf-realm-media-gap);
 }
@@ -43,8 +38,6 @@
 
 /* Content */
 .rf-realm__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-realm__content ul,
@@ -58,7 +51,6 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-realm-section__name {
-	display: block;
 	font-size: var(--rf-text-xl);
 	font-weight: var(--rf-weight-bold);
 	line-height: var(--rf-leading-snug);
@@ -69,3 +61,5 @@
 .rf-realm-section__body ol {
 	padding-left: 1.5rem;
 }
+
+}

package/styles/runes/recipe.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Recipe — editorial cookbook aesthetic */
 
 /* Thin-edge inset model (matches `.rf-card`): card outer padding is a thin edge,
@@ -57,8 +58,6 @@
 
 /* Content wrapper */
 .rf-recipe__content {
-	display: flex;
-	flex-direction: column;
 	gap: 1.75rem;
 }
 
@@ -83,29 +82,16 @@
 .rf-recipe__content ol {
 	padding-left: 0;
 	margin: 0;
-	list-style: none;
-	counter-reset: recipe-step;
 }
 .rf-recipe__content ol > li {
-	counter-increment: recipe-step;
 	padding: 0.625rem 0;
 	padding-left: 2.25rem;
-	position: relative;
 	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 {
-	content: counter(recipe-step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
@@ -140,23 +126,13 @@
 .rf-recipe__media img {
 	border-radius: var(--rf-radius-media);
 }
-
-/* Metadata — prep / cook / serves / difficulty are short, symmetric facts,
- * so keep the def-list a dense tile grid at every width (a smaller column
- * min than the 8rem default) instead of the shared mobile label/value list. */
-.rf-recipe__metadata {
-	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
-}
 @media (max-width: 48rem) {
 	.rf-recipe__metadata {
-		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
 		gap: 0.75rem;
-		align-items: normal;
 		padding: 0;
 		border: none;
 	}
-	.rf-recipe__metadata > [data-name="row"] {
-		display: flex;
-	}
 }
 
+
+}

package/styles/runes/relationships.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* 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
@@ -16,8 +17,6 @@
 }
 
 .rf-relationships__items {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm);
 }
 
@@ -25,17 +24,7 @@
  * 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 {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__item {
-	display: flex;
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__item > * {
-	flex: 1;
-	min-width: 0;
 }
 
 /* Grouped grid: the grid belongs to each group (its items are the cells), not
@@ -44,24 +33,14 @@
  * 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) {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-md);
 }
 .rf-relationships[data-layout='grid'] .rf-relationships__group {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__group-title {
-	grid-column: 1 / -1;
 }
 
 .rf-relationships__group {
 	margin-top: var(--rf-spacing-md);
-	display: flex;
-	flex-direction: column;
 	/* Tight default for the built-in inline shape (title + field spans). */
 	gap: var(--rf-spacing-xs);
 }
@@ -84,18 +63,8 @@
 }
 
 .rf-relationships__item {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
 	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
 }
-/* Block-content item — let the body template (card / callout / etc.) fill the
- * container width instead of shrink-fitting. Same `data-block` signal as the
- * group spacing above; trim the template's outer block margins so the group
- * `gap` governs spacing (works for any block content, not a wrapper element). */
-.rf-relationships__item[data-block] {
-	display: block;
-}
 .rf-relationships__item[data-block] > :first-child {
 	margin-top: 0;
 }
@@ -105,8 +74,6 @@
 
 /* Card chrome for the grid built-in (mirrors collection's __card). */
 .rf-relationships__card {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-xs);
 	padding: var(--rf-spacing-md);
 	border: 1px solid var(--rf-color-border);
@@ -130,3 +97,5 @@
 	font-size: 0.875em;
 	color: var(--rf-color-muted);
 }
+
+}

package/styles/runes/reveal.css

@@ -1,4 +1,7 @@
-/* Reveal */
+@layer skin {
+/* 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;
 }
@@ -11,8 +14,6 @@
 	margin: 0 0 0.5rem;
 }
 .rf-reveal__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
@@ -24,7 +25,7 @@
 }
 .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 { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-reveal__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-reveal__headline {
 	margin-top: 0;
 }
@@ -36,8 +37,6 @@
 	margin-bottom: 1rem;
 }
 .rf-reveal__steps {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-reveal-step {
@@ -49,8 +48,6 @@
 }
 .rf-reveal-step--hidden {
 	opacity: 0;
-	height: 0;
-	overflow: hidden;
 	margin: 0;
 	transform: translateY(0.5rem);
 }
@@ -63,13 +60,9 @@
 	font-weight: var(--rf-weight-semibold);
 	margin: 0 0 0.5rem;
 }
-.rf-reveal-step__body > span[property],
-.rf-reveal-step__body > meta { display: none; }
 .rf-reveal-step__body p:last-child { margin-bottom: 0; }
 .rf-reveal__next,
 .rf-reveal__reset {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	margin-top: 1rem;
 	padding: 0.5rem 1.25rem;
@@ -86,3 +79,5 @@
 .rf-reveal__reset:hover {
 	background: var(--rf-color-border);
 }
+
+}

package/styles/runes/sandbox.css

@@ -1,34 +1,26 @@
-/* Sandbox — Isolated HTML/CSS/JS rendering via iframe */
+@layer skin {
+/* Sandbox — skin. The iframe clip/fill + banner/poster/activate layout live in
+ * @refrakt-md/skeleton (styles/runes/sandbox.css). */
 .rf-sandbox {
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
-
 .rf-sandbox iframe {
-	display: block;
-	width: 100%;
 	border: none;
 }
-
 /* Static fallback (pre/code shown before hydration) */
 .rf-sandbox pre {
 	margin: 0;
 }
-
 /* When inside preview, remove sandbox margin */
 .rf-preview .rf-sandbox {
 	margin: 0;
 	border-radius: 0;
 }
-
-/* Untrusted-mode affordance: persistent banner the iframe can't suppress.
-   Rendered by the RfSandbox custom element when `data-security-mode="untrusted"`. */
+/* Untrusted-mode affordance. */
 .rf-sandbox[data-security-mode="untrusted"] {
 	border: 1px solid var(--rf-color-warning, #b45309);
 }
-
 .rf-sandbox__untrusted-banner {
-	display: block;
 	padding: 0.5rem 0.75rem;
 	font-size: var(--rf-text-sm);
 	line-height: 1.25rem;
@@ -37,31 +29,10 @@
 	background: var(--rf-color-warning-bg, #fef3c7);
 	border-bottom: 1px solid var(--rf-color-warning, #b45309);
 }
-
-/* Deferred activation (WORK-381): poster shown until a non-eager sandbox
-   mounts. Rendered by the RfSandbox custom element from `data-poster`. */
 .rf-sandbox__poster {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 150px;
 	background: var(--rf-color-surface-2, var(--rf-color-surface, #f4f4f5));
 }
-
-.rf-sandbox__poster-image {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
 .rf-sandbox__activate {
-	position: relative;
-	z-index: 1;
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5ch;
 	padding: 0.5rem 1rem;
 	font: inherit;
@@ -73,17 +44,16 @@
 	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,16 +1,13 @@
+@layer skin {
 /* 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 {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
 /* Header */
 .rf-section__preamble {
-	display: flex;
-	flex-direction: column;
 	gap: 0.5rem;
 	max-width: var(--rf-measure, 65ch);
 	margin: 0;
@@ -24,8 +21,6 @@
 	margin: 0;
 }
 .rf-section__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
@@ -37,7 +32,7 @@
 }
 .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 { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-section__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-section__headline {
 	margin: 0;
 }
@@ -48,23 +43,14 @@
 .rf-section__image {
 	margin: 0;
 	border-radius: var(--rf-radius-md);
-	max-width: 100%;
-	height: auto;
-}
-
-/* Body — content-agnostic; fills the section width regardless of header align. */
-.rf-section__body {
-	width: 100%;
 }
 
 /* Header alignment (the body stays full width). */
 .rf-section[data-align="center"] .rf-section__preamble {
-	align-items: center;
 	text-align: center;
-	margin-inline: auto;
 }
 .rf-section[data-align="end"] .rf-section__preamble {
-	align-items: flex-end;
 	text-align: end;
-	margin-inline-start: auto;
+}
+
 }

package/styles/runes/showcase.css

@@ -1,23 +1,4 @@
-/* Showcase — `frameTarget: 'self'` media wrapper (SPEC-086). Shadow, aspect,
- * displacement, place, and crop anchor are now the shared `frame` chrome
- * (dimensions/frame.css), landing on the showcase root. This file keeps only
- * showcase's structural rules and its distinct value: breakout. */
-.rf-showcase {
-	position: relative;
-}
-.rf-showcase__viewport {
-	position: relative;
-}
-/* Breakout — a displaced showcase spills past a non-clipping ancestor; clipping
- * hosts (e.g. bento cells) keep it cropped (host-owned clip). */
-:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell)) {
-	overflow: visible;
-}
-/* Bento cell context — showcase fills remaining space */
-.rf-showcase--in-bento-cell {
-	flex: 1;
-	min-height: 0;
-}
+@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); }
@@ -36,3 +17,5 @@
 		margin-inline-end: 0;
 	}
 }
+
+}

package/styles/runes/sidenote.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Sidenote */
 .rf-sidenote {
 	margin: 1rem 0;
@@ -7,8 +8,6 @@
 .rf-sidenote--sidenote {
 	border-left: 3px solid var(--rf-color-primary);
 	padding: 0.75rem 1rem;
-	background: var(--rf-color-info-bg);
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	color: var(--rf-color-muted);
 }
 .rf-sidenote--footnote {
@@ -26,3 +25,5 @@
 }
 .rf-sidenote__body p { margin: 0; }
 .rf-sidenote__body p + p { margin-top: 0.5rem; }
+
+}

package/styles/runes/snippet.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Snippet — file embedded as a code block.
  *
  * The standalone form is a `<figure class="rf-snippet">` wrapping the
@@ -25,3 +26,5 @@
 	margin-inline-end: 0;
 	padding: 0;
 }
+
+}

package/styles/runes/spacing.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Spacing — spacing scale, radii, and shadow display */
 .rf-spacing__title {
 	font-size: var(--rf-text-lg);
@@ -21,28 +22,21 @@
 
 /* Spacing scale — proportional bars */
 .rf-spacing__scale {
-	display: flex;
-	flex-direction: column;
 	gap: 0.375rem;
 }
 .rf-spacing__scale-item {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 }
 .rf-spacing__scale-bar {
-	height: 1.25rem;
 	background: var(--rf-color-primary);
 	border-radius: var(--rf-radius-sm, 4px);
 	opacity: 0.8;
-	min-width: 4px;
 }
 .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;
-	flex-shrink: 0;
 }
 .rf-spacing__scale-multiplier {
 	color: var(--rf-color-muted);
@@ -51,20 +45,12 @@
 
 /* Radius — rounded corner samples */
 .rf-spacing__radii {
-	display: flex;
 	gap: 1.25rem;
-	flex-wrap: wrap;
-	align-items: flex-end;
 }
 .rf-spacing__radius-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	gap: 0.375rem;
 }
 .rf-spacing__radius-sample {
-	width: 3.5rem;
-	height: 3.5rem;
 	border: 2px solid var(--rf-color-border, #e5e7eb);
 	background: var(--rf-color-surface-raised, #f9fafb);
 }
@@ -80,19 +66,12 @@
 
 /* Shadows — sample cards */
 .rf-spacing__shadows {
-	display: flex;
 	gap: 1.5rem;
-	flex-wrap: wrap;
 }
 .rf-spacing__shadow-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	gap: 0.5rem;
 }
 .rf-spacing__shadow-sample {
-	width: 5rem;
-	height: 3.5rem;
 	background: var(--rf-color-surface, #fff);
 	border-radius: var(--rf-radius-md, 8px);
 }
@@ -105,3 +84,5 @@
 .rf-spacing--in-design-context {
 	margin: 0;
 }
+
+}

package/styles/runes/spec.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Spec */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -28,3 +29,5 @@
 	font-style: italic;
 	color: var(--rf-color-muted);
 }
+
+}