@refrakt-md/lumina 0.17.0 → 0.18.0

package/contracts/structures.json

@@ -284,7 +284,14 @@
 			"dataRune": "embed",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"modifiers": {
+				"provider": {
+					"source": "meta",
+					"default": "generic",
+					"dataAttribute": "data-provider"
+				}
+			}
 		},
 		"Breadcrumb": {
 			"block": "breadcrumb",
@@ -425,6 +432,16 @@
 						"duration",
 						"currency"
 					]
+				},
+				"preamble": {
+					"tag": "header",
+					"selector": ".rf-budget__preamble",
+					"source": "layout",
+					"children": [
+						"headline",
+						"blurb",
+						"image"
+					]
 				}
 			}
 		},
@@ -737,7 +754,18 @@
 			"dataRune": "chart",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"modifiers": {
+				"type": {
+					"source": "meta",
+					"default": "bar",
+					"dataAttribute": "data-type"
+				},
+				"stacked": {
+					"source": "meta",
+					"dataAttribute": "data-stacked"
+				}
+			}
 		},
 		"PullQuote": {
 			"block": "pullquote",
@@ -1112,7 +1140,14 @@
 			"dataRune": "diagram",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"modifiers": {
+				"language": {
+					"source": "meta",
+					"default": "mermaid",
+					"dataAttribute": "data-language"
+				}
+			}
 		},
 		"Tint": {
 			"block": "tint",
@@ -1672,31 +1707,12 @@
 			"childOrder": [
 				"{content}"
 			],
-			"elements": {
-				"preamble": {
-					"tag": "header",
-					"selector": ".rf-comparison__preamble",
-					"source": "autoLabel"
-				},
-				"eyebrow": {
-					"tag": "eyebrow",
-					"selector": ".rf-comparison__eyebrow",
-					"source": "autoLabel"
-				},
-				"headline": {
-					"tag": "headline",
-					"selector": ".rf-comparison__headline",
-					"source": "autoLabel"
-				},
-				"blurb": {
-					"tag": "blurb",
-					"selector": ".rf-comparison__blurb",
-					"source": "autoLabel"
-				},
-				"image": {
-					"tag": "image",
-					"selector": ".rf-comparison__image",
-					"source": "autoLabel"
+			"modifiers": {
+				"layout": {
+					"source": "meta",
+					"default": "table",
+					"classPattern": ".rf-comparison--{value}",
+					"dataAttribute": "data-layout"
 				}
 			}
 		},
@@ -1831,7 +1847,12 @@
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-symbol__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"headline",
+						"blurb",
+						"image"
+					]
 				},
 				"headline": {
 					"tag": "headline",
@@ -1917,6 +1938,8 @@
 			"root": ".rf-character",
 			"dataRune": "character",
 			"childOrder": [
+				"portrait",
+				"content",
 				"{content}"
 			],
 			"modifiers": {
@@ -1954,10 +1977,24 @@
 						"status"
 					]
 				},
+				"content": {
+					"tag": "div",
+					"selector": ".rf-character__content",
+					"source": "layout",
+					"children": [
+						"preamble",
+						"metadata",
+						"sections",
+						"body"
+					]
+				},
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-character__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"name"
+					]
 				}
 			}
 		},
@@ -1982,6 +2019,8 @@
 			"root": ".rf-realm",
 			"dataRune": "realm",
 			"childOrder": [
+				"scene",
+				"content",
 				"{content}"
 			],
 			"modifiers": {
@@ -2048,10 +2087,24 @@
 					"selector": ".rf-realm__scene",
 					"source": "autoLabel"
 				},
