@refrakt-md/skeleton 0.43.0 → 0.45.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "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.43.0",
+  "version": "0.45.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "styles"
   ],
   "dependencies": {
-    "@refrakt-md/types": "0.43.0"
+    "@refrakt-md/types": "0.45.0"
   },
   "scripts": {
     "build": "tsc"

package/styles/dimensions/metadata.css

@@ -1,4 +1,4 @@
-/* metadata — structure. The zone-layout primitives (bar, definition-list) and the
+/* metadata — structure. The zone-layout primitives (bar, lead, ladder, 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,
@@ -26,6 +26,27 @@
 	margin-left: auto;
 }
 
+/* ── Layout: lead (SPEC-161 D6) ──
+ * A byline: the fields in a column, the lead (`data-lead`) first and the rest
+ * beneath it. No value is ranked, so a compact container hides none of them. */
+[data-zone-layout="lead"] {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+/* ── Layout: ladder (SPEC-156 D3) ──
+ * A list of peer items in a column, each free to arrange its own inside. A
+ * sequenced ladder takes its markers and gutter from the sequence dimension;
+ * the unsequenced one is only reset. */
+[data-zone-layout="ladder"]:not([data-sequence]) {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+
 /* ── 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. */

package/styles/dimensions/sequence.css

@@ -1,25 +1,23 @@
-/* sequence — structure. The counter mechanism + list resets, item gutters, the
- * numbered counter-circle box placement, and the connected-timeline geometry
+/* sequence — structure. The list resets, item gutters, the numbered marker box
+ * placement (the ordinal is a node, WORK-583), and the connected-timeline geometry
  * (item position/gutter, marker box). The connector *lines* are borders (skin),
  * as are the marker fill / radius / shadow / colour / type — those live in
  * Lumina's dimensions/sequence.css. [data-sequence] is uncontested by layouts and
  * sections, so the split is behavior-preserving. */
 
-/* Numbered — counter circle to the left of each item */
+/* Numbered — the item's ordinal (a `[data-name="ordinal"]` node the engine
+ * emits, WORK-583) in a circle to the left of each item */
 [data-sequence="numbered"] {
-	counter-reset: sequence;
 	list-style: none;
 	padding-left: 0;
 }
 
 [data-sequence="numbered"] > li {
-	counter-increment: sequence;
 	position: relative;
 	padding-left: 2.25rem;
 }
 
-[data-sequence="numbered"] > li::before {
-	content: counter(sequence);
+[data-sequence="numbered"] > li > [data-name="ordinal"] {
 	position: absolute;
 	left: 0;
 	top: 0.625rem;
@@ -89,7 +87,7 @@
 	padding-left: 1.75rem;
 }
 
-[data-density="compact"] [data-sequence="numbered"] > li::before {
+[data-density="compact"] [data-sequence="numbered"] > li > [data-name="ordinal"] {
 	width: 1.25rem;
 	height: 1.25rem;
 }

package/styles/layouts/split.css

@@ -15,9 +15,12 @@
 	grid-template-columns: var(--media-share, 50%) 1fr;
 	align-items: var(--split-valign, start);
 }
-/* "end" flips the grid so media lands in column 2 (source order is media-first). */
+/* "end" flips the grid so media lands in column 2 (source order is media-first).
+ * `dense` backfills the content into row 1, column 1: placed after the media,
+ * it would otherwise start a second row. */
 [data-media-position="end"] {
 	grid-template-columns: 1fr var(--media-share, 50%);
+	grid-auto-flow: dense;
 }
 [data-media-position="end"] > [data-section="media"],
 [data-media-position="end"] > [data-name="media"] {
@@ -27,6 +30,29 @@
 	grid-column: 1;
 }
 
+/* A split with nothing in its media zone (a testimonial with no avatar) emits no
+ * zone at all, and lays out as the content alone rather than in half a row. */
+:is([data-media-position="start"], [data-media-position="end"]):not(
+	:has(> [data-section="media"], > [data-name="media"])
+) {
+	grid-template-columns: minmax(0, 1fr);
+}
+:is([data-media-position="start"], [data-media-position="end"]):not(
+		:has(> [data-section="media"], > [data-name="media"])
+	)
+	> * {
+	grid-column: 1;
+}
+
+/* A portrait media zone (a round avatar) takes its portrait's width rather than
+ * a share of the row, unless a `media-ratio` asks for one. */
+[data-media-position="start"]:not([data-media-ratio]):has(> [data-media="portrait"]) {
+	grid-template-columns: auto 1fr;
+}
+[data-media-position="end"]:not([data-media-ratio]):has(> [data-media="portrait"]) {
+	grid-template-columns: 1fr auto;
+}
+
 /* `media-ratio` → media's share of the row width. */
 [data-media-ratio="1/3"] {
 	--media-share: 33.333%;
@@ -168,6 +194,13 @@
 		grid-column: auto;
 		grid-row: auto;
 	}
+	:is(
+			[data-media-position="end"][data-collapse="sm"],
+			[data-media-position="end"]:not([data-collapse])
+		)
+		> :is([data-section="media"], [data-name="media"]) {
+		order: 1;
+	}
 }
 @container (max-width: 768px) {
 	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] {
@@ -177,6 +210,10 @@
 		grid-column: auto;
 		grid-row: auto;
 	}
+	[data-media-position="end"][data-collapse="md"]
+		> :is([data-section="media"], [data-name="media"]) {
+		order: 1;
+	}
 }
 @container (max-width: 1024px) {
 	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] {
@@ -186,4 +223,8 @@
 		grid-column: auto;
 		grid-row: auto;
 	}
+	[data-media-position="end"][data-collapse="lg"]
+		> :is([data-section="media"], [data-name="media"]) {
+		order: 1;
+	}
 }

package/styles/runes/actions.css

@@ -37,3 +37,14 @@
 		box-sizing: border-box;
 	}
 }
