@refrakt-md/skeleton 0.22.0

package/README.md

@@ -0,0 +1,41 @@
+# @refrakt-md/skeleton
+
+The structural cascade layer and the layer-order contract every refrakt theme
+builds on (SPEC-094 §3 — the skeleton/skin split).
+
+```css
+@import '@refrakt-md/skeleton'; /* must load first */
+```
+
+Importing this entry first emits the one line the whole split rests on:
+
+```css
+@layer skeleton, skin;
+```
+
+Once the order is declared, layer **contents** may load in any source order or
+from any package, and a theme's `@layer skin` still wins where it overlaps
+`@layer skeleton` — with ordinary single-class / attribute selectors and **no
+`!important`**.
+
+## The two layers
+
+- **`@layer skeleton`** (this package) — framework-agnostic *structure*: the
+  rules a rune breaks without (`display`/`grid`/`flex`/`position`/`overflow`, gap
+  & margin resets, the media↔content split geometry, the stretched-link
+  mechanism). References tokens by name; never sets their values, colour, border,
+  radius, shadow, or font.
+- **`@layer skin`** (a theme, e.g. `@refrakt-md/lumina`) — aesthetics: colour,
+  background, border presence/style, radius, shadow, type, and the token
+  *values*.
+
+## The token contract
+
+The `./contract` entry re-exports the `TokenContract` type (the token **names** a
+skin must populate) plus the layer-name constants. Values live in the skin; a
+breaking structural change bumps *this* package's version, not a skin's.
+
+```ts
+import type { TokenContract } from '@refrakt-md/skeleton/contract';
+import { LAYER_ORDER_DECLARATION } from '@refrakt-md/skeleton/contract';
+```

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `@refrakt-md/skeleton` — the structural cascade layer + the layer-order and
+ * token-name contracts every refrakt theme builds on.
+ *
+ * The CSS half (`@refrakt-md/skeleton` → `index.css`) ships `@layer skeleton` and
+ * the `@layer skeleton, skin;` order declaration. This module is the *contract*
+ * half: the token names a theme must populate (re-exported from
+ * `@refrakt-md/types`, so the contract has one definition) plus the layer-name
+ * constants the loader and tests reference.
+ *
+ * The contract describes names, never values — a skin supplies the values for
+ * these tokens, and a breaking structural change bumps *this* package's version
+ * (not any one skin's), which is why the contract is owned here rather than in a
+ * theme.
+ */
+export type { TokenContract } from '@refrakt-md/types';
+/** The two cascade layers, in priority order (skin wins over skeleton). */
+export declare const SKELETON_LAYER = "skeleton";
+export declare const SKIN_LAYER = "skin";
+/** The order declaration that must be emitted before any layer content. Importing
+ *  `@refrakt-md/skeleton` (the CSS entry) emits this; the constant lets the loader
+ *  and tests assert the contract without parsing the stylesheet. */
+export declare const LAYER_ORDER_DECLARATION = "@layer skeleton, skin;";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,2EAA2E;AAC3E,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,UAAU,SAAS,CAAC;AAEjC;;oEAEoE;AACpE,eAAO,MAAM,uBAAuB,2BAA6C,CAAC"}

package/dist/index.js

@@ -0,0 +1,23 @@
+/**
+ * `@refrakt-md/skeleton` — the structural cascade layer + the layer-order and
+ * token-name contracts every refrakt theme builds on.
+ *
+ * The CSS half (`@refrakt-md/skeleton` → `index.css`) ships `@layer skeleton` and
+ * the `@layer skeleton, skin;` order declaration. This module is the *contract*
+ * half: the token names a theme must populate (re-exported from
+ * `@refrakt-md/types`, so the contract has one definition) plus the layer-name
+ * constants the loader and tests reference.
+ *
+ * The contract describes names, never values — a skin supplies the values for
+ * these tokens, and a breaking structural change bumps *this* package's version
+ * (not any one skin's), which is why the contract is owned here rather than in a
+ * theme.
+ */
+/** The two cascade layers, in priority order (skin wins over skeleton). */
+export const SKELETON_LAYER = 'skeleton';
+export const SKIN_LAYER = 'skin';
+/** The order declaration that must be emitted before any layer content. Importing
+ *  `@refrakt-md/skeleton` (the CSS entry) emits this; the constant lets the loader
+ *  and tests assert the contract without parsing the stylesheet. */
+export const LAYER_ORDER_DECLARATION = `@layer ${SKELETON_LAYER}, ${SKIN_LAYER};`;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,2EAA2E;AAC3E,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC;AAEjC;;oEAEoE;AACpE,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,cAAc,KAAK,UAAU,GAAG,CAAC"}

package/index.css

@@ -0,0 +1,145 @@
+/* @refrakt-md/skeleton — the cascade-layer contract every refrakt theme builds on.
+ *
+ * This single line is the keystone of the skeleton/skin split (SPEC-094 §3): it
+ * declares the layer order up front, so once it loads first, layer *contents* may
+ * arrive in any source order or from any package and a theme's `@layer skin` still
+ * wins where it overlaps `@layer skeleton` — with ordinary single-class/attribute
+ * selectors and zero `!important`. The SvelteKit loader's only obligation is to
+ * import this entry before any layer content (WORK-436 / WORK-410 §3).
+ *
+ * The `skeleton` layer is the framework-agnostic *structure* layer: the rules a
+ * rune breaks without — `display` / `grid-*` / `flex-*` / `position` / `inset` /
+ * `z-index` / `overflow`, gap and margin resets, the media↔content split geometry,
+ * the stretched-link mechanism. It references design tokens by name
+ * (`var(--rune-padding)`) but never sets their values, colour, border, radius,
+ * shadow, or font — those are skin. The per-file re-bucketing (WORK-438) moves
+ * Lumina's structure here group by group; each structure file is imported with
+ * `layer(skeleton)` so the raw files need no `@layer` wrapper of their own. */
+@layer skeleton, skin;
+
+/* Structure is promoted out of Lumina's @layer skin into @layer skeleton group by
+ * group (WORK-438, Phase 2), strictly bottom-up: the base layers first (global),
+ * then the dimension/layout layers, and only then the runes — because a rune's
+ * structural margins/gaps deliberately override the dimension and layout rules by
+ * source order, and that win only survives the layer split once those layers are
+ * also in @layer skeleton. (A skin rule beats any skeleton rule regardless of
+ * specificity, so promoting a rune ahead of the dimension it overrides hands the
+ * win to the still-skin dimension — e.g. sections.css `[data-section="header"]
+ * { margin-bottom: 3rem }` would beat a rune header's tighter margin.) */
+
+/* ── Foundation ── */
+@import './styles/global.css' layer(skeleton);
+
+/* ── Dimension structure ── */
+@import './styles/dimensions/state.css' layer(skeleton);
+@import './styles/dimensions/media.css' layer(skeleton);
+@import './styles/dimensions/cover.css' layer(skeleton);
+@import './styles/dimensions/metadata.css' layer(skeleton);
+@import './styles/dimensions/sections.css' layer(skeleton);
+@import './styles/dimensions/checklist.css' layer(skeleton);
+@import './styles/dimensions/sequence.css' layer(skeleton);
+@import './styles/dimensions/guest-posture.css' layer(skeleton);
+
+/* ── Layout structure ── */
+@import './styles/layouts/split.css' layer(skeleton);
+@import './styles/layouts/default.css' layer(skeleton);
+@import './styles/layouts/docs.css' layer(skeleton);
+@import './styles/layouts/blog.css' layer(skeleton);
+@import './styles/layouts/mobile.css' layer(skeleton);
+@import './styles/layouts/on-this-page.css' layer(skeleton);
+@import './styles/layouts/search.css' layer(skeleton);
+@import './styles/layouts/theme-toggle.css' layer(skeleton);
+@import './styles/layouts/version-switcher.css' layer(skeleton);
+@import './styles/layouts/plan.css' layer(skeleton);
+
+/* ── Rune structure ── */
+@import './styles/runes/card.css' layer(skeleton);
+@import './styles/runes/hint.css' layer(skeleton);
+@import './styles/runes/steps.css' layer(skeleton);
+@import './styles/runes/pricing.css' layer(skeleton);
+@import './styles/runes/cta.css' layer(skeleton);
+@import './styles/runes/hero.css' layer(skeleton);
+@import './styles/runes/feature.css' layer(skeleton);
+@import './styles/runes/testimonial.css' layer(skeleton);
+@import './styles/runes/bento.css' layer(skeleton);
+@import './styles/runes/comparison.css' layer(skeleton);
+@import './styles/runes/symbol.css' layer(skeleton);
+@import './styles/runes/changelog.css' layer(skeleton);
+@import './styles/runes/tabs.css' layer(skeleton);
+@import './styles/runes/codegroup.css' layer(skeleton);
+@import './styles/runes/accordion.css' layer(skeleton);
+@import './styles/runes/details.css' layer(skeleton);
+@import './styles/runes/breadcrumb.css' layer(skeleton);
+@import './styles/runes/toc.css' layer(skeleton);
+@import './styles/runes/pagination.css' layer(skeleton);
+@import './styles/runes/reveal.css' layer(skeleton);
+@import './styles/runes/expand.css' layer(skeleton);
+@import './styles/runes/grid.css' layer(skeleton);
+@import './styles/runes/figure.css' layer(skeleton);
+@import './styles/runes/embed.css' layer(skeleton);
+@import './styles/runes/collection.css' layer(skeleton);
+@import './styles/runes/datatable.css' layer(skeleton);
+@import './styles/runes/sandbox.css' layer(skeleton);
+@import './styles/runes/conversation.css' layer(skeleton);
+@import './styles/runes/progress.css' layer(skeleton);
+@import './styles/runes/diagram.css' layer(skeleton);
+@import './styles/runes/gallery.css' layer(skeleton);
+@import './styles/runes/diff.css' layer(skeleton);
+@import './styles/runes/chart.css' layer(skeleton);
+@import './styles/runes/juxtapose.css' layer(skeleton);
+@import './styles/runes/annotate.css' layer(skeleton);
+@import './styles/runes/drawer.css' layer(skeleton);
+@import './styles/runes/nav.css' layer(skeleton);
+@import './styles/runes/mockup.css' layer(skeleton);
+/* ── Plugin: storytelling ── */
+@import './styles/runes/character.css' layer(skeleton);
+@import './styles/runes/realm.css' layer(skeleton);
+@import './styles/runes/faction.css' layer(skeleton);
+@import './styles/runes/lore.css' layer(skeleton);
+@import './styles/runes/plot.css' layer(skeleton);
+@import './styles/runes/bond.css' layer(skeleton);
+@import './styles/runes/storyboard.css' layer(skeleton);
+
+/* ── Remaining core runes ── */
+@import './styles/runes/aggregate.css' layer(skeleton);
+@import './styles/runes/bg.css' layer(skeleton);
+@import './styles/runes/blog.css' layer(skeleton);
+@import './styles/runes/compare.css' layer(skeleton);
+@import './styles/runes/file-ref.css' layer(skeleton);
+@import './styles/runes/form.css' layer(skeleton);
+@import './styles/runes/mediatext.css' layer(skeleton);
+@import './styles/runes/page-section.css' layer(skeleton);
+@import './styles/runes/placeholder.css' layer(skeleton);
+@import './styles/runes/pullquote.css' layer(skeleton);
+@import './styles/runes/relationships.css' layer(skeleton);
+@import './styles/runes/section.css' layer(skeleton);
+@import './styles/runes/showcase.css' layer(skeleton);
+@import './styles/runes/textblock.css' layer(skeleton);
+@import './styles/runes/xref.css' layer(skeleton);
+/* ── Plugin: business ── */
+@import './styles/runes/cast.css' layer(skeleton);
+@import './styles/runes/organization.css' layer(skeleton);
+@import './styles/runes/timeline.css' layer(skeleton);
+@import './styles/runes/budget.css' layer(skeleton);
+/* ── Plugin: places ── */
+@import './styles/runes/event.css' layer(skeleton);
+@import './styles/runes/map.css' layer(skeleton);
+@import './styles/runes/itinerary.css' layer(skeleton);
+/* ── Plugin: media ── */
+@import './styles/runes/playlist.css' layer(skeleton);
+@import './styles/runes/track.css' layer(skeleton);
+@import './styles/runes/audio.css' layer(skeleton);
+/* ── Plugin: learning ── */
+@import './styles/runes/howto.css' layer(skeleton);
+@import './styles/runes/recipe.css' layer(skeleton);
+/* ── Plugin: design ── */
+@import './styles/runes/swatch.css' layer(skeleton);
+@import './styles/runes/palette.css' layer(skeleton);
+@import './styles/runes/typography.css' layer(skeleton);
+@import './styles/runes/spacing.css' layer(skeleton);
+@import './styles/runes/design-context.css' layer(skeleton);
+@import './styles/runes/preview.css' layer(skeleton);
+/* ── Plugin: plan ── */
+@import './styles/runes/plan-progress.css' layer(skeleton);
+@import './styles/runes/milestone.css' layer(skeleton);
+@import './styles/runes/plan-history.css' layer(skeleton);

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@refrakt-md/skeleton",
+  "description": "The structural cascade layer + layer-order contract every refrakt theme builds on — ships `@layer skeleton` and the `@layer skeleton, skin;` order declaration, plus the token-name contract",
+  "version": "0.22.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/refrakt-md/refrakt.git",
+    "directory": "packages/skeleton"
+  },
+  "bugs": "https://github.com/refrakt-md/refrakt/issues",
+  "homepage": "https://github.com/refrakt-md/refrakt",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./index.css",
+    "./contract": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "index.css",
+    "styles"
+  ],
+  "dependencies": {
+    "@refrakt-md/types": "0.22.0"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
+}