+				"content": {
+					"tag": "div",
+					"selector": ".rf-realm__content",
+					"source": "layout",
+					"children": [
+						"preamble",
+						"metadata",
+						"body",
+						"sections"
+					]
+				},
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-realm__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"name"
+					]
 				}
 			},
 			"inlineStyles": {
@@ -2127,6 +2180,8 @@
 			"root": ".rf-faction",
 			"dataRune": "faction",
 			"childOrder": [
+				"scene",
+				"content",
 				"{content}"
 			],
 			"modifiers": {
@@ -2193,10 +2248,24 @@
 					"selector": ".rf-faction__scene",
 					"source": "autoLabel"
 				},
+				"content": {
+					"tag": "div",
+					"selector": ".rf-faction__content",
+					"source": "layout",
+					"children": [
+						"preamble",
+						"metadata",
+						"body",
+						"sections"
+					]
+				},
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-faction__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"name"
+					]
 				}
 			},
 			"inlineStyles": {
@@ -2425,7 +2494,13 @@
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-event__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"eyebrow",
+						"headline",
+						"blurb",
+						"image"
+					]
 				},
 				"eyebrow": {
 					"tag": "eyebrow",
@@ -2611,7 +2686,29 @@
 			"parent": "Map",
 			"childOrder": [
 				"{content}"
-			]
+			],
+			"modifiers": {
+				"lat": {
+					"source": "meta",
+					"dataAttribute": "data-lat"
+				},
+				"lng": {
+					"source": "meta",
+					"dataAttribute": "data-lng"
+				},
+				"address": {
+					"source": "meta",
+					"dataAttribute": "data-address"
+				},
+				"url": {
+					"source": "meta",
+					"dataAttribute": "data-url"
+				},
+				"group": {
+					"source": "meta",
+					"dataAttribute": "data-group"
+				}
+			}
 		},
 		"Cast": {
 			"block": "cast",
@@ -2932,6 +3029,7 @@
 			"root": ".rf-howto",
 			"dataRune": "how-to",
 			"childOrder": [
+				"content",
 				"{content}"
 			],
 			"modifiers": {
@@ -2961,7 +3059,13 @@
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-howto__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"eyebrow",
+						"headline",
+						"blurb",
+						"image"
+					]
 				},
 				"eyebrow": {
 					"tag": "eyebrow",
@@ -2982,6 +3086,17 @@
 					"tag": "image",
 					"selector": ".rf-howto__image",
 					"source": "autoLabel"
+				},
+				"content": {
+					"tag": "div",
+					"selector": ".rf-howto__content",
+					"source": "layout",
+					"children": [
+						"preamble",
+						"metadata",
+						"tools",
+						"steps"
+					]
 				}
 			}
 		},
@@ -2990,6 +3105,8 @@
 			"root": ".rf-recipe",
 			"dataRune": "recipe",
 			"childOrder": [
+				"media",
+				"content",
 				"{content}"
 			],
 			"modifiers": {
@@ -3053,7 +3170,12 @@
 				"preamble": {
 					"tag": "header",
 					"selector": ".rf-recipe__preamble",
-					"source": "autoLabel"
+					"source": "layout",
+					"children": [
+						"eyebrow",
+						"headline",
+						"blurb"
+					]
 				},
 				"eyebrow": {
 					"tag": "eyebrow",
@@ -3079,6 +3201,18 @@
 					"tag": "media",
 					"selector": ".rf-recipe__media",
 					"source": "autoLabel"
+				},
+				"content": {
+					"tag": "div",
+					"selector": ".rf-recipe__content",
+					"source": "layout",
+					"children": [
+						"preamble",
+						"metadata",
+						"ingredients",
+						"steps",
+						"tips"
+					]
 				}
 			},
 			"inlineStyles": {
@@ -3107,6 +3241,8 @@
 			"root": ".rf-playlist",
 			"dataRune": "playlist",
 			"childOrder": [
+				"media",
+				"content",
 				"{content}"
 			],
 			"modifiers": {
@@ -3160,11 +3296,6 @@
 					"selector": ".rf-playlist__eyebrow",
 					"source": "autoLabel"
 				},
-				"preamble": {
-					"tag": "header",
-					"selector": ".rf-playlist__preamble",
-					"source": "autoLabel"
-				},
 				"headline": {
 					"tag": "headline",
 					"selector": ".rf-playlist__headline",
@@ -3184,6 +3315,28 @@
 					"tag": "media",
 					"selector": ".rf-playlist__media",
 					"source": "autoLabel"
+				},
+				"content": {
+					"tag": "div",
+					"selector": ".rf-playlist__content",
+					"source": "layout",
+					"children": [
+						"eyebrow",
+						"preamble",
+						"player",
+						"tracks",
+						"body"
+					]
+				},
+				"preamble": {
+					"tag": "header",
+					"selector": ".rf-playlist__preamble",
+					"source": "layout",
+					"children": [
+						"headline",
+						"blurb",
+						"image"
+					]
 				}
 			},
 			"inlineStyles": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.17.0",
