@refrakt-md/lumina 0.8.4 → 0.9.0

package/styles/layouts/split.css

@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: var(--split-ratio, 1fr 1fr);
   align-items: var(--split-valign, start);
-  gap: var(--split-gap, var(--rf-spacing-lg));
+  column-gap: var(--split-gap, var(--rf-spacing-lg));
 }
 
 [data-layout="split-reverse"] > [data-name="content"] { order: 2; }
@@ -13,11 +13,57 @@
 
 /* Grid so children can use justify-self/align-self (default: stretch) */
 [data-layout="split"] > [data-name="media"],
-[data-layout="split-reverse"] > [data-name="media"] {
+[data-layout="split-reverse"] > [data-name="media"],
+[data-layout="split"] > [data-section="media"],
+[data-layout="split-reverse"] > [data-section="media"] {
   display: grid;
 }
 
-/* Collapse breakpoints */
+/* ─── 3-section grid placement (header + content + media) ─────────── */
+/* Only applies when a data-section="header" child exists (3-section runes).
+   2-section runes (e.g. Feature with display:contents on content) use the
+   default 2-column flow from the base grid above. */
+
+/* Split: header + content in col 1, media in col 2 spanning both rows */
+[data-layout="split"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
+[data-layout="split"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 1; grid-row: 2; }
+[data-layout="split"]:has(> [data-section="header"]) > [data-section="media"]   { grid-column: 2; grid-row: 1 / 3; }
+
+/* Split-reverse: media in col 1 spanning both rows, header + content in col 2 */
+[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
+[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 2; grid-row: 2; }
+[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="media"]   { grid-column: 1; grid-row: 1 / 3; }
+
+/* Reset margin on media zone in 3-section split layouts (header + content + media).
+   2-section runes (e.g. Hero) retain their per-rune media margins. */
+[data-layout="split"]:has(> [data-section="header"]) > [data-section="media"],
+[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="media"] {
+  margin: 0;
+}
+
+/* ─── Media zone base styles ──────────────────────────────────────── */
+
+/* Only clip overflow when media zone contains an image. Interactive content
+   (preview, juxtapose) needs overflow visible for bleed effects. */
+[data-section="media"]:has(> img) {
+  border-radius: var(--rf-radius-lg);
+  overflow: hidden;
+}
+[data-section="media"] img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--rf-radius-lg);
+}
+
+/* Split layout media gets subtle depth */
+[data-layout="split"] > [data-section="media"] img,
+[data-layout="split-reverse"] > [data-section="media"] img {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* ─── Collapse breakpoints ────────────────────────────────────────── */
+
 @media (max-width: 640px) {
   [data-layout^="split"][data-collapse="sm"] { grid-template-columns: 1fr; }
   [data-layout^="split"][data-collapse="sm"] > * { order: unset; }
@@ -32,3 +78,113 @@
   [data-layout^="split"][data-collapse="lg"] { grid-template-columns: 1fr; }
   [data-layout^="split"][data-collapse="lg"] > * { order: unset; }
 }
+
+/* ─── Default mobile collapse for split layouts ───────────────────── */
+/* Runes without an explicit data-collapse always collapse at sm */
+
+@media (max-width: 640px) {
+  [data-layout^="split"]:not([data-collapse]) {
+    grid-template-columns: 1fr;
+  }
+  [data-layout^="split"]:not([data-collapse]) > [data-section="header"],
+  [data-layout^="split"]:not([data-collapse]) > [data-name="content"],
+  [data-layout^="split"]:not([data-collapse]) > [data-section="media"] {
+    grid-column: auto;
+    grid-row: auto;
+  }
+  [data-layout^="split"]:not([data-collapse]) > * {
+    order: unset;
+  }
+
+  /* ─── Content-first collapse (data-media-position="top") ────────── */
+  /* Media hoists above preamble as full-bleed card header */
+  [data-media-position="top"] > [data-section="media"],
+  [data-media-position="top"][data-layout="split"] > [data-section="media"],
+  [data-media-position="top"][data-layout="split-reverse"] > [data-section="media"] {
+    order: -1;
+    grid-column: auto;
+    grid-row: auto;
+    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
+    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
+    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
+    border-radius: 0;
+  }
+  [data-media-position="top"] > [data-section="media"] img {
+    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  }
+
+  /* Stacked layout also needs flex context for order to work */
+  [data-media-position="top"][data-layout="stacked"] {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+/* ─── Explicit collapse breakpoint + content-first ────────────────── */
+
+@media (max-width: 640px) {
+  [data-media-position="top"][data-collapse="sm"] > [data-section="media"],
+  [data-media-position="top"][data-collapse="sm"][data-layout="split"] > [data-section="media"],
+  [data-media-position="top"][data-collapse="sm"][data-layout="split-reverse"] > [data-section="media"] {
+    order: -1;
+    grid-column: auto;
+    grid-row: auto;
+    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
+    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
+    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
+    border-radius: 0;
+  }
+  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] img {
+    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  }
+  /* Reset grid placement on collapse for header/content */
+  [data-media-position="top"][data-collapse="sm"] > [data-section="header"],
+  [data-media-position="top"][data-collapse="sm"] > [data-name="content"] {
+    grid-column: auto;
+    grid-row: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  [data-media-position="top"][data-collapse="md"] > [data-section="media"],
+  [data-media-position="top"][data-collapse="md"][data-layout="split"] > [data-section="media"],
+  [data-media-position="top"][data-collapse="md"][data-layout="split-reverse"] > [data-section="media"] {
+    order: -1;
+    grid-column: auto;
+    grid-row: auto;
+    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
+    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
+    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
+    border-radius: 0;
+  }
+  [data-media-position="top"][data-collapse="md"] > [data-section="media"] img {
+    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  }
+  [data-media-position="top"][data-collapse="md"] > [data-section="header"],
+  [data-media-position="top"][data-collapse="md"] > [data-name="content"] {
+    grid-column: auto;
+    grid-row: auto;
+  }
+}
+
+@media (max-width: 1024px) {
+  [data-media-position="top"][data-collapse="lg"] > [data-section="media"],
+  [data-media-position="top"][data-collapse="lg"][data-layout="split"] > [data-section="media"],
+  [data-media-position="top"][data-collapse="lg"][data-layout="split-reverse"] > [data-section="media"] {
+    order: -1;
+    grid-column: auto;
+    grid-row: auto;
+    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
+    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
+    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
+    border-radius: 0;
+  }
+  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] img {
+    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+  }
+  [data-media-position="top"][data-collapse="lg"] > [data-section="header"],
+  [data-media-position="top"][data-collapse="lg"] > [data-name="content"] {
+    grid-column: auto;
+    grid-row: auto;
+  }
+}

package/styles/runes/accordion.css

@@ -3,9 +3,8 @@
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	overflow: hidden;
-	margin: 1.5rem 0;
 }
-.rf-accordion__header {
+.rf-accordion__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-accordion__eyebrow {

package/styles/runes/annotate.css

@@ -1,7 +1,4 @@
 /* Annotate */
-.rf-annotate {
-	margin: 1.5rem 0;
-}
 .rf-annotate__body {
 	display: contents;
 }

package/styles/runes/api.css

@@ -2,13 +2,9 @@
 .rf-api {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	margin: 1.5rem 0;
 	overflow: hidden;
 }
 .rf-api__header {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
 	padding: 1rem 1.25rem;
 	background: var(--rf-color-surface-hover);
 	border-bottom: 1px solid var(--rf-color-border);

package/styles/runes/audio.css

@@ -1,7 +1,4 @@
 /* Audio */
-.rf-audio {
-	margin: 1.5rem 0;
-}
 .rf-audio rf-audio {
 	display: block;
 }

package/styles/runes/backlog.css

@@ -0,0 +1,61 @@
+/* Backlog */
+
+/* Group sections */
+.rf-backlog__group {
+	margin-bottom: 1.5rem;
+}
+.rf-backlog__group-title {
+	font-size: 0.8125rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	margin: 0 0 0.5rem;
+	padding-bottom: 0.375rem;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+
+/* Cards — mini rune surface */
+.rf-backlog__card {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	padding: 0.75rem 1rem;
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+	margin-bottom: 0.5rem;
+	transition: box-shadow 200ms ease;
+}
+.rf-backlog__card:hover {
+	box-shadow: var(--rf-shadow-md);
+}
+
+/* Card link — suppress underline */
+.rf-backlog__card-link {
+	text-decoration: none;
+	color: inherit;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+.rf-backlog__card-link:hover {
+	text-decoration: none;
+}
+
+/* Card title — smaller than full rune */
+.rf-backlog__card [data-section="title"] {
+	font-size: 0.9375rem;
+	font-weight: 600;
+}
+
+/* Checklist progress badge */
+.rf-backlog__card-progress {
+	font-family: var(--rf-font-mono);
+	font-size: 0.6875rem;
+	font-weight: 600;
+	padding: 0.125rem 0.5rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	color: var(--rf-color-muted);
+	margin-left: auto;
+}

package/styles/runes/bento.css

@@ -1,8 +1,8 @@
 /* Bento */
-.rf-bento {
-	margin: 1.5rem 0;
-}
-.rf-bento__header {
+.rf-bento__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
 .rf-bento__eyebrow {
@@ -44,7 +44,6 @@
 	gap: var(--bento-gap, 1rem);
 }
 .rf-bento-cell {
-	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	padding: 1.25rem;
 	background: var(--rf-color-surface);

package/styles/runes/blog.css

@@ -0,0 +1,94 @@
+/* Blog — post listing with filtering and sorting */
+.rf-blog {
+	padding: 2rem 0;
+}
+.rf-blog__preamble {
+	margin-bottom: 2rem;
+}
+.rf-blog__headline {
+	font-size: 2rem;
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	margin: 0 0 0.5rem;
+	line-height: 1.2;
+	color: var(--rf-color-text);
+}
+.rf-blog__blurb {
+	font-size: 1.1rem;
+	color: var(--rf-color-muted);
+	margin: 0 0 1rem;
+	line-height: 1.6;
+	max-width: 640px;
+}
+.rf-blog__posts {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+.rf-blog__post {
+	padding: 1.25rem 1.5rem;
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+	transition: box-shadow 200ms ease;
+}
+.rf-blog__post:hover {
+	box-shadow: var(--rf-shadow-md);
+}
+.rf-blog__post h3 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin: 0 0 0.375rem;
+	line-height: 1.3;
+}
+.rf-blog__post h3 a {
+	color: var(--rf-color-text);
+	text-decoration: none;
+}
+.rf-blog__post h3 a:hover {
+	color: var(--rf-color-primary);
+}
+.rf-blog__post time {
+	display: inline-block;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+	margin-bottom: 0.5rem;
+}
+.rf-blog__post p {
+	font-size: 0.95rem;
+	color: var(--rf-color-muted);
+	margin: 0;
+	line-height: 1.6;
+}
+
+/* Grid layout */
+.rf-blog--grid .rf-blog__posts {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 1.25rem;
+}
+
+/* Compact layout */
+.rf-blog--compact .rf-blog__posts {
+	gap: 0;
+}
+.rf-blog--compact .rf-blog__post {
+	border-radius: 0;
+	padding: 1rem 1.25rem;
+}
+.rf-blog--compact .rf-blog__post:first-child {
+	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+}
+.rf-blog--compact .rf-blog__post:last-child {
+	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
+}
+.rf-blog--compact .rf-blog__post h3 {
+	font-size: 1.1rem;
+	margin-bottom: 0.125rem;
+}
+.rf-blog--compact .rf-blog__post p {
+	font-size: 0.875rem;
+}
+.rf-blog--compact .rf-blog__post time {
+	font-size: 0.8rem;
+	margin-bottom: 0.25rem;
+}

package/styles/runes/budget.css

@@ -1,8 +1,8 @@
 /* Budget */
-.rf-budget {
-	margin: 1.5rem 0;
-}
 .rf-budget__header {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 	margin-bottom: 1.5rem;
 }
 .rf-budget__title {
@@ -12,22 +12,6 @@
 	color: var(--rf-color-text);
 }
 
-/* Meta bar — single surface strip matching recipe pattern */
-.rf-budget__meta {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-}
-.rf-budget__meta-item {
-	font-size: 0.8125rem;
-	font-weight: 400;
-	color: var(--rf-color-muted);
-}
-
 /* Categories */
 .rf-budget__categories {
 	display: flex;

package/styles/runes/bug.css

@@ -0,0 +1,25 @@
+/* Bug */
+.rf-bug__assignee-badge {
+	margin-left: auto;
+}
+.rf-bug__assignee-badge::before { content: '@'; }
+.rf-bug__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-bug__body > header {
+	margin-bottom: 0.75rem;
+}
+.rf-bug__body > header h1,
+.rf-bug__body > header h2,
+.rf-bug__body > header h3 {
+	margin-top: 0;
+}
+.rf-bug__body > div > section {
+	margin-top: 1rem;
+	padding-top: 0.75rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-bug__body > div > section:first-child {
+	margin-top: 0.75rem;
+}

package/styles/runes/cast.css

@@ -1,7 +1,4 @@
 /* Cast */
-.rf-cast {
-	margin: 1.5rem 0;
-}
 
 /* Members list — base */
 .rf-cast__members {

package/styles/runes/character.css

@@ -1,28 +1,4 @@
 /* Character */
-.rf-character {
-	margin: 1.5rem 0;
-}
-
-/* Badge bar — surface strip */
-.rf-character__badge {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1rem;
-}
-.rf-character__role-badge,
-.rf-character__status-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-character__role-badge::before { content: 'Role: '; font-weight: 400; opacity: 0.65; }
-.rf-character__status-badge::before { content: 'Status: '; font-weight: 400; opacity: 0.65; }
 
 /* Portrait */
 .rf-character__portrait {
@@ -61,30 +37,16 @@
 	color: var(--rf-color-heading);
 }
 
-/* Role variant colors — text color only */
-.rf-character[data-role="protagonist"] .rf-character__role-badge {
-	color: var(--rf-color-success);
-}
-.rf-character[data-role="antagonist"] .rf-character__role-badge {
-	color: var(--rf-color-danger);
-}
-
-/* Status indicators — text color only */
-.rf-character[data-status="dead"] .rf-character__status-badge {
-	color: var(--rf-color-danger);
-}
-.rf-character[data-status="missing"] .rf-character__status-badge {
-	color: var(--rf-color-warning);
-}
-
 /* Character Section */
 .rf-character-section {
 	padding: 0.75rem 0;
 	border-top: 1px solid var(--rf-color-border);
 }
-.rf-character-section__header {
-	font-size: 1.125rem;
-	font-weight: 600;
+.rf-character-section__name {
+	display: block;
+	font-size: 1.25rem;
+	font-weight: 700;
+	line-height: 1.3;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
 }

package/styles/runes/chart.css

@@ -1,9 +1,7 @@
 /* Chart */
 .rf-chart {
-	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
-	margin: 1.5rem 0;
 }
 .rf-chart__title {
 	font-weight: 600;

package/styles/runes/codegroup.css

@@ -1,12 +1,11 @@
 /* Code Group */
 .rf-codegroup {
 	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
 	overflow: hidden;
-	margin: 1.5rem 0;
 	background: var(--rf-color-code-bg);
 	color: var(--rf-color-code-text);
 	box-shadow: var(--rf-shadow-md);
+	padding: 0;
 }
 .rf-codegroup__topbar {
 	display: flex;
@@ -15,6 +14,7 @@
 	padding: 0.75rem 1rem;
 	background: rgba(255, 255, 255, 0.03);
 	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+	margin-bottom: 0;
 }
 .rf-codegroup__dot {
 	width: 10px;

package/styles/runes/compare.css

@@ -1,6 +1,5 @@
 /* Compare */
 .rf-compare {
-	margin: 1.5rem 0;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	overflow: hidden;

package/styles/runes/conversation.css

@@ -3,7 +3,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	margin: 1.5rem 0;
 	max-width: 40rem;
 }
 .rf-conversation__messages {

package/styles/runes/cta.css

@@ -2,12 +2,15 @@
 .rf-cta {
 	padding: 3.5rem 2rem 3rem;
 }
-.rf-cta .rf-cta__header,
+.rf-cta .rf-cta__preamble,
 .rf-cta > h1, .rf-cta > h2, .rf-cta > h3,
 .rf-cta > p {
 	text-align: center;
 }
-.rf-cta__header {
+.rf-cta__preamble {
+	flex-direction: column;
+	align-items: center;
+	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
 /* Higher specificity needed to override .rf-cta p (0,1,1) */
@@ -130,7 +133,7 @@
 .rf-cta--in-pricing {
 	padding: 1.5rem 0 0;
 }
-.rf-cta--in-pricing .rf-cta__header,
+.rf-cta--in-pricing .rf-cta__preamble,
 .rf-cta--in-pricing > h1, .rf-cta--in-pricing > h2, .rf-cta--in-pricing > h3,
 .rf-cta--in-pricing > p {
 	text-align: left;

package/styles/runes/datatable.css

@@ -1,7 +1,4 @@
 /* DataTable */
-.rf-datatable {
-	margin: 1.5rem 0;
-}
 .rf-datatable__toolbar {
 	display: flex;
 	justify-content: flex-end;

package/styles/runes/decision-log.css

@@ -0,0 +1,46 @@
+/* Decision Log */
+
+/* Entry list */
+.rf-decision-log__list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-decision-log__entry {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	padding: 0.75rem 1rem;
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+	margin-bottom: 0.5rem;
+	transition: box-shadow 200ms ease;
+}
+.rf-decision-log__entry:hover {
+	box-shadow: var(--rf-shadow-md);
+}
+
+/* Entry link — suppress underline */
+.rf-decision-log__link {
+	text-decoration: none;
+	color: inherit;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+.rf-decision-log__link:hover {
+	text-decoration: none;
+}
+
+/* Entry title — smaller than full rune */
+.rf-decision-log__entry [data-section="title"] {
+	font-size: 0.9375rem;
+	font-weight: 600;
+}
+
+/* Superseded/deprecated entries — muted with strikethrough */
+.rf-decision-log__entry[data-status="superseded"] [data-section="title"],
+.rf-decision-log__entry[data-status="deprecated"] [data-section="title"] {
+	color: var(--rf-color-muted);
+	text-decoration: line-through;
+}