@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/collection.css

@@ -1,89 +1,90 @@
 @layer skin {
-/* Collection — skin. The list/grid arrangement, card flex column, and block-item
+	/* 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;
-}
-.rf-collection__preamble > :first-child { margin-top: 0; }
-.rf-collection__empty {
-	color: var(--rf-color-muted);
-	font-size: 0.9375em;
-}
-.rf-collection__items {
-	gap: var(--rf-spacing-sm);
-}
-.rf-collection[data-layout='grid'] .rf-collection__items {
-	gap: var(--rf-spacing-md);
-}
-.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
-.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
-	gap: var(--rf-spacing-md);
-}
-.rf-collection[data-layout='grid'] .rf-collection__group {
-	gap: var(--rf-spacing-md);
-}
-.rf-collection__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-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);
-}
-.rf-collection__group {
-	margin-top: var(--rf-spacing-md);
-	/* Tight default for short item rows (the built-in title link, no body). */
-	gap: var(--rf-spacing-xs);
-}
-.rf-collection__group:has(.rf-collection__item[data-block]) {
-	gap: var(--rf-spacing-sm);
-}
-.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;
-	text-transform: uppercase;
-	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);
-}
-.rf-collection__table td p {
-	margin: 0;
-}
-
+	.rf-collection {
+		margin: var(--rf-spacing-md) 0;
+	}
+	.rf-collection__preamble > :first-child {
+		margin-top: 0;
+	}
+	.rf-collection__empty {
+		color: var(--rf-color-muted);
+		font-size: 0.9375em;
+	}
+	.rf-collection__items {
+		gap: var(--rf-spacing-sm);
+	}
+	.rf-collection[data-layout="grid"] .rf-collection__items {
+		gap: var(--rf-spacing-md);
+	}
+	.rf-collection[data-layout="grid"] .rf-collection__items:has(.rf-collection__group),
+	.rf-collection[data-layout="grid"] .rf-collection__items:has(.rf-accordion) {
+		gap: var(--rf-spacing-md);
+	}
+	.rf-collection[data-layout="grid"] .rf-collection__group {
+		gap: var(--rf-spacing-md);
+	}
+	.rf-collection__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-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);
+	}
+	.rf-collection__group {
+		margin-top: var(--rf-spacing-md);
+		/* Tight default for short item rows (the built-in title link, no body). */
+		gap: var(--rf-spacing-xs);
+	}
+	.rf-collection__group:has(.rf-collection__item[data-block]) {
+		gap: var(--rf-spacing-sm);
+	}
+	.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;
+		text-transform: uppercase;
+		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);
+	}
+	.rf-collection__table td p {
+		margin: 0;
+	}
 }

package/styles/runes/compare.css

