@refrakt-md/skeleton 0.42.0 → 0.44.0

package/index.css

@@ -36,6 +36,7 @@
 @import "./styles/dimensions/cover.css" layer(skeleton);
 @import "./styles/dimensions/metadata.css" layer(skeleton);
 @import "./styles/dimensions/sections.css" layer(skeleton);
+@import "./styles/dimensions/link.css" layer(skeleton);
 @import "./styles/dimensions/reading.css" layer(skeleton);
 @import "./styles/dimensions/checklist.css" layer(skeleton);
 @import "./styles/dimensions/sequence.css" layer(skeleton);
@@ -54,6 +55,7 @@
 @import "./styles/layouts/plan.css" layer(skeleton);
 
 /* ── Rune structure ── */
+@import "./styles/runes/actions.css" layer(skeleton);
 @import "./styles/runes/card.css" layer(skeleton);
 @import "./styles/runes/hint.css" layer(skeleton);
 @import "./styles/runes/steps.css" layer(skeleton);
@@ -110,7 +112,6 @@
 @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);

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

package/styles/dimensions/link.css

@@ -0,0 +1,25 @@
+/* link — structure (SPEC-160 D8, WORK-655). Whole-region links, keyed on the
+ * `data-link` attribute the identity transform writes, so they work around any
+ * rune and need no rune CSS.
+ *
+ * - wrap: a real `<a>` around content with nothing interactive in it.
+ * - stretch: an `<a>` laid over its host (`card`/`bento-cell` `href`, or a
+ *   `{% link %}` around interactive content); the content's own links and
+ *   controls sit above it and stay clickable. */
+
+a[data-link="wrap"] {
+	display: block;
+}
+
+:has(> [data-link="stretch"]) {
+	position: relative;
+}
+[data-link="stretch"] {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+}
+:has(> [data-link="stretch"]) :is(a, button, input, select, textarea, summary):not([data-link]) {
+	position: relative;
+	z-index: 1;
+}

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, definition-list, lead) 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,15 @@
 	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: 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/sections.css

@@ -20,3 +20,17 @@
 	display: flex;
 	flex-wrap: wrap;
 }
+
+/* An eyebrow holding a link is a pill whose link covers it (WORK-656). The
+ * stretched link is structure; the pill's chrome is skin (Lumina's
+ * dimensions/sections.css). Keyed on the role, so every rune with an eyebrow
+ * gets it, `card` included. */
+[data-section="eyebrow"]:has(a) {
+	display: inline-block;
+	position: relative;
+}
+[data-section="eyebrow"]:has(a) a::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+}

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,15 @@
 	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%;

package/styles/runes/accordion.css

@@ -1,19 +1,10 @@
-/* accordion — structure. The eyebrow stretched-link, the items passthrough, the
+/* accordion — structure. The items passthrough, the
  * item-header flex + native-marker hide + chevron box/glyph/open-rotate mechanism,
  * the title/count flex, and the ::details-content collapse mechanism. Type,
  * borders, spacing, the chevron tint, transitions, and prose are skin (Lumina's
  * styles/runes/accordion.css). The chevron glyph is the registry mask
  * --rf-icon-accordion-chevron (SPEC-094 §8 / WORK-437). */
 
-.rf-accordion__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-accordion__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
 .rf-accordion__items {
 	display: contents;
 }

package/styles/runes/actions.css

