@refrakt-md/lumina 0.24.4 → 0.24.6

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.4",
+  "version": "0.24.6",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -84,10 +84,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.24.4",
-    "@refrakt-md/skeleton": "0.24.4",
-    "@refrakt-md/transform": "0.24.4",
-    "@refrakt-md/types": "0.24.4"
+    "@refrakt-md/runes": "0.24.6",
+    "@refrakt-md/skeleton": "0.24.6",
+    "@refrakt-md/transform": "0.24.6",
+    "@refrakt-md/types": "0.24.6"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/frame.css

@@ -118,4 +118,26 @@
  * reads consistently from desktop to mobile. For self-target (showcase) the
  * negative-margin spill stays on too — that's the intended breakout. */
 
+/* ── frame-overflow="bleed" (SPEC-116) ───────────────────────────────────
+ * The host declares the policy (`data-frame-overflow="bleed"` on its media
+ * zone, a bleed host only); the guest signals the fact (`data-overflowing`,
+ * set by its runtime when its content is wider than the frame). When both
+ * hold on a narrow viewport, run the guest's inline-end out to the layout
+ * edge and square those corners, so an overflowing component reads as cropped
+ * by the screen instead of clipped at the rounded inset edge.
+ *
+ * The reach is a LAYOUT-OWNED inset (`--rf-bleed-room-end`, default the page
+ * gutter — never the raw viewport, so a chrome'd layout like docs can cap it
+ * at the content row). v1 is inline-end only; direction (via frame-anchor) and
+ * side-by-side are deferred. The host media zone is already `overflow: visible`
+ * for a rune guest (the bleed-host guestFit rule), so the guest can spill. */
+@media (max-width: 640px) {
+	[data-frame-overflow="bleed"] > [data-overflowing] {
+		width: calc(100% + var(--rf-bleed-room-end, var(--rf-content-gutter, 1.5rem)));
+		max-width: none;
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+}
+
 }

package/styles/layouts/search.css

@@ -137,7 +137,9 @@
 @media (max-width: 768px) {
 	.rf-search-trigger {
 		padding: 0.375rem;
-		border-radius: var(--rf-radius-sm);
+		/* Collapsed to an icon-only button — keep it fully rounded so it reads
+		 * as a circle matching the adjacent theme toggle, not a small square. */
+		border-radius: var(--rf-radius-full);
 	}
 	.rf-search-dialog[open] {
 		border-radius: 0;

package/styles/layouts/theme-toggle.css

@@ -4,19 +4,22 @@
  * Layout chrome — a peer of the search trigger, placed in the header/toolbar.
  * The `theme-toggle` behavior cycles auto → light → dark and reflects the
  * current preference onto the button as `data-theme-pref`; the icon below
- * tracks that. Ported verbatim from the former `ThemeToggle.svelte` so the
- * look is unchanged, with the icon selector rekeyed from a swapped class to
- * the `data-theme-pref` attribute. */
+ * tracks that, with the icon selector keyed to the `data-theme-pref`
+ * attribute. Chrome (surface fill, full radius, muted colour, primary hover
+ * accent) is kept in sync with the search trigger so the two header buttons
+ * read as a matched set. */
 .rf-theme-toggle {
 	padding: 0;
 	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	background: transparent;
-	color: var(--rf-color-text);
+	border-radius: var(--rf-radius-full);
+	background: var(--rf-color-surface);
+	color: var(--rf-color-muted);
 	cursor: pointer;
-	transition: background-color 120ms ease, border-color 120ms ease;
+	transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
 .rf-theme-toggle:hover {
+	border-color: var(--rf-color-primary);
+	color: var(--rf-color-text);
 	background: var(--rf-color-surface-hover);
 }
 .rf-theme-toggle:focus-visible {