@refrakt-md/skeleton 0.23.0 → 0.24.1

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

package/styles/dimensions/guest-posture.css

@@ -17,3 +17,11 @@
 [data-section="media"][data-guest-posture="presentational"] :is(.rf-tabs__tabs, .rf-codegroup__tabs) {
 	display: none;
 }
+
+/* SPEC-104 — a `backdrop` guest (a live sandbox in the bg layer) is inert at the
+ * pointer: decoration behind content, never an interaction target. Unlike
+ * `presentational`, the behaviours layer still mounts it (it must run) — this rule
+ * only suppresses interaction. */
+[data-guest-posture="backdrop"] {
+	pointer-events: none;
+}

package/styles/runes/bg.css

@@ -17,6 +17,14 @@
 	object-fit: cover;
 	object-position: var(--bg-position, center);
 }
+/* SPEC-104 — a live sandbox backdrop fills the bg layer like bg-video, beneath
+ * the overlay/scrim appended after it (which stack above by source order). */
+[data-name="bg"] > [data-bg-guest] {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+}
 [data-name="bg-overlay"] {
 	position: absolute;
 	inset: 0;

package/styles/runes/datatable.css

@@ -1,6 +1,6 @@
-/* datatable — structure. The toolbar + pagination flex rows and the full-width
- * search input. The table chrome, type, borders, and the table overflow/width
- * overrides (which override the table element wrapper by source order) stay skin
+/* datatable — structure. The toolbar + pagination flex rows, the full-width
+ * search input, and the table scroll container that lets wide tables overflow
+ * horizontally on narrow screens. The table chrome, type, and borders stay skin
  * (Lumina's styles/runes/datatable.css). */
 
 .rf-datatable__toolbar {
@@ -9,6 +9,12 @@
 .rf-datatable__input {
 	width: 100%;
 }
+/* Scroll wrapper around the table — toolbar/pagination sit outside this so they
+ * stay anchored to the viewport while the table itself scrolls horizontally. */
+.rf-datatable__scroll {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
 .rf-datatable__pagination {
 	display: flex;
 	align-items: center;

package/styles/runes/hero.css

@@ -8,6 +8,27 @@
 
 .rf-hero { position: relative; }
 
+/* Hero media zone bleeds: a hero is a section header, not a clip-host like
+ * card / bento-cell, so a displaced guest in its media zone should spill past
+ * the zone boundary instead of being cropped into a peek. Mirrors the existing
+ * `[data-rune="preview"]` / `[data-rune="juxtapose"]` / showcase-displace
+ * opt-outs in layouts/split.css — same intent, host-aware scope.
+ *
+ * Covers both routing paths of `frame-displace`:
+ *   1. host-on-media — `frame-displace` on the hero lands `data-displace` on
+ *      the media-zone wrapper itself (the host's frame target is its media).
+ *   2. self on a child — a media-zone child rune carrying its own
+ *      `frame-displace` ends up with `data-displace` on its root, so we still
+ *      need `:has(> [data-displace])` for that case. */
+.rf-hero > [data-section="media"]:is([data-displace], :has(> [data-displace])) {
+	overflow: visible;
+	container-type: normal;
+}
+/* Note: unlike the showcase/preview/juxtapose opt-outs in layouts/split.css,
+ * we deliberately keep the default `width: 100%` / `max-height: 100%` on the
+ * guest — a codegroup or sandbox in a hero should still fill the hero's
+ * width; the unclip is only about letting it overflow vertically. */
+
 .rf-hero__preamble {
 	flex-direction: column;
 	align-items: center;

package/styles/runes/mockup.css

@@ -43,6 +43,33 @@
 	zoom: calc(var(--mockup-scale, 1) * min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi)))));
 }
 
+/* Media guest: fill the slot. The slot, not the device, sets the size here, so
+ * the device scales (up or down) so its width matches the slot's; the cell's
+ * fixed height + overflow then crops any vertical overflow (a tall phone peeks,
+ * a wide laptop fits whole).
+ *
+ * The scale factor is `slotWidth ÷ deviceWidth`, but it is *not* computed here:
+ * deriving it from container-query units mis-resolves on iOS WebKit (under
+ * `zoom` the device balloons; even under `transform` `cqi` resolves to the wrong
+ * size). The `mockup` behavior measures the slot in JS — deterministic across
+ * engines — and publishes the factor as `--mockup-fit-scale`; centering and the
+ * clip stay here. Without JS the factor defaults to 1 (native size), which
+ * degrades gracefully. `transform` (not `zoom`) so it never feeds back into the
+ * container's measured size.
+ *
+ * `left` re-centers the native layout box for any slot/device width (the box is
+ * left-aligned at native width; the offset shifts its centre onto the slot's),
+ * and `transform-origin: top center` anchors the device's top so the clip eats
+ * the bottom. `fit="none"` opts out (its own transform path above); standalone
+ * mockups keep the capped base zoom (a phone shouldn't fill a column). */
+[data-section="media"] > .rf-mockup:not([data-fit="none"]) .rf-mockup__frame {
+	zoom: normal;
+	margin-inline: 0;
+	left: calc((100% - var(--mockup-device-width, 100%)) / 2);
+	transform: scale(calc(var(--mockup-scale, 1) * var(--mockup-fit-scale, 1)));
+	transform-origin: top center;
+}
+
 .rf-mockup__viewport {
 	overflow: auto;
 }

package/styles/runes/preview.css

@@ -38,8 +38,8 @@
 	z-index: 1;
 }
 .rf-preview__source-tabs { display: flex; }
-@container (max-width: 1280px) {
-	.rf-preview--in-feature {
-		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
-	}
-}
+/* The in-feature breakout (`.rf-preview--in-feature { margin-inline: -gutter }`)
+ * is NOT here: it overrides the skin rule `.rf-preview { margin: 2rem 0 }` by
+ * specificity, so it must stay in @layer skin — in @layer skeleton it loses to
+ * that skin margin (skin beats skeleton regardless of specificity) and the bleed
+ * is nullified. It lives in Lumina's preview.css @container block. */

package/styles/runes/sandbox.css

@@ -3,6 +3,13 @@
  * glyph stay skin (Lumina's styles/runes/sandbox.css). */
 
 .rf-sandbox { overflow: hidden; }
+/* `height="fill"` pins the iframe to 100% of its host (SPEC-101) — so the host
+ * itself needs to claim 100% of its container's height for the iframe's 100%
+ * to mean anything. Without this the iframe collapses to the 150px fallback
+ * because the auto-height host has no definite height to fill against. */
+.rf-sandbox[data-height="fill"] {
+	height: 100%;
+}
 .rf-sandbox iframe {
 	display: block;
 	width: 100%;