@refrakt-md/lumina 0.8.5 → 0.9.0

package/base.css

@@ -24,3 +24,13 @@
 
 /* Universal Rune Attributes */
 @import './styles/base/attributes.css';
+
+/* Dimensions */
+@import './styles/dimensions/metadata.css';
+@import './styles/dimensions/density.css';
+@import './styles/dimensions/sections.css';
+@import './styles/dimensions/state.css';
+@import './styles/dimensions/media.css';
+@import './styles/dimensions/surfaces.css';
+@import './styles/dimensions/checklist.css';
+@import './styles/dimensions/sequence.css';

package/contracts/structures.json

@@ -11,9 +11,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-accordion__header",
+					"selector": ".rf-accordion__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -247,9 +247,9 @@
 					"selector": ".rf-blog__content",
 					"source": "contentWrapper"
 				},
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-blog__header",
+					"selector": ".rf-blog__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -762,9 +762,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-tabs__header",
+					"selector": ".rf-tabs__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -914,9 +914,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-reveal__header",
+					"selector": ".rf-reveal__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1084,9 +1084,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-hero__header",
+					"selector": ".rf-hero__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1145,9 +1145,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-cta__header",
+					"selector": ".rf-cta__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1200,9 +1200,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-bento__header",
+					"selector": ".rf-bento__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1313,9 +1313,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-feature__header",
+					"selector": ".rf-feature__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1373,9 +1373,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-steps__header",
+					"selector": ".rf-steps__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1455,9 +1455,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-pricing__header",
+					"selector": ".rf-pricing__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1537,9 +1537,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-comparison__header",
+					"selector": ".rf-comparison__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -1687,9 +1687,9 @@
 			},
 			"elements": {
 				"header": {
-					"tag": "header",
+					"tag": "div",
 					"selector": ".rf-symbol__header",
-					"source": "autoLabel"
+					"source": "structure"
 				},
 				"kind-badge": {
 					"tag": "span",
@@ -1729,6 +1729,11 @@
 					"selector": ".rf-symbol__body",
 					"source": "contentWrapper"
 				},
+				"preamble": {
+					"tag": "header",
+					"selector": ".rf-symbol__preamble",
+					"source": "autoLabel"
+				},
 				"eyebrow": {
 					"tag": "eyebrow",
 					"selector": ".rf-symbol__eyebrow",
@@ -1777,9 +1782,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-changelog__header",
+					"selector": ".rf-changelog__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2386,9 +2391,9 @@
 					"selector": ".rf-event__content",
 					"source": "contentWrapper"
 				},
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-event__header",
+					"selector": ".rf-event__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2435,9 +2440,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-itinerary__header",
+					"selector": ".rf-itinerary__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2558,9 +2563,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-cast__header",
+					"selector": ".rf-cast__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2602,9 +2607,9 @@
 				"{content}"
 			],
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-organization__header",
+					"selector": ".rf-organization__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2645,9 +2650,9 @@
 				}
 			},
 			"elements": {
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-timeline__header",
+					"selector": ".rf-timeline__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2821,6 +2826,12 @@
 					"classPattern": ".rf-preview--{value}",
 					"dataAttribute": "data-title"
 				}
+			},
+			"contextModifiers": {
+				"feature": {
+					"suffix": "in-feature",
+					"selector": ".rf-preview--in-feature"
+				}
 			}
 		},
 		"Mockup": {
@@ -2893,9 +2904,9 @@
 					"selector": ".rf-howto__content",
 					"source": "contentWrapper"
 				},
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-howto__header",
+					"selector": ".rf-howto__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -2937,17 +2948,14 @@
 				},
 				"prepTime": {
 					"source": "meta",
-					"classPattern": ".rf-recipe--{value}",
 					"dataAttribute": "data-prep-time"
 				},
 				"cookTime": {
 					"source": "meta",
-					"classPattern": ".rf-recipe--{value}",
 					"dataAttribute": "data-cook-time"
 				},
 				"servings": {
 					"source": "meta",
-					"classPattern": ".rf-recipe--{value}",
 					"dataAttribute": "data-servings"
 				},
 				"difficulty": {
@@ -3002,9 +3010,9 @@
 					"parent": "meta",
 					"condition": "difficulty"
 				},
