baseline-foundry 0.1.4 → 0.1.6

package/dist/css-components/sites-rich-lists.js

@@ -8,12 +8,12 @@
  * content paired with one responsive image or video slot.
  *
  * Vanilla → BF spacing mapping:
- * - horizontal item 8px/16px block padding → `space-1`/`space-2`;
- * - 16px grid gutters → `grid-gap-inline`;
- * - shallow/default/deep section exits → BF's existing section tokens;
- * - the 620px/1036px page breakpoints → 38.75rem/64.75rem container
+ * - horizontal item 0.5rem/1rem block padding → `space-1`/`space-2`;
+ * - 1rem grid gutters → `grid-gap-inline`;
+ * - the 38.75rem/64.75rem page breakpoints → 38.75rem/64.75rem container
  *   thresholds for descendants. Text roles keep their own metric-derived
- *   margins and baseline compensation in every tier.
+ *   margins and baseline compensation in every tier. Parent stacks own every
+ *   boundary outside the pattern.
  */
 export function sitesRichListsCss() {
     return `/* ------------------------------------------------------------------ */
@@ -24,19 +24,13 @@ export function sitesRichListsCss() {
   container-name: bf-rich-list;
   container-type: inline-size;
   min-inline-size: 0;
-  padding-block-end: calc(var(--bf-section-space) / 2);
-}
-
-:where(.bf-theme) :where(.bf-rich-list.is-shallow) {
-  padding-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-rich-list.is-deep) {
-  padding-block-end: calc(var(--bf-section-space-deep) / 2);
 }
 
 :where(.bf-theme) :where(.bf-rich-list-layout) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
   display: grid;
+  gap: var(--bf-stack-space);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
@@ -51,14 +45,11 @@ export function sitesRichListsCss() {
   overflow-wrap: anywhere;
 }
 
-@media (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-rich-list:not(.is-shallow)) {
-    padding-block-end: var(--bf-section-space);
-  }
-
-  :where(.bf-theme) :where(.bf-rich-list.is-deep) {
-    padding-block-end: var(--bf-section-space-deep);
-  }
+:where(.bf-theme) :where(.bf-rich-list-support, .bf-rich-list-content) {
+  --bf-stack-space: var(--bf-space-1);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
 }
 
 /* ------------------------------------------------------------------ */
@@ -85,7 +76,7 @@ export function sitesRichListsCss() {
 /* A full-width ratio inside a fluid Sites rail otherwise leaves the next
    heading on a fractional pixel. The visual alone absorbs the trailing
    compensation; semantic children retain their own margins unchanged. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-rich-list-visual > .bf-aspect) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -124,8 +115,12 @@ export function sitesRichListsCss() {
 
 /* Prefixes are logical here even though the shared list predates BF's
    logical-property rule. This keeps ticks, bullets and numbers RTL-safe. */
+:where(.bf-theme) :where(.bf-rich-list-list:has(> .bf-list-item:is(.is-ticked, .is-crossed)), .bf-rich-list-list.is-bulleted, ol.bf-rich-list-list) {
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
 :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:is(.is-ticked, .is-crossed) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
 }
 
 :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:is(.is-ticked, .is-crossed)::before {
@@ -135,7 +130,7 @@ export function sitesRichListsCss() {
 }
 
 :where(.bf-theme) :where(.bf-rich-list-list.is-bulleted) > :where(.bf-list-item) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
 }
 
 :where(.bf-theme) :where(.bf-rich-list-list.is-bulleted) > :where(.bf-list-item)::before {
@@ -154,7 +149,7 @@ export function sitesRichListsCss() {
 
 :where(.bf-theme) :where(ol.bf-rich-list-list) > :where(.bf-list-item) {
   counter-increment: bf-rich-horizontal-counter;
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
 }
 
 :where(.bf-theme) :where(ol.bf-rich-list-list) > :where(.bf-list-item)::before {
@@ -201,7 +196,7 @@ export function sitesRichListsCss() {
   }
 }
 
-@container bf-rich-list (width >= 64.75rem) {
+@container bf-rich-list (width >= 45rem) {
   :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -215,7 +210,7 @@ export function sitesRichListsCss() {
     grid-column: 2;
   }
 
-  :where(.bf-theme) :where(.bf-rich-list.is-horizontal) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-cta) {
+  :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-cta) {
     grid-column: 2;
   }
 }
@@ -230,7 +225,6 @@ export function sitesRichListsCss() {
 
 :where(.bf-theme) :where(.bf-rich-list.is-vertical) :where(.bf-rich-list-media) {
   container-type: inline-size;
-  padding-block-end: var(--bf-section-space-shallow);
 }
 
 :where(.bf-theme) :where(.bf-rich-list.is-vertical.is-flipped) :where(.bf-rich-list-media) {
@@ -249,7 +243,7 @@ export function sitesRichListsCss() {
 /* The media object deliberately stretches across fluid 1/2 and 2/3 ratios.
    Snap that resulting block, rather than resetting content spacing, so each
    tier's baseline survives both portrait and landscape allocations. */
-@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+@supports (block-size: calc-size(auto, round(up, size, 0.0625rem))) {
   :where(.bf-theme) :where(.bf-rich-list-media-frame) {
     block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
   }
@@ -292,11 +286,7 @@ export function sitesRichListsCss() {
 /* Auto height has no shallow media wrapper in Vanilla. At narrow widths it
    remains a normal 3:2 frame; at the wide split it stretches with the content
    rail, clamped between the equivalent 16:9 and 2:3 heights. */
-:where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) {
-  padding-block-end: 0;
-}
-
-@container bf-rich-list (width >= 64.75rem) {
+@container bf-rich-list (width >= 45rem) {
   :where(.bf-theme) :where(.bf-rich-list.is-vertical) > :where(.bf-rich-list-layout) {
     align-items: stretch;
     column-gap: var(--bf-grid-gap-inline);
@@ -345,7 +335,7 @@ export function sitesRichListsCss() {
     min-block-size: 56.25cqi;
   }
 
-  @supports (min-block-size: round(up, 1px, 1px)) {
+  @supports (min-block-size: round(up, 0.0625rem, 0.0625rem)) {
     :where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) :where(.bf-rich-list-media-frame) {
       max-block-size: round(down, 150cqi, var(--bf-baseline));
       min-block-size: round(up, 56.25cqi, var(--bf-baseline));

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`.
@@ -15,16 +15,15 @@ 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. */
+/* 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. Item padding remains item-owned, so compositions never erase the
-   shallow inter-row rhythm when the pattern narrows. */
+   thickness. The items container owns every inter-row gap. */
 :where(.bf-theme) :where(.bf-data-spotlight) {
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
@@ -37,15 +36,13 @@ export function staticContentPortsCss() {
   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;
-}
-
-:where(.bf-theme) :where(.bf-data-spotlight-item:not(:last-child)) {
-  padding-block-end: var(--bf-section-space-shallow);
+  padding: 0;
 }
 
 :where(.bf-theme) :where(.bf-data-spotlight-stat) {
@@ -98,6 +95,14 @@ export function staticContentPortsCss() {
 @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) {
@@ -106,10 +111,6 @@ export function staticContentPortsCss() {
     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;
@@ -117,7 +118,13 @@ export function staticContentPortsCss() {
 
   :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);
+    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;
   }
 }
 
@@ -130,15 +137,18 @@ export function staticContentPortsCss() {
     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.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;
+  :where(.bf-theme) :where(.bf-data-spotlight-item) {
+    grid-row: span 5;
   }
 }
 
@@ -147,7 +157,7 @@ export function staticContentPortsCss() {
    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);
+  margin: 0;
   min-inline-size: 0;
 }
 
@@ -166,37 +176,41 @@ export function staticContentPortsCss() {
 }
 
 :where(.bf-theme) :where(.bf-divided-section-list) {
-  align-content: start;
-  display: grid;
+  --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;
+  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;
+  padding: 0;
+  position: relative;
 }
 
-: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));
+: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 >= 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) {
+@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,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
@@ -24,26 +24,35 @@ export function tabSectionCss() {
 :where(.bf-theme) :where(.bf-tab-section) {
   container-name: bf-tab-section;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   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-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-tab-section.is-deep) {
-  margin-block-end: var(--bf-section-space-deep);
+:where(.bf-theme) :where(.bf-tab-section-rule) {
+  grid-column: 1 / -1;
 }
 
-:where(.bf-theme) :where(.bf-tab-section-layout) {
+: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-rule) {
-  grid-column: 1 / -1;
+: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) {
@@ -51,51 +60,50 @@ export function tabSectionCss() {
   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);
+:where(.bf-theme) :where(.bf-tab-section-tabs) {
+  align-self: start;
 }
 
-@container bf-tab-section (width >= 64.75rem) {
-  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) {
+@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) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
+  :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-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-header) {
+  :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) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-intro) {
+  :where(.bf-theme) :where(.bf-tab-section-copy) > :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) {
+  :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-layout) > :where(.bf-tab-section-header) {
+  :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-layout) > :where(.bf-tab-section-tabs) {
+  :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-layout) > :where(.bf-tab-section-tabs) {
+  :where(.bf-theme) :where(.bf-tab-section.is-25-75) :where(.bf-tab-section-body) > :where(.bf-tab-section-tabs) {
     grid-column: 2 / -1;
   }
 }

package/dist/css-components/table.js

@@ -37,15 +37,16 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
   line-height: var(--bf-table-row-line-height);
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-table-row-padding);
-  padding-inline: calc(var(--bf-baseline) * 0.75);
+  padding-block-end: var(--bf-table-row-padding-block-end);
+  padding-block-start: var(--bf-table-row-padding-block-start);
+  padding-inline: var(--bf-component-inline-inset-field);
   text-align: left;
   text-overflow: ellipsis;
   vertical-align: top;
 }
 
 :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) {
-  padding-inline-start: calc((var(--bf-baseline) * 0.75) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: calc(var(--bf-component-inline-inset-field) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
 }
 
 :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) > :where(.bf-icon:first-child) {
@@ -68,10 +69,6 @@ ${bodyMediumTypeStyles}  color: var(--bf-color-text-default);
   border-block-end-color: var(--bf-color-border-low-contrast);
 }
 
-:where(.bf-theme) :where(tbody tr:has(.bf-status-label) > td) {
-  padding-block: calc((var(--bf-baseline) - var(--bf-table-row-border-size)) / 2);
-}
-
 :where(.bf-theme) :where(tbody tr:hover td) {
   background: color-mix(in srgb, var(--bf-color-background-hover) 68%, transparent);
 }

package/dist/css-components/tabs-choice-breadcrumbs.js

@@ -2,18 +2,16 @@ export function tabsChoiceBreadcrumbsCss(options) {
     const { bodyCaseTypeStyles, bodyStrongTypeStyles, bodyTypeStyles, buttonMarginBottom, buttonPadding, } = options;
     return `:where(.bf-theme) :where(.bf-tabs) {
   display: grid;
+  gap: var(--bf-space-2);
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-tabs-list) {
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
+  box-shadow: inset 0 calc(var(--bf-border-width) * -1) 0 var(--bf-color-border-default);
   display: flex;
   gap: 0;
   list-style: none;
-  /* Tabs keep their occupied block on the grid at the list boundary rather
-     than leaving each link's control compensation between its active rule and
-     the list rule. */
-  margin: 0 0 calc((var(--bf-baseline) * 2) - var(--bf-border-width));
+  margin: 0;
   min-inline-size: 0;
   overflow-x: auto;
   padding: 0;
@@ -30,16 +28,16 @@ export function tabsChoiceBreadcrumbsCss(options) {
 ${bodyTypeStyles}  align-items: center;
   background: transparent;
   border: 0;
-  border-bottom: var(--bf-bar-thickness) solid transparent;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-muted);
   cursor: pointer;
-  display: inline-flex;
+  display: flex;
   gap: calc(var(--bf-baseline) * 0.5);
   justify-content: center;
   margin-bottom: 0;
-  padding-block-end: calc(var(--bf-body-nudge-end) + var(--bf-baseline) - var(--bf-bar-thickness));
-  padding-block-start: var(--bf-body-nudge-start);
-  padding-inline: var(--bf-control-inline-padding-action);
+  padding-block-end: calc(var(--bf-single-line-row-padding-block) + var(--bf-single-line-row-margin-block-end));
+  padding-block-start: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
 
@@ -48,18 +46,22 @@ ${bodyTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
 }
 
+:where(.bf-theme) :where(a.bf-tabs-link:hover) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-tabs-link:focus:not(:focus-visible)) {
   outline: none;
 }
 
 :where(.bf-theme) :where(.bf-tabs-link:focus-visible) {
   color: var(--bf-color-text-default);
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-tabs-link.is-active, .bf-tabs-link[aria-selected='true']) {
-  border-bottom-color: var(--bf-color-text-default);
+  box-shadow: inset 0 calc(var(--bf-bar-thickness) * -1) 0 var(--bf-color-text-default);
   color: var(--bf-color-text-default);
 }
 
@@ -111,7 +113,7 @@ ${bodyTypeStyles}  align-items: center;
   grid-template-columns: auto minmax(0, 1fr) auto;
   margin: 0 0 ${buttonMarginBottom};
   min-inline-size: 0;
-${buttonPadding}  padding-inline: var(--bf-control-inline-padding-field);
+${buttonPadding}  padding-inline: var(--bf-component-inline-inset-field);
 }
 
 :where(.bf-theme) :where(.bf-choice-row:hover) {
@@ -119,8 +121,8 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-field);
 }
 
 :where(.bf-theme) :where(.bf-choice-row:has(:focus-visible)) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-choice-row input[type='radio']) {
@@ -157,7 +159,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
   gap: var(--bf-field-gap);
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-inline-options-heading) {
@@ -224,7 +226,7 @@ ${bodyTypeStyles}  align-items: center;
   margin-bottom: ${buttonMarginBottom};
   max-inline-size: 100%;
   overflow: hidden;
-${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordered);
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -250,8 +252,8 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
 }
 
 :where(.bf-theme) :where(.bf-segmented-control-button:focus-visible, .bf-tab-buttons-button:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: -0.125rem;
   z-index: 2;
 }
 
@@ -280,8 +282,10 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
 
 :where(.bf-theme) :where(.bf-breadcrumbs-item) {
 ${bodyCaseTypeStyles}  color: var(--bf-color-text-muted);
-  margin: 0;
+  margin: 0 0 var(--bf-body-margin-bottom);
   min-inline-size: 0;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
 }
 
 :where(.bf-theme) :where(.bf-breadcrumbs-item) + :where(.bf-breadcrumbs-item)::before {