baseline-foundry 0.1.4 → 0.1.6

package/dist/css-components/legacy-navigation.js

@@ -1,11 +1,54 @@
 export function legacyNavigationCss(options) {
-    const { bodyMediumTypeStyles, bodySemiboldTypeStyles, bodyTypeStyles, buttonMarginBottom, buttonPadding, compactButtonPadding } = options;
+    const { bodyMediumTypeStyles, bodySemiboldTypeStyles, bodyTypeStyles, buttonMarginBottom, buttonPadding } = options;
     return `:where(.bf-theme) :where(.bf-side-navigation, .bf-side-navigation.is-icons, .bf-side-navigation.is-accordion, .bf-side-navigation.is-raw-html) {
+  /* Plain navigation commands use the action rail. Icon-led rows move only their mark canvas,
+     so their copy reaches the shared continuation rail without a fourth
+     component inset. Navigation depth is added separately below. */
+  /* Navigation copy uses one continuation rail whether a row has a leading
+     disclosure/icon slot or not. The mark canvas is derived backwards from
+     that rail, so iconless rows never introduce a fourth text start. */
+  --bf-side-navigation-content-inset: var(--bf-component-inline-inset-continuation);
+  --bf-side-navigation-disclosure-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-disclosure-gap)));
+  --bf-side-navigation-depth-step: var(--bf-space-2);
+  --bf-side-navigation-group-gap: 1.5rem;
+  --bf-side-navigation-heading-list-gap: 0.5rem;
   color: var(--bf-color-text-inactive);
   display: block;
   inline-size: 100%;
 }
 
+:where(.bf-theme) :where(.bf-side-navigation-groups) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-side-navigation-group-gap);
+}
+
+:where(.bf-theme) :where(.bf-side-navigation-group) {
+  display: grid;
+  gap: var(--bf-side-navigation-heading-list-gap);
+  min-inline-size: 0;
+}
+
+/* Keep the divider and heading as one tight header. The group owns only the
+   larger transition from that header to its list, so the compensated rule
+   cannot change the heading/list phase. */
+:where(.bf-theme) :where(.bf-side-navigation-group-header) {
+  display: grid;
+  gap: 0rem;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-side-navigation-group-header) > hr {
+  inline-size: auto;
+  margin-inline: var(--bf-side-navigation-content-inset) 0;
+}
+
+/* A single-line group heading occupies four baselines. min-block-size keeps
+   that phase exact while still allowing a long heading to wrap and grow. */
+:where(.bf-theme) :where(.bf-side-navigation-group-header) > :where(.bf-side-navigation-heading) {
+  min-block-size: calc((var(--bf-baseline) * 4) - var(--bf-body-margin-bottom));
+}
+
 :where(.bf-theme) :where(.bf-side-navigation-drawer) {
   background: var(--bf-color-background-default);
   bottom: 0;
@@ -22,7 +65,7 @@ export function legacyNavigationCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-side-navigation, .bf-side-navigation.is-icons, .bf-side-navigation.is-accordion, .bf-side-navigation.is-raw-html):where(.is-drawer-expanded) :where(.bf-side-navigation-drawer) {
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   transform: translateX(0);
 }
 
@@ -52,7 +95,7 @@ export function legacyNavigationCss(options) {
   border-bottom: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
   margin-bottom: calc(var(--bf-baseline) * 2);
   padding-bottom: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   padding-top: var(--bf-panel-padding-block);
   position: sticky;
   top: 0;
@@ -71,7 +114,7 @@ ${bodyTypeStyles}  align-items: center;
   gap: calc(var(--bf-baseline) * 0.5);
   justify-content: center;
   margin: 0 0 ${buttonMarginBottom};
-${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordered);
   text-decoration: none;
 }
 
@@ -106,52 +149,57 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-toggle: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-side-navigation-heading, .bf-side-navigation-heading.is-linked) {
 ${bodySemiboldTypeStyles}  display: block;
   margin: 0 0 var(--bf-body-margin-bottom);
   padding-block: var(--bf-body-nudge-start) 0;
+  padding-inline: var(--bf-side-navigation-content-inset);
 }
 
-:where(.bf-theme) :where(.bf-side-navigation-list) {
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  list-style: none;
-  margin: 0 0 calc(var(--bf-baseline) * 2);
-  padding: 0 0 calc((var(--bf-baseline) * 2) - var(--bf-border-width));
+:where(.bf-theme) :where(.bf-side-navigation-heading.is-linked) {
+  padding-inline: 0;
 }
 
-:where(.bf-theme) :where(.bf-side-navigation-list:last-of-type) {
-  border-bottom: 0;
-  margin-bottom: 0;
-  padding-bottom: 0;
+:where(.bf-theme) :where(.bf-side-navigation-list) {
+  display: grid;
+  grid-auto-rows: var(--bf-single-line-row-block-size);
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title) {
+  display: grid;
   margin: 0;
   position: relative;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
 ${bodyTypeStyles}  align-items: center;
+  align-self: start;
   background: transparent;
   border: 0;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-inactive);
   display: flex;
   gap: calc(var(--bf-baseline) * 0.5);
   inline-size: 100%;
   justify-content: flex-start;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-${compactButtonPadding}  padding-inline: var(--bf-panel-padding-inline);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-side-navigation-content-inset);
+  --bf-side-navigation-row-inset: var(--bf-side-navigation-content-inset);
   position: relative;
   text-align: left;
   text-decoration: none;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-accordion-button) {
+  --bf-side-navigation-row-inset: var(--bf-side-navigation-disclosure-inset);
   gap: var(--bf-disclosure-gap);
 }
 
@@ -160,22 +208,21 @@ ${compactButtonPadding}  padding-inline: var(--bf-panel-padding-inline);
   font-weight: 600;
 }
 
-:where(.bf-theme) :where(.bf-side-navigation-heading, .bf-side-navigation-heading.is-linked),
 :where(.bf-theme) :where(.bf-side-navigation-list) > :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title) > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: var(--bf-panel-padding-inline);
+  padding-inline-start: var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 2));
+  padding-inline-start: calc(var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset)) + var(--bf-side-navigation-depth-step));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 4));
+  padding-inline-start: calc(var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset)) + (var(--bf-side-navigation-depth-step) * 2));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
@@ -183,7 +230,7 @@ ${compactButtonPadding}  padding-inline: var(--bf-panel-padding-inline);
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title)
   > :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 6));
+  padding-inline-start: calc(var(--bf-side-navigation-row-inset, var(--bf-side-navigation-content-inset)) + (var(--bf-side-navigation-depth-step) * 3));
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link:hover, .bf-side-navigation-accordion-button:hover) {
@@ -192,13 +239,17 @@ ${compactButtonPadding}  padding-inline: var(--bf-panel-padding-inline);
   text-decoration: none;
 }
 
+:where(.bf-theme) :where(a.bf-side-navigation-link:is(:hover, :active)) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-side-navigation-link:focus:not(:focus-visible), .bf-side-navigation-accordion-button:focus:not(:focus-visible)) {
   outline: none;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link:focus-visible, .bf-side-navigation-accordion-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;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true']) {
@@ -359,13 +410,17 @@ ${bodyTypeStyles}  align-items: center;
   text-decoration: none;
 }
 
+:where(.bf-theme) :where(a.bf-top-navigation-link:is(:hover, :active)) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-top-navigation-link:focus:not(:focus-visible), .bf-top-navigation-menu-toggle:focus:not(:focus-visible), .bf-top-navigation-search-toggle:focus:not(:focus-visible)) {
   outline: none;
 }
 
 :where(.bf-theme) :where(.bf-top-navigation-link:focus-visible, .bf-top-navigation-menu-toggle:focus-visible, .bf-top-navigation-search-toggle: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-top-navigation-item.is-selected) > :where(.bf-top-navigation-link),
@@ -484,8 +539,8 @@ ${bodyTypeStyles}  align-items: center;
 }
 
 :where(.bf-theme) :where(.bf-top-navigation-dropdown-item: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-top-navigation-search-label) {
@@ -656,11 +711,12 @@ ${bodyTypeStyles}  align-items: center;
   content: "";
   flex: 0 0 var(--bf-disclosure-icon-inline-size);
   inline-size: var(--bf-disclosure-icon-inline-size);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block));
   transition: transform 120ms ease;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-accordion-button[aria-expanded='false'], .bf-side-navigation-expand[aria-expanded='false'])::before {
-  transform: rotate(-90deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-expand) {
@@ -720,14 +776,34 @@ ${bodyTypeStyles}  background: transparent;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-link, .bf-side-navigation-text, .bf-side-navigation-accordion-button) {
+  --bf-side-navigation-row-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - 1rem - var(--bf-side-navigation-icon-gap)));
   align-items: baseline;
   column-gap: var(--bf-side-navigation-icon-gap);
 }
 
+/* Icon navigation keeps one stable label edge. Rows may omit a decorative
+   icon without collapsing the shared icon track and pulling their copy left. */
+:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-link, .bf-side-navigation-text):not(:has(> .bf-side-navigation-icon))::before {
+  content: "";
+  flex: 0 0 1rem;
+  inline-size: 1rem;
+}
+
+/* A collapsed icon rail cannot communicate an iconless destination. Remove
+   the alignment spacer with the hidden label so it cannot become a blank
+   visual affordance in that state. */
+:where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-link, .bf-side-navigation-text):not(:has(> .bf-side-navigation-icon))::before {
+  content: none;
+}
+
 /* Icon-navigation headings share the label edge, not the icon edge. This
    keeps section names aligned with both the menu copy and a tagged wordmark. */
-:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-heading, .bf-side-navigation-heading.is-linked) {
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + 1rem + var(--bf-side-navigation-icon-gap));
+:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-heading:not(.is-linked)) {
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
+}
+
+:where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-heading.is-linked) > :where(.bf-side-navigation-link) {
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-icon) > svg {

package/dist/css-components/linked-logo-site-layout.d.ts

@@ -8,10 +8,10 @@
  * link/mark contract; the additional card slots are semantic link content,
  * not the deprecated `logo-block` API.
  *
- * Vanilla → BF mapping (Vanilla's 8px spacing unit):
+ * Vanilla → BF mapping (Vanilla's 0.5rem spacing unit):
  * - linked-logo image container: retained 16:9 aspect relationship;
- * - muted rule to copy: 8px → `--bf-space-1`, compensating its border;
- * - grid gutter: 24px / 32px breakpoint values → existing
+ * - muted rule to copy: 0.5rem → `--bf-space-1`, compensating its border;
+ * - grid gutter: 1.5rem / 2rem breakpoint values → existing
  *   `--bf-grid-gap-inline` (BF's tier-aware grid geometry);
  * - macro section boundaries: existing shallow/default/deep section tokens.
  *

package/dist/css-components/linked-logo-site-layout.js

@@ -8,10 +8,10 @@
  * link/mark contract; the additional card slots are semantic link content,
  * not the deprecated `logo-block` API.
  *
- * Vanilla → BF mapping (Vanilla's 8px spacing unit):
+ * Vanilla → BF mapping (Vanilla's 0.5rem spacing unit):
  * - linked-logo image container: retained 16:9 aspect relationship;
- * - muted rule to copy: 8px → `--bf-space-1`, compensating its border;
- * - grid gutter: 24px / 32px breakpoint values → existing
+ * - muted rule to copy: 0.5rem → `--bf-space-1`, compensating its border;
+ * - grid gutter: 1.5rem / 2rem breakpoint values → existing
  *   `--bf-grid-gap-inline` (BF's tier-aware grid geometry);
  * - macro section boundaries: existing shallow/default/deep section tokens.
  *
@@ -26,20 +26,13 @@ export function linkedLogoSiteLayoutCss() {
 :where(.bf-theme) :where(.bf-linked-logo-section) {
   container-name: bf-linked-logo-section;
   container-type: inline-size;
-  margin-block-end: var(--bf-section-space);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-linked-logo-section.is-shallow) {
-  margin-block-end: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-linked-logo-section.is-deep) {
-  margin-block-end: var(--bf-section-space-deep);
-}
-
 :where(.bf-theme) :where(.bf-linked-logo-section-layout) {
   display: grid;
+  gap: var(--bf-section-space-shallow);
   grid-template-columns: minmax(0, 1fr);
   min-inline-size: 0;
 }
@@ -72,7 +65,7 @@ export function linkedLogoSiteLayoutCss() {
   max-inline-size: none;
 }
 
-:where(.bf-theme) :where(.bf-linked-logo-section-card) {
+:where(.bf-theme) :where(a.bf-linked-logo-section-card) {
   align-content: start;
   align-items: stretch;
   color: inherit;
@@ -84,7 +77,7 @@ export function linkedLogoSiteLayoutCss() {
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
+:where(.bf-theme) :where(a.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
   text-decoration: underline;
 }
 
@@ -103,7 +96,7 @@ export function linkedLogoSiteLayoutCss() {
    of baselines tall. Keep the visual ratio exact and put only the residual
    rhythm compensation after the mark; the copy keeps its own semantic
    spacing and the occupied card still lands on the tier grid. */
-@supports (margin-block-end: round(up, 1px, 1px)) {
+@supports (margin-block-end: round(up, 0.0625rem, 0.0625rem)) {
   :where(.bf-theme) :where(.bf-linked-logo-section-mark) {
     margin-block-end: calc(
       round(up, calc(100cqi * 9 / 16), var(--bf-baseline))
@@ -135,21 +128,25 @@ export function linkedLogoSiteLayoutCss() {
   overflow-wrap: anywhere;
 }
 
-/* Vanilla's linked-logo block moves from one to two cards per row at the
-   4-column medium grid.  The section itself does not split until the 8-column
-   large grid: its macro uses large-only grid columns for the 50/50 and 25/75
-   rails.  The root establishes the query context; only descendants change. */
+/* The linked-logo block moves from one to two cards per row at the 4-column
+   medium grid. The balanced 50/50 section split uses the shared readable
+   threshold; the 25/75 content rail and four-card density retain their
+   separately measured wide threshold. The root establishes the query context;
+   only descendants change. */
 @container bf-linked-logo-section (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@container bf-linked-logo-section (width >= 64.75rem) {
+@container bf-linked-logo-section (width >= 45rem) {
   :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+@container bf-linked-logo-section (width >= 64.75rem) {
 
   :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-layout) {
     column-gap: var(--bf-grid-gap-inline);

package/dist/css-components/list-tree.js

@@ -3,7 +3,7 @@ export function listTreeCss(options) {
     return `:where(.bf-theme) :where(.bf-list-tree) {
   list-style: none;
   margin: 0;
-  padding-left: calc(var(--bf-baseline) * 0.5);
+  padding-left: 0;
 }
 
 :where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree) {
@@ -17,22 +17,24 @@ export function listTreeCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-list-tree-item) {
+  display: grid;
   margin: 0;
-  padding-left: calc(var(--bf-baseline) * 1.5);
+  padding-left: 0;
   position: relative;
 }
 
-:where(.bf-theme) :where(.bf-list-tree-link) {
+:where(.bf-theme) :where(a.bf-list-tree-link) {
 ${bodyTypeStyles}  color: var(--bf-color-text-default);
+  border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-continuation) var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-list-tree-link):hover {
+:where(.bf-theme) :where(a.bf-list-tree-link:hover) {
   color: var(--bf-color-link-default);
   text-decoration: underline;
 }
@@ -46,22 +48,22 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-list-tree-link):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-list-tree-toggle) {
 ${bodyTypeStyles}  align-items: center;
   background: transparent;
   border: 0;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-default);
   cursor: pointer;
-  display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
-  margin: 0 0 0 calc(var(--bf-baseline) * -1.5);
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: calc(var(--bf-baseline) * 0.25) calc(var(--bf-baseline) * 0.5);
+  display: flex;
+  gap: var(--bf-disclosure-gap);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: 0 calc(var(--bf-baseline) * 0.5);
   text-align: left;
   width: 100%;
 }
@@ -75,8 +77,8 @@ ${bodyTypeStyles}  align-items: center;
 }
 
 :where(.bf-theme) :where(.bf-list-tree-toggle):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-list-tree-toggle)::before {
@@ -88,11 +90,11 @@ ${bodyTypeStyles}  align-items: center;
   content: "";
   flex: 0 0 1rem;
   inline-size: 1rem;
-  transform: rotate(-90deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
 }
 
 :where(.bf-theme) :where(.bf-list-tree-toggle[aria-expanded='true'])::before {
-  transform: rotate(0deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(0deg);
 }
 `;
 }

package/dist/css-components/list.js

@@ -7,6 +7,10 @@ export function listCss({ bodyTypeStyles }) {
   padding: 0;
 }
 
+:where(.bf-theme) :where(.bf-list:has(> .bf-list-item:is(.is-ticked, .is-crossed)), ol.bf-list.is-divided) {
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
 :where(.bf-theme) :where(.bf-list-item) {
 ${bodyTypeStyles}  color: var(--bf-color-text-default);
   margin: 0 0 var(--bf-body-margin-bottom);
@@ -17,8 +21,10 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item) {
-  box-shadow: inset 0 1px 0 var(--bf-color-border-low-contrast);
-  padding-block-end: var(--bf-baseline);
+  border-block: var(--bf-border-width) solid transparent;
+  box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-low-contrast);
+  margin-block-end: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item:first-child) {
@@ -26,7 +32,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed) {
-  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
 
@@ -51,10 +57,6 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
   background-image: var(--bf-ui-icon-error-grey);
 }
 
-:where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed)::before {
-  top: calc(var(--bf-leading-icon-offset) + (var(--bf-baseline) * 0.5));
-}
-
 :where(.bf-theme) :where(ol.bf-list.is-divided) {
   counter-reset: bf-list-counter;
 }

package/dist/css-components/logo-media.d.ts

@@ -1,14 +1,14 @@
 /**
  * Vanilla parity ports: logo section and media object.
  *
- * Vanilla → BF rhythm mapping (at Vanilla's 8px unit):
- * - Logo mark heights 72px / 104px → `space-8 + space-1` / `space-12 +
+ * Vanilla → BF rhythm mapping (at Vanilla's 0.5rem unit):
+ * - Logo mark heights 4.5rem / 6.5rem → `space-8 + space-1` / `space-12 +
  *   space-1` (nine / thirteen BF baselines).
- * - Logo 32px inline gap → `space-4`; Vanilla's 8px / 16px negative row pull
+ * - Logo 2rem inline gap → `space-4`; Vanilla's 0.5rem / 1rem negative row pull
  *   and matching wrapper compensation → `space-1` / `space-2`.
- * - Media thumbnails 48px / 96px → `space-6` / `space-12`; their 16px
- *   gap → `space-2`; trailing 24px → `section-space-shallow`; metadata top
- *   8px → `space-1`.
+ * - Media thumbnails 3rem / 6rem → `space-6` / `space-12`; their 1rem
+ *   gap → `space-2`; trailing 1.5rem → `section-space-shallow`; metadata top
+ *   0.5rem → `space-1`.
  *
  * Those are relative values, rather than fixed pixels, so the same semantics
  * retain the deliberately denser documentation, app, and OS tiers.