@refrakt-md/lumina 0.22.0 → 0.24.0

package/styles/runes/collection.css

@@ -1,134 +1,63 @@
-/* Collection — list / grid / table / cards of registry entities (SPEC-070).
- *
- * The block is layout-agnostic; the `data-layout` attribute on the wrapper
- * selects the arrangement. Built-in items carry `.rf-collection__card` /
- * `__item`; a body template emits its own markup inside `.rf-collection__item`.
- */
-
+@layer skin {
+/* Collection — skin. The list/grid arrangement, card flex column, and block-item
+ * display reset live in @refrakt-md/skeleton (styles/runes/collection.css). */
 .rf-collection {
 	margin: var(--rf-spacing-md) 0;
 }
-
-/* Preamble — rendered above items only when the query is non-empty, so a
- * heading/intro can live inside the rune and vanish with an empty section. */
 .rf-collection__preamble > :first-child { margin-top: 0; }
-
-/* Empty state — shown in place of items when the query yields nothing. */
 .rf-collection__empty {
 	color: var(--rf-color-muted);
 	font-size: 0.9375em;
 }
-
 .rf-collection__items {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm);
 }
-
-/* grid arranges items into responsive columns; list stays a stacked flow.
- * Item chrome (a card box, bare row, …) comes from the item, not the layout. */
 .rf-collection[data-layout='grid'] .rf-collection__items {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
-}
-
-/* Uniform heights per row: grid stretches each item to the tallest in its row;
- * a body-template item then lets its card fill that stretched height. */
-.rf-collection[data-layout='grid'] .rf-collection__item {
-	display: flex;
 }
-.rf-collection[data-layout='grid'] .rf-collection__item > * {
-	flex: 1;
-	min-width: 0;
-}
-
-/* Grouped grid: the grid belongs to each group (its items are the cells), not
- * to __items — whose children are the group blocks (heading groups) or the
- * accordion wrapper. Left on __items, each group becomes a single cell, i.e. a
- * column per group. So when __items holds groups it stacks them, and each
- * group becomes the grid instead, with the group title spanning every column. */
 .rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
 .rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-md);
 }
 .rf-collection[data-layout='grid'] .rf-collection__group {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
 }
