@refrakt-md/lumina 0.16.1 → 0.18.0

package/index.css

@@ -44,6 +44,7 @@
 @import './styles/runes/api.css';
 @import './styles/runes/card.css';
 @import './styles/runes/badge.css';
+@import './styles/runes/bar.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/blog.css';
 @import './styles/runes/bond.css';

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.16.1",
+  "version": "0.18.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.16.1",
-    "@refrakt-md/transform": "0.16.1",
-    "@refrakt-md/types": "0.16.1"
+    "@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/dimensions/metadata.css

@@ -1,19 +1,15 @@
 /* ─── Metadata Dimensions ──────────────────────────────────────────────
- * Generic styling for metadata badges across all runes.
- * Works via data-meta-type, data-meta-rank, and data-meta-sentiment
- * attributes emitted by the identity transform engine.
- *
- * Composability: --meta-color cascades from sentiment → type rules.
- *                --meta-font-size cascades from rank → type rules.
+ * SPEC-080 typography / geometry split:
+ *  - `[data-meta-type=…]` selectors carry ONLY typography hints
+ *    (monospace, tabular-nums). No padding, no border, no chip geometry.
+ *  - Geometry comes from `[data-zone-layout=…]` selectors (`bar`,
+ *    `definition-list`) and from the universal `.rf-badge` class, which
+ *    is emitted by chip-type fields AND by the standalone `{% badge %}`
+ *    rune.
+ *  - Sentiment rules drive `--meta-color`, which the chip and any
+ *    sentiment-tinted text inherits.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Rank ─────────────────────────────────────────────────────────── */
-
-[data-meta-rank="primary"],
-[data-meta-rank="secondary"] {
-	--meta-font-size: 0.8125rem;
-}
-
 /* ─── Sentiment ────────────────────────────────────────────────────── */
 
 [data-meta-sentiment="positive"] { --meta-color: var(--rf-color-success, #10b981); }
@@ -21,105 +17,139 @@
 [data-meta-sentiment="caution"]  { --meta-color: var(--rf-color-warning, #f59e0b); }
 [data-meta-sentiment="neutral"]  { --meta-color: var(--rf-color-muted, #64748b); }
 
-/* Colored dot for any item with a sentiment */
-[data-meta-sentiment]::before {
-	content: '';
-	width: 0.5rem;
-	height: 0.5rem;
-	border-radius: 50%;
-	background: var(--meta-color, var(--rf-color-muted));
-	flex-shrink: 0;
-}
+/* ─── Meta Types — typography only ─────────────────────────────────── */
 
-/* ─── Meta Types ───────────────────────────────────────────────────── */
-
-/* Status: bordered pill */
-[data-meta-type="status"] {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.375rem;
-	padding: 0.5em 1.0em;
-	border: 1px solid var(--rf-color-border);
-	border-radius: 999px;
+[data-meta-type="id"],
+[data-meta-type="code"] {
+	font-family: var(--rf-font-mono, monospace);
 	font-size: var(--meta-font-size, 0.8125rem);
-	font-weight: 500;
-	color: var(--rf-color-muted);
 }
 
-/* Category: bordered pill */
-[data-meta-type="category"] {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.375rem;
-	padding: 0.5em 1.0em;
-	border: 1px solid var(--rf-color-border);
-	border-radius: 999px;
-	font-size: var(--meta-font-size, 0.8125rem);
+/* IDs read as primary-coloured references wherever they appear (eyebrow
+ * bars, metadata def-lists, etc.) — a semantic treatment of the `id` type,
+ * not a per-layout one. `code` (e.g. API paths) stays neutral monospace. */
+[data-meta-type="id"] {
+	color: var(--rf-color-primary);
 	font-weight: 500;
-	color: var(--rf-color-muted);
 }
 
-/* Quantity: bordered pill with tabular numbers */
 [data-meta-type="quantity"] {
-	display: inline-flex;
-	align-items: center;
-	padding: 0.5em 1.0em;
-	border: 1px solid var(--rf-color-border);
-	border-radius: 999px;
 	font-variant-numeric: tabular-nums;
-	font-weight: 600;
 	font-size: var(--meta-font-size, 0.8125rem);
-	color: var(--rf-color-muted);
 }
 
-/* Temporal: bordered pill with time association */
 [data-meta-type="temporal"] {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.25rem;
-	padding: 0.5em 1.0em;
-	border: 1px solid var(--rf-color-border);
-	border-radius: 999px;
-	font-size: var(--meta-font-size, 0.8125rem);
 	font-variant-numeric: tabular-nums;
-	color: var(--rf-color-muted);
+	font-size: var(--meta-font-size, 0.8125rem);
 }
 
-/* Tag: bordered pill */
-[data-meta-type="tag"] {
+/* Rating — `value` filled marks out of `total`; each mark carries
+ * `data-filled`. Stars via colour (filled = primary, empty = border). */
+[data-meta-type="rating"] {
 	display: inline-flex;
-	align-items: center;
-	padding: 0.5em 1.0em;
-	border: 1px solid var(--rf-color-border);
-	border-radius: 999px;
-	font-size: calc(var(--meta-font-size, 0.8125rem) * 0.9);
-	color: var(--rf-color-muted);
+	gap: 0.0625rem;
+	line-height: 1;
+}
+[data-meta-type="rating"] span::before {
+	content: '★';
+}
+[data-meta-type="rating"] span[data-filled="true"] {
+	color: var(--rf-color-primary);
+}
+[data-meta-type="rating"] span[data-filled="false"] {
+	color: var(--rf-color-border);
 }
 
-/* ID: bordered pill, monospace */
-[data-meta-type="id"] {
-	display: inline-flex;
+[data-meta-type="status"],
+[data-meta-type="category"],
+[data-meta-type="tag"] {
+	font-size: var(--meta-font-size, 0.8125rem);
+}
+
+/* Linked eyebrow content (matches today's hero behaviour). */
+[data-zone="eyebrow"] a {
+	color: var(--rf-color-primary);
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+}
+
+/* ─── Layout: bar (SPEC-080) ───────────────────────────────────────── */
+
+/* Horizontal flex row of fields, each in its own intrinsic shape (chip or
+ * bare). Wraps by default; `data-wrap="false"` keeps it on one line. A field
+ * tagged `data-align="end"` (and everything after it) is pushed to the right
+ * edge. */
+[data-zone-layout="bar"] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
 	align-items: center;
-	padding: 0.5em 1.0em;
+}
+[data-zone-layout="bar"][data-wrap="false"] {
+	flex-wrap: nowrap;
+}
+[data-zone-layout="bar"] [data-align="end"] {
+	margin-left: auto;
+}
+
+/* ─── Layout: definition-list ──────────────────────────────────────── */
+
+/* Single source of truth for the `definition-list` primitive, shared by
+ * both the projected metadata zone (`<dl data-zone="…">`) and the authored
+ * `{% deflist %}` rune (`<dl data-rune="deflist">`) — they emit the same
+ * `data-zone-layout` so they render identically (geometry, borders, margin).
+ *
+ * Each row stacks `dt` above `dd`. Rows flow into multiple columns
+ * via `auto-fit` — CSS grid naturally collapses to a single column
+ * when the container is narrower than the minimum, so the same rule
+ * reads fine on mobile and packs dense on wider screens without a
+ * media-query step. The 8rem minimum keeps short label / value pairs
+ * like "Prep" + "15m" tight while leaving room for the per-item border. */
+[data-zone-layout="definition-list"] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+	gap: 0.75rem;
+	margin: 1.25rem 0;
+}
+
+[data-zone-layout="definition-list"] > [data-name="row"] {
+	display: flex;
+	flex-direction: column;
+	gap: 0.125rem;
+	min-width: 0;
+	padding: 0.625rem 0.75rem;
 	border: 1px solid var(--rf-color-border);
-	border-radius: 999px;
-	font-family: var(--rf-font-mono, monospace);
-	font-size: var(--meta-font-size, 0.8125rem);
+	border-radius: var(--rf-radius-sm);
+}
+
+[data-zone-layout="definition-list"] dt {
+	font-size: 0.75rem;
 	font-weight: 500;
 	color: var(--rf-color-muted);
 }
 
+[data-zone-layout="definition-list"] dd {
+	margin: 0;
+	font-size: 0.875rem;
+}
+
+/* Multi-value dd (fields with `splitOn`) renders a row of chips
+ * inside the cell, flowing naturally. */
+[data-zone-layout="definition-list"] dd[data-multi-value] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+}
+
 /* ─── Labels ──────────────────────────────────────────────────────── */
 
-/* Label element within metadata items — thin, muted style.
- * Themes can override or hide entirely: [data-meta-label] { display: none } */
+/* Label element within a chip — thin, muted; pairs visually with the value */
 [data-meta-label] {
 	font-weight: 400;
 	opacity: 0.65;
 }
 
-/* Visually hidden labels — accessible to screen readers but not visible.
- * Themes can restore with: [data-meta-label-hidden] { position: static; ... } */
+/* Visually hidden labels — accessible to screen readers only */
 [data-meta-label-hidden] {
 	position: absolute;
 	width: 1px;
@@ -132,22 +162,29 @@
 	border: 0;
 }
 
-/* ─── Mobile: compact badges ─────────────────────────────────────────── */
+/* ─── Mobile: compact ──────────────────────────────────────────────── */
 
 @media (max-width: 48rem) {
-	[data-meta-type="status"],
-	[data-meta-type="category"],
-	[data-meta-type="quantity"],
-	[data-meta-type="temporal"],
-	[data-meta-type="tag"],
-	[data-meta-type="id"] {
-		padding: 0.25em 0.625em;
-		font-size: calc(var(--meta-font-size, 0.8125rem) * 0.9);
+	[data-zone-layout="bar"] {
+		gap: 0.375rem;
+	}
+
+	/* On narrow screens, fall back to the original label-left / value-right
+	 * list: each row's dt/dd flow directly into a two-column grid via
+	 * `display: contents`, which drops the per-item border (no box to paint).
+	 * The border + padding move to the list itself so the whole group reads
+	 * as one bordered card. */
+	[data-zone-layout="definition-list"] {
+		grid-template-columns: max-content 1fr;
+		gap: 0.25rem 1rem;
+		align-items: baseline;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
 	}
 
-	[data-meta-sentiment]::before {
-		width: 0.375rem;
-		height: 0.375rem;
+	[data-zone-layout="definition-list"] > [data-name="row"] {
+		display: contents;
 	}
 
 	[data-section="header"] {

package/styles/runes/api.css

@@ -1,16 +1,12 @@
 /* Api */
-.rf-api__header {
+
+/* SPEC-080: the endpoint header is a projected `eyebrow` bar (method + path
+ * + auth). Geometry + the auth right-push come from `[data-zone-layout="bar"]`
+ * in dimensions/metadata.css; field shape (method/auth chips, path mono code)
+ * is intrinsic to metaType. */
+.rf-api__eyebrow {
 	padding: 0.5rem 0;
 }
-.rf-api__method {
-	font-family: var(--rf-font-mono);
-}
-.rf-api__path {
-	background: none;
-}
-.rf-api__auth {
-	margin-left: auto;
-}
 .rf-api__body {
 	padding: 0;
 }

package/styles/runes/badge.css

@@ -1,16 +1,13 @@
 /* Badge rune — standalone inline chip.
  *
- * Built atop the metadata pill base (`data-meta-type`), but reshaped to the
- * compact chip look used by plan-progress status counts: **no border**,
- * solid-ish sentiment-tinted background, smaller font + tighter padding, and
- * a small corner radius. Tints come from the universal `--meta-color` set by
- * `dimensions/metadata.css`'s sentiment rules (positive / caution / negative /
- * neutral → success / warning / danger / muted). Background is a `color-mix`
- * of that color, so the chip stays sentiment-flexible — any value the theme
+ * The universal chip primitive emitted by `{% badge %}` AND by every
+ * chip-type field a block renders (`bar` chips, `definition-list` `<dd>`
+ * for chip-type fields). Tints come from the
+ * universal `--meta-color` set by `dimensions/metadata.css`'s
+ * sentiment rules (positive / caution / negative / neutral → success
+ * / warning / danger / muted). Background is a `color-mix` of that
+ * color, so the chip stays sentiment-flexible — any value the theme
  * gives `--meta-color` works without per-status selectors.
- *
- * `rank="primary"` boosts emphasis with a heavier tint and bolder weight,
- * useful for labels that should dominate over neighbours.
  */
 
 .rf-badge {
@@ -24,14 +21,3 @@
 	border-radius: var(--rf-radius-sm);
 	white-space: nowrap;
 }
-
-.rf-badge[data-meta-rank="primary"] {
-	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 28%, transparent);
-	font-weight: 600;
-}
-
-/* Drop the sentiment dot — the background tint carries the cue for
- * standalone chips, and the dot competes visually with adjacent prose. */
-.rf-badge::before {
-	display: none;
-}

package/styles/runes/bar.css

@@ -0,0 +1,10 @@
+/* Bar rune — composable handle for the SPEC-080 `bar` layout.
+ *
+ * Geometry comes from `[data-zone-layout="bar"]` in
+ * `dimensions/metadata.css` (flex row, wrap, `[data-align="end"]`
+ * right-push). This file only carries the minimum class hook so the rune
+ * participates in CSS tree-shaking. */
+
+.rf-bar {
+	margin: 0.5rem 0;
+}

package/styles/runes/budget.css

@@ -1,9 +1,9 @@
 /* Budget */
+
+/* Duration + currency meta row — flex/gap from the shared
+ * `[data-zone-layout=bar]` primitive; this block owns only its spacing. */
 .rf-budget__meta {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.5rem;
+	margin-bottom: 0.75rem;
 }
 .rf-budget__preamble {
 	margin-bottom: 1.5rem;

package/styles/runes/bug.css

@@ -1,13 +1,10 @@
 /* Bug */
 
-/* Primary badges: ID left, status right */
-.rf-bug__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+ * header-secondary. Layout-level geometry lives on [data-zone-layout]
+ * selectors; this file carries bug-specific spacing + assignee prefix. */
 
-/* Preamble: title + optional description between badge groups */
-.rf-bug__preamble {
+.rf-bug__eyebrow {
 	margin-bottom: 0.75rem;
 }
 .rf-bug__title h1,
@@ -16,15 +13,12 @@
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-bug__header-secondary {
+.rf-bug__metadata {
 	margin-bottom: 1.5rem;
 }
 
-.rf-bug__assignee-badge {
-	margin-left: auto;
-}
-.rf-bug__assignee-badge::before { content: '@'; }
+.rf-bug__metadata [data-field="assignee"] dd .rf-badge::before { content: '@'; }
+
 .rf-bug__body {
 	font-size: 0.925rem;
 	line-height: 1.65;

package/styles/runes/character.css

@@ -1,6 +1,14 @@
-/* Character */
+/* Character — the title and the role/status def-list come from the shared
+ * dimensions (sections + metadata); only the floated portrait avatar is
+ * character-specific chrome. Unlike faction/realm, character is not a split
+ * rune: the portrait floats and the content column wraps around it. */
 
-/* Portrait */
+/* Contain the floated portrait within the article */
+.rf-character {
+	display: flow-root;
+}
+
+/* Portrait — floated circular avatar */
 .rf-character__portrait {
 	float: right;
 	margin-left: 1.5rem;
@@ -22,20 +30,10 @@
 	flex-direction: column;
 	gap: 1rem;
 }
-.rf-character__content {
-	clear: both;
-}
 .rf-character__content ul,
 .rf-character__content ol {
 	padding-left: 1.5rem;
 }
-.rf-character > span[property="name"] {
-	display: block;
-	font-size: 1.5rem;
-	font-weight: 700;
-	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
-}
 
 /* Character Section */
 .rf-character-section {

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/codegroup.css

@@ -22,18 +22,26 @@
 	border-bottom: 1px solid var(--rf-color-border);
 	margin-bottom: 0;
 }
-.rf-codegroup__dot {
-	width: 10px;
+/* Window chrome — three traffic-light dots painted as gradients on one
+ * pseudo-element. The element reserves real width (three 10px dots, 1rem
+ * apart) so the flex row spaces the title clear of the dots — box-shadow
+ * dots take no layout space and overlapped the title. Pure decoration, so
+ * it lives entirely in CSS (no markup). */
+.rf-codegroup__topbar::before {
+	content: '';
+	flex: 0 0 auto;
+	width: 2.625rem;
 	height: 10px;
-	border-radius: var(--rf-radius-full);
 	opacity: 0.8;
-}
-.rf-codegroup__dot:nth-child(1) { background: #ef4444; }
-.rf-codegroup__dot:nth-child(2) { background: #f59e0b; }
-.rf-codegroup__dot:nth-child(3) { background: #22c55e; }
-.rf-codegroup__title[data-section="title"] {
+	background-repeat: no-repeat;
+	background-image:
+		radial-gradient(circle at 5px 50%, #ef4444 5px, transparent 5px),
+		radial-gradient(circle at calc(5px + 1rem) 50%, #f59e0b 5px, transparent 5px),
+		radial-gradient(circle at calc(5px + 2rem) 50%, #22c55e 5px, transparent 5px);
+}
+/* Filename title — the topbar bar's lone `code` field. */
+.rf-codegroup__topbar [data-meta-type="code"] {
 	margin-left: 0.5rem;
-	font-family: var(--rf-font-mono);
 	font-size: 0.8rem;
 	font-weight: normal;
 	color: var(--rf-color-muted);

package/styles/runes/decision.css

@@ -1,13 +1,9 @@
 /* Decision */
 
-/* Primary badges: ID left, status right */
-.rf-decision__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+ * header-secondary. */
 
-/* Preamble: title + optional description between badge groups */
-.rf-decision__preamble {
+.rf-decision__eyebrow {
 	margin-bottom: 0.75rem;
 }
 .rf-decision__title h1,
@@ -16,8 +12,7 @@
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-decision__header-secondary {
+.rf-decision__metadata {
 	margin-bottom: 1.5rem;
 }
 

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/event.css

@@ -1,11 +1,16 @@
 /* Event */
-.rf-event__meta {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.5rem;
+
+/* When/where def-list — geometry from the shared `[data-zone-layout=
+ * definition-list]` primitive; this block owns only its top margin. */
+.rf-event__metadata {
+	margin-top: 1.25rem;
 }
+
+/* Register CTA — a bar-wrapped link; style the inner `<a>` as a button. */
 .rf-event__register {
+	margin-top: 1.5rem;
+}
+.rf-event__register a {
 	display: inline-block;
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-primary);
@@ -14,22 +19,21 @@
 	font-weight: 500;
 	font-size: 0.875rem;
 	text-decoration: none;
-	margin-top: 1.5rem;
 }
-.rf-event__register:hover {
+.rf-event__register a:hover {
 	background: var(--rf-color-primary-hover);
 }
-.rf-event__content {
+.rf-event__body {
 	margin-top: 1.5rem;
 }
-.rf-event__content ul,
-.rf-event__content ol {
+.rf-event__body ul,
+.rf-event__body ol {
 	padding-left: 1.5rem;
 }
-.rf-event__content a {
+.rf-event__body a {
 	color: var(--rf-color-primary);
 	text-decoration: none;
 }
-.rf-event__content a:hover {
+.rf-event__body a:hover {
 	color: var(--rf-color-primary-hover);
 }

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.