@refrakt-md/lumina 0.8.3 → 0.8.5

package/contracts/structures.json

@@ -209,6 +209,71 @@
 				"{content}"
 			]
 		},
+		"Blog": {
+			"block": "blog",
+			"root": ".rf-blog",
+			"dataRune": "blog",
+			"childOrder": [
+				"{content:content}"
+			],
+			"modifiers": {
+				"layout": {
+					"source": "meta",
+					"default": "list",
+					"classPattern": ".rf-blog--{value}",
+					"dataAttribute": "data-layout"
+				},
+				"sort": {
+					"source": "meta",
+					"default": "date-desc",
+					"dataAttribute": "data-sort"
+				},
+				"filter": {
+					"source": "meta",
+					"dataAttribute": "data-filter"
+				},
+				"limit": {
+					"source": "meta",
+					"dataAttribute": "data-limit"
+				},
+				"folder": {
+					"source": "meta",
+					"dataAttribute": "data-folder"
+				}
+			},
+			"elements": {
+				"content": {
+					"tag": "div",
+					"selector": ".rf-blog__content",
+					"source": "contentWrapper"
+				},
+				"header": {
+					"tag": "header",
+					"selector": ".rf-blog__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-blog__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-blog__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-blog__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-blog__image",
+					"source": "autoLabel"
+				}
+			}
+		},
 		"Budget": {
 			"block": "budget",
 			"root": ".rf-budget",
@@ -885,6 +950,50 @@
 				"{content}"
 			]
 		},
+		"Juxtapose": {
+			"block": "juxtapose",
+			"root": ".rf-juxtapose",
+			"dataRune": "juxtapose",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"variant": {
+					"source": "meta",
+					"default": "slider",
+					"classPattern": ".rf-juxtapose--{value}",
+					"dataAttribute": "data-variant"
+				},
+				"orientation": {
+					"source": "meta",
+					"default": "vertical",
+					"dataAttribute": "data-orientation"
+				},
+				"position": {
+					"source": "meta",
+					"default": "50",
+					"dataAttribute": "data-position"
+				},
+				"duration": {
+					"source": "meta",
+					"default": "1000",
+					"dataAttribute": "data-duration"
+				}
+			},
+			"inlineStyles": {
+				"position": "--jx-position",
+				"duration": "--jx-duration"
+			}
+		},
+		"JuxtaposePanel": {
+			"block": "juxtapose-panel",
+			"root": ".rf-juxtapose-panel",
+			"dataRune": "juxtapose-panel",
+			"parent": "Juxtapose",
+			"childOrder": [
+				"{content}"
+			]
+		},
 		"Diagram": {
 			"block": "diagram",
 			"root": ".rf-diagram",
@@ -893,6 +1002,33 @@
 				"{content}"
 			]
 		},
+		"Tint": {
+			"block": "tint",
+			"root": ".rf-tint",
+			"dataRune": "tint",
+			"parent": "*",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Bg": {
+			"block": "bg",
+			"root": ".rf-bg",
+			"dataRune": "bg",
+			"parent": "*",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Region": {
+			"block": "region",
+			"root": ".rf-region",
+			"dataRune": "region",
+			"parent": "Layout",
+			"childOrder": [
+				"{content}"
+			]
+		},
 		"Sandbox": {
 			"block": "sandbox",
 			"root": ".rf-sandbox",
@@ -1220,6 +1356,15 @@
 				}
 			}
 		},