@@ -1,41 +1,40 @@
 @layer skin {
-/* Compare */
-.rf-compare {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-}
-.rf-compare__header {
-	padding: 0.5rem 1rem;
-	font-family: var(--rf-font-sans);
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface);
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-compare--side-by-side [data-panel] + [data-panel] {
-	border-left: 1px solid var(--rf-color-border);
-}
-.rf-compare--stacked [data-panel] + [data-panel] {
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-compare [data-label] {
-	padding: 0.5rem 1rem;
-	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);
-	background: var(--rf-color-surface);
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-compare .rf-codeblock {
-	margin: 0;
-}
-.rf-compare pre {
-	margin: 0;
-	border: none;
-	border-radius: 0;
-}
-
+	/* Compare */
+	.rf-compare {
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+	}
+	.rf-compare__header {
+		padding: 0.5rem 1rem;
+		font-family: var(--rf-font-sans);
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-muted);
+		background: var(--rf-color-surface);
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-compare--side-by-side [data-panel] + [data-panel] {
+		border-left: 1px solid var(--rf-color-border);
+	}
+	.rf-compare--stacked [data-panel] + [data-panel] {
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-compare [data-label] {
+		padding: 0.5rem 1rem;
+		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);
+		background: var(--rf-color-surface);
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-compare .rf-codeblock {
+		margin: 0;
+	}
+	.rf-compare pre {
+		margin: 0;
+		border: none;
+		border-radius: 0;
+	}
 }

package/styles/runes/comparison.css

@@ -1,184 +1,210 @@
 @layer skin {
-/* Comparison — skin. The grid passthroughs, scroll/sticky geometry, cards grid,
+	/* 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__title {
-	text-align: center;
-	margin: 0 0 1.5rem;
-	font-size: var(--rf-text-2xl);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-text);
-}
-/* Table layout */
-.rf-comparison__table-wrapper {
-	margin: 0 -1rem;
-	padding: 0 1rem;
-}
-.rf-comparison__table {
-	width: 100%;
-	border-collapse: collapse;
-	font-size: var(--rf-text);
-}
-.rf-comparison__table th,
-.rf-comparison__table td {
-	padding: 0.75rem 1rem;
-	text-align: left;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-comparison__table thead th {
-	background: var(--rf-color-bg);
-	font-weight: var(--rf-weight-bold);
-	font-size: var(--rf-text);
-	color: var(--rf-color-text);
-	border-bottom: 2px solid var(--rf-color-border);
-	vertical-align: bottom;
-}
-.rf-comparison__col-header--highlighted {
-	background: color-mix(in srgb, var(--rf-color-primary) 5%, var(--rf-color-bg));
-	border-bottom-color: var(--rf-color-primary);
-}
-.rf-comparison__recommended-badge {
-	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-primary);
-	margin-top: 0.25rem;
-}
-.rf-comparison__label-col {
-	white-space: nowrap;
-}
-.rf-comparison__row-label {
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-	white-space: nowrap;
-	background: var(--rf-color-bg);
-}
-.rf-comparison__cell {
-	color: var(--rf-color-muted);
-	vertical-align: middle;
-}
-.rf-comparison__cell--highlighted {
-	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 em {
-	font-style: italic;
-	color: var(--rf-color-muted);
-}
-.rf-comparison__cell--empty {
-	color: var(--rf-color-muted);
-}
-/* Row icons */
-.rf-comparison__row-icon {
-	font-weight: var(--rf-weight-bold);
-	font-size: var(--rf-text-lg);
-}
-.rf-comparison__row-icon--check {
-	color: var(--rf-color-success);
-}
-.rf-comparison__row-icon--cross {
-	color: var(--rf-color-danger);
-}
-/* Negative content */
-.rf-comparison__negative {
-	color: var(--rf-color-danger);
-	opacity: 0.85;
-}
-.rf-comparison__negative del,
-.rf-comparison__negative s {
-	text-decoration: line-through;
-}
-/* Callout badge */
-.rf-comparison__callout-badge {
-	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
-	color: var(--rf-color-primary);
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	padding: 0.125rem 0.5rem;
-	border-radius: 999px;
-}
-.rf-comparison__callout-badge p { margin: 0; font-size: inherit; }
-/* Cards layout */
-.rf-comparison__cards {
-	gap: 1.5rem;
-}
-.rf-comparison-card {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	padding: 1.5rem;
-	background: var(--rf-color-bg);
-	transition: box-shadow 200ms ease, transform 200ms ease;
-}
-.rf-comparison-card:hover {
-	box-shadow: var(--rf-shadow-md);
-}
-.rf-comparison-card--highlighted {
-	border-color: var(--rf-color-primary);
-	box-shadow: var(--rf-shadow-lg);
-	transform: scale(1.02);
-}
-.rf-comparison-card__badge {
-	background: var(--rf-color-primary);
-	color: white;
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-	padding: 0.125rem 0.75rem;
-	border-radius: 999px;
-	white-space: nowrap;
-}
-.rf-comparison-card__name {
-	margin: 0 0 1rem;
-	font-size: var(--rf-text-lg);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-text);
-}
-.rf-comparison-card__rows {
-	padding: 0;
-	margin: 0;
-}
-.rf-comparison-card__row {
-	padding: 0.5rem 0;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	border-bottom: 1px solid var(--rf-color-border);
-	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; }
-.rf-comparison-card__row--negative { opacity: 0.7; }
-.rf-comparison-card__row--callout {
-	border-bottom: none;
-	padding: 0.75rem 0 0.25rem;
-}
-/* Verdict */
-.rf-comparison__verdict {
-	text-align: center;
-	font-size: var(--rf-text);
-	color: var(--rf-color-muted);
-	font-style: italic;
-	margin: 1.5rem auto 0;
-	max-width: 48rem;
-}
-/* Fallback column/row */
-.rf-comparison-column { margin-bottom: 1rem; }
-.rf-comparison-column--highlighted {
-	border-left: 3px solid var(--rf-color-primary);
-	padding-left: 1rem;
-}
-.rf-comparison-row { padding: 0.25rem 0; }
-/* Responsive */
-@media (max-width: 640px) {
-	.rf-comparison-card--highlighted { transform: none; }
-	.rf-comparison__table { font-size: var(--rf-text-sm); }
+	.rf-comparison {
+		margin: 2rem 0;
+	}
+	.rf-comparison__title {
+		text-align: center;
+		margin: 0 0 1.5rem;
+		font-size: var(--rf-text-2xl);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-text);
+	}
+	/* Table layout */
+	.rf-comparison__table-wrapper {
+		margin: 0 -1rem;
+		padding: 0 1rem;
+	}
+	.rf-comparison__table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: var(--rf-text);
+	}
 	.rf-comparison__table th,
-	.rf-comparison__table td { padding: 0.5rem 0.625rem; }
-}
-
+	.rf-comparison__table td {
+		padding: 0.75rem 1rem;
+		text-align: left;
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-comparison__table thead th {
+		background: var(--rf-color-bg);
+		font-weight: var(--rf-weight-bold);
+		font-size: var(--rf-text);
+		color: var(--rf-color-text);
+		border-bottom: 2px solid var(--rf-color-border);
+		vertical-align: bottom;
+	}
+	.rf-comparison__col-header--highlighted {
+		background: color-mix(in srgb, var(--rf-color-primary) 5%, var(--rf-color-bg));
+		border-bottom-color: var(--rf-color-primary);
+	}
+	.rf-comparison__recommended-badge {
+		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-primary);
+		margin-top: 0.25rem;
+	}
+	.rf-comparison__label-col {
+		white-space: nowrap;
+	}
+	.rf-comparison__row-label {
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+		white-space: nowrap;
+		background: var(--rf-color-bg);
+	}
+	.rf-comparison__cell {
+		color: var(--rf-color-muted);
+		vertical-align: middle;
+	}
+	.rf-comparison__cell--highlighted {
+		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 em {
+		font-style: italic;
+		color: var(--rf-color-muted);
+	}
+	.rf-comparison__cell--empty {
+		color: var(--rf-color-muted);
+	}
+	/* Row icons */
+	.rf-comparison__row-icon {
+		font-weight: var(--rf-weight-bold);
+		font-size: var(--rf-text-lg);
+	}
+	.rf-comparison__row-icon--check {
+		color: var(--rf-color-success);
+	}
+	.rf-comparison__row-icon--cross {
+		color: var(--rf-color-danger);
+	}
+	/* Negative content */
+	.rf-comparison__negative {
+		color: var(--rf-color-danger);
+		opacity: 0.85;
+	}
+	.rf-comparison__negative del,
+	.rf-comparison__negative s {
+		text-decoration: line-through;
+	}
+	/* Callout badge */
+	.rf-comparison__callout-badge {
+		background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
+		color: var(--rf-color-primary);
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		padding: 0.125rem 0.5rem;
+		border-radius: 999px;
+	}
+	.rf-comparison__callout-badge p {
+		margin: 0;
+		font-size: inherit;
+	}
+	/* Cards layout */
+	.rf-comparison__cards {
+		gap: 1.5rem;
+	}
+	.rf-comparison-card {
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		padding: 1.5rem;
+		background: var(--rf-color-bg);
+		transition:
+			box-shadow 200ms ease,
+			transform 200ms ease;
+	}
+	.rf-comparison-card:hover {
+		box-shadow: var(--rf-shadow-md);
+	}
+	.rf-comparison-card--highlighted {
+		border-color: var(--rf-color-primary);
+		box-shadow: var(--rf-shadow-lg);
+		transform: scale(1.02);
+	}
+	.rf-comparison-card__badge {
+		background: var(--rf-color-primary);
+		color: white;
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+		padding: 0.125rem 0.75rem;
+		border-radius: 999px;
+		white-space: nowrap;
+	}
+	.rf-comparison-card__name {
+		margin: 0 0 1rem;
+		font-size: var(--rf-text-lg);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-text);
+	}
+	.rf-comparison-card__rows {
+		padding: 0;
+		margin: 0;
+	}
+	.rf-comparison-card__row {
+		padding: 0.5rem 0;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		border-bottom: 1px solid var(--rf-color-border);
+		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;
+	}
+	.rf-comparison-card__row--negative {
+		opacity: 0.7;
+	}
+	.rf-comparison-card__row--callout {
+		border-bottom: none;
+		padding: 0.75rem 0 0.25rem;
+	}
+	/* Verdict */
+	.rf-comparison__verdict {
+		text-align: center;
+		font-size: var(--rf-text);
+		color: var(--rf-color-muted);
+		font-style: italic;
+		margin: 1.5rem auto 0;
+		max-width: 48rem;
+	}
+	/* Fallback column/row */
+	.rf-comparison-column {
+		margin-bottom: 1rem;
+	}
+	.rf-comparison-column--highlighted {
+		border-left: 3px solid var(--rf-color-primary);
+		padding-left: 1rem;
+	}
+	.rf-comparison-row {
+		padding: 0.25rem 0;
+	}
+	/* Responsive */
+	@media (max-width: 640px) {
+		.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;
+		}
+	}
 }