@refrakt-md/lumina 0.11.3 → 0.14.0

package/styles/runes/nav.css

@@ -49,7 +49,7 @@
 	text-decoration: none;
 }
 .rf-nav-item__link--active {
-	background: var(--rf-color-info-bg);
+	background: var(--rf-color-surface-active);
 	color: var(--rf-color-primary);
 	font-weight: 600;
 }
@@ -58,3 +58,332 @@
 	font-size: 0.85rem;
 	color: var(--rf-color-muted);
 }
+
+/* ─── Collapsible groups (vertical sidebar) ───────────────────────────── */
+
+.rf-nav--collapsible .rf-nav-group h2,
+.rf-nav--collapsible .rf-nav-group h3 {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+	user-select: none;
+	border-radius: var(--rf-radius-sm);
+}
+.rf-nav--collapsible .rf-nav-group h2:hover,
+.rf-nav--collapsible .rf-nav-group h3:hover {
+	color: var(--rf-color-text);
+}
+.rf-nav--collapsible .rf-nav-group h2:focus-visible,
+.rf-nav--collapsible .rf-nav-group h3:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+.rf-nav--collapsible .rf-nav-group h2::after,
+.rf-nav--collapsible .rf-nav-group h3::after {
+	content: '';
+	width: 0.5rem;
+	height: 0.5rem;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	transform: rotate(45deg);
+	transition: transform 150ms ease;
+	margin-right: 0.25rem;
+}
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ul,
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ol {
+	display: none;
+}
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] h2::after,
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] h3::after {
+	transform: rotate(-45deg);
+}
+
+/* ─── Menubar layout (header) ─────────────────────────────────────────── */
+
+.rf-nav--menubar {
+	padding: 0;
+	margin: 0;
+}
+.rf-nav--menubar > .rf-nav__top-level {
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+.rf-nav--menubar > .rf-nav__top-level > ul,
+.rf-nav--menubar > .rf-nav__top-level ul {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+	align-items: center;
+	margin: 0;
+}
+.rf-nav--menubar > .rf-nav__top-level li {
+	padding: 0;
+}
+.rf-nav--menubar > .rf-nav__top-level .rf-nav-item__link {
+	display: inline-block;
+	padding: 0.375rem 0.75rem;
+	font-weight: 500;
+	font-size: 0.9rem;
+	border-radius: var(--rf-radius-sm);
+	color: var(--rf-color-muted);
+	transition: background-color 150ms ease, color 150ms ease;
+}
+.rf-nav--menubar > .rf-nav__top-level .rf-nav-item__link:hover {
+	background: var(--rf-color-surface);
+	color: var(--rf-color-text);
+}
+.rf-nav--menubar .rf-nav-group {
+	margin: 0;
+	position: relative;
+	display: inline-block;
+}
+.rf-nav--menubar .rf-nav-group h2,
+.rf-nav--menubar .rf-nav-group h3 {
+	margin: 0;
+	padding: 0.375rem 0.75rem;
+	font-size: 0.9rem;
+	font-weight: 500;
+	text-transform: none;
+	letter-spacing: normal;
+	color: var(--rf-color-muted);
+	cursor: pointer;
+	user-select: none;
+	border-radius: var(--rf-radius-sm);
+	transition: background-color 150ms ease, color 150ms ease;
+}
+.rf-nav--menubar .rf-nav-group h2:hover,
+.rf-nav--menubar .rf-nav-group h3:hover,
+.rf-nav--menubar .rf-nav-group[data-open="true"] h2,
+.rf-nav--menubar .rf-nav-group[data-open="true"] h3 {
+	background: var(--rf-color-surface);
+	color: var(--rf-color-text);
+}
+.rf-nav--menubar .rf-nav-group ul {
+	display: block;
+	position: absolute;
+	top: 100%;
+	right: 0;
+	left: auto;
+	min-width: 12rem;
+	padding: 0.5rem;
+	background: var(--rf-color-bg);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	box-shadow: var(--rf-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
+	z-index: 50;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transform: translateY(-4px);
+	transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
+}
+.rf-nav--menubar .rf-nav-group:hover > ul,
+.rf-nav--menubar .rf-nav-group:focus-within > ul,
+.rf-nav--menubar .rf-nav-group[data-open="true"] > ul {
+	opacity: 1;
+	visibility: visible;
+	pointer-events: auto;
+	transform: translateY(0);
+}
+.rf-nav--menubar .rf-nav-group .rf-nav-item__link {
+	font-size: 0.85rem;
+	font-weight: 400;
+}
+.rf-nav--menubar > nav,
+.rf-nav--menubar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+	align-items: center;
+}
+.rf-nav--menubar [data-name="trigger"] {
+	display: none;
+}
+
+@media (max-width: 768px) {
+	/* Mobile: render the menubar as a flat vertical side-nav. No hamburger
+	   trigger, no click-to-expand groups — category headings render as plain
+	   headings with their items always visible. */
+	.rf-nav--menubar [data-name="trigger"] {
+		display: none;
+	}
+	.rf-nav--menubar {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0;
+	}
+	.rf-nav--menubar > .rf-nav__top-level,
+	.rf-nav--menubar > .rf-nav-group {
+		display: block;
+		width: 100%;
+	}
+	.rf-nav--menubar > .rf-nav__top-level > ul {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0;
+	}
+	.rf-nav--menubar > .rf-nav__top-level .rf-nav-item__link {
+		display: block;
+		padding: 0.5rem 0.75rem;
+	}
+	.rf-nav--menubar .rf-nav-group {
+		position: static;
+		display: block;
+		margin: 1rem 0 0;
+	}
+	.rf-nav--menubar .rf-nav-group h2,
+	.rf-nav--menubar .rf-nav-group h3 {
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--rf-color-muted);
+		background: transparent;
+		cursor: default;
+		padding: 0.5rem 0.75rem 0.25rem;
+		font-weight: 600;
+	}
+	.rf-nav--menubar .rf-nav-group h2:hover,
+	.rf-nav--menubar .rf-nav-group h3:hover,
+	.rf-nav--menubar .rf-nav-group[data-open="true"] h2,
+	.rf-nav--menubar .rf-nav-group[data-open="true"] h3 {
+		background: transparent;
+		color: var(--rf-color-muted);
+	}
+	.rf-nav--menubar .rf-nav-group ul {
+		position: static;
+		display: block;
+		min-width: 0;
+		padding: 0;
+		background: transparent;
+		border: 0;
+		box-shadow: none;
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
+		transform: none;
+	}
+}
+
+/* ─── Columns layout (footer) ─────────────────────────────────────────── */
+
+.rf-nav--columns {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	gap: 2rem;
+	padding: 1.5rem 0;
+}
+.rf-nav--columns .rf-nav__top-level {
+	grid-column: 1 / -1;
+	padding-bottom: 1rem;
+	margin-bottom: 0;
+	border-bottom: 0;
+}
+.rf-nav--columns .rf-nav-group {
+	margin: 0;
+}
+.rf-nav--columns .rf-nav-group h2,
+.rf-nav--columns .rf-nav-group h3 {
+	padding-left: 0;
+	margin-bottom: 0.75rem;
+	color: var(--rf-color-text);
+	font-size: 0.75rem;
+}
+.rf-nav--columns .rf-nav-item__link {
+	padding: 0.25rem 0;
+	color: var(--rf-color-muted);
+}
+.rf-nav--columns .rf-nav-item__link:hover {
+	background: transparent;
+	color: var(--rf-color-text);
+}
+
+@media (max-width: 600px) {
+	.rf-nav--columns {
+		grid-template-columns: 1fr;
+		gap: 1.25rem;
+	}
+}
+
+/* ─── Cards layout (section landing) ──────────────────────────────────── */
+
+.rf-nav--cards {
+	padding: 0;
+}
+.rf-nav--cards > .rf-nav__top-level {
+	padding: 0;
+	margin: 0 0 1.5rem;
+	border: 0;
+}
+.rf-nav--cards > .rf-nav__top-level > ul,
+.rf-nav--cards > ul {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: 1rem;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-nav--cards .rf-nav-group {
+	margin: 0 0 2rem;
+}
+.rf-nav--cards .rf-nav-group h2,
+.rf-nav--cards .rf-nav-group h3 {
+	font-size: 0.85rem;
+	padding-left: 0;
+	margin-bottom: 1rem;
+}
+.rf-nav--cards .rf-nav-group > ul {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: 1rem;
+}
+.rf-nav--cards .rf-nav-item {
+	padding: 0;
+	color: inherit;
+	font-size: inherit;
+}
+.rf-nav--cards .rf-nav-item__link {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 1.25rem;
+	background: var(--rf-color-surface, var(--rf-color-bg));
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	color: var(--rf-color-text);
+	text-decoration: none;
+	transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
+	height: 100%;
+}
+.rf-nav--cards .rf-nav-item__link:hover {
+	border-color: var(--rf-color-primary);
+	background: var(--rf-color-surface, var(--rf-color-bg));
+	transform: translateY(-1px);
+	box-shadow: var(--rf-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.05));
+}
+.rf-nav--cards .rf-nav-item__icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	color: var(--rf-color-primary);
+	margin-bottom: 0.25rem;
+}
+.rf-nav--cards .rf-nav-item__title {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+.rf-nav--cards .rf-nav-item__description {
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+	line-height: 1.5;
+}
+
+@media (max-width: 500px) {
+	.rf-nav--cards > ul,
+	.rf-nav--cards > .rf-nav__top-level > ul,
+	.rf-nav--cards .rf-nav-group > ul {
+		grid-template-columns: 1fr;
+	}
+}

package/styles/runes/pagination.css

@@ -0,0 +1,85 @@
+/* Pagination — prev/next links at the foot of sequential pages.
+ *
+ * Each box stacks the directional marker above the label so the two
+ * controls stay compact enough to sit side-by-side on mobile. Equal
+ * heights are guaranteed by the container's `align-items: stretch`, so
+ * if one label wraps to multiple lines the other box grows to match.
+ *
+ * Boxes are capped at ~50% width via `flex: 1 1 0` + `max-width`, with
+ * `margin-left: auto` on `__next` so it stays right-aligned even when
+ * `__prev` isn't rendered (first page in a sequence). */
+
+.rf-pagination {
+	display: flex;
+	align-items: stretch;
+	gap: 1rem;
+	margin: 3rem 0 1.5rem;
+	padding-top: 1.5rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+
+.rf-pagination__prev,
+.rf-pagination__next {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	padding: 0.75rem 1rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	color: var(--rf-color-text);
+	text-decoration: none;
+	font-size: 0.9rem;
+	transition: border-color 150ms ease, background-color 150ms ease;
+	flex: 1 1 0;
+	min-width: 0;
+	max-width: calc(50% - 0.5rem);
+}
+
+.rf-pagination__prev {
+	align-items: flex-start;
+	text-align: left;
+}
+
+.rf-pagination__next {
+	align-items: flex-end;
+	text-align: right;
+	margin-left: auto;
+}
+
+.rf-pagination__prev:hover,
+.rf-pagination__next:hover {
+	border-color: var(--rf-color-primary);
+	background: var(--rf-color-surface, var(--rf-color-bg));
+	text-decoration: none;
+}
+
+.rf-pagination [data-name="marker"] {
+	color: var(--rf-color-muted);
+	font-weight: 400;
+	font-size: 1.1rem;
+	line-height: 1;
+}
+
+.rf-pagination [data-name="label"] {
+	font-weight: 500;
+}
+
+/* The pagination rune emits prev as `<marker> <label>` but next as
+   `<label> <marker>` (an artefact of the original row layout where the
+   arrow flanked the outer edge). With our vertical stack this puts the
+   next arrow at the bottom of its box. Force it to the top to match prev. */
+.rf-pagination__next [data-name="marker"] {
+	order: -1;
+}
+
+@media (max-width: 768px) {
+	.rf-pagination {
+		gap: 0.5rem;
+	}
+	.rf-pagination__prev,
+	.rf-pagination__next {
+		padding: 0.625rem 0.875rem;
+		max-width: calc(50% - 0.25rem);
+		font-size: 0.85rem;
+	}
+}

package/styles/runes/palette.css

@@ -23,6 +23,15 @@
 	grid-template-columns: repeat(var(--rf-palette-cols, 4), 1fr);
 	gap: 0.75rem;
 }
+
+@media (max-width: 768px) {
+	/* Cap the grid at 3 columns on narrow viewports — at 4 cols each swatch
+	   is too cramped to read the hex value. Palettes with fewer than 3
+	   declared columns keep their natural count (the `min()`). */
+	.rf-palette__grid {
+		grid-template-columns: repeat(min(var(--rf-palette-cols, 4), 3), 1fr);
+	}
+}
 .rf-palette__swatch {
 	display: flex;
 	flex-direction: column;

package/styles/runes/sandbox.css

@@ -20,3 +20,20 @@
 	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"`. */
+.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: 0.8125rem;
+	line-height: 1.25rem;
+	font-weight: 600;
+	color: var(--rf-color-warning-fg, #78350f);
+	background: var(--rf-color-warning-bg, #fef3c7);
+	border-bottom: 1px solid var(--rf-color-warning, #b45309);
+}