baseline-foundry 0.1.3 → 0.1.5

package/dist/css-components/static-content-ports.d.ts

@@ -1,8 +1,8 @@
 /**
  * Static Vanilla parity ports: data spotlight and divided section. The
- * 38.75rem and 64.75rem container thresholds preserve Vanilla's 620px and
- * 1036px composition changes while allowing the patterns to respond to their
- * allocated inline size.
+ * Components use an intrinsic medium threshold for their density changes and
+ * the shared 45rem readable-split threshold for default balanced content,
+ * while responding to their allocated inline size.
  *
  * Vanilla → BF token mapping:
  * - `$spv--strip-shallow` (1.5rem) → `--bf-section-space-shallow`.

package/dist/css-components/static-content-ports.js

@@ -1,8 +1,8 @@
 /**
  * Static Vanilla parity ports: data spotlight and divided section. The
- * 38.75rem and 64.75rem container thresholds preserve Vanilla's 620px and
- * 1036px composition changes while allowing the patterns to respond to their
- * allocated inline size.
+ * Components use an intrinsic medium threshold for their density changes and
+ * the shared 45rem readable-split threshold for default balanced content,
+ * while responding to their allocated inline size.
  *
  * Vanilla → BF token mapping:
  * - `$spv--strip-shallow` (1.5rem) → `--bf-section-space-shallow`.
@@ -12,195 +12,209 @@
  *   classes to receive correct four-tier typography.
  */
 export function staticContentPortsCss() {
-    return `/* ------------------------------------------------------------------ */
-/* Static content ports — Vanilla data spotlight and divided section. */
-/* Their children retain role-owned rhythm; these layout */
-/* wrappers add only structural columns, rules, and explicit section ends. */
-/* ------------------------------------------------------------------ */
-
-/* Data spotlight: Vanilla's equal-height wrap becomes an intrinsic grid.
-   Each item begins with a public highlighted rule using the shared emphasis
-   thickness. Item padding remains item-owned, so compositions never erase the
-   shallow inter-row rhythm when the pattern narrows. */
-:where(.bf-theme) :where(.bf-data-spotlight) {
-  container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-header) {
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-items) {
-  column-gap: var(--bf-grid-gap-inline);
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-item) {
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-item:not(:last-child)) {
-  padding-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-stat) {
-  color: var(--bf-color-text-default);
-  display: block;
-  font-family: var(--bf-h1-font-family);
-  font-size: var(--bf-h1-font-size);
-  font-style: var(--bf-h1-font-style);
-  font-variant-caps: var(--bf-h1-font-variant-caps);
-  font-weight: var(--bf-h1-font-weight);
-  letter-spacing: var(--bf-h1-letter-spacing);
-  line-height: var(--bf-h1-line-height);
-  margin-block: 0 var(--bf-h1-margin-bottom);
-  overflow-wrap: anywhere;
-  padding-block-end: 0;
-  padding-block-start: var(--bf-h1-nudge-start);
-  text-transform: var(--bf-h1-text-transform);
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-headline) {
-  font-family: var(--bf-h3-font-family);
-  font-size: var(--bf-h3-font-size);
-  font-style: var(--bf-h3-font-style);
-  font-variant-caps: var(--bf-h3-font-variant-caps);
-  font-weight: var(--bf-h3-font-weight);
-  letter-spacing: var(--bf-h3-letter-spacing);
-  line-height: var(--bf-h3-line-height);
-  margin-block: 0 var(--bf-h3-margin-bottom);
-  min-inline-size: 0;
-  padding-block-end: 0;
-  padding-block-start: var(--bf-h3-nudge-start);
-  text-transform: var(--bf-h3-text-transform);
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-description, .bf-data-spotlight-action) {
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-action) {
-  display: block;
-  margin-block: 0 var(--bf-body-margin-bottom);
-  padding-block-end: 0;
-  padding-block-start: var(--bf-body-nudge-start);
-}
-
-/* Vanilla's tablet wrap has two equal items per row. For three items the
-   in-grid title shares the first row; its first statistic owns the shallow
-   row separation. Four items give both first-row statistics that separation. */
-@container (width >= 38.75rem) {
-  :where(.bf-theme) :where(.bf-data-spotlight-items) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-data-spotlight-header, .bf-data-spotlight-item) {
-    display: grid;
-    grid-row: span 5;
-    grid-template-rows: subgrid;
-  }
-
-  :where(.bf-theme) :where(.bf-data-spotlight-item) {
-    padding-block-end: 0;
-  }
-
-  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-header) {
-    block-size: 0;
-    overflow: visible;
-  }
-
-  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
-  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
-    padding-block-end: var(--bf-section-space-shallow);
-  }
-}
-
-/* At Vanilla's large threshold the four stat blocks align in one row. Two
-   blocks reserve the leading half for the overhanging title; three reserve a
-   single leading column. The zero block-size matches Vanilla's height: 0
-   title cell without hiding its readable text. */
-@container (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-data-spotlight-items) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-data-spotlight.is-two-blocks) :where(.bf-data-spotlight-header) {
-    block-size: 0;
-    grid-column: span 2;
-    overflow: visible;
-  }
-
-  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
-  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
-    padding-block-end: 0;
-  }
-}
-
-/* Divided section: Vanilla's ruled 50/50 section is a one-column composition
-   until the relevant container can support the split. The rule is structural;
-   headings, copy, and content items keep their own metric-derived rhythm. */
-:where(.bf-theme) :where(.bf-divided-section) {
-  container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-divided-section-layout) {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-divided-section-rule) {
-  grid-column: 1 / -1;
-}
-
-:where(.bf-theme) :where(.bf-divided-section-header, .bf-divided-section-content) {
-  min-inline-size: 0;
-}
-
+    return `/* ------------------------------------------------------------------ */
+/* Static content ports — Vanilla data spotlight and divided section. */
+/* Their children retain role-owned rhythm; these layout */
+/* wrappers add only structural columns, rules, and internal gaps. */
+/* ------------------------------------------------------------------ */
+
+/* Data spotlight: Vanilla's equal-height wrap becomes an intrinsic grid.
+   Each item begins with a public highlighted rule using the shared emphasis
+   thickness. The items container owns every inter-row gap. */
+:where(.bf-theme) :where(.bf-data-spotlight) {
+  container-type: inline-size;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-header) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-items) {
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+  row-gap: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-item) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-stat) {
+  color: var(--bf-color-text-default);
+  display: block;
+  font-family: var(--bf-h1-font-family);
+  font-size: var(--bf-h1-font-size);
+  font-style: var(--bf-h1-font-style);
+  font-variant-caps: var(--bf-h1-font-variant-caps);
+  font-weight: var(--bf-h1-font-weight);
+  letter-spacing: var(--bf-h1-letter-spacing);
+  line-height: var(--bf-h1-line-height);
+  margin-block: 0 var(--bf-h1-margin-bottom);
+  overflow-wrap: anywhere;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h1-nudge-start);
+  text-transform: var(--bf-h1-text-transform);
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-headline) {
+  font-family: var(--bf-h3-font-family);
+  font-size: var(--bf-h3-font-size);
+  font-style: var(--bf-h3-font-style);
+  font-variant-caps: var(--bf-h3-font-variant-caps);
+  font-weight: var(--bf-h3-font-weight);
+  letter-spacing: var(--bf-h3-letter-spacing);
+  line-height: var(--bf-h3-line-height);
+  margin-block: 0 var(--bf-h3-margin-bottom);
+  min-inline-size: 0;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h3-nudge-start);
+  text-transform: var(--bf-h3-text-transform);
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-description, .bf-data-spotlight-action) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-action) {
+  display: block;
+  margin-block: 0 var(--bf-body-margin-bottom);
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
+}
+
+/* Vanilla's tablet wrap has two equal items per row. For three items the
+   in-grid title shares the first row; its first statistic owns the shallow
+   row separation. Four items give both first-row statistics that separation. */
+@container (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-data-spotlight-items) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    row-gap: var(--bf-space-1);
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-items)::after {
+    block-size: calc(var(--bf-section-space-shallow) - (var(--bf-space-1) * 2));
+    content: "";
+    grid-column: 1 / -1;
+    grid-row: 6;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-header, .bf-data-spotlight-item) {
+    display: grid;
+    grid-row: span 5;
+    grid-template-rows: subgrid;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-header) {
+    block-size: 0;
+    overflow: visible;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
+    grid-row: span 5;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-two-blocks) :where(.bf-data-spotlight-item:nth-of-type(2)),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:nth-of-type(n + 2)),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-of-type(n + 3)) {
+    grid-row: 7 / span 5;
+  }
+}
+
+/* At Vanilla's large threshold the four stat blocks align in one row. Two
+   blocks reserve the leading half for the overhanging title; three reserve a
+   single leading column. The zero block-size matches Vanilla's height: 0
+   title cell without hiding its readable text. */
+@container (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-data-spotlight-items) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-items)::after {
+    content: none;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-two-blocks) :where(.bf-data-spotlight-header) {
+    block-size: 0;
+    grid-column: span 2;
+    overflow: visible;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-item) {
+    grid-row: span 5;
+  }
+}
+
+/* Divided section: Vanilla's ruled 50/50 section is a one-column composition
+   until the relevant container can support the split. The rule is structural;
+   headings, copy, and content items keep their own metric-derived rhythm. */
+:where(.bf-theme) :where(.bf-divided-section) {
+  container-type: inline-size;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-header, .bf-divided-section-content) {
+  min-inline-size: 0;
+}
+
 :where(.bf-theme) :where(.bf-divided-section-list) {
+  --bf-divided-section-rule-to-content: calc(0.5rem - var(--bf-border-width));
+  --bf-stack-space: 1.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Preserve the pre-0.1.5 list markup; canonical composition also carries
+   bf-stack so the container remains the explicit owner of item spacing. */
+:where(.bf-theme) :where(.bf-divided-section-list:not(.bf-stack)) {
   align-content: start;
   display: grid;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
+  gap: var(--bf-stack-space);
+}
+
 :where(.bf-theme) :where(.bf-divided-section-item) {
   align-content: start;
   display: grid;
+  margin: 0;
   min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-:where(.bf-theme) :where(.bf-divided-section-item:not(:last-child)) {
-  padding-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-divided-section-item + .bf-divided-section-item) {
-  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  padding-block-start: calc(var(--bf-section-space-shallow) - var(--bf-border-width));
-}
-
-@container (width >= 38.75rem) {
-  :where(.bf-theme) :where(.bf-divided-section.is-split-medium) :where(.bf-divided-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-divided-section) :where(.bf-divided-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
+  overflow-wrap: anywhere;
+  padding: 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-item + .bf-divided-section-item)::before {
+  background: var(--bf-color-border-low-contrast);
+  block-size: var(--bf-border-width);
+  content: "";
+  inset-block-start: calc((var(--bf-divided-section-rule-to-content) + var(--bf-border-width)) * -1);
+  inset-inline: 0;
+  position: absolute;
+}
+
+@container (width >= 45rem) {
+  :where(.bf-theme) :where(.bf-divided-section) :where(.bf-divided-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 `;
 }

package/dist/css-components/tab-section.d.ts

@@ -7,10 +7,10 @@
  * divided-section and basic-section remain independent BF components.
  *
  * Vanilla → BF mapping:
- * - 1036px large-grid switch → the 64.75rem descendant container query.
- * - p-section / shallow / deep → BF section boundary tokens.
+ * - 45rem readable split switch → the 45rem descendant container query.
+ * - section boundaries → the parent stack selected by the composition.
  * - the intermediate p-section--shallow before a separate tab rail →
- *   padding-block-start on that rail using --bf-section-space-shallow.
+ *   a shallow gap owned by the tab-section body.
  * - 8-column 4/4 and 2/6 spans → intrinsic 1/1 and 1/3 tracks.
  *
  * Heading type and content rhythm remain owned by semantic BF elements. The

package/dist/css-components/tab-section.js

@@ -7,97 +7,105 @@
  * divided-section and basic-section remain independent BF components.
  *
  * Vanilla → BF mapping:
- * - 1036px large-grid switch → the 64.75rem descendant container query.
- * - p-section / shallow / deep → BF section boundary tokens.
+ * - 45rem readable split switch → the 45rem descendant container query.
+ * - section boundaries → the parent stack selected by the composition.
  * - the intermediate p-section--shallow before a separate tab rail →
- *   padding-block-start on that rail using --bf-section-space-shallow.
+ *   a shallow gap owned by the tab-section body.
  * - 8-column 4/4 and 2/6 spans → intrinsic 1/1 and 1/3 tracks.
  *
  * Heading type and content rhythm remain owned by semantic BF elements. The
  * root establishes the container; every query styles descendants only.
  */
 export function tabSectionCss() {
-    return `/* ------------------------------------------------------------------ */
-/* Sites tab section — structural layout over the existing BF tabs API. */
-/* ------------------------------------------------------------------ */
-
-:where(.bf-theme) :where(.bf-tab-section) {
-  container-name: bf-tab-section;
-  container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-tab-section.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-tab-section.is-deep) {
-  margin-block-end: var(--bf-section-space-deep);
-}
-
-:where(.bf-theme) :where(.bf-tab-section-layout) {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-tab-section-rule) {
-  grid-column: 1 / -1;
-}
-
-:where(.bf-theme) :where(.bf-tab-section-header, .bf-tab-section-intro, .bf-tab-section-tabs) {
-  min-inline-size: 0;
-  overflow-wrap: anywhere;
-}
-
-/* Vanilla wraps every tab rail except the unadorned 50/50 special case in a
-   shallow section. This explicit composition padding does not change any
-   child's semantic margins. */
-:where(.bf-theme) :where(.bf-tab-section:not(.is-50-50)) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs),
-:where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-tabs) {
-  padding-block-start: var(--bf-section-space-shallow);
-}
-
-@container bf-tab-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) {
-    column-gap: var(--bf-grid-gap-inline);
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
-    grid-column: 1 / -1;
-  }
-
-  /* With supporting copy or actions, Vanilla's heading row is 50/50 for all
-     three section layouts. The following tab rail retains its own requested
-     full, half or three-quarter span. */
-  :where(.bf-theme) :where(.bf-tab-section-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-header) {
-    grid-column: 1 / 3;
-  }
-
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-intro) {
-    grid-column: 3 / -1;
-  }
-
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
-    grid-column: 1 / -1;
-  }
-
-  /* An unadorned 50/50 section lets auto-placement put the heading and tabs
-     in the same row. If an intro exists, it occupies that right-hand cell and
-     the tabs move to the following row, matching the upstream rendering. */
-  :where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
-    grid-column: 1 / 3;
-  }
-
-  :where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
-    grid-column: 3 / -1;
-  }
-
-  :where(.bf-theme) :where(.bf-tab-section.is-25-75) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
-    grid-column: 2 / -1;
-  }
-}
+    return `/* ------------------------------------------------------------------ */
+/* Sites tab section — structural layout over the existing BF tabs API. */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-tab-section) {
+  container-name: bf-tab-section;
+  container-type: inline-size;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-body) {
+  --bf-stack-space: var(--bf-section-space-shallow);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-copy) {
+  align-content: start;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+  row-gap: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-tab-section-header, .bf-tab-section-intro, .bf-tab-section-tabs) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-tabs) {
+  align-self: start;
+}
+
+@container bf-tab-section (width >= 45rem) {
+  :where(.bf-theme) :where(.bf-tab-section-body) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section-copy) {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  /* With supporting copy or actions, Vanilla's heading row is 50/50 for all
+     three section layouts. The following tab rail retains its own requested
+     full, half or three-quarter span. */
+  :where(.bf-theme) :where(.bf-tab-section-copy:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-header) {
+    grid-column: 1 / 3;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section-copy) > :where(.bf-tab-section-intro) {
+    grid-column: 3 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section-body) > :where(.bf-tab-section-tabs) {
+    grid-column: 1 / -1;
+  }
+
+  /* An unadorned 50/50 section lets auto-placement put the heading and tabs
+     in the same row. If an intro exists, it occupies that right-hand cell and
+     the tabs move to the following row, matching the upstream rendering. */
+  :where(.bf-theme) :where(.bf-tab-section.is-50-50) :where(.bf-tab-section-copy:not(:has(> .bf-tab-section-intro))) {
+    grid-column: 1 / 3;
+    grid-row: 1;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section.is-50-50) :where(.bf-tab-section-copy:not(:has(> .bf-tab-section-intro))) + :where(.bf-tab-section-tabs) {
+    grid-column: 3 / -1;
+    grid-row: 1;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section.is-25-75) :where(.bf-tab-section-body) > :where(.bf-tab-section-tabs) {
+    grid-column: 2 / -1;
+  }
+}
 `;
 }