@refrakt-md/lumina 0.15.0 → 0.16.1

package/base.css

@@ -19,6 +19,7 @@
 @import './styles/layouts/blog.css';
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
+@import './styles/layouts/theme-toggle.css';
 @import './styles/layouts/version-switcher.css';
 @import './styles/layouts/split.css';
 

package/contracts/structures.json

@@ -200,6 +200,77 @@
 				"{content}"
 			]
 		},
+		"Badge": {
+			"block": "badge",
+			"root": ".rf-badge",
+			"dataRune": "badge",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Collection": {
+			"block": "collection",
+			"root": ".rf-collection",
+			"dataRune": "collection",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Relationships": {
+			"block": "relationships",
+			"root": ".rf-relationships",
+			"dataRune": "relationships",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"FileRef": {
+			"block": "file-ref",
+			"root": ".rf-file-ref",
+			"dataRune": "file-ref",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Aggregate": {
+			"block": "aggregate",
+			"root": ".rf-aggregate",
+			"dataRune": "aggregate",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Progress": {
+			"block": "progress",
+			"root": ".rf-progress",
+			"dataRune": "progress",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"sentiment": {
+					"source": "meta",
+					"classPattern": ".rf-progress--{value}",
+					"dataAttribute": "data-sentiment"
+				}
+			}
+		},
+		"Card": {
+			"block": "card",
+			"root": ".rf-card",
+			"dataRune": "card",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"layout": {
+					"source": "meta",
+					"default": "stacked",
+					"classPattern": ".rf-card--{value}",
+					"dataAttribute": "data-layout"
+				}
+			}
+		},
 		"Embed": {
 			"block": "embed",
 			"root": ".rf-embed",

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAiL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBA6L1B,CAAC"}

package/dist/tokens.js

@@ -64,6 +64,17 @@ export const luminaTokens = {
             // alias via `extra` below for downstream CSS that still reads it.
             'inline-bg': '#e6e5e3',
         },
+        // WORK-304 — line-level annotation tokens shared by snippet /
+        // codegroup / diff. `highlight` is the neutral surface tint applied
+        // to `[data-line-status="highlight"]` rows; `highlight-rail` is the
+        // left-edge border colour (left as a soft accent so themes can
+        // repaint just the rail without touching the row background);
+        // `number` is the gutter colour for `pre[data-linenumbers]`.
+        line: {
+            highlight: 'color-mix(in srgb, var(--rf-color-text) 6%, transparent)',
+            'highlight-rail': 'var(--rf-color-primary, var(--rf-color-text))',
+            number: 'var(--rf-color-muted)',
+        },
     },
     radius: {
         sm: '6px',

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAsB;IAC9C,IAAI,EAAE;QACL,IAAI,EAAE,mEAAmE;QACzE,IAAI,EAAE,yEAAyE;KAC/E;IAED,KAAK,EAAE;QACN,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,SAAS;QAClB,eAAe,EAAE,SAAS;QAE1B,yEAAyE;QACzE,0EAA0E;QAC1E,wEAAwE;QACxE,oEAAoE;QACpE,eAAe,EAAE;YAChB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;SAChB;QAED,OAAO,EAAE;YACR,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,SAAS;SACjB;QAED,0EAA0E;QAC1E,sEAAsE;QACtE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAE9D,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,wDAAwD;YACxD,sEAAsE;YACtE,kEAAkE;YAClE,WAAW,EAAE,SAAS;SACtB;QAED,8DAA8D;QAC9D,oEAAoE;QACpE,oEAAoE;QACpE,+DAA+D;QAC/D,8DAA8D;QAC9D,6DAA6D;QAC7D,IAAI,EAAE;YACL,SAAS,EAAE,0DAA0D;YACrE,gBAAgB,EAAE,+CAA+C;YACjE,MAAM,EAAE,uBAAuB;SAC/B;KACD;IAED,MAAM,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,QAAQ;KACd;IAED,OAAO,EAAE;QACR,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,OAAO,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;SACf;KACD;IAED,KAAK,EAAE;QACN,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;KACf;IAED,MAAM,EAAE;QACP,EAAE,EAAE,4BAA4B;QAChC,EAAE,EAAE,wDAAwD;QAC5D,EAAE,EAAE,yDAAyD;QAC7D,EAAE,EAAE,yDAAyD;KAC7D;IAED,wEAAwE;IACxE,oEAAoE;IACpE,qEAAqE;IACrE,aAAa;IACb,MAAM,EAAE;QACP,OAAO,EAAE,SAAS,EAAM,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,eAAe;QACvC,MAAM,EAAE,SAAS,EAAO,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,gBAAgB;QACxC,OAAO,EAAE,SAAS,EAAM,mCAAmC;QAC3D,WAAW,EAAE,SAAS,EAAE,8BAA8B;QACtD,QAAQ,EAAE,SAAS,EAAK,6BAA6B;KACrD;IAED,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,EAAE,EAAE,SAAS;gBACb,OAAO,EAAE,SAAS;gBAClB,eAAe,EAAE,SAAS;gBAE1B,OAAO,EAAE;oBACR,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;oBACjB,MAAM,EAAE,SAAS;iBACjB;gBAED,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAE9D,IAAI,EAAE;oBACL,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,SAAS;oBACf,WAAW,EAAE,SAAS;iBACtB;aACD;YAED,MAAM,EAAE;gBACP,EAAE,EAAE,2BAA2B;gBAC/B,EAAE,EAAE,sDAAsD;gBAC1D,EAAE,EAAE,uDAAuD;gBAC3D,EAAE,EAAE,uDAAuD;aAC3D;YAED,uEAAuE;YACvE,qEAAqE;YACrE,MAAM,EAAE;gBACP,OAAO,EAAE,SAAS,EAAM,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,qBAAqB;gBAC7C,MAAM,EAAE,SAAS,EAAO,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,sBAAsB;gBAC9C,OAAO,EAAE,SAAS,EAAM,sBAAsB;gBAC9C,WAAW,EAAE,SAAS,EAAE,qBAAqB;gBAC7C,QAAQ,EAAE,SAAS,EAAK,oBAAoB;aAC5C;YAED,oEAAoE;YACpE,kEAAkE;YAClE,qEAAqE;YACrE,0BAA0B;YAC1B,KAAK,EAAE;gBACN,yBAAyB,EAAE,SAAS;aACpC;SACD;KACD;IAED;;;;;;;;;qBASiB;IACjB,KAAK,EAAE;QACN,yBAAyB,EAAE,SAAS;KACpC;CACD,CAAC"}

package/index.css

@@ -19,6 +19,7 @@
 @import './styles/layouts/blog.css';
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
+@import './styles/layouts/theme-toggle.css';
 @import './styles/layouts/version-switcher.css';
 @import './styles/layouts/split.css';
 @import './styles/layouts/plan.css';
@@ -41,6 +42,7 @@
 @import './styles/runes/annotate.css';
 @import './styles/runes/audio.css';
 @import './styles/runes/api.css';
+@import './styles/runes/card.css';
 @import './styles/runes/badge.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/blog.css';
@@ -49,6 +51,11 @@
 @import './styles/runes/budget.css';
 @import './styles/runes/cast.css';
 @import './styles/runes/character.css';
+@import './styles/runes/collection.css';
+@import './styles/runes/relationships.css';
+@import './styles/runes/aggregate.css';
+@import './styles/runes/file-ref.css';
+@import './styles/runes/progress.css';
 @import './styles/runes/changelog.css';
 @import './styles/runes/chart.css';
 @import './styles/runes/compare.css';
@@ -117,11 +124,6 @@
 @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';
 @import './styles/runes/plan-ref.css';
-@import './styles/runes/plan-relationships.css';
 @import './styles/runes/plan-history.css';
-@import './styles/runes/plan-entity-tabs.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.15.0",
+  "version": "0.16.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.15.0",
-    "@refrakt-md/transform": "0.15.0",
-    "@refrakt-md/types": "0.15.0"
+    "@refrakt-md/runes": "0.16.1",
+    "@refrakt-md/transform": "0.16.1",
+    "@refrakt-md/types": "0.16.1"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/elements/code.css

@@ -42,3 +42,75 @@
 	opacity: 1 !important;
 	color: var(--rf-color-success, #4ade80);
 }
+
+/* WORK-304 — fence-level annotations: line numbers + line highlight.
+ *
+ * Shiki renders each line as `<span class="line">…</span>`. The fence
+ * schema forwards `data-linenumbers` / `data-highlight-lines` /
+ * `data-lines` (start offset) from the AST node onto both `<pre>` and
+ * `<code>`; the highlight transform sets `data-line-status="highlight"`
+ * on the matching `span.line` rows post-Shiki (file-coordinate math
+ * lives there, not in CSS).
+ *
+ * The starting line counter is seeded from `--rf-start-line` which the
+ * fence transform inlines on `<pre>` when `data-lines` is set
+ * (e.g. lines="74-125" → --rf-start-line: 73 so the first
+ * counter-increment lands on 74). Defaults to 0 so unannotated fences
+ * count from 1.
+ *
+ * `<code>` becomes a CSS grid so:
+ *   - consecutive `.line` rows tile perfectly with no subpixel cracks
+ *     at non-100% zoom (the previous inline-block stacking left faint
+ *     gaps the rail and bg shone through);
+ *   - line bg + rail extend across the full horizontal scroll region
+ *     (grid track width = max-content keeps lines full-width even
+ *     when the pre scrolls).
+ *
+ * Every line carries a 3px transparent left border so geometry stays
+ * consistent across highlighted and plain rows — matches the diff row
+ * primitive at `runes/diff.css`. Highlighted rows just colour the
+ * border + add the surface tint. */
+.rf-codeblock pre code {
+	display: grid;
+	min-width: max-content;
+}
+
+.rf-codeblock pre code .line {
+	border-left: 3px solid transparent;
+}
+
+/* Line numbers — gutter::before owns the left column. Strip the pre's
+ * horizontal padding when linenumbers are on so the gutter sits flush
+ * against the codeblock edge; the gutter's own padding + right border
+ * provides the visual separation from the code body. */
+.rf-codeblock pre[data-linenumbers] {
+	padding-left: 0;
+}
+
+.rf-codeblock pre[data-linenumbers] code {
+	counter-reset: rf-line var(--rf-start-line, 0);
+}
+
+.rf-codeblock pre[data-linenumbers] code .line::before {
+	counter-increment: rf-line;
+	content: counter(rf-line);
+	display: inline-block;
+	width: 3em;
+	padding-inline: 0.75rem 0.5rem;
+	margin-right: 0.75rem;
+	text-align: right;
+	color: var(--rf-color-line-number);
+	font-variant-numeric: tabular-nums;
+	user-select: none;
+	border-right: 1px solid var(--rf-color-border);
+}
+
+/* Highlighted lines share diff's row template — neutral surface tint
+ * + primary-coloured left rail, no `+`/`-` sigil. The grid layout on
+ * `<code>` above keeps consecutive highlighted rows continuous (no
+ * subpixel gaps between the rails). Border is on every `.line` (above)
+ * so the content alignment doesn't jump when highlighting a row. */
+.rf-codeblock pre code .line[data-line-status="highlight"] {
+	background: var(--rf-color-line-highlight);
+	border-left-color: var(--rf-color-line-highlight-rail);
+}

package/styles/layouts/docs.css

@@ -100,6 +100,15 @@
 	background: var(--rf-color-bg, #fff);
 	z-index: 5;
 }
+/* Match the sticky offset in the natural-flow position too. The fixed header
+ * is out of flow so `.rf-docs-body` starts at viewport top; without this
+ * margin, the sidebar's static position sits at Y=0 with its top 3.125rem
+ * hidden under the header — visible only when the page scrolls enough for
+ * sticky to activate. Scoped to `:has(.rf-docs-header)` so layouts without a
+ * header don't gain an unwanted top gap. */
+html:has(.rf-docs-header) .rf-docs-sidebar {
+	margin-top: 3.125rem;
+}
 .rf-docs-sidebar::-webkit-scrollbar {
 	width: 0;
 }
@@ -190,6 +199,8 @@ html:has(.rf-docs-header) {
 	padding: 0.625rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg, #fff);
+	max-width: 100%;
+	overflow: hidden;
 }
 .rf-docs-toolbar__hamburger {
 	background: none;
@@ -206,6 +217,12 @@ html:has(.rf-docs-header) {
 .rf-docs-toolbar__breadcrumb {
 	font-size: 0.8rem;
 	color: var(--rf-color-muted);
+	/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
+	 * the available space rather than starting at its full content width —
+	 * combined with `min-width: 0` this is what triggers ellipsis on long
+	 * titles. Without basis 0 a long page title overflows the toolbar and
+	 * forces horizontal page scroll on narrow viewports. */
+	flex: 1 1 0;
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/styles/layouts/split.css

@@ -43,22 +43,40 @@
 
 /* ─── Media zone base styles ──────────────────────────────────────── */
 
-/* Only clip overflow when media zone contains an image. Interactive content
-   (preview, juxtapose) needs overflow visible for bleed effects. */
-[data-section="media"]:has(> img) {
+/* Clip overflow + round corners when the media zone holds media-like
+   content: an image, or a self-contained block rune that wants the same
+   "fills the slot" treatment (codegroup, snippet, chart, sandbox). Anything
+   else keeps overflow visible so interactive bleed effects (preview,
+   juxtapose) still work. Add new rune-typed media here when they should
+   participate in the same chrome. */
+[data-section="media"]:where(
+  :has(> img),
+  :has(> [data-rune="code-group"]),
+  :has(> [data-rune="snippet"]),
+  :has(> [data-rune="chart"]),
+  :has(> [data-rune="sandbox"])
+) {
   border-radius: var(--rf-radius-lg);
   overflow: hidden;
 }
-[data-section="media"] img {
+[data-section="media"] > :where(
+  img,
+  [data-rune="code-group"],
+  [data-rune="snippet"],
+  [data-rune="chart"],
+  [data-rune="sandbox"]
+) {
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--rf-radius-lg);
+  margin: 0;
 }
 
-/* Split layout media gets subtle depth */
-[data-layout="split"] > [data-section="media"] img,
-[data-layout="split-reverse"] > [data-section="media"] img {
+/* Split layout images get subtle depth. Block runes carry their own visual
+   weight (topbars, frames) so the shadow is image-only. */
+[data-layout="split"] > [data-section="media"] > img,
+[data-layout="split-reverse"] > [data-section="media"] > img {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
@@ -109,7 +127,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"] > [data-section="media"] img {
+  [data-media-position="top"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
 
@@ -134,7 +158,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   /* Reset grid placement on collapse for header/content */
@@ -157,7 +187,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="md"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="md"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   [data-media-position="top"][data-collapse="md"] > [data-section="header"],
@@ -179,7 +215,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   [data-media-position="top"][data-collapse="lg"] > [data-section="header"],

package/styles/layouts/theme-toggle.css

@@ -0,0 +1,67 @@
+/* Theme-mode toggle button (SPEC-073).
+ *
+ * Layout chrome — a peer of the search trigger, placed in the header/toolbar.
+ * The `theme-toggle` behavior cycles auto → light → dark and reflects the
+ * current preference onto the button as `data-theme-pref`; the icon below
+ * tracks that. Ported verbatim from the former `ThemeToggle.svelte` so the
+ * look is unchanged, with the icon selector rekeyed from a swapped class to
+ * the `data-theme-pref` attribute. */
+.rf-theme-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	padding: 0;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: transparent;
+	color: var(--rf-color-text);
+	cursor: pointer;
+	transition: background-color 120ms ease, border-color 120ms ease;
+}
+.rf-theme-toggle:hover {
+	background: var(--rf-color-surface-hover);
+}
+.rf-theme-toggle:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+
+/* In the header chrome the brand/nav and the controls are flex siblings
+ * arranged by `order` (search is order 1, nav/menu order 3). Without this the
+ * toggle defaults to order 0 and groups with the brand on the left; order 2
+ * places it just after the right-aligned search trigger — matching the former
+ * component. The plan toolbar arranges by DOM order, so it isn't included. */
+.rf-header__inner .rf-theme-toggle,
+.rf-docs-header__inner .rf-theme-toggle,
+.rf-blog-header__inner .rf-theme-toggle {
+	order: 2;
+}
+
+/* Hidden on tint-locked pages: the saved preference is preserved but ignored
+ * while the lock is active (SPEC-052), so a toggle that does nothing would be
+ * confusing. Pure CSS — the lock lands on <html> at SSR and on client nav. */
+html[data-tint-lock="true"] .rf-theme-toggle {
+	display: none;
+}
+
+/* Icon — a currentColor-tinted mask. Defaults to the auto glyph so the SSR'd
+ * button shows an icon before the behavior sets data-theme-pref; the light and
+ * dark glyphs swap in by state. */
+.rf-theme-toggle__icon {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	background: currentColor;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a10 10 0 0 0 0 20Z' fill='currentColor'/></svg>");
+}
+.rf-theme-toggle[data-theme-pref="light"] .rf-theme-toggle__icon {
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
+}
+.rf-theme-toggle[data-theme-pref="dark"] .rf-theme-toggle__icon {
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
+}

package/styles/runes/accordion.css

@@ -1,9 +1,6 @@
 /* Accordion */
-.rf-accordion {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	overflow: hidden;
-}
+/* No wrapping border / radius — the only chrome is the divider between items. */
+.rf-accordion {}
 .rf-accordion__preamble {
 	margin-bottom: 1.5rem;
 }
@@ -52,35 +49,69 @@
 .rf-accordion-item__header {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	padding: 0.875rem 1.25rem;
+	gap: 0.5rem;
+	padding: 0.875rem 0rem;
 	font-weight: 600;
 	font-size: 0.95rem;
 	cursor: pointer;
 	user-select: none;
-	transition: background-color 200ms ease;
 	list-style: none;
 }
 .rf-accordion-item__header::-webkit-details-marker { display: none; }
 .rf-accordion-item__header::marker { display: none; content: ''; }
-.rf-accordion-item__header:hover {
-	background: var(--rf-color-surface);
-}
-.rf-accordion-item__header::after {
-	content: '▾';
+/* Chevron in front of the label — points right when collapsed, rotates 90°
+ * to point down when expanded. SVG mask so the glyph is crisp at any size
+ * and tints with the muted text color. */
+.rf-accordion-item__header::before {
+	content: '';
 	flex-shrink: 0;
-	color: var(--rf-color-muted);
+	width: 0.75rem;
+	height: 0.75rem;
+	background: var(--rf-color-muted);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
 	transition: transform 200ms ease;
 }
-.rf-accordion-item[open] .rf-accordion-item__header::after {
-	transform: rotate(180deg);
+.rf-accordion-item[open] .rf-accordion-item__header::before {
+	transform: rotate(90deg);
 }
 .rf-accordion-item__title {
 	flex: 1;
 	min-width: 0;
 }
+/* Per-group count for collection/relationships group-display="accordion".
+ * Inherits the header's font (weight + color) so the count reads as part
+ * of the same label. The header's `gap` handles spacing — no margins needed. */
+.rf-accordion-item__count {
+	flex-shrink: 0;
+}
+/* Animate the panel's collapse / expand. `::details-content` (the auto-generated
+ * wrapper for non-summary content) + `interpolate-size: allow-keywords` lets the
+ * height transition between 0 and auto. `transition-behavior: allow-discrete`
+ * on `content-visibility` keeps the panel reachable during the open animation.
+ * Browsers without `::details-content` support fall back to the native snap. */
+.rf-accordion-item {
+	interpolate-size: allow-keywords;
+}
+.rf-accordion-item::details-content {
+	block-size: 0;
+	overflow: hidden;
+	transition: block-size 250ms ease, content-visibility 250ms allow-discrete;
+}
+.rf-accordion-item[open]::details-content {
+	block-size: auto;
+}
 .rf-accordion-item__body {
 	padding: 0 1.25rem 1rem;
+}
+/* Prose styles for the standalone accordion rune's bodies (paragraphs,
+ * lists, etc.). Scoped to `:not(:has([data-block]))` so they don't bleed into
+ * block-content children like cards inside a collection/relationships
+ * `group-display="accordion"` panel, where the card's own typography
+ * should govern. */
+.rf-accordion-item__body:not(:has([data-block])) {
 	font-size: 0.925rem;
 	line-height: 1.65;
 	color: var(--rf-color-muted);
@@ -88,3 +119,12 @@
 .rf-accordion-item__body p:last-child {
 	margin-bottom: 0;
 }
+/* Block-content children — collection / relationships mark their body-template
+ * items `data-block`. A panel housing them (group-display="accordion") switches
+ * to a flex column with the small gap so cards get the same spacing they'd have
+ * under a heading-grouped layout. */
+.rf-accordion-item__body:has([data-block]) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}

package/styles/runes/aggregate.css

@@ -0,0 +1,75 @@
+/* Aggregate — counts and per-group breakdowns from the registry (SPEC-076).
+ *
+ * Two modes share the same block class. The no-body inline form is a `<span>`
+ * carrying the integer; the body-zoned form is a `<section>` rendering
+ * preamble / per-group template / fallback. Most of the visual weight inside
+ * the body comes from other runes (`progress`, `badge`, `humanize` text), so
+ * this stylesheet sticks to container chrome and the inline single-number
+ * form.
+ */
+
+/* Block container — vertical rhythm matches collection / relationships. The
+ * bare selector also matches the inline form's `<span>`, but vertical margin
+ * on an inline span has no effect so it's safe to share. */
+.rf-aggregate {
+	margin: var(--rf-spacing-md) 0;
+}
+
+/* Inline single-number form — `<span class="rf-aggregate" data-aggregate="count">`.
+ * Tabular nums keep digits aligned when the count changes between renders;
+ * weight tuned to stand out modestly in prose. */
+.rf-aggregate[data-aggregate='count'] {
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+
+/* Preamble — totals chrome above the breakdown (e.g. a progress bar). Trim
+ * first/last-child block margins so the rune's outer rhythm wins over the
+ * template's inner block margins (same pattern collection uses). */
+.rf-aggregate__preamble > :first-child { margin-top: 0; }
+.rf-aggregate__preamble > :last-child { margin-bottom: 0; }
+
+/* Empty state — replaces the breakdown when the query yields nothing. */
+.rf-aggregate__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+.rf-aggregate__empty > :first-child { margin-top: 0; }
+.rf-aggregate__empty > :last-child { margin-bottom: 0; }
+
+/* Items — either the per-group breakdown row, or the ungrouped single-render
+ * slot. Default stack handles the ungrouped case (one block element from the
+ * body). With groups, switch to a wrapping inline row so per-group renders
+ * (badges, pills, …) flow across the page. */
+.rf-aggregate__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+	margin-top: var(--rf-spacing-sm);
+}
+.rf-aggregate__items:has(.rf-aggregate__group) {
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+}
+
+/* Direct children of __items (the ungrouped template render) — trim outer
+ * block margins so the rune's outer rhythm wins, same pattern as preamble /
+ * empty. */
+.rf-aggregate__items > :first-child { margin-top: 0; }
+.rf-aggregate__items > :last-child { margin-bottom: 0; }
+
+/* Per-group block — wraps one render of the template. `data-block` is set
+ * by the resolver so we trim its outer block margins (the items-row `gap`
+ * governs inter-group spacing) — same pattern collection / relationships
+ * use for `__item[data-block]`. */
+.rf-aggregate__group {
+	min-width: 0;
+}
+.rf-aggregate__group[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-aggregate__group[data-block] > :last-child {
+	margin-bottom: 0;
+}