package/styles/dimensions/checklist.css

@@ -0,0 +1,43 @@
+/* checklist — structure. The indicator gutter, the indicator box placement + size,
+ * and the density-driven gutter/size/collapse. The indicator's fill / border /
+ * radius / shadow and the item text treatment (colour, weight, strikethrough) are
+ * skin (Lumina's dimensions/checklist.css). [data-checked] is uncontested by
+ * layouts and sections, so the split is behavior-preserving. */
+
+/* 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 (the box; its chrome is skin). */
+[data-checked]::before {
+	content: '';
+	position: absolute;
+	left: 0.125rem;
+	top: 0.5em;
+	width: 1rem;
+	height: 1rem;
+}
+
+/* === Density interaction === */
+
+/* Compact: tighter gutter + smaller indicator. */
+[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/cover.css

@@ -0,0 +1,91 @@
+/* cover — structure (SPEC-089). The grid-overlay layout: the media well and the
+ * content box share one grid cell, the well fills and crops its guest, and the
+ * overlaid box positions over it (content-place). Mutually exclusive with the
+ * media|content split (media-position=cover vs start/end/top/bottom), so it never
+ * contends with layouts/split.css. The scrim, radii, and the overlay's surface
+ * padding are skin (Lumina's dimensions/cover.css). */
+
+/* ── full scope — the whole content overlays the media well ── */
+[data-media-position="cover"]:not([data-cover-scope="header"]) {
+	display: grid;
+	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+	aspect-ratio: var(--frame-aspect, var(--cover-aspect, 3 / 4));
+	container-type: size;
+	overflow: hidden;
+	isolation: isolate;
+}
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-section="media"],
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"] {
+	grid-area: 1 / 1;
+	margin: 0;
+	min-width: 0;
+}
+
+/* ── header scope — only the cover band overlays; body flows below ── */
+[data-cover-scope="header"] > [data-name="cover-band"] {
+	display: grid;
+	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+	aspect-ratio: var(--frame-aspect, 16 / 9);
+	overflow: hidden;
+	isolation: isolate;
+	container-type: size;
+}
+/* On narrow screens a 16/9 band is too short to seat the preamble over the
+ * scrim, so default it to a taller (≥1:1) poster shape; explicit frame-aspect
+ * still wins. */
+@media (max-width: 40rem) {
+	[data-cover-scope="header"] > [data-name="cover-band"] {
+		aspect-ratio: var(--frame-aspect, 4 / 5);
+	}
+}
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-section="media"],
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+	grid-area: 1 / 1;
+	margin: 0;
+}
+
+/* ── shared: the media well fills, the overlaid box positions ── */
+[data-media-position="cover"] [data-section="media"] {
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+}
+[data-media-position="cover"] [data-section="media"] > :is(img, video) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* SPEC-101 — non-img/video guests (a sandbox, an embed) fill the well too. */
+[data-media-position="cover"] [data-section="media"] > :not(img, video) {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+[data-media-position="cover"] [data-section="media"] .rf-sandbox {
+	margin: 0;
+}
+[data-media-position="cover"] [data-section="media"] .rf-sandbox iframe {
+	height: 100%;
+}
+
+/* The overlaid box (full: content; header: preamble) anchors via content-place. */
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+	position: relative;
+	z-index: 1;
+	align-self: var(--cover-place-block, end);
+	justify-self: var(--cover-place-inline, stretch);
+}
+
+/* ── auto / unset placement — adapts to the cover region's orientation ── */
+[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"],
+[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="cover-band"] > [data-name="preamble"] {
+	align-self: end;
+	justify-self: stretch;
+}
+@container (min-aspect-ratio: 1 / 1) {
+	[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
+		align-self: center;
+		justify-self: start;
+	}
+}

package/styles/dimensions/guest-posture.css

@@ -0,0 +1,19 @@
+/* Media-guest interaction posture (SPEC-090) — structure.
+ *
+ * A presentational media-slot guest is non-interactive at the pointer level (so a
+ * linked tile links reliably / a cover backdrop never steals interaction), and a
+ * demoted tabbed guest's static tab strip is hidden (the non-enhanced render is
+ * the fallback; the behaviours layer skips JS enhancement for it).
+ *
+ * This is wholly structural (pointer-events + a display reset), so it lives in the
+ * skeleton. It moves here only now that the tabs/codegroup tab-strip structure is
+ * also skeleton (same WORK-438 increment): the hide rule's specificity (0,3,0)
+ * beats `.rf-tabs__tabs { display:flex }` (0,1,0) in-layer. While the rune strip
+ * was unlayered/skin and this was skin, it relied on source order + specificity;
+ * promoting it earlier would have resurfaced the inert strip. */
+[data-section="media"][data-guest-posture="presentational"] {
+	pointer-events: none;
+}
+[data-section="media"][data-guest-posture="presentational"] :is(.rf-tabs__tabs, .rf-codegroup__tabs) {
+	display: none;
+}

package/styles/dimensions/media.css

@@ -0,0 +1,38 @@
+/* Media Slots Dimension — structure layer.
+ * Slot sizing and fit (the geometry a media slot breaks without); the rounded
+ * corners are skin. */
+
+[data-media="portrait"] {
+	aspect-ratio: 1 / 1;
+	object-fit: cover;
+	width: var(--media-portrait-size, 5rem);
+	height: var(--media-portrait-size, 5rem);
+}
+[data-media="cover"] {
+	width: 100%;
+	object-fit: cover;
+}
+[data-media="thumbnail"] {
+	width: var(--media-thumbnail-size, 3rem);
+	height: var(--media-thumbnail-size, 3rem);
+	object-fit: cover;
+	flex-shrink: 0;
+}
+[data-media="hero"] {
+	width: 100%;
+	object-fit: cover;
+}
+[data-media="icon"] {
+	width: var(--media-icon-size, 2rem);
+	height: var(--media-icon-size, 2rem);
+	object-fit: contain;
+	flex-shrink: 0;
+}
+
+/* Density × media — sizing + visibility */
+[data-density="compact"] [data-media="portrait"] {
+	--media-portrait-size: 3rem;
+}
+[data-density="minimal"] [data-media] {
+	display: none;
+}

package/styles/dimensions/metadata.css

@@ -0,0 +1,66 @@
+/* metadata — structure. The zone-layout primitives (bar, definition-list) and the
+ * visually-hidden label mechanism. [data-zone-layout] is layout-uncontested (no
+ * layout file targets it), and a rune overriding these resolves correctly (skin
+ * beats skeleton). Spacing values (gap / padding / rhythm margins), borders,
+ * radius, colour, type, and the rating glyph stay skin (Lumina's
+ * dimensions/metadata.css). */
+
+/* Rating — star-row is an inline flex row (the glyph + colours are skin). */
+[data-meta-type="rating"] { display: inline-flex; }
+
+/* ── Layout: bar (SPEC-080) ──
+ * Horizontal flex row of fields; 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;
+	align-items: center;
+}
+[data-zone-layout="bar"][data-wrap="false"] { flex-wrap: nowrap; }
+[data-zone-layout="bar"] [data-align="end"] { margin-left: auto; }
+
+/* ── Layout: definition-list ──
+ * Each row stacks dt over dd; rows flow into auto-fit columns that collapse to a
+ * single column on narrow containers without a media-query step. */
+[data-zone-layout="definition-list"] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+}
+[data-zone-layout="definition-list"] > [data-name="row"] {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+[data-zone-layout="definition-list"] dd { margin: 0; }
+/* Multi-value dd (fields with `splitOn`) renders a row of chips inside the cell. */
+[data-zone-layout="definition-list"] dd[data-multi-value] {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+/* Visually hidden labels — accessible to screen readers only (the sr-only clip
+ * mechanism; the box collapse + clip are correctness, not taste). */
+[data-meta-label-hidden] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* ── Mobile: definition-list falls back to a label-left / value-right grid via
+ * `display: contents` on each row (drops the per-item box). ── */
+@media (max-width: 48rem) {
+	[data-zone-layout="definition-list"] {
+		grid-template-columns: max-content 1fr;
+		align-items: baseline;
+	}
+	[data-zone-layout="definition-list"] > [data-name="row"] {
+		display: contents;
+	}
+}

package/styles/dimensions/sections.css

@@ -0,0 +1,22 @@
+/* sections — structure. The zone containers that are flex layouts: the header
+ * chrome row, the preamble stack, the footer action row. The zone rhythm (margins,
+ * gaps, padding), type, borders, and the media-zone margin reset are skin (Lumina's
+ * dimensions/sections.css) — kept there so a rune's own zone overrides resolve
+ * against them by source order, and so the header→body rhythm a rune tightens
+ * (e.g. hint) stays a same-layer contest. */
+
+[data-section="header"] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+[data-section="preamble"] {
+	display: flex;
+	flex-direction: column;
+}
+
+[data-section="footer"] {
+	display: flex;
+	flex-wrap: wrap;
+}