+		"Definition": {
+			"block": "definition",
+			"root": ".rf-definition",
+			"dataRune": "definition",
+			"parent": "Feature",
+			"childOrder": [
+				"{content}"
+			]
+		},
 		"Steps": {
 			"block": "steps",
 			"root": ".rf-steps",

package/index.css

@@ -31,6 +31,7 @@
 @import './styles/runes/audio.css';
 @import './styles/runes/api.css';
 @import './styles/runes/bento.css';
+@import './styles/runes/blog.css';
 @import './styles/runes/bond.css';
 @import './styles/runes/breadcrumb.css';
 @import './styles/runes/budget.css';
@@ -58,6 +59,7 @@
 @import './styles/runes/hero.css';
 @import './styles/runes/hint.css';
 @import './styles/runes/howto.css';
+@import './styles/runes/juxtapose.css';
 @import './styles/runes/lore.css';
 @import './styles/runes/itinerary.css';
 @import './styles/runes/map.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and framework adapters",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -51,15 +51,15 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.8.3",
-    "@refrakt-md/transform": "0.8.3",
-    "@refrakt-md/types": "0.8.3",
-    "@refrakt-md/svelte": "0.8.3"
+    "@refrakt-md/runes": "0.8.5",
+    "@refrakt-md/transform": "0.8.5",
+    "@refrakt-md/types": "0.8.5",
+    "@refrakt-md/svelte": "0.8.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
-    "@refrakt-md/html": "0.8.3"
+    "@refrakt-md/html": "0.8.5"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/runes/blog.css

@@ -0,0 +1,98 @@
+/* Blog — post listing with filtering and sorting */
+.rf-blog {
+	padding: 2rem 0;
+}
+.rf-blog__header {
+	margin-bottom: 2rem;
+}
+.rf-blog__headline {
+	font-size: 2rem;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	margin: 0 0 0.5rem;
+	line-height: 1.2;
+	color: var(--rf-color-text);
+}
+.rf-blog__blurb {
+	font-size: 1.1rem;
+	color: var(--rf-color-muted);
+	margin: 0 0 1rem;
+	line-height: 1.6;
+	max-width: 640px;
+}
+.rf-blog__posts {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+.rf-blog__post {
+	padding: 1.25rem 1.5rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+	transition: border-color 200ms ease, box-shadow 200ms ease;
+}
+.rf-blog__post:hover {
+	border-color: var(--rf-color-primary);
+	box-shadow: var(--rf-shadow-sm);
+}
+.rf-blog__post h3 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin: 0 0 0.375rem;
+	line-height: 1.3;
+}
+.rf-blog__post h3 a {
+	color: var(--rf-color-text);
+	text-decoration: none;
+}
+.rf-blog__post h3 a:hover {
+	color: var(--rf-color-primary);
+}
+.rf-blog__post time {
+	display: inline-block;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+	margin-bottom: 0.5rem;
+}
+.rf-blog__post p {
+	font-size: 0.95rem;
+	color: var(--rf-color-muted);
+	margin: 0;
+	line-height: 1.6;
+}
+
+/* Grid layout */
+.rf-blog--grid .rf-blog__posts {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 1.25rem;
+}
+
+/* Compact layout */
+.rf-blog--compact .rf-blog__posts {
+	gap: 0;
+}
+.rf-blog--compact .rf-blog__post {
+	border-radius: 0;
+	border-bottom-width: 0;
+	padding: 1rem 1.25rem;
+}
+.rf-blog--compact .rf-blog__post:first-child {
+	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+}
+.rf-blog--compact .rf-blog__post:last-child {
+	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
+	border-bottom-width: 1px;
+}
+.rf-blog--compact .rf-blog__post h3 {
+	font-size: 1.1rem;
+	margin-bottom: 0.125rem;
+}
+.rf-blog--compact .rf-blog__post p {
+	font-size: 0.875rem;
+}
+.rf-blog--compact .rf-blog__post time {
+	font-size: 0.8rem;
+	margin-bottom: 0.25rem;
+}

package/styles/runes/juxtapose.css

@@ -0,0 +1,164 @@
+/* Juxtapose — interactive comparison between two panels */
+
+.rf-juxtapose {
+	margin: 1.5rem 0;
+}
+
+/* ─── Variant modifiers (for static/no-JS layout) ─── */
+.rf-juxtapose--slider,
+.rf-juxtapose--auto,
+.rf-juxtapose--fade,
+.rf-juxtapose--toggle {
+	/* shared base — no additional styling needed */
+}
+
+/* ─── Panels container ─── */
+.rf-juxtapose__panels {
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+	border: 1px solid var(--rf-color-border);
+	background: var(--rf-color-surface);
+}
+
+/* ─── Panel ─── */
+.rf-juxtapose-panel {
+	position: relative;
+	overflow: hidden;
+}
+.rf-juxtapose-panel__name {
+	position: absolute;
+	bottom: 0.5rem;
+	padding: 0.25rem 0.75rem;
+	background: rgba(0, 0, 0, 0.6);
+	color: white;
+	font-size: 0.75rem;
+	font-weight: 600;
+	border-radius: var(--rf-radius-sm);
+	pointer-events: none;
+}
+/* First panel: label bottom-left */
+.rf-juxtapose-panel:first-child .rf-juxtapose-panel__name {
+	left: 0.5rem;
+}
+/* Second panel: label bottom-right */
+.rf-juxtapose-panel:last-child .rf-juxtapose-panel__name {
+	right: 0.5rem;
+}
+.rf-juxtapose-panel__body {
+	/* Content fills the panel */
+}
+.rf-juxtapose-panel__body img {
+	display: block;
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+}
+
+/* Hide meta tags inside panels */
+.rf-juxtapose-panel > meta { display: none; }
+
+/* ─── Toggle variant: labels only on buttons, not in panels ─── */
+.rf-juxtapose--toggle .rf-juxtapose-panel__name {
+	display: none;
+}
+
+/* ─── Slider divider (injected by behavior) ─── */
+.rf-juxtapose__divider {
+	position: absolute;
+	z-index: 10;
+	cursor: col-resize;
+	touch-action: none;
+}
+
+/* Vertical orientation (left/right split) — default */
+.rf-juxtapose:not([data-orientation="horizontal"]) .rf-juxtapose__divider {
+	top: 0;
+	bottom: 0;
+	width: 3px;
+	transform: translateX(-50%);
+	background: var(--rf-color-bg, #fff);
+	box-shadow: var(--rf-shadow-sm);
+}
+
+/* Horizontal orientation (top/bottom split) */
+.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider {
+	left: 0;
+	right: 0;
+	height: 3px;
+	transform: translateY(-50%);
+	background: var(--rf-color-bg, #fff);
+	box-shadow: var(--rf-shadow-sm);
+	cursor: row-resize;
+}
+
+.rf-juxtapose__divider-handle {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: var(--rf-radius-full);
+	background: var(--rf-color-bg, #fff);
+	border: 2px solid var(--rf-color-border);
+	box-shadow: var(--rf-shadow-md);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.rf-juxtapose__divider-handle::before {
+	content: '\2194';  /* ↔ */
+	font-size: 1rem;
+	color: var(--rf-color-muted);
+	line-height: 1;
+}
+
+.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider-handle::before {
+	content: '\2195';  /* ↕ */
+}
+
+.rf-juxtapose__divider:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+
+/* ─── Toggle bar (injected by behavior) ─── */
+.rf-juxtapose__toggle-bar {
+	display: flex;
+	gap: 0.25rem;
+	padding: 0.25rem;
+	margin-bottom: 0.75rem;
+	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	width: fit-content;
+}
+
+.rf-juxtapose__toggle-btn {
+	padding: 0.375rem 1rem;
+	border: none;
+	border-radius: var(--rf-radius-sm);
+	background: transparent;
+	color: var(--rf-color-muted);
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+
+.rf-juxtapose__toggle-btn:hover {
+	color: var(--rf-color-text);
+}
+
+.rf-juxtapose__toggle-btn--active {
+	background: var(--rf-color-bg, #fff);
+	color: var(--rf-color-text);
+	box-shadow: var(--rf-shadow-sm);
+}
+
+/* ─── Fade variant cursor hint ─── */
+.rf-juxtapose--fade .rf-juxtapose__panels {
+	cursor: pointer;
+}
+

package/styles/runes/map.css

@@ -4,9 +4,14 @@
 	margin: 2rem 0;
 	border-radius: var(--rf-radius-lg, 0.75rem);
 	overflow: hidden;
-	border: 1px solid var(--rf-color-border);
 }
 
+/* Spacing variants */
+.rf-map--spacing-flush { margin: 0; }
+.rf-map--spacing-tight { margin: 0.5rem 0; }
+.rf-map--spacing-loose { margin: 3rem 0; }
+.rf-map--spacing-breathe { margin: 4rem 0; }
+
 /* Height variants */
 .rf-map--small .rf-map__container { height: 200px; }
 .rf-map--medium .rf-map__container { height: 400px; }