-				"header": {
+				"preamble": {
 					"tag": "header",
-					"selector": ".rf-recipe__header",
+					"selector": ".rf-recipe__preamble",
 					"source": "autoLabel"
 				},
 				"eyebrow": {
@@ -3059,7 +3067,7 @@
 			"root": ".rf-playlist",
 			"dataRune": "playlist",
 			"childOrder": [
-				"header",
+				"meta",
 				"{content}"
 			],
 			"modifiers": {
@@ -3093,19 +3101,56 @@
 				"collapse": {
 					"source": "meta",
 					"dataAttribute": "data-collapse"
+				},
+				"artist": {
+					"source": "meta",
+					"dataAttribute": "data-artist"
+				},
+				"hasPlayer": {
+					"source": "meta",
+					"dataAttribute": "data-has-player"
+				},
+				"id": {
+					"source": "meta",
+					"dataAttribute": "data-id"
 				}
 			},
 			"elements": {
-				"header": {
+				"meta": {
 					"tag": "div",
-					"selector": ".rf-playlist__header",
+					"selector": ".rf-playlist__meta",
 					"source": "structure"
 				},
 				"type-badge": {
 					"tag": "span",
 					"selector": ".rf-playlist__type-badge",
 					"source": "structure",
-					"parent": "header"
+					"parent": "meta"
+				},
+				"preamble": {
+					"tag": "header",
+					"selector": ".rf-playlist__preamble",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-playlist__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-playlist__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-playlist__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-playlist__image",
+					"source": "autoLabel"
 				},
 				"media": {
 					"tag": "media",

package/index.css

@@ -25,6 +25,16 @@
 /* Universal Rune Attributes */
 @import './styles/base/attributes.css';
 
+/* Dimensions */
+@import './styles/dimensions/metadata.css';
+@import './styles/dimensions/density.css';
+@import './styles/dimensions/sections.css';
+@import './styles/dimensions/state.css';
+@import './styles/dimensions/media.css';
+@import './styles/dimensions/surfaces.css';
+@import './styles/dimensions/checklist.css';
+@import './styles/dimensions/sequence.css';
+
 /* Runes */
 @import './styles/runes/accordion.css';
 @import './styles/runes/annotate.css';
@@ -84,6 +94,7 @@
 @import './styles/runes/timeline.css';
 @import './styles/runes/toc.css';
 @import './styles/runes/track.css';
+@import './styles/runes/xref.css';
 @import './styles/runes/swatch.css';
 @import './styles/runes/palette.css';
 @import './styles/runes/typography.css';
@@ -95,3 +106,12 @@
 @import './styles/runes/tint.css';
 @import './styles/runes/showcase.css';
 @import './styles/runes/bg.css';
+@import './styles/runes/spec.css';
+@import './styles/runes/work.css';
+@import './styles/runes/bug.css';
+@import './styles/runes/decision.css';
+@import './styles/runes/milestone.css';
+@import './styles/runes/backlog.css';
+@import './styles/runes/decision-log.css';
+@import './styles/runes/plan-progress.css';
+@import './styles/runes/plan-activity.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.5",
+  "version": "0.9.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -51,15 +51,15 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.8.5",
-    "@refrakt-md/transform": "0.8.5",
-    "@refrakt-md/types": "0.8.5",
-    "@refrakt-md/svelte": "0.8.5"
+    "@refrakt-md/runes": "0.9.0",
+    "@refrakt-md/transform": "0.9.0",
+    "@refrakt-md/types": "0.9.0",
+    "@refrakt-md/svelte": "0.9.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
-    "@refrakt-md/html": "0.8.5"
+    "@refrakt-md/html": "0.9.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/checklist.css

@@ -0,0 +1,81 @@
+/* === Checklist: universal checkbox item styling === */
+
+/* All checklist items get left padding for the indicator */
+[data-checked] {
+	position: relative;
+	padding-left: 1.75rem;
+	list-style: none;
+	margin-left: -1.5rem;
+}
+
+/* Indicator base — positioned left of text */
+[data-checked]::before {
+	content: '';
+	position: absolute;
+	left: 0.125rem;
+	top: 0.5em;
+	width: 1rem;
+	height: 1rem;
+	border-radius: var(--rf-radius-sm, 0.25rem);
+	border: 2px solid var(--rf-color-border);
+	background: transparent;
+}
+
+/* Checked — filled with checkmark */
+[data-checked="checked"]::before {
+	background: var(--rf-color-success);
+	border-color: var(--rf-color-success);
+}
+
+[data-checked="checked"] {
+	color: var(--rf-color-muted);
+}
+
+/* Active — primary colour with emphasis */
+[data-checked="active"]::before {
+	border-color: var(--rf-color-primary);
+	background: var(--rf-color-primary);
+	box-shadow: 0 0 0 3px color-mix(in oklch, var(--rf-color-primary) 20%, transparent);
+}
+
+[data-checked="active"] {
+	color: var(--rf-color-primary);
+	font-weight: 600;
+}
+
+/* Skipped — muted with strikethrough */
+[data-checked="skipped"]::before {
+	background: var(--rf-color-muted);
+	border-color: var(--rf-color-muted);
+}
+
+[data-checked="skipped"] {
+	text-decoration: line-through;
+	color: var(--rf-color-muted);
+}
+
+/* Unchecked — empty indicator (inherits base styling) */
+[data-checked="unchecked"]::before {
+	background: transparent;
+}
+
+/* === Density interaction === */
+
+/* Compact: tighter spacing */
+[data-density="compact"] [data-checked] {
+	padding-left: 1.5rem;
+}
+
+[data-density="compact"] [data-checked]::before {
+	width: 0.75rem;
+	height: 0.75rem;
+}
+
+/* Minimal: indicators only, no text */
+[data-density="minimal"] [data-checked] {
+	font-size: 0;
+	padding-left: 0;
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+}

package/styles/dimensions/density.css

@@ -0,0 +1,51 @@
+/* ─── Density Dimension ─────────────────────────────────────────────────
+ * Controls spacing, visibility, and detail level across all runes.
+ * Three levels: full (dedicated page), compact (grid/card), minimal (list).
+ *
+ * Sets --rune-padding which surfaces consume for container padding.
+ * ────────────────────────────────────────────────────────────────────── */
+
+/* ─── Full: all content visible, generous spacing ─────────────────── */
+
+[data-density="full"] {
+	--rune-padding: var(--rf-spacing-md);
+}
+
+/* ─── Compact: truncated descriptions, tight spacing ──────────────── */
+
+[data-density="compact"] {
+	--rune-padding: var(--rf-spacing-sm);
+}
+
+[data-density="compact"] [data-section="description"] {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+[data-density="compact"] [data-meta-rank="secondary"] {
+	display: none;
+}
+
+/* ─── Minimal: title and primary metadata only ────────────────────── */
+
+[data-density="minimal"] {
+	--rune-padding: var(--rf-spacing-xs);
+}
+
+[data-density="minimal"] [data-section="description"] {
+	display: none;
+}
+
+[data-density="minimal"] [data-section="body"] {
+	display: none;
+}
+
+[data-density="minimal"] [data-section="footer"] {
+	display: none;
+}
+
+[data-density="minimal"] [data-meta-rank="secondary"] {
+	display: none;
+}

package/styles/dimensions/media.css

@@ -0,0 +1,62 @@
+/* ─── Media Slots Dimension ─────────────────────────────────────────────
+ * Generic treatment for 5 media slot types: portrait, cover, thumbnail,
+ * hero, icon. Applied via data-media attribute on image/media elements.
+ *
+ * Includes density × media interactions (compact shrinks, minimal hides).
+ * ────────────────────────────────────────────────────────────────────── */
+
+/* ─── Portrait: circular crop ─────────────────────────────────────── */
+
+[data-media="portrait"] {
+	border-radius: var(--rf-radius-full);
+	aspect-ratio: 1 / 1;
+	object-fit: cover;
+	width: var(--media-portrait-size, 5rem);
+	height: var(--media-portrait-size, 5rem);
+}
+
+/* ─── Cover: full-width banner image ──────────────────────────────── */
+
+[data-media="cover"] {
+	width: 100%;
+	object-fit: cover;
+	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+}
+
+/* ─── Thumbnail: small fixed preview ──────────────────────────────── */
+
+[data-media="thumbnail"] {
+	width: var(--media-thumbnail-size, 3rem);
+	height: var(--media-thumbnail-size, 3rem);
+	border-radius: var(--rf-radius-sm);
+	object-fit: cover;
+	flex-shrink: 0;
+}
+
+/* ─── Hero: large responsive image ────────────────────────────────── */
+
+[data-media="hero"] {
+	width: 100%;
+	object-fit: cover;
+}
+
+/* ─── Icon: small square, no crop ─────────────────────────────────── */
+
+[data-media="icon"] {
+	width: var(--media-icon-size, 2rem);
+	height: var(--media-icon-size, 2rem);
+	object-fit: contain;
+	flex-shrink: 0;
+}
+
+/* ─── Density × Media ─────────────────────────────────────────────── */
+
+/* Compact: smaller portraits */
+[data-density="compact"] [data-media="portrait"] {
+	--media-portrait-size: 3rem;
+}
+
+/* Minimal: hide all media */
+[data-density="minimal"] [data-media] {
+	display: none;
+}