@refrakt-md/lumina 0.24.1 → 0.24.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.24.1",
+  "version": "0.24.3",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -84,10 +84,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.24.1",
-    "@refrakt-md/skeleton": "0.24.1",
-    "@refrakt-md/transform": "0.24.1",
-    "@refrakt-md/types": "0.24.1"
+    "@refrakt-md/runes": "0.24.3",
+    "@refrakt-md/skeleton": "0.24.3",
+    "@refrakt-md/transform": "0.24.3",
+    "@refrakt-md/types": "0.24.3"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/layouts/split.css

@@ -23,9 +23,33 @@
 [data-section="media"] {
 	border-radius: var(--rf-radius-media);
 }
-[data-section="media"] > * {
+
+/* `data-guest-fit` (emitted from rune config) is the chrome/containment axis:
+ *
+ *   clip  — a framed well (card, bento-cell, recipe, playlist). Every guest
+ *           adopts the slot radius so it reads as one surface with the well.
+ *   bleed — a bare section host (hero, feature). A *rune* guest keeps its own
+ *           chrome (its `data-elevation` radius, border, shadow) — the slot
+ *           would otherwise just mask a sandbox / codegroup / juxtapose's
+ *           corners. Leaf media still frames to the slot (an image has no
+ *           chrome of its own, so a bare hero image stays rounded).
+ *
+ * Absence of the attribute reads as `clip` (the historical default). */
+[data-section="media"]:not([data-guest-fit="bleed"]) > * {
 	border-radius: inherit;
 }
+[data-section="media"]:not([data-guest-fit="bleed"]) .rf-codegroup {
+	border-radius: var(--rf-radius-media);
+}
+
+/* Bleed host: leaf media adopts the slot radius; a rune guest does not, and the
+ * slot drops its own radius so its clip never rounds the guest's corners. */
+[data-section="media"][data-guest-fit="bleed"] > :is(img, video, svg, .rf-placeholder) {
+	border-radius: inherit;
+}
+[data-section="media"][data-guest-fit="bleed"]:has(> [data-rune]) {
+	border-radius: 0;
+}
 
 /* `preview` (negative-margin breakout) and a displaced `showcase` (peek spill)
  * want the slot fully de-chromed so the bleed reads as edge-to-edge. Juxtapose
@@ -44,12 +68,6 @@
 	border-radius: 0;
 }
 
-/* A code-group dropped into a media zone uses the media radius tier so its
- * border and corners line up with the zone's clip. */
-[data-section="media"] .rf-codegroup {
-	border-radius: var(--rf-radius-media);
-}
-
 /* Beside-layout images get subtle depth. Block runes carry their own visual
  * weight (topbars, frames) so the shadow is image-only. */
 [data-media-position="start"] > [data-section="media"] > img,

package/styles/runes/hero.css

@@ -149,6 +149,9 @@
 	margin-top: 3rem;
 	border-radius: var(--rf-radius-lg);
 }
+/* Rune-guest chrome handling (don't round a sandbox / codegroup / juxtapose) is
+ * the shared `data-guest-fit="bleed"` behaviour — see layouts/split.css. The
+ * hero only sets the image radius tier here. */
 .rf-hero[data-media-position="top"] > .rf-hero__media {
 	margin-top: 0;
 	margin-bottom: 3rem;