+
+/* Size follows the nearest enclosing rune's `prominence` (SPEC-160 D7). The skin
+ * sets `--action-padding` / `--action-font-size` on a `[data-prominence]` rune;
+ * every other rune root clears them, so they reach only an `actions` whose
+ * nearest enclosing rune carries the prominence. A raised card inside a display
+ * hero keeps default buttons — the same protection density.css gives titles.
+ * `actions` itself is exempt: it is what reads them. */
+[data-rune]:not([data-prominence], [data-rune="actions"]) {
+	--action-padding: initial;
+	--action-font-size: initial;
+}

package/styles/runes/bg.css

@@ -1,6 +1,12 @@
 /* bg — structure. The background/overlay/scrim layer placement (absolute fill +
  * z-index + clip), the content-above-bg stacking, and the video fill. The images,
  * gradients, blur/opacity, overlay tints, and scrim paint are skin. */
+/* The host is the layer's containing block, or the layer would size against
+ * the nearest positioned ancestor (often the page). Zero specificity: a rune's
+ * own `position` (sticky, absolute) still wins. */
+:where([data-bg]) {
+	position: relative;
+}
 [data-name="bg"] {
 	position: absolute;
 	inset: 0;

package/styles/runes/cast.css

@@ -1,4 +1,5 @@
-/* cast — structure. The members list reset, grid/list arrangements, name/role
+/* cast — structure. The members list reset, the grid arrangement (the list
+ * arrangement is the shared unsequenced ladder, dimensions/metadata.css), name/role
  * block display, empty-body hide, the avatar box (size/crop/display), and the list
  * variant flex. Surface chrome, type, radii, and margins are skin. */
 .rf-cast__items {
@@ -8,10 +9,6 @@
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
-.rf-cast--list .rf-cast__items {
-	display: flex;
-	flex-direction: column;
-}
 /* SPEC-100: carousel arrangement reuses the shared track (styles/runes/carousel.css,
  * keyed on [data-layout="carousel"] [data-name="items"]); cast only sets its
  * per-slide width. */

package/styles/runes/howto.css

@@ -1,26 +1,6 @@
-/* howto — structure. The steps list reset + counter, the step item counter +
- * positioning, the step-number box placement/centring, and the metadata dense-tile
- * grid (+ mobile). The surfaced tools list chrome, the step-number glyph + chrome,
+/* howto — structure. The metadata dense-tile grid (+ mobile). The numbered steps
+ * are the sequence dimension's (dimensions/sequence.css, BUG-024). The surfaced tools list chrome, the step-number glyph + chrome,
  * tip callouts, and type/spacing stay skin. */
-.rf-howto__content ol {
-	list-style: none;
-	counter-reset: howto-step;
-}
-.rf-howto__content ol > li {
-	counter-increment: howto-step;
-	position: relative;
-}
-.rf-howto__content ol > li::before {
-	content: counter(howto-step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
 .rf-howto__metadata {
 	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
 }

package/styles/runes/playlist.css

@@ -1,6 +1,7 @@
-/* playlist — structure. The inner-header flex, the tracks list reset + counter +
- * clip, the track-row flex (overriding the sequence dimension's absolute dot), the
- * track-cell flex sizing + ellipsis overflow + duration auto-push, the meta hide,
+/* playlist — structure. The inner-header flex, the tracks list reset + clip, the
+ * track-row flex (overriding the sequence dimension's absolute marker, so the
+ * ordinal sits in the row, WORK-583), the
+ * track-cell flex sizing + ellipsis overflow, the meta hide,
  * the cover aspect, and the narrow-screen column hides. The inset padding + split
  * gaps + chrome + the track-number glyph stay skin. */
 .rf-playlist__content > .rf-playlist__header {
@@ -9,7 +10,6 @@
 }
 .rf-playlist__tracks {
 	list-style: none;
-	counter-reset: track;
 	overflow: hidden;
 }
 .rf-playlist__tracks > li {
@@ -20,7 +20,7 @@
 .rf-playlist__tracks > li > meta {
 	display: none;
 }
-.rf-playlist__tracks > li::before {
+.rf-playlist__tracks > li > [data-name="ordinal"] {
 	position: static;
 	width: auto;
 	height: auto;
@@ -32,17 +32,6 @@
 	min-width: 0;
 	overflow: hidden;
 }
-.rf-playlist__tracks [data-name="track-artist"] {
-	flex-shrink: 0;
-}
-.rf-playlist__tracks [data-name="track-duration"] {
-	flex-shrink: 0;
-	margin-left: auto;
-	min-width: 3rem;
-}
-.rf-playlist__tracks [data-name="track-meta"] {
-	flex-shrink: 0;
-}
 /* Cover aspect — defaults to square (album convention). Authors override via
  * `frame-aspect="..."`; the engine lands `--frame-aspect` on the media zone
  * (frameTarget defaults to 'media' since playlist has a media section), and
@@ -54,8 +43,8 @@
 	aspect-ratio: var(--frame-aspect, 1);
 }
 @media (max-width: 480px) {
-	.rf-playlist__tracks [data-name="track-artist"],
-	.rf-playlist__tracks [data-name="track-meta"] {
+	.rf-playlist__tracks [data-meta="row"] [data-field="artist"],
+	.rf-playlist__tracks [data-meta="row"] [data-field="date"] {
 		display: none;
 	}
 }

package/styles/runes/pullquote.css

@@ -1,7 +1,7 @@
 /* pullquote — structure. The relative root (glyph anchor), the decorative-glyph
  * positioning + the per-variant glyph hides + centred glyph re-centre, the
  * centre/right auto-margins, and the float modes (+ responsive). The quote glyph,
- * type, borders, backgrounds, and the inner-blockquote reset are skin. */
+ * type, borders and backgrounds are skin. */
 .rf-pullquote {
 	position: relative;
 }

package/styles/runes/recipe.css

@@ -1,31 +1,12 @@
-/* recipe — structure. The content flex column, the steps list reset + counter, the
- * step item counter + positioning, the step-number box placement/centring, and the
- * metadata dense-tile grid (+ mobile). The thin-edge inset padding + split gaps,
+/* recipe — structure. The content flex column and the metadata dense-tile grid
+ * (+ mobile). The numbered steps are the sequence dimension's
+ * (dimensions/sequence.css, BUG-024). The thin-edge inset padding + split gaps,
  * the ingredients list chrome, the step-number glyph + chrome, tip callouts, media
  * radius, and type stay skin. */
 .rf-recipe__content {
 	display: flex;
 	flex-direction: column;
 }
-.rf-recipe__content ol {
-	list-style: none;
-	counter-reset: recipe-step;
-}
-.rf-recipe__content ol > li {
-	counter-increment: recipe-step;
-	position: relative;
-}
-.rf-recipe__content ol > li::before {
-	content: counter(recipe-step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
 .rf-recipe__metadata {
 	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
 }

package/styles/runes/section.css

@@ -33,6 +33,8 @@
 .rf-section__preamble {
 	display: flex;
 	flex-direction: column;
+	/* Start-aligned by default, so a pill eyebrow keeps its own width. */
+	align-items: flex-start;
 }
 .rf-section__image {
 	max-width: 100%;
@@ -49,3 +51,48 @@
 	align-items: flex-end;
 	margin-inline-start: auto;
 }
+
+/* The section's `align` positions its own actions row too (SPEC-160 D7), whether
+ * it sits in the body or the content column — never an `actions` inside a
+ * nested rune, which has its own alignment. */
+.rf-section[data-align="center"] > .rf-section__body > .rf-actions,
+.rf-section[data-align="center"] > .rf-section__content > .rf-section__body > .rf-actions {
+	--actions-justify: center;
+}
+.rf-section[data-align="end"] > .rf-section__body > .rf-actions,
+.rf-section[data-align="end"] > .rf-section__content > .rf-section__body > .rf-actions {
+	--actions-justify: flex-end;
+}
+
+/* Cover band (SPEC-160 D7). A section is a page band, not a card: in cover mode
+ * its height comes from its content and `height` / `aspect`, never from the
+ * cover layer's portrait default, and an unplaced overlay sits mid-band. These
+ * win over the shared cover layer (dimensions/cover.css) by specificity. */
+.rf-section--cover[data-media-position="cover"] {
+	--cover-aspect: auto;
+	container-type: normal;
+	min-height: clamp(22rem, 55vh, 40rem);
+}
+.rf-section--cover[data-media-position="cover"][data-aspect] {
+	min-height: 0;
+}
+.rf-section--cover[data-media-position="cover"][data-height="sm"] {
+	min-height: 12rem;
+}
+.rf-section--cover[data-media-position="cover"][data-height="md"] {
+	min-height: 18rem;
+}
+.rf-section--cover[data-media-position="cover"][data-height="lg"] {
+	min-height: 26rem;
+}
+.rf-section--cover[data-media-position="cover"][data-height="xl"] {
+	min-height: 34rem;
+}
+.rf-section--cover[data-media-position="cover"]:is(
+		[data-content-place="auto"],
+		:not([data-content-place])
+	)
+	> [data-name="content"] {
+	align-self: center;
+	justify-self: stretch;
+}

package/styles/runes/steps.css

@@ -1,17 +1,14 @@
-/* steps — structure. The step counter mechanism, the step item positioning, the
- * counter-badge box placement, the preamble layout, list resets, and the media-position flip. All spacing, type, surface, and the badge
+/* steps — structure. The preamble layout and the media-position flip. The step
+ * numbers, their box and the list reset are the sequence dimension's
+ * (dimensions/sequence.css, BUG-024). All spacing, type, surface, and the badge
  * chrome stay skin (Lumina's styles/runes/steps.css). */
 
-.rf-steps {
-	counter-reset: step;
-}
-
 .rf-steps__preamble {
 	flex-direction: column;
 	align-items: flex-start;
 }
 
-.rf-steps ol {
+.rf-steps__steps {
 	list-style: none;
 }
 
@@ -19,23 +16,6 @@
 	display: contents;
 }
 
-.rf-step {
-	counter-increment: step;
-	position: relative;
-}
-
-.rf-step::before {
-	content: counter(step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 .rf-step h1,
 .rf-step h2,
 .rf-step h3,

package/styles/runes/track.css

@@ -1,37 +1,40 @@
-/* track — structure. The row flex + counter, the number box, the cell flex sizing
- * + ellipsis overflow + duration auto-push, the description/cue full-row + wrap,
+/* track — structure. The row flex, the cell flex sizing + ellipsis overflow,
+ * the details block (WORK-679: in the row its values are cells of the row, and
+ * the duration's push to the end is the bar's own `[data-align="end"]`; as a
+ * byline it is a row beneath the name), the description/cue full-row + wrap,
  * the chapter row flex + time auto-push, and the narrow-screen hides. The
- * number/separator glyphs, type, borders, and spacing stay skin. */
+ * separator glyphs, type and spacing stay skin. The track number, its box and the
+ * rule between tracks are the sequence dimension's (dimensions/sequence.css, BUG-024). */
 .rf-track {
 	display: flex;
 	align-items: center;
-	counter-increment: track;
-}
-.rf-track::before {
-	content: counter(track);
-	min-width: 1.5rem;
-	flex-shrink: 0;
 }
 .rf-track__track-name {
 	flex: 1;
 	min-width: 0;
 	overflow: hidden;
 }
-.rf-track__track-artist {
-	flex-shrink: 0;
+.rf-track[data-meta="row"] > .rf-track__details {
+	display: contents;
 }
-.rf-track__track-duration {
+.rf-track__details > [data-field] {
 	flex-shrink: 0;
-	margin-left: auto;
+}
+.rf-track[data-meta="row"] > .rf-track__details > [data-field="duration"] {
 	min-width: 3rem;
 }
-.rf-track__track-meta {
-	flex-shrink: 0;
+.rf-track__heading {
+	flex: 1;
+	min-width: 0;
+}
+.rf-track__heading > .rf-track__track-name {
+	display: block;
 }
 .rf-track__track-description {
 	flex-basis: 100%;
 }
-.rf-track:has(.rf-track__track-description) {
+/* A full-row part (a description, chapters, lyrics) starts a line of its own. */
+.rf-track:has(> .rf-track__track-description, > [data-name="lyrics"], > [data-name="chapters"]) {
 	flex-wrap: wrap;
 }
 .rf-track [data-name="lyrics"],
@@ -46,10 +49,8 @@
 	margin-left: auto;
 }
 @media (max-width: 480px) {
-	.rf-track__track-artist {
-		display: none;
-	}
-	.rf-track__track-meta {
+	.rf-track[data-meta="row"] [data-field="artist"],
+	.rf-track[data-meta="row"] [data-field="date"] {
 		display: none;
 	}
 }