-    "@refrakt-md/transform": "0.17.0",
-    "@refrakt-md/types": "0.17.0"
+    "@refrakt-md/runes": "0.18.0",
+    "@refrakt-md/transform": "0.18.0",
+    "@refrakt-md/types": "0.18.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/runes/chart.css

@@ -1,9 +1,40 @@
 /* Chart */
 .rf-chart {
+	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	margin: 0;
 }
+
+/* Data table — the no-JS / screen-reader source of truth. Visible as the
+ * fallback; visually-hidden (but kept for assistive tech) once rf-chart has
+ * rendered the svg. */
+.rf-chart__data {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.875rem;
+}
+.rf-chart__data caption {
+	font-weight: 600;
+	margin-bottom: 0.75rem;
+}
+.rf-chart__data th,
+.rf-chart__data td {
+	border: 1px solid var(--rf-color-border);
+	padding: 0.375rem 0.625rem;
+	text-align: left;
+}
+.rf-chart[data-rendered] .rf-chart__data {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
 .rf-chart__title {
 	font-weight: 600;
 	font-size: 1rem;

package/styles/runes/drawer.css

@@ -124,6 +124,10 @@ dialog.rf-drawer .rf-drawer__header {
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--rf-spacing-md);
+	/* Reset the generous `[data-section="header"]` bottom margin (3rem) — the
+	 * dialog chrome spaces the header from the body via the body's own
+	 * padding, so the section default would push the body off-screen. */
+	margin: 0;
 	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
 	border-bottom: 1px solid var(--rf-drawer-border);
 	background: var(--rf-drawer-bg);

package/styles/runes/expand.css

@@ -23,15 +23,13 @@
 	margin: var(--rf-spacing-md) 0;
 }
 
-/* Peer-document mode — subtle top + bottom rule, no background, no
- * rounded corners. Reads as "set-aside material" without competing
- * visually with the host content. Authors who want a stronger
- * treatment can override `.rf-expand[data-outline-scope]` in their
- * theme. */
+/* Peer-document mode — no background, no rounded corners, no rules.
+ * Reads as "set-aside material" through spacing alone, without competing
+ * visually with the host content. Authors who want a stronger treatment
+ * (rules, background, etc.) can override `.rf-expand[data-outline-scope]`
+ * in their theme. */
 .rf-expand[data-outline-scope] {
 	padding: var(--rf-spacing-md) 0;
-	border-top: 1px solid var(--rf-color-border);
-	border-bottom: 1px solid var(--rf-color-border);
 }
 
 /* Tone down embedded headings so the host outline keeps visual primacy.

package/styles/runes/mockup.css

@@ -122,7 +122,7 @@
 	z-index: 2;
 }
 
-.rf-mockup__notch--dynamic-island {
+.rf-mockup__notch[data-notch="dynamic-island"] {
 	width: 120px;
 	height: 34px;
 	top: 12px;
@@ -130,7 +130,7 @@
 	border-radius: 20px;
 }
 
-.rf-mockup__notch--classic {
+.rf-mockup__notch[data-notch="classic"] {
 	width: 150px;
 	height: 28px;
 	top: 0;
@@ -138,7 +138,7 @@
 	border-radius: 0 0 20px 20px;
 }
 
-.rf-mockup__notch--punch-hole {
+.rf-mockup__notch[data-notch="punch-hole"] {
 	width: 12px;
 	height: 12px;
 	top: 16px;
@@ -225,7 +225,7 @@
 	padding-bottom: 60px;
 }
 
-.rf-mockup--iphone-se .rf-mockup__notch--classic {
+.rf-mockup--iphone-se .rf-mockup__notch[data-notch="classic"] {
 	position: relative;
 	top: auto;
 	left: auto;
@@ -355,15 +355,15 @@
 	border-radius: var(--rf-radius-full);
 }
 
-.rf-mockup__traffic-light--close {
+.rf-mockup__traffic-light[data-light="close"] {
 	background: #ff5f57;
 }
 
-.rf-mockup__traffic-light--minimize {
+.rf-mockup__traffic-light[data-light="minimize"] {
 	background: #febc2e;
 }
 
-.rf-mockup__traffic-light--maximize {
+.rf-mockup__traffic-light[data-light="maximize"] {
 	background: #28c840;
 }