@refrakt-md/skeleton 0.43.0 → 0.44.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.44.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "styles"
   ],
   "dependencies": {
-    "@refrakt-md/types": "0.43.0"
+    "@refrakt-md/types": "0.44.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, 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/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/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/section.css

@@ -49,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;
+}