@refrakt-md/skeleton 0.25.0 → 0.26.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/reading.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);
@@ -84,6 +85,7 @@
 @import './styles/runes/progress.css' layer(skeleton);
 @import './styles/runes/diagram.css' layer(skeleton);
 @import './styles/runes/gallery.css' layer(skeleton);
+@import './styles/runes/carousel.css' layer(skeleton);
 @import './styles/runes/diff.css' layer(skeleton);
 @import './styles/runes/chart.css' layer(skeleton);
 @import './styles/runes/juxtapose.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.25.0",
+  "version": "0.26.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "styles"
   ],
   "dependencies": {
-    "@refrakt-md/types": "0.25.0"
+    "@refrakt-md/types": "0.26.0"
   },
   "scripts": {
     "build": "tsc"

package/styles/dimensions/reading.css

@@ -0,0 +1,18 @@
+/* Reading register (SPEC-108) — structural treatment of body text, keyed on the
+ * `data-reading` refinement of `data-section="body"`. `prose` caps the line-length
+ * measure (distinct from the block's `width`) and sets running-text niceties; the
+ * default `ui` is unstyled here. The skin (Lumina) owns type, rhythm, and the
+ * drop-cap glyph. */
+[data-reading="prose"] {
+	max-width: var(--rf-measure, 66ch);
+	text-wrap: pretty;
+}
+[data-reading="prose"] > p {
+	hanging-punctuation: first last;
+}
+
+/* Drop cap — float the opening letter of a prose body. Gated on the prose register
+ * (the engine only emits `data-dropcap` there). */
+[data-reading="prose"][data-dropcap] > p:first-child::first-letter {
+	float: left;
+}

package/styles/layouts/docs.css

@@ -80,8 +80,17 @@ html:has(.rf-docs-header) { scroll-padding-top: 5rem; }
 @media (max-width: 768px) {
 	.rf-docs-header { position: sticky; top: 0; }
 	.rf-docs-header__inner p ~ p { display: none; }
-	.rf-docs-toolbar { display: flex; position: sticky; top: var(--rf-header-height, 3.5rem); z-index: 100; }
-	/* header height + ~2.75rem toolbar */
-	.rf-mobile-panel--nav { top: calc(var(--rf-header-height, 3.5rem) + 2.75rem); }
+	/* Pin the toolbar to a known height (border-box, so padding + border are
+	   included) so the docked nav panel can offset against it exactly. A
+	   content-driven height let the panel's hardcoded guess undershoot the real
+	   toolbar, and the toolbar's higher z-index then covered the panel's first
+	   link. */
+	.rf-docs-toolbar { display: flex; position: sticky; top: var(--rf-header-height, 3.5rem); z-index: 100; height: var(--rf-docs-toolbar-height, 3.25rem); box-sizing: border-box; }
+	/* Two classes (0,2,0) so this beats the base `.rf-mobile-panel { top }` rule
+	   in mobile.css — both live in @layer skeleton and mobile.css is imported
+	   later, so an equal-specificity single-class override would lose on source
+	   order and the panel would dock under the site header (hiding its first
+	   link behind the toolbar) instead of under the toolbar. */
+	.rf-mobile-panel.rf-mobile-panel--nav { top: calc(var(--rf-header-height, 3.5rem) + var(--rf-docs-toolbar-height, 3.25rem)); }
 	.rf-docs-sidebar { display: none; }
 }

package/styles/layouts/split.css

@@ -117,7 +117,16 @@
 }
 
 /* ─── Collapse breakpoints — beside layouts drop to one column ─── */