@@ -0,0 +1,50 @@
+/* actions — structure (SPEC-160 D6). The action row, the button-shaped link, and
+ * the mobile stack. The look (padding, fill, rank) is skin: Lumina's
+ * styles/runes/actions.css. A host positions the row by setting
+ * `--actions-justify` (hero and cta do, from their alignment). */
+
+.rf-actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: var(--actions-justify, flex-start);
+}
+.rf-actions__list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	justify-content: var(--actions-justify, flex-start);
+}
+.rf-actions__action > a {
+	display: inline-flex;
+	align-items: center;
+}
+
+/* Mobile: stack actions full-width so a command line and the buttons line up. */
+@media (max-width: 640px) {
+	.rf-actions,
+	.rf-actions__list {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.rf-actions__command pre {
+		width: 100%;
+		box-sizing: border-box;
+	}
+	.rf-actions__action > a {
+		justify-content: center;
+		width: 100%;
+		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/bento.css

@@ -1,6 +1,7 @@
 /* bento — structure. The container-query grid system: the grid track + cell
  * spans, the cell flex layout + media placement, the row/content sizing knobs,
- * the collapse queries, the stretched link, and metadata hiding. The cell surface
+ * the collapse queries, and metadata hiding (the stretched `href` link is the
+ * shared dimensions/link.css). The cell surface
  * chrome, spacing vars (padding/edge/gap), type, and the media-well chrome stay
  * skin (Lumina's styles/runes/bento.css). bento-cell is a hand-rolled surface
  * outside the data-elevation axis, so its padding has no surfaces competitor. */
@@ -157,17 +158,6 @@
 	height: auto;
 }
 
-/* Whole-cell link — stretched overlay; nested links stay clickable. */
-.rf-bento-cell__link {
-	position: absolute;
-	inset: 0;
-	z-index: 0;
-}
-.rf-bento-cell a:not(.rf-bento-cell__link) {
-	position: relative;
-	z-index: 1;
-}
-
 /* ─── Binary collapse — single stacked column with auto rows below breakpoint. ─── */
 @container rf-bento (max-width: 640px) {
 	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento__grid {

package/styles/runes/card.css

@@ -1,11 +1,11 @@
-/* card — structure (SPEC-070). Pure layout only: the stretched-link positioning,
- * the clip, the split vertical-align, the collection-grid height filling, and the
- * intrinsic-height scale. ALL spacing stays skin in Lumina's card.css — the root
+/* card — structure (SPEC-070). Pure layout only: the clip, the split
+ * vertical-align, the collection-grid height filling, and the intrinsic-height
+ * scale. The stretched `href` link is the shared dimensions/link.css. ALL spacing stays skin in Lumina's card.css — the root
  * `padding` overrides the surface-elevation padding (skin) by source order, and
  * the split gaps + zone-reset margins are same-layer rhythm contests. */
 
 .rf-card {
-	position: relative; /* anchor for the stretched link */
+	position: relative; /* anchor for the stretched link (dimensions/link.css) */
 	overflow: hidden; /* clip non-media layers to the rounded box */
 }
 
@@ -46,14 +46,3 @@
 .rf-card[data-height="xl"] {
 	min-height: 34rem;
 }
-
-/* Whole-card stretched link; real links in body/footer sit above it. */
-.rf-card__link {
-	position: absolute;
-	inset: 0;
-	z-index: 0;
-}
-.rf-card a:not(.rf-card__link) {
-	position: relative;
-	z-index: 1;
-}

package/styles/runes/cta.css

@@ -1,46 +1,14 @@
-/* cta — structure. The preamble layout + stretched-link eyebrow, the action-button
- * flex row + its mobile stack, list resets. All spacing, type, the headline
- * gradient, surface chrome, and colour stay skin (Lumina's styles/runes/cta.css). */
+/* cta — structure. The preamble layout and the centred
+ * actions row (the row itself is the `actions` rune's, styles/runes/actions.css).
+ * All spacing, type, the headline gradient, surface chrome, and colour stay skin
+ * (Lumina's styles/runes/cta.css). */
 
 .rf-cta__preamble {
 	flex-direction: column;
 	align-items: center;
 }
 
-/* Linked eyebrow → pill with a stretched link (chrome is skin). */
-.rf-cta .rf-cta__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-cta .rf-cta__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
-/* Action-button row. */
-.rf-cta ul {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	list-style: none;
-}
-.rf-cta li a,
-.rf-cta nav a {
-	display: inline-flex;
-	align-items: center;
-}
-
-/* Mobile: stack action buttons full-width so multi-button CTAs line up. */
-@media (max-width: 640px) {
-	.rf-cta ul {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-cta li a,
-	.rf-cta nav a {
-		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
-	}
+/* The actions row is centred. */
+.rf-cta__actions {
+	--actions-justify: center;
 }

package/styles/runes/feature.css

@@ -1,4 +1,4 @@
-/* feature — structure. The preamble flex + eyebrow stretched-link, the content
+/* feature — structure. The preamble flex, the content
  * display reset, the definitions grid, the feature-item icon stack, and the
  * media-position flip. Spacing, type, surface chrome, alignment (text-align), and
  * colour stay skin (Lumina's styles/runes/feature.css). */
@@ -8,16 +8,6 @@
 	align-items: flex-start;
 }
 
-.rf-feature__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-feature__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
 .rf-feature__content {
 	display: contents;
 }

package/styles/runes/hero.css

@@ -1,7 +1,7 @@
-/* hero — structure. The relative root (scrim/overlay anchor), the preamble +
- * eyebrow stretched-link, the actions/button flex rows and their alignment via
- * auto-margins + the mobile stack, the media-position flip, the responsive image
- * box, and the cover-band height/containment authority (which wins over the
+/* hero — structure. The relative root (scrim/overlay anchor), the preamble,
+ * the actions row's position via auto-margins (the row itself is the `actions`
+ * rune's, styles/runes/actions.css), the media-position flip, the responsive
+ * image box, and the cover-band height/containment authority (which wins over the
  * shared cover layer by specificity). All spacing, type, the headline gradient,
  * surface chrome, scrim, radii, and text-align stay skin (Lumina's
  * styles/runes/hero.css). */
@@ -19,28 +19,15 @@
 	align-items: center;
 }
 
-/* Linked eyebrow → pill with a stretched link (chrome is skin). */
-.rf-hero .rf-hero__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-hero .rf-hero__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
 .rf-hero__actions {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
 	margin: 0 auto;
 }
 
-/* Alignment — auto-margins + flex alignment position the preamble/actions. */
+/* Alignment — auto-margins position the preamble and the actions row, and
+ * `--actions-justify` aligns the buttons inside it. */
 .rf-hero[data-align="center"] .rf-hero__actions {
+	--actions-justify: center;
 	margin: 0 auto;
-	justify-content: center;
 }
 .rf-hero[data-align="left"] .rf-hero__preamble {
 	align-items: flex-start;
@@ -52,6 +39,7 @@
 	align-items: flex-end;
 }
 .rf-hero[data-align="right"] .rf-hero__actions {
+	--actions-justify: flex-end;
 	margin: 0 0 0 auto;
 }
 .rf-hero[data-align="center"] > p,
@@ -60,22 +48,6 @@
 	margin-right: auto;
 }
 
-.rf-hero ul,
-.rf-hero nav {
-	display: flex;
-	flex-wrap: wrap;
-	list-style: none;
-}
-.rf-hero[data-align="center"] ul,
-.rf-hero[data-align="center"] nav {
-	justify-content: center;
-}
-.rf-hero li a,
-.rf-hero nav a {
-	display: inline-flex;
-	align-items: center;
-}
-
 /* BUG-001 — content-first DOM inverts the shared media-first stacked contract. */
 .rf-hero[data-media-position="bottom"] {
 	display: block;
@@ -122,26 +94,3 @@
 	align-self: center;
 	justify-self: stretch;
 }
-
-/* Mobile: stack actions full-width so the code block and button line up. */
-@media (max-width: 640px) {
-	.rf-hero__actions {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-hero__actions pre {
-		width: 100%;
-		box-sizing: border-box;
-	}
-	.rf-hero ul,
-	.rf-hero nav {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-hero li a,
-	.rf-hero nav a {
-		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
-	}
-}

package/styles/runes/pricing.css

@@ -1,6 +1,5 @@
 /* pricing — structure. The tiers grid, the tier flex-column (so CTAs drop to a
- * common baseline via margin-top:auto), the preamble/eyebrow layout +
- * stretched-link, and list resets. All spacing, type, surface chrome, colour, and
+ * common baseline via margin-top:auto), the preamble layout, and list resets. All spacing, type, surface chrome, colour, and
  * shadow stay skin (Lumina's styles/runes/pricing.css). */
 
 .rf-pricing > header,
@@ -9,17 +8,6 @@
 	align-items: flex-start;
 }
 
-/* Linked eyebrow → pill with a stretched link (chrome is skin). */
-.rf-pricing__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-pricing__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
 .rf-pricing__tiers,
 .rf-pricing > ul[data-layout="grid"] {
 	display: grid;

package/styles/runes/reveal.css

@@ -1,17 +1,8 @@
-/* reveal — structure. The eyebrow stretched-link, the steps flex column, the
+/* reveal — structure. The steps flex column, the
  * hidden-step collapse (height/overflow), the metadata hide, and the control
  * button flex. The animation (opacity/transform/transition), spacing, type,
  * borders, and surface chrome are skin (Lumina's styles/runes/reveal.css). */
 
-.rf-reveal__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-reveal__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
 .rf-reveal__steps {
 	display: flex;
 	flex-direction: column;

package/styles/runes/section.css

@@ -1,23 +1,38 @@
-/* section — structure. The column stack, the preamble flex + eyebrow stretched-
- * link, the responsive image box, the full-width body, and the header alignment
+/* section — structure. The column stack, the preamble flex, the responsive image
+ * box, the full-width body, and the header alignment
  * (align-items + auto-margins). Type, gaps, max-width, radii, and text-align are
- * skin. */
-.rf-section {
+ * skin.
+ *
+ * The split (`media-position`, SPEC-160 D2) is the shared layout's, keyed on
+ * `[data-media-position]` in layouts/split.css and the cover dimension. The
+ * column stack is `:where()` so it never outranks those attribute selectors,
+ * which this file loads after. */
+:where(.rf-section) {
 	display: flex;
 	flex-direction: column;
 }
-.rf-section__preamble {
+.rf-section__content {
 	display: flex;
 	flex-direction: column;
+	min-width: 0;
+}
+
+/* Intrinsic-height scale (SPEC-089), as on `card` — for cover sections. */
+.rf-section[data-height="sm"] {
+	min-height: 12rem;
+}
+.rf-section[data-height="md"] {
+	min-height: 18rem;
+}
+.rf-section[data-height="lg"] {
+	min-height: 26rem;
 }
-.rf-section__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
+.rf-section[data-height="xl"] {
+	min-height: 34rem;
 }
-.rf-section__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
+.rf-section__preamble {
+	display: flex;
+	flex-direction: column;
 }
 .rf-section__image {
 	max-width: 100%;
@@ -34,3 +49,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,6 +1,5 @@
 /* steps — structure. The step counter mechanism, the step item positioning, the
- * counter-badge box placement, the preamble/eyebrow layout + stretched-link, list
- * resets, and the media-position flip. All spacing, type, surface, and the badge
+ * counter-badge box placement, the preamble layout, list resets, and the media-position flip. All spacing, type, surface, and the badge
  * chrome stay skin (Lumina's styles/runes/steps.css). */
 
 .rf-steps {
@@ -12,17 +11,6 @@
 	align-items: flex-start;
 }
 
-/* Linked eyebrow → pill with a stretched link (chrome is skin). */
-.rf-steps__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-steps__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
 .rf-steps ol {
 	list-style: none;
 }

package/styles/runes/tabs.css

@@ -1,19 +1,9 @@
-/* tabs — structure. The eyebrow stretched-link, the scrollable tab strip (display
+/* tabs — structure. The scrollable tab strip (display
  * + overflow), and the tab-button flex. The strip's `display: flex` is what
  * guest-posture's hide rule overrides — now both skeleton, resolved by specificity.
  * Type, colour, borders, spacing, and the active treatment are skin (Lumina's
  * styles/runes/tabs.css). */
 
-.rf-tabs__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
-}
-.rf-tabs__eyebrow:has(a) a::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-}
-
 /* Tab bar — the scrollable strip. */
 .rf-tabs__tabs {
 	display: flex;

package/styles/runes/page-section.css

@@ -1,12 +0,0 @@
-/* page-section — structure. The split two-column grid (+ mobile collapse). Padding,
- * heading resets, and the gap are skin. */
-.rf-page-section--split {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	align-items: start;
-}
-@media (max-width: 768px) {
-	.rf-page-section--split {
-		grid-template-columns: 1fr;
-	}
-}