@refrakt-md/skeleton 0.44.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.44.0",
+  "version": "0.45.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "styles"
   ],
   "dependencies": {
-    "@refrakt-md/types": "0.44.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, lead) 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,
@@ -35,6 +35,18 @@
 	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

@@ -30,6 +30,20 @@
 	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"]) {
@@ -180,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"] {
@@ -189,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"] {
@@ -198,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/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%;

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;
 	}
 }