-@media (max-width: 640px) {
+/* Container-query driven (WORK-490): the collapse responds to the rune's
+ * available width — its nearest query container — rather than the global
+ * viewport. That container is `.rf-page-content` on a page (content runes always
+ * render inside it; it is `container-type: inline-size`) and the `preview`
+ * viewport frame inside a preview, so a beside layout in a narrow column collapses
+ * when *that column* is tight, and the flip is faithfully simulable in the
+ * preview's viewport selector. The rule structure is unchanged from the prior
+ * `@media` form — only the query source moves from viewport to container. Shares
+ * the `data-collapse` hook (default sm/640px; `never` opts out). */
+@container (max-width: 640px) {
 	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="sm"],
 	:is([data-media-position="start"], [data-media-position="end"]):not([data-collapse]) {
 		grid-template-columns: 1fr;
@@ -128,7 +137,7 @@
 		grid-row: auto;
 	}
 }
-@media (max-width: 768px) {
+@container (max-width: 768px) {
 	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="md"] {
 		grid-template-columns: 1fr;
 	}
@@ -137,7 +146,7 @@
 		grid-row: auto;
 	}
 }
-@media (max-width: 1024px) {
+@container (max-width: 1024px) {
 	:is([data-media-position="start"], [data-media-position="end"])[data-collapse="lg"] {
 		grid-template-columns: 1fr;
 	}

package/styles/runes/carousel.css

@@ -0,0 +1,98 @@
+/* carousel — shared layout-mode structure (SPEC-100). Any rune that emits the
+ * carousel contract — host `[data-layout="carousel"]`, track `[data-name="items"]`,
+ * items `[data-name="item"]` — gets the scroll-snap track and nav positioning,
+ * with zero per-rune CSS. Nav chrome (colour/shape) is skin (Lumina's
+ * styles/runes/carousel.css). The block-agnostic behavior injects the
+ * `.rf-carousel__nav` buttons. */
+[data-layout="carousel"] [data-name="items"] {
+	display: flex;
+	overflow-x: auto;
+	scroll-snap-type: x mandatory;
+	-webkit-overflow-scrolling: touch;
+}
+/* Slides are the track's direct children (whatever the rune names them). A rune
+ * may override the per-slide width via `--rf-carousel-slide`. */
+[data-layout="carousel"] [data-name="items"] > * {
+	scroll-snap-align: start;
+	flex: 0 0 var(--rf-carousel-slide, 80%);
+}
+
+/* Collapse-to-carousel (SPEC-100, WORK-489): a rune whose collapsed form is
+ * `carousel` (`collapse-to="carousel"`) flips its item band from grid/list to a
+ * scroll-snap row below the `collapse` breakpoint.
+ *
+ * Container-query driven: the host is its own query container, so the breakpoint
+ * is measured against the rune's OWN width — the space it actually occupies —
+ * not the global viewport. A `feature` bled to full width collapses on its full
+ * width; one sitting in a narrow column collapses on that column. As a bonus this
+ * makes the flip faithful inside the `preview` rune's viewport selector: the
+ * previewed host fills the constrained frame, so narrowing the frame shrinks the
+ * container and fires the breakpoint with no per-preview wiring.
+ *
+ * CSS-only — no JS nav on the responsive path — and shares the `data-collapse`
+ * hook (default sm/640px; `never` opts out). The `container-type` lands only on
+ * hosts that opted into `collapse-to="carousel"`, so the blast radius is narrow. */
+[data-collapse-to="carousel"] {
+	container-type: inline-size;
+}
+@container (max-width: 640px) {
+	[data-collapse-to="carousel"][data-collapse="sm"] [data-name="items"],
+	[data-collapse-to="carousel"]:not([data-collapse]) [data-name="items"] {
+		display: flex;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		-webkit-overflow-scrolling: touch;
+		grid-template-columns: none;
+	}
+	[data-collapse-to="carousel"][data-collapse="sm"] [data-name="items"] > *,
+	[data-collapse-to="carousel"]:not([data-collapse]) [data-name="items"] > * {
+		scroll-snap-align: start;
+		flex: 0 0 var(--rf-carousel-slide, 80%);
+	}
+}
+@container (max-width: 768px) {
+	[data-collapse-to="carousel"][data-collapse="md"] [data-name="items"] {
+		display: flex;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		-webkit-overflow-scrolling: touch;
+		grid-template-columns: none;
+	}
+	[data-collapse-to="carousel"][data-collapse="md"] [data-name="items"] > * {
+		scroll-snap-align: start;
+		flex: 0 0 var(--rf-carousel-slide, 80%);
+	}
+}
+@container (max-width: 1024px) {
+	[data-collapse-to="carousel"][data-collapse="lg"] [data-name="items"] {
+		display: flex;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		-webkit-overflow-scrolling: touch;
+		grid-template-columns: none;
+	}
+	[data-collapse-to="carousel"][data-collapse="lg"] [data-name="items"] > * {
+		scroll-snap-align: start;
+		flex: 0 0 var(--rf-carousel-slide, 80%);
+	}
+}
+
+/* Nav buttons — positioned relative to the track's container (the behavior
+ * ensures it is a positioning context). */
+.rf-carousel__nav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 2;
+	width: 2.5rem;
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-carousel__nav--prev {
+	left: 0.5rem;
+}
+.rf-carousel__nav--next {
+	right: 0.5rem;
+}

package/styles/runes/cast.css

@@ -1,15 +1,21 @@
 /* cast — structure. The members list reset, grid/list arrangements, 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__members { list-style: none; }
-.rf-cast--grid .rf-cast__members {
+.rf-cast__items { list-style: none; }
+.rf-cast--grid .rf-cast__items {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
-.rf-cast--list .rf-cast__members {
+.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. */
+.rf-cast--carousel {
+	--rf-carousel-slide: clamp(200px, 40%, 280px);
+}
 .rf-cast-member__name { display: block; }
 .rf-cast-member__role { display: block; }
 .rf-cast-member__body:empty { display: none; }

package/styles/runes/feature.css

@@ -22,14 +22,36 @@
 	display: contents;
 }
 
-/* Definitions stack by default; the grid modifier tiles them. */
-.rf-feature__definitions {
+/* Item arrangement is the `layout` axis (SPEC-099): `list` stacks the
+ * definitions in a single column, `grid` tiles them. Keyed off `[data-layout]`,
+ * decoupled from media placement. */
+.rf-feature[data-layout="list"] .rf-feature__items {
 	display: block;
 }
-.rf-feature--definitions-grid .rf-feature__definitions {
+.rf-feature[data-layout="grid"] .rf-feature__items {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 }
+/* Collapse-to-column (SPEC-099 §3): below the `collapse` breakpoint a `grid`
+ * arrangement reflows to a single column. CSS-only, sharing the media-split
+ * breakpoint hook (`data-collapse`; default sm/640px, mirroring split.css).
+ * `collapse="never"` opts out. */
+@media (max-width: 640px) {
+	.rf-feature[data-layout="grid"][data-collapse="sm"] .rf-feature__items,
+	.rf-feature[data-layout="grid"]:not([data-collapse]) .rf-feature__items {
+		grid-template-columns: 1fr;
+	}
+}
+@media (max-width: 768px) {
+	.rf-feature[data-layout="grid"][data-collapse="md"] .rf-feature__items {
+		grid-template-columns: 1fr;
+	}
+}
+@media (max-width: 1024px) {
+	.rf-feature[data-layout="grid"][data-collapse="lg"] .rf-feature__items {
+		grid-template-columns: 1fr;
+	}
+}
 
 /* Beside layouts: definitions stay stacked inside the content track. */
 .rf-feature[data-media-position="start"] .rf-feature__content,

package/styles/runes/gallery.css

@@ -25,35 +25,11 @@
 	right: 0;
 }
 
-/* Carousel */
-.rf-gallery[data-layout="carousel"] .rf-gallery__items {
-	display: flex;
-	overflow-x: auto;
-	scroll-snap-type: x mandatory;
-	-webkit-overflow-scrolling: touch;
-}
+/* Carousel — the scroll-snap track mechanics and the nav buttons are the shared
+ * carousel layout mode (styles/runes/carousel.css, keyed on the contract);
+ * gallery only sets its column-based item width. */
 .rf-gallery[data-layout="carousel"] .rf-gallery__item {
 	flex: 0 0 calc(100% / var(--gallery-columns, 3));
-	scroll-snap-align: start;
-}
-
-/* Carousel nav buttons */
-.rf-gallery__nav {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	z-index: 2;
-	width: 2.5rem;
-	height: 2.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.rf-gallery__nav--prev {
-	left: calc(var(--rf-gallery-edge) + 0.5rem);
-}
-.rf-gallery__nav--next {
-	right: calc(var(--rf-gallery-edge) + 0.5rem);
 }
 
 /* Masonry */

package/styles/runes/preview.css

@@ -8,10 +8,20 @@
 	justify-content: space-between;
 	min-height: 2rem;
 }
+.rf-preview__toolbar-left {
+	display: flex;
+	align-items: center;
+}
 .rf-preview__controls {
 	display: flex;
 	align-items: center;
 }
+/* Preview-only controls are hidden in code view (the canvas they tune isn't
+ * shown). The explicit display:flex above would defeat the [hidden] attribute,
+ * so restore display:none for the hidden state. */
+.rf-preview__controls[hidden] {
+	display: none;
+}
 .rf-preview__view-toggle { display: flex; }
 .rf-preview__toggle { display: flex; }
 .rf-preview__toggle-btn {
@@ -22,10 +32,21 @@
 	height: 1.625rem;
 }
 .rf-preview__canvas { overflow: hidden; }
+/* Clip the source panel to its rounded corners (matching the canvas) — otherwise
+ * the code block's square fill bleeds past the rounded border at the bottom. */
+.rf-preview__source { overflow: hidden; }
 .rf-preview__viewport-toggle { display: flex; }
 .rf-preview__viewport-frame {
 	position: relative;
 	overflow: hidden;
+	/* The frame is a query container (WORK-490): container-query-driven layouts
+	 * inside the preview (e.g. split.css beside→stack, carousel collapse-to)
+	 * resolve against the constrained frame width, so the viewport selector
+	 * faithfully drives their breakpoints. Runes that establish a closer container
+	 * (carousel hosts) keep querying themselves; this only governs content with no
+	 * nearer container. The preview's own toolbar/canvas chrome sits outside the
+	 * frame, so its @container rules are unaffected. */
+	container-type: inline-size;
 }
 .rf-preview__viewport-frame--constrained {
 	margin: 0 auto;

package/styles/runes/steps.css

@@ -48,7 +48,10 @@
 .rf-step h4,
 .rf-step h5,
 .rf-step h6,
-.rf-step strong {
+/* A leading bold opening the step body acts as its title (list-based steps),
+ * so it blocks onto its own line. Scoped to the first inline `strong` of the
+ * first paragraph — inline bold elsewhere in the body must stay inline. */
+.rf-step__content > p:first-child > strong:first-child {
 	display: block;
 }
 

package/styles/runes/textblock.css

@@ -1,12 +1,9 @@
-/* textblock — structure. The body block, the drop-cap float, and the multi-column
- * counts (+ responsive). The drop-cap/lead type, column gap/rule, and text-align
- * are skin. */
+/* textblock — structure. The body block and the multi-column counts (+
+ * responsive). Drop-cap is the universal SPEC-108 opt-in (dimensions/reading.css);
+ * lead type, column gap/rule, and text-align are skin. */
 .rf-textblock__body {
 	display: block;
 }
-.rf-textblock--dropcap .rf-textblock__body > p:first-child::first-letter {
-	float: left;
-}
 .rf-textblock[data-columns="2"] .rf-textblock__body { column-count: 2; }
 .rf-textblock[data-columns="3"] .rf-textblock__body { column-count: 3; }
 .rf-textblock[data-columns="4"] .rf-textblock__body { column-count: 4; }