-.rf-collection[data-layout='grid'] .rf-collection__group-title {
-	grid-column: 1 / -1;
-}
-
-.rf-collection__item {
-	min-width: 0;
-}
-
 .rf-collection__card {
-	display: flex;
-	flex-direction: column;
 	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-collection__card:hover {
 	background: var(--rf-color-surface-hover);
 }
-
 .rf-collection__title {
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	text-decoration: none;
 }
-
 .rf-collection__title:hover {
 	color: var(--rf-color-primary);
 }
-
 .rf-collection__field {
 	font-size: 0.875em;
 	color: var(--rf-color-muted);
 }
-
-/* grouping */
 .rf-collection__group {
 	margin-top: var(--rf-spacing-md);
-	display: flex;
-	flex-direction: column;
 	/* Tight default for short item rows (the built-in title link, no body). */
 	gap: var(--rf-spacing-xs);
 }
-/* Modestly roomier when items carry a body template (block content — a card,
- * callout, list, …), so they don't collide. Body-template items are marked
- * `data-block` by the resolver; the built-in inline title rows are not.
- * Mirrors the rf-relationships rule. */
 .rf-collection__group:has(.rf-collection__item[data-block]) {
 	gap: var(--rf-spacing-sm);
 }
-
-/* Block-content item — let the body template (card / callout / etc.) fill the
- * container instead of shrink-fitting. No-op in grid mode (items there are
- * already `display: flex` with `flex: 1` on the child). Trim the outer margins
- * of the template's first/last block so the group `gap` controls inter-item
- * spacing — works for any block content, not a wrapper element. */
-.rf-collection__item[data-block] {
-	display: block;
-}
 .rf-collection__item[data-block] > :first-child {
 	margin-top: 0;
 }
 .rf-collection__item[data-block] > :last-child {
 	margin-bottom: 0;
 }
-
 .rf-collection__group-title {
 	margin: 0 0 var(--rf-spacing-sm);
 	font-size: 0.875em;
@@ -136,31 +65,25 @@
 	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
-
 /* table layout */
 .rf-collection__table {
 	width: 100%;
 	border-collapse: collapse;
 }
-
 .rf-collection__table th,
 .rf-collection__table td {
 	padding: var(--rf-spacing-sm);
 	text-align: left;
 	border-bottom: 1px solid var(--rf-color-border);
 }
-
 .rf-collection__table th {
 	font-size: 0.875em;
 	text-transform: uppercase;
 	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
-
-/* Heading-template cells (`layout="table"` body) wrap their content as
- * markdown paragraphs, which pick up the global `p { margin-bottom: 1rem }`
- * and leave dead space inside each row. Drop it inside the table — table
- * cells don't want paragraph spacing. */
 .rf-collection__table td p {
 	margin: 0;
 }
+
+}

package/styles/runes/compare.css

@@ -1,8 +1,8 @@
+@layer skin {
 /* Compare */
 .rf-compare {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 .rf-compare__header {
 	padding: 0.5rem 1rem;
@@ -13,18 +13,6 @@
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
 }
-.rf-compare--side-by-side .rf-compare__panels {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-.rf-compare--stacked .rf-compare__panels {
-	display: flex;
-	flex-direction: column;
-}
-.rf-compare [data-panel] {
-	min-width: 0;
-	overflow: auto;
-}
 .rf-compare--side-by-side [data-panel] + [data-panel] {
 	border-left: 1px solid var(--rf-color-border);
 }
@@ -32,7 +20,6 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-compare [data-label] {
-	display: block;
 	padding: 0.5rem 1rem;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
@@ -50,3 +37,5 @@
 	border: none;
 	border-radius: 0;
 }
+
+}

package/styles/runes/comparison.css

@@ -1,14 +1,10 @@
-/* Comparison */
+@layer skin {
+/* Comparison — skin. The grid passthroughs, scroll/sticky geometry, cards grid,
+ * card flex + badge positioning, and metadata hiding live in @refrakt-md/skeleton
+ * (styles/runes/comparison.css). */
 .rf-comparison {
 	margin: 2rem 0;
 }
-.rf-comparison__grid {
-	display: contents;
-}
-.rf-comparison-column__body,
-.rf-comparison-row__body {
-	display: contents;
-}
 .rf-comparison__title {
 	text-align: center;
 	margin: 0 0 1.5rem;
@@ -16,12 +12,8 @@
 	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 }
-.rf-comparison > meta,
-.rf-comparison > span[property] { display: none; }
 /* Table layout */
 .rf-comparison__table-wrapper {
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
 	margin: 0 -1rem;
 	padding: 0 1rem;
 }
@@ -30,11 +22,6 @@
 	border-collapse: collapse;
 	font-size: var(--rf-text);
 }
-.rf-comparison__table thead {
-	position: sticky;
-	top: 0;
-	z-index: 1;
-}
 .rf-comparison__table th,
 .rf-comparison__table td {
 	padding: 0.75rem 1rem;
@@ -54,7 +41,6 @@
 	border-bottom-color: var(--rf-color-primary);
 }
 .rf-comparison__recommended-badge {
-	display: block;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
@@ -63,7 +49,6 @@
 	margin-top: 0.25rem;
 }
 .rf-comparison__label-col {
-	width: 1%;
 	white-space: nowrap;
 }
 .rf-comparison__row-label {
@@ -80,7 +65,6 @@
 	background: color-mix(in srgb, var(--rf-color-primary) 3%, transparent);
 }
 .rf-comparison__cell p { margin: 0; font-size: var(--rf-text-sm); }
-.rf-comparison__cell strong { display: none; }
 .rf-comparison__cell em {
 	font-style: italic;
 	color: var(--rf-color-muted);
@@ -110,7 +94,6 @@
 }
 /* Callout badge */
 .rf-comparison__callout-badge {
-	display: inline-block;
 	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
 	color: var(--rf-color-primary);
 	font-size: var(--rf-text-xs);
@@ -121,17 +104,13 @@
 .rf-comparison__callout-badge p { margin: 0; font-size: inherit; }
 /* Cards layout */
 .rf-comparison__cards {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 	gap: 1.5rem;
-	align-items: start;
 }
 .rf-comparison-card {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	padding: 1.5rem;
 	background: var(--rf-color-bg);
-	position: relative;
 	transition: box-shadow 200ms ease, transform 200ms ease;
 }
 .rf-comparison-card:hover {
@@ -143,10 +122,6 @@
 	transform: scale(1.02);
 }
 .rf-comparison-card__badge {
-	position: absolute;
-	top: -0.625rem;
-	left: 50%;
-	transform: translateX(-50%);
 	background: var(--rf-color-primary);
 	color: white;
 	font-size: var(--rf-text-xs);
@@ -164,7 +139,6 @@
 	color: var(--rf-color-text);
 }
 .rf-comparison-card__rows {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
@@ -173,13 +147,11 @@
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	border-bottom: 1px solid var(--rf-color-border);
-	display: flex;
-	align-items: baseline;
 	gap: 0.5rem;
 }
 .rf-comparison-card__row:last-child { border-bottom: none; }
 .rf-comparison-card__row strong { color: var(--rf-color-text); white-space: nowrap; }
-.rf-comparison-card__row p { margin: 0; display: inline; }
+.rf-comparison-card__row p { margin: 0; }
 .rf-comparison-card__row--negative { opacity: 0.7; }
 .rf-comparison-card__row--callout {
 	border-bottom: none;
@@ -203,9 +175,10 @@
 .rf-comparison-row { padding: 0.25rem 0; }
 /* Responsive */
 @media (max-width: 640px) {
-	.rf-comparison__cards { grid-template-columns: 1fr; }
 	.rf-comparison-card--highlighted { transform: none; }
 	.rf-comparison__table { font-size: var(--rf-text-sm); }
 	.rf-comparison__table th,
 	.rf-comparison__table td { padding: 0.5rem 0.625rem; }
 }
+
+}

package/styles/runes/conversation.css

@@ -1,28 +1,13 @@
-/* Conversation */
+@layer skin {
+/* Conversation — skin. The column stack, bubble flex/width/side-alignment, and the
+ * data-carrier hides live in @refrakt-md/skeleton (styles/runes/conversation.css). */
 .rf-conversation {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 	max-width: 40rem;
 }
 .rf-conversation__messages {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
-.rf-conversation-message {
-	display: flex;
-	flex-direction: column;
-	max-width: 80%;
-}
-.rf-conversation-message--left {
-	align-self: flex-start;
-	align-items: flex-start;
-}
-.rf-conversation-message--right {
-	align-self: flex-end;
-	align-items: flex-end;
-}
 .rf-conversation-message__speaker {
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
@@ -47,12 +32,5 @@
 }
 .rf-conversation-message__body p { margin: 0; }
 .rf-conversation-message__body p + p { margin-top: 0.5rem; }
-/* The speaker name lives inline-bold inside the bubble (the explicit form
- * authors it that way, and the named-speakers form injects it the same way),
- * so the property-carrier span is data only — hide it. Same for the meta
- * tags the engine consumes. `data-field` is the post-engine attribute set by
- * createComponentRenderable. */
-.rf-conversation-message > span[data-field="speaker"],
-.rf-conversation-message > meta[data-field] { display: none; }
-.rf-conversation-message__body > span[data-field],
-.rf-conversation-message__body > meta { display: none; }
+
+}

package/styles/runes/cta.css

@@ -1,4 +1,6 @@
-/* Call to Action */
+@layer skin {
+/* Call to Action — skin. The preamble/eyebrow/button-row layout + mobile stack
+ * live in @refrakt-md/skeleton (styles/runes/cta.css). */
 .rf-cta {
 	padding: 3.5rem 2rem 3rem;
 }
@@ -8,8 +10,6 @@
 	text-align: center;
 }
 .rf-cta__preamble {
-	flex-direction: column;
-	align-items: center;
 	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
@@ -25,8 +25,6 @@
 }
 /* Pill-badge variant when eyebrow contains a link */
 .rf-cta .rf-cta__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);
@@ -45,9 +43,6 @@
 	text-decoration: none;
 }
 .rf-cta .rf-cta__eyebrow:has(a) a::before {
-	content: '';
-	position: absolute;
-	inset: 0;
 	border-radius: inherit;
 }
 .rf-cta__image {
@@ -78,11 +73,7 @@
 	line-height: var(--rf-leading-relaxed);
 }
 .rf-cta ul {
-	display: flex;
 	gap: 0.75rem;
-	justify-content: center;
-	flex-wrap: wrap;
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
@@ -92,8 +83,6 @@
 }
 .rf-cta li a,
 .rf-cta nav a {
-	display: inline-flex;
-	align-items: center;
 	padding: 0.625rem 1.5rem;
 	border-radius: var(--rf-radius-sm);
 	text-decoration: none;
@@ -143,16 +132,4 @@
 	max-width: none;
 }
 
-/* Mobile: stack action buttons full-width so multi-button CTAs line up */
-@media (max-width: 640px) {
-	.rf-cta ul {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-cta li a,
-	.rf-cta nav a {
-		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
-	}
 }

package/styles/runes/datatable.css

@@ -1,15 +1,21 @@
-/* DataTable */
+@layer skin {
+/* DataTable — skin. The toolbar/pagination flex + input width live in
+ * @refrakt-md/skeleton (styles/runes/datatable.css). The table chrome (header
+ * strip, cell padding, row borders, hover) stays here. */
+
+/* The sunken surface chrome (fill + border + container radius) stays, but the
+ * elevation padding is dropped: the toolbar, table, and pagination each carry
+ * their own rhythm and sit flush with the surface edge. */
+.rf-datatable {
+	padding: 0;
+}
 .rf-datatable__toolbar {
-	display: flex;
-	justify-content: flex-end;
-	padding: 0.5rem 0.75rem;
-	background: var(--rf-color-surface);
+	padding: var(--rf-spacing-sm);
 }
 .rf-datatable__input {
-	width: 14rem;
-	padding: 0.35rem 0.625rem;
+	padding: var(--rf-spacing-snug);
 	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
+	border-radius: var(--rf-radius-media);
 	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	background: var(--rf-color-bg);
@@ -20,31 +26,12 @@
 	border-color: var(--rf-color-primary);
 	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
 }
-.rf-datatable__content .rf-datatable__table {
-	border: none;
-	border-radius: 0;
-	margin: 0;
-	overflow: visible;
-}
-.rf-datatable__content .rf-datatable__table th {
-	background: var(--rf-color-surface);
-}
-.rf-datatable__content .rf-datatable__table th:first-child,
-.rf-datatable__content .rf-datatable__table th:last-child {
-	border-radius: 0;
-}
-.rf-datatable__content table {
+.rf-datatable__table {
 	width: 100%;
 	border-collapse: collapse;
 	margin: 0;
 }
-.rf-datatable__content .rf-table-wrapper {
-	margin: 0;
-	border: none;
-	border-radius: 0;
-	overflow: visible;
-}
-.rf-datatable__content th {
+.rf-datatable__table th {
 	text-align: left;
 	padding: 0.75rem 1rem;
 	font-size: var(--rf-text-xs);
@@ -52,33 +39,29 @@
 	text-transform: uppercase;
 	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
-	background: var(--rf-color-surface);
 }
-.rf-datatable__content th[style*="cursor"]:hover {
+/* Sortable headers (the behavior sets inline cursor:pointer on them). */
+.rf-datatable__table th[style*="cursor"]:hover {
 	color: var(--rf-color-text);
 }
-.rf-datatable__content .sort-indicator {
+.rf-datatable__sort-indicator {
 	font-size: var(--rf-text-xs);
 	opacity: 0.7;
 }
-.rf-datatable__content td {
+.rf-datatable__table td {
 	padding: 0.75rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
 	font-size: var(--rf-text-sm);
 }
-.rf-datatable__content tr:last-child td {
+.rf-datatable__table tr:last-child td {
 	border-bottom: none;
 }
-.rf-datatable__content tr:hover td {
+.rf-datatable__table tr:hover td {
 	background: var(--rf-color-surface-hover);
 }
 .rf-datatable__pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
 	gap: 0.75rem;
-	padding: 0.5rem 0.75rem;
-	background: var(--rf-color-surface);
+	padding: var(--rf-spacing-sm);
 }
 .rf-datatable__page-btn {
 	padding: 0.25rem 0.5rem;
@@ -103,3 +86,5 @@
 	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }
+
+}

package/styles/runes/decision.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Decision */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -28,3 +29,5 @@
 .rf-decision__body > section:first-child {
 	margin-top: 0.75rem;
 }
+
+}

package/styles/runes/design-context.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Design Context — unified token card wrapper */
 .rf-design-context__title {
 	font-size: var(--rf-text-xl);
@@ -5,8 +6,6 @@
 	margin-bottom: 1rem;
 }
 .rf-design-context__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
@@ -21,3 +20,5 @@
 	border-radius: 0;
 	padding: 0;
 }
+
+}

package/styles/runes/details.css

@@ -1,33 +1,23 @@
-/* Details */
-.rf-details {
-}
+@layer skin {
+/* Details — skin. The summary flex, marker hide, disclosure-marker push, and the
+ * open-rotate live in @refrakt-md/skeleton (styles/runes/details.css). */
 .rf-details__summary {
-	display: flex;
-	align-items: center;
 	gap: 0.5rem;
 	padding: 0.75rem 0;
 	font-weight: var(--rf-weight-semibold);
 	font-size: var(--rf-text-sm);
 	cursor: pointer;
 	user-select: none;
-	list-style: none;
 	transition: background-color 200ms ease;
 }
-.rf-details__summary::-webkit-details-marker { display: none; }
-.rf-details__summary::marker { display: none; content: ''; }
 .rf-details__summary:hover {
 	color: var(--rf-color-primary);
 }
 .rf-details__summary::after {
 	content: '▸';
-	flex-shrink: 0;
-	margin-left: auto;
 	color: var(--rf-color-muted);
 	transition: transform 200ms ease;
 }
-.rf-details[open] .rf-details__summary::after {
-	transform: rotate(90deg);
-}
 .rf-details__body {
 	padding: 0 0 1rem;
 	font-size: var(--rf-text-sm);
@@ -36,3 +26,5 @@
 .rf-details__body p:last-child {
 	margin-bottom: 0;
 }
+
+}

package/styles/runes/diagram.css

@@ -1,31 +1,21 @@
-/* Diagram */
+@layer skin {
+/* Diagram — skin. The block/clip, scrollable container, and responsive SVG live in
+ * @refrakt-md/skeleton (styles/runes/diagram.css). */
 .rf-diagram {
-	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	text-align: center;
-	overflow: hidden;
 }
 .rf-diagram__title {
 	font-weight: var(--rf-weight-semibold);
 	font-size: var(--rf-text);
 	margin-bottom: 1rem;
 }
-.rf-diagram__container {
-	display: flex;
-	justify-content: center;
-	overflow-x: auto;
-}
-.rf-diagram__container svg {
-	max-width: 100%;
-	height: auto;
-}
 .rf-diagram__source {
 	text-align: left;
 	font-size: var(--rf-text-sm);
 	margin: 0;
 }
-
 /* Mermaid SVG overrides */
 .rf-diagram__container .label {
 	font-family: var(--rf-font-sans) !important;
@@ -38,3 +28,5 @@
 	fill: var(--rf-color-muted) !important;
 	stroke: var(--rf-color-muted) !important;
 }
+
+}