baseline-foundry 0.1.6 → 0.2.0

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

@@ -68,7 +68,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
   overflow: hidden;
   overflow-wrap: anywhere;
   padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
-  padding-inline: var(--bf-space-2) 0;
+  padding-inline: var(--bf-component-inline-inset-action) 0;
   position: relative;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -111,21 +111,22 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-list .bf-in-page-navigation-list .bf-in-page-navigation-link) {
-  padding-inline-start: var(--bf-space-4);
+  padding-inline-start: calc(var(--bf-component-inline-inset-action) * 2);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle) {
 ${bodyCaseTypeStyles}  align-items: center;
   background: var(--bf-color-background-default);
-  border: 0;
+  border: 0 solid transparent;
+  border-block-width: var(--bf-border-width);
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: none;
   justify-content: center;
   margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: var(--bf-space-1);
+  padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+  padding-block-start: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle:hover) {
@@ -143,6 +144,7 @@ ${bodyCaseTypeStyles}  align-items: center;
 
 :where(.bf-theme) :where(.bf-in-page-navigation-toggle > .bf-icon) {
   --bf-icon-size: var(--bf-icon-size-default);
+  margin-block-start: 0;
 }
 
 @container bf-in-page-navigation (width < 40rem) {
@@ -186,10 +188,12 @@ ${bodyCaseTypeStyles}  align-items: center;
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation-link) {
+    border-block: var(--bf-border-width) solid transparent;
     display: block;
     overflow: hidden;
-    padding-block: calc(var(--bf-control-block-padding-compact) - var(--bf-border-width));
-    padding-inline: var(--bf-space-1);
+    padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+    padding-block-start: var(--bf-interface-row-padding-block);
+    padding-inline: var(--bf-leading-mark-gap);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -224,7 +228,7 @@ ${bodyCaseTypeStyles}  align-items: center;
     grid-row: 1;
     margin: 0;
     padding-block: calc(var(--bf-h6-nudge-start) + var(--bf-space-1)) calc(var(--bf-h6-nudge-end) + var(--bf-space-1));
-    padding-inline: var(--bf-space-2);
+    padding-inline: var(--bf-component-inline-inset-action);
   }
 
   :where(.bf-theme) :where(.bf-in-page-navigation.is-expanded > .bf-in-page-navigation-nav > .bf-in-page-navigation-list, .bf-in-page-navigation:has(.bf-in-page-navigation-toggle[aria-expanded='true']) > .bf-in-page-navigation-nav > .bf-in-page-navigation-list) {
@@ -250,7 +254,7 @@ ${bodyCaseTypeStyles}  align-items: center;
     display: -webkit-box;
     overflow-wrap: anywhere;
     padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
-    padding-inline: var(--bf-space-2) 0;
+    padding-inline: var(--bf-component-inline-inset-action) 0;
     white-space: normal;
   }
 
@@ -275,7 +279,7 @@ ${bodyCaseTypeStyles}  align-items: center;
  * controller contracts while matching Vanilla's reduced chrome. */
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) {
   background: var(--bf-color-background-alt);
-  --bf-top-navigation-link-padding-block: var(--bf-control-block-padding-compact);
+  --bf-top-navigation-reduced-row-block-size: var(--bf-interface-row-occupied-block-size);
 }
 
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-logo-tag) {
@@ -288,10 +292,13 @@ ${bodyCaseTypeStyles}  align-items: center;
 
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-logo) > :where(.bf-top-navigation-link),
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-link, .bf-top-navigation-menu-toggle, .bf-top-navigation-search-toggle) {
+  border: 0 solid transparent;
+  border-block-width: var(--bf-border-width);
   color: var(--bf-color-text-muted);
   font-size: var(--bf-body-font-size);
   line-height: var(--bf-body-line-height);
-  padding-block: var(--bf-top-navigation-link-padding-block);
+  padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+  padding-block-start: var(--bf-interface-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-logo.is-canonical-tagged) > :where(.bf-top-navigation-link) {
@@ -316,7 +323,7 @@ ${bodyCaseTypeStyles}  align-items: center;
 
 @media (min-width: 64.75rem) {
   :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-dropdown) {
-    top: calc((var(--bf-top-navigation-link-padding-block) * 2) + var(--bf-body-line-height));
+    top: var(--bf-top-navigation-reduced-row-block-size);
   }
 
   :where(.bf-theme) :where(.bf-top-navigation.is-reduced) :where(.bf-top-navigation-search) {
@@ -325,7 +332,7 @@ ${bodyCaseTypeStyles}  align-items: center;
     box-shadow: 0 calc(var(--bf-baseline) * 0.5) calc(var(--bf-baseline) * 2) rgba(0, 0, 0, 0.16);
     inset-block-start: 100%;
     inset-inline-end: 0;
-    padding: var(--bf-control-block-padding-compact) var(--bf-top-navigation-link-padding-inline);
+    padding: var(--bf-panel-padding-block) var(--bf-top-navigation-link-padding-inline);
     position: absolute;
   }
 
@@ -373,6 +380,7 @@ ${bodyCaseTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
   margin: 0;
   padding-block-end: 0;
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-list) {
@@ -399,9 +407,11 @@ ${bodyCaseTypeStyles}  align-items: center;
 ${bodyTypeStyles}  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-link-default);
   display: block;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   overflow-wrap: anywhere;
-  padding-block: var(--bf-single-line-row-padding-block);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline-end: var(--bf-component-inline-inset-action);
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
   text-decoration: none;
 }
 
@@ -425,12 +435,12 @@ ${bodyTypeStyles}  border-block: var(--bf-border-width) solid transparent;
 }
 
 :where(.bf-theme) :where(.bf-table-of-contents-list .bf-table-of-contents-list) {
-  margin-inline-start: var(--bf-space-2);
+  margin-inline-start: var(--bf-component-inline-inset-action);
 }
 
 @container bf-table-of-contents (width < 20rem) {
   :where(.bf-theme) :where(.bf-table-of-contents-list .bf-table-of-contents-list) {
-    margin-inline-start: var(--bf-space-1);
+    margin-inline-start: var(--bf-leading-mark-gap);
   }
 }
 `;

package/dist/css-components/editorial-content.js

@@ -15,7 +15,7 @@ export function editorialContentCss(options) {
   margin: 0;
   max-inline-size: 100%;
   padding-block: var(--bf-space-2);
-  padding-inline: var(--bf-space-2);
+  padding-inline: var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-notice.is-information) {

package/dist/css-components/icon.js

@@ -1,5 +1,22 @@
 export function iconCss() {
-    return `:where(.bf-theme) :where(.bf-icon) {
+    return `:where(.bf-theme) {
+  --bf-icon-size-default: 1rem;
+  --bf-icon-size-medium: 2.5rem;
+  --bf-icon-size-large: 4rem;
+  --bf-icon-size-x-large: 4.5rem;
+  --bf-icon-size-xx-large: 6rem;
+  /* Vanilla's inline-icon metric aligns icon paint to the cap-height centre.
+     Half the scalable border supplies the optical lift. */
+  --bf-inline-icon-baseline-shift: calc((var(--bf-border-width) * 0.5) + ((1cap - var(--bf-icon-size-default)) / 2));
+  /* The default icon can meet the compact body line at a raster edge. Trim its
+     layout margin by one scalable border without moving its cap-centred paint. */
+  --bf-inline-icon-line-box-trim: calc(var(--bf-border-width) * -1);
+  --bf-leading-icon-size: var(--bf-leading-mark-size);
+  --bf-leading-icon-gap: var(--bf-leading-mark-gap);
+  --bf-leading-icon-offset: var(--bf-interface-row-visual-offset);
+}
+
+:where(.bf-theme) :where(.bf-icon) {
   --bf-icon-image: none;
   --bf-icon-size: var(--bf-icon-size-default);
   --bf-icon-transform: none;
@@ -12,29 +29,34 @@ export function iconCss() {
   flex: 0 0 auto;
   inline-size: var(--bf-icon-size);
   margin: 0;
+  margin-block-start: var(--bf-inline-icon-line-box-trim);
   overflow: hidden;
   padding: 0;
   text-indent: 110vw;
   transform: var(--bf-icon-transform);
   transform-origin: center;
-  vertical-align: bottom;
+  vertical-align: calc(var(--bf-inline-icon-baseline-shift) + ((var(--bf-icon-size-default) - var(--bf-icon-size)) / 2));
   white-space: nowrap;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-medium) {
   --bf-icon-size: var(--bf-icon-size-medium);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-large) {
   --bf-icon-size: var(--bf-icon-size-large);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-x-large) {
   --bf-icon-size: var(--bf-icon-size-x-large);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-xx-large) {
   --bf-icon-size: var(--bf-icon-size-xx-large);
+  --bf-inline-icon-line-box-trim: 0rem;
 }
 
 :where(.bf-theme) :where(.bf-icon.is-search) {

package/dist/css-components/interactive-feedback.js

@@ -11,7 +11,7 @@ export function interactiveFeedbackCss() {
 :where(.bf-theme) :where(.bf-credential-header) {
   align-items: flex-start;
   display: flex;
-  gap: var(--bf-space-2);
+  gap: var(--bf-component-inline-inset-action);
   justify-content: space-between;
   min-inline-size: 0;
 }
@@ -73,9 +73,10 @@ export function interactiveFeedbackCss() {
 
 :where(.bf-theme) :where(.bf-notification, .bf-notification.is-information, .bf-notification.is-positive, .bf-notification.is-caution, .bf-notification.is-negative) {
   --bf-notification-accent: var(--bf-color-border-information);
+  --bf-notification-close-painted-block-size: calc((var(--bf-space-1) * 2) + var(--bf-icon-size-default));
+  --bf-notification-rail-shortfall: max(0rem, calc(var(--bf-bar-thickness) + var(--bf-leading-mark-size) + var(--bf-leading-mark-gap) - var(--bf-component-inline-inset-continuation)));
   background: var(--bf-color-background-default);
   border: var(--bf-border-width) solid var(--bf-color-border-default);
-  border-inline-start: var(--bf-bar-thickness) solid var(--bf-notification-accent);
   color: var(--bf-color-text-default);
   margin-block: 0;
   max-inline-size: 100%;
@@ -83,10 +84,20 @@ export function interactiveFeedbackCss() {
   overflow-wrap: anywhere;
   padding-block-end: max(0rem, calc(var(--bf-space-half) - var(--bf-border-width)));
   padding-block-start: 0;
-  padding-inline: calc(var(--bf-icon-label-inline-offset) - var(--bf-bar-thickness)) var(--bf-space-1);
+  padding-inline: calc(var(--bf-component-inline-inset-continuation) - var(--bf-border-width)) var(--bf-component-inline-inset-action);
   position: relative;
 }
 
+:where(.bf-theme) :where(.bf-notification:not(.is-borderless))::before {
+  background: var(--bf-notification-accent);
+  content: "";
+  inline-size: var(--bf-bar-thickness);
+  inset-block: calc(var(--bf-border-width) * -1);
+  inset-inline-start: calc((var(--bf-border-width) + var(--bf-notification-rail-shortfall)) * -1);
+  pointer-events: none;
+  position: absolute;
+}
+
 :where(.bf-theme) :where(.bf-notification.is-positive) {
   --bf-notification-accent: var(--bf-color-border-positive);
 }
@@ -106,14 +117,16 @@ export function interactiveFeedbackCss() {
 :where(.bf-theme) :where(.bf-notification.is-borderless) {
   border: 0;
   padding-block: 0;
-  padding-inline: calc(var(--bf-icon-size-default) + var(--bf-space-1)) 0;
+  padding-inline: calc(var(--bf-leading-mark-size) + var(--bf-leading-mark-gap)) 0;
 }
 
 :where(.bf-theme) :where(.bf-notification-icon) {
+  --bf-icon-size: var(--bf-leading-mark-size);
   background-color: var(--bf-notification-accent);
   background-image: none;
-  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-h6-nudge-start) - var(--bf-border-width));
-  inset-inline-start: calc(var(--bf-icon-label-inline-offset) - var(--bf-bar-thickness) - var(--bf-icon-size-default) - var(--bf-space-1));
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-leading-mark-size)) / 2) + var(--bf-h6-nudge-start) - var(--bf-border-width));
+  inset-inline-start: calc(var(--bf-component-inline-inset-continuation) - var(--bf-border-width) - var(--bf-leading-mark-size) - var(--bf-leading-mark-gap));
+  margin-block-start: 0;
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-.75 5.25h1.5v5h-1.5v-5zM8 3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
   mask-position: center;
   mask-repeat: no-repeat;
@@ -134,12 +147,12 @@ export function interactiveFeedbackCss() {
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless > .bf-notification-icon) {
-  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-h6-nudge-start));
+  inset-block-start: calc(((var(--bf-h6-line-height) - var(--bf-leading-mark-size)) / 2) + var(--bf-h6-nudge-start));
   inset-inline-start: 0;
 }
 
 :where(.bf-theme) :where(.bf-notification.is-inline > .bf-notification-icon) {
-  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start) - var(--bf-border-width));
+  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-leading-mark-size)) / 2) + var(--bf-body-nudge-start) - var(--bf-border-width));
 }
 
 :where(.bf-theme) :where(.bf-notification-content, .bf-notification-meta) {
@@ -151,7 +164,7 @@ export function interactiveFeedbackCss() {
   /* Neutralise the shell's top border so the first metric role starts on-grid. */
   margin-block: calc(var(--bf-border-width) * -1) 0;
   padding-block-start: 0;
-  padding-inline-end: calc(var(--bf-icon-size-default) + var(--bf-space-1));
+  padding-inline-end: var(--bf-notification-close-painted-block-size);
 }
 
 :where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-content) {
@@ -195,9 +208,9 @@ export function interactiveFeedbackCss() {
 }
 
 :where(.bf-theme) :where(.bf-notification-close) {
-  block-size: calc((var(--bf-space-1) * 2) + var(--bf-icon-size-default));
+  block-size: var(--bf-square-block-size);
   border: 0;
-  inline-size: var(--bf-icon-size-default);
+  inline-size: var(--bf-square-block-size);
   margin-block-end: 0;
   padding: 0;
   position: absolute;
@@ -215,11 +228,11 @@ export function interactiveFeedbackCss() {
   border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
   display: flex;
   flex-wrap: wrap;
-  gap: var(--bf-space-1) var(--bf-space-2);
+  gap: var(--bf-space-1) var(--bf-component-inline-inset-action);
   justify-content: space-between;
   margin-block-end: 0;
   padding-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
-  padding-inline-end: var(--bf-space-2);
+  padding-inline-end: var(--bf-component-inline-inset-action);
 }
 
 :where(.bf-theme) :where(.bf-notification.is-inline .bf-notification-meta) {
@@ -238,7 +251,7 @@ export function interactiveFeedbackCss() {
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--bf-space-1) var(--bf-space-2);
+  gap: var(--bf-space-1) var(--bf-component-inline-inset-action);
   margin-inline-start: auto;
   min-inline-size: 0;
 }

package/dist/css-components/interactive-tables.js

@@ -20,10 +20,12 @@ export function interactiveTablesCss() {
   cursor: inherit;
   display: inline-block;
   font: inherit;
-  margin: -0.125rem calc(var(--bf-space-half) * -1);
+  margin-block: -0.125rem;
+  margin-inline: calc((var(--bf-component-inline-inset-field) / 2) * -1);
   max-inline-size: 100%;
   overflow: hidden;
-  padding: 0.125rem var(--bf-space-half);
+  padding-block: 0.125rem;
+  padding-inline: calc(var(--bf-component-inline-inset-field) / 2);
   text-align: inherit;
   text-decoration: inherit;
   text-overflow: inherit;
@@ -56,9 +58,10 @@ export function interactiveTablesCss() {
   content: "";
   display: inline-block;
   inline-size: var(--bf-icon-size-default);
-  margin-inline-start: var(--bf-space-half);
+  margin-block-start: var(--bf-inline-icon-line-box-trim);
+  margin-inline-start: calc(var(--bf-leading-mark-gap) / 2);
   opacity: 0;
-  vertical-align: calc((1cap - var(--bf-icon-size-default)) / 2);
+  vertical-align: var(--bf-inline-icon-baseline-shift);
 }
 
 :where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
@@ -111,7 +114,7 @@ export function interactiveTablesCss() {
 
   :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody) {
     display: grid;
-    gap: 0 var(--bf-space-3);
+    gap: 0 var(--bf-component-inline-inset-continuation);
     grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
     inline-size: 100%;
   }
@@ -121,7 +124,7 @@ export function interactiveTablesCss() {
     display: block;
     margin-block-end: calc(var(--bf-space-3) - (var(--bf-border-width) * 2));
     min-inline-size: 0;
-    padding-inline: var(--bf-space-2);
+    padding-inline: var(--bf-panel-padding-inline);
   }
 
   :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody > tr > :where(th, td)) {

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

@@ -1,20 +1,21 @@
 export function legacyNavigationCss(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
+  /* Plain navigation commands use the action inset. Icon-led rows move only their mark canvas,
+     so their copy reaches the shared continuation inset without a fourth
      component inset. Navigation depth is added separately below. */
-  /* Navigation copy uses one continuation rail whether a row has a leading
+  /* Navigation copy uses one continuation inset 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. */
+     that inset, 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-disclosure-inset: var(--bf-disclosure-group-inset);
+  --bf-side-navigation-depth-step: var(--bf-component-inline-inset-action);
   --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%;
+  min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-groups) {
@@ -95,7 +96,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-component-inline-inset-continuation);
+  padding-inline: var(--bf-panel-padding-inline);
   padding-top: var(--bf-panel-padding-block);
   position: sticky;
   top: 0;
@@ -111,10 +112,10 @@ ${bodyTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   justify-content: center;
   margin: 0 0 ${buttonMarginBottom};
-${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordered);
+${buttonPadding}  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-decoration: none;
 }
 
@@ -166,15 +167,17 @@ ${bodySemiboldTypeStyles}  display: block;
 
 :where(.bf-theme) :where(.bf-side-navigation-list) {
   display: grid;
-  grid-auto-rows: var(--bf-single-line-row-block-size);
+  grid-auto-rows: minmax(var(--bf-interface-row-occupied-block-size), auto);
   list-style: none;
   margin: 0;
+  min-inline-size: 0;
   padding: 0;
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-item, .bf-side-navigation-item.is-title) {
   display: grid;
   margin: 0;
+  min-inline-size: 0;
   position: relative;
 }
 
@@ -186,11 +189,15 @@ ${bodyTypeStyles}  align-items: center;
   border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-inactive);
   display: flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   inline-size: 100%;
   justify-content: flex-start;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  min-inline-size: 0;
+  /* A navigation row is the focus owner. Put nested interactive controls in a
+     following panel/list item rather than inside the clipped row itself. */
+  overflow: hidden;
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-side-navigation-content-inset);
   --bf-side-navigation-row-inset: var(--bf-side-navigation-content-inset);
   position: relative;
@@ -305,7 +312,7 @@ ${bodyTypeStyles}  align-items: center;
 :where(.bf-theme) :where(.bf-top-navigation-logo) > :where(.bf-top-navigation-link) {
 ${bodyMediumTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
-  column-gap: calc(var(--bf-baseline) * 1.5);
+  column-gap: var(--bf-leading-mark-gap);
   display: inline-flex;
   inline-size: auto;
   justify-content: flex-start;
@@ -392,7 +399,7 @@ ${bodyTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: inline-flex;
-  gap: calc(var(--bf-baseline) * 1);
+  gap: var(--bf-leading-mark-gap);
   inline-size: 100%;
   justify-content: flex-start;
   margin: 0;
@@ -484,12 +491,12 @@ ${bodyTypeStyles}  align-items: center;
 ${bodyTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
   display: flex;
-  gap: calc(var(--bf-baseline) * 2);
+  gap: var(--bf-component-inline-inset-action);
   inline-size: 100%;
   justify-content: space-between;
   min-inline-size: 0;
   padding-block: var(--bf-top-navigation-link-padding-block);
-  padding-inline: calc(var(--bf-top-navigation-link-padding-inline) + (var(--bf-baseline) * 2)) var(--bf-top-navigation-link-padding-inline);
+  padding-inline: calc(var(--bf-top-navigation-link-padding-inline) + var(--bf-component-inline-inset-action)) var(--bf-top-navigation-link-padding-inline);
   text-align: left;
   text-decoration: none;
   white-space: nowrap;
@@ -594,7 +601,7 @@ ${bodyTypeStyles}  align-items: center;
   :where(.bf-theme) :where(.bf-top-navigation-row) {
     align-items: stretch;
     flex-direction: row;
-    gap: calc(var(--bf-baseline) * 2);
+    gap: var(--bf-component-inline-inset-action);
   }
 
   :where(.bf-theme) :where(.bf-top-navigation-banner) {
@@ -726,8 +733,8 @@ ${bodyTypeStyles}  background: transparent;
   cursor: pointer;
   inset-block-start: 0;
   margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-inline: calc(var(--bf-baseline) * 0.5);
+  min-block-size: var(--bf-interface-row-occupied-block-size);
+  padding-inline: var(--bf-inline-unit);
   position: absolute;
   right: 0;
 }
@@ -765,8 +772,8 @@ ${bodyTypeStyles}  background: transparent;
 :where(.bf-theme) :where(.bf-side-navigation.is-icons) :where(.bf-side-navigation-icon) {
   align-items: center;
   display: inline-flex;
-  flex: 0 0 1rem;
-  inline-size: 1rem;
+  flex: 0 0 var(--bf-disclosure-icon-inline-size);
+  inline-size: var(--bf-disclosure-icon-inline-size);
   justify-content: center;
   transform: translateY(var(--bf-side-navigation-icon-optical-offset-block));
 }
@@ -776,7 +783,7 @@ ${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)));
+  --bf-side-navigation-row-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-side-navigation-icon-gap)));
   align-items: baseline;
   column-gap: var(--bf-side-navigation-icon-gap);
 }
@@ -785,8 +792,8 @@ ${bodyTypeStyles}  background: transparent;
    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;
+  flex: 0 0 var(--bf-disclosure-icon-inline-size);
+  inline-size: var(--bf-disclosure-icon-inline-size);
 }
 
 /* A collapsed icon rail cannot communicate an iconless destination. Remove

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

@@ -28,8 +28,8 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
   border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin: 0 0 var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-component-inline-inset-continuation) var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
@@ -61,9 +61,9 @@ ${bodyTypeStyles}  align-items: center;
   cursor: pointer;
   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);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-disclosure-group-inset) var(--bf-inline-unit);
   text-align: left;
   width: 100%;
 }

package/dist/css-components/list.js

@@ -23,8 +23,8 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item) {
   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);
+  margin-block-end: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item:first-child) {
@@ -64,7 +64,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 :where(.bf-theme) :where(ol.bf-list.is-divided) > :where(.bf-list-item) {
   counter-increment: bf-list-counter;
   list-style: none;
-  padding-inline-start: calc(var(--bf-baseline) * 4);
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
   position: relative;
 }
 
@@ -79,7 +79,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-list-item) > :where(.bf-list) {
-  margin-inline-start: calc(var(--bf-baseline) * 3);
+  margin-inline-start: var(--bf-component-inline-inset-action);
   padding-block-start: var(--bf-body-nudge-end);
 }
 
@@ -88,6 +88,8 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 }
 
 :where(.bf-theme) :where(.bf-inline-list) {
+  --bf-inline-list-space: 0.5rem;
+
   margin: 0;
   padding: 0;
 }
@@ -95,7 +97,7 @@ ${bodyTypeStyles}  color: var(--bf-color-text-default);
 :where(.bf-theme) :where(.bf-inline-list-item) {
 ${bodyTypeStyles}  display: inline-block;
   list-style: none;
-  margin-inline-end: calc(var(--bf-baseline) * 1.5);
+  margin-inline-end: var(--bf-inline-list-space);
   padding-block-end: var(--bf-body-nudge-end);
   padding-block-start: var(--bf-body-nudge-start);
 }
@@ -105,17 +107,20 @@ ${bodyTypeStyles}  display: inline-block;
 }
 
 :where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item) {
-  margin-inline-end: calc(var(--bf-baseline) * 1);
+  margin-inline-end: 0;
   position: relative;
 }
 
-:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item)::after {
-  content: "\\2022";
-  display: inline;
-  margin-inline-start: calc(var(--bf-baseline) * 0.25);
+:where(.bf-theme) :where(.bf-inline-list.is-middot) {
+  align-items: baseline;
+  column-gap: var(--bf-inline-list-space);
+  display: flex;
+  flex-wrap: wrap;
 }
 
-:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item:last-of-type)::after {
-  content: "";
+:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item:not(:last-of-type))::after {
+  content: "\\2022";
+  display: inline;
+  margin-inline-start: var(--bf-inline-list-space);
 }`;
 }