baseline-foundry 0.1.5 → 0.1.7

package/README.md

@@ -115,7 +115,7 @@ The verified GitHub release artifact remains available as a fallback for
 environments that cannot reach the npm registry:
 
 ```bash
-npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.5/baseline-foundry-0.1.5.tgz
+npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.7/baseline-foundry-0.1.7.tgz
 ```
 
 Use the attached `.tgz`, not the GitHub source archive: generated `dist/`

package/dist/css-app-tier.js

@@ -15,6 +15,12 @@ ${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base,
   line-height: var(--bf-body-line-height);
 }
 
+/* Preserve the public nested fit after the preset's general typography pass.
+   The modifier remains explicit and zero-specificity in every app scope. */
+${scoped(" :where(.bf-status-label.is-nested, .bf-chip.is-nested)")} {
+  line-height: var(--bf-nested-auxiliary-line-height);
+}
+
 ${scoped(" :where(.bf-input, .bf-button, .bf-button.is-base)")} {
   font-family: inherit;
   font-size: var(--bf-body-font-size);

package/dist/css-components/chip-badge-status.js

@@ -10,7 +10,7 @@ export function chipBadgeStatusCss(options) {
 ${bodyTypeStyles}  align-items: baseline;
   background-color: var(--bf-ui-chip-background);
   border: var(--bf-border-width) solid var(--bf-ui-chip-border);
-  border-radius: 1rem;
+  border-radius: var(--bf-ui-chip-radius);
   color: var(--bf-color-text-default);
   display: inline-flex;
   gap: 0;
@@ -173,5 +173,44 @@ ${bodyTypeStyles}  margin: 0 0 var(--bf-single-line-row-margin-block-end);
   --bf-ui-status-background: var(--bf-color-border-negative);
   --bf-ui-status-color: var(--bf-color-button-negative-text);
 }
+
+/* Nested auxiliary surfaces fit a body-sized flex/grid host instead of
+   carrying a second standalone occupied-row contract. This modifier is
+   explicit so component density never changes merely because of ancestry. */
+:where(.bf-theme) :where(.bf-chip.is-nested, .bf-status-label.is-nested) {
+  line-height: var(--bf-nested-auxiliary-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-auxiliary-padding-block);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested) {
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border);
+}
+
+/* Chip parts normally carry the standalone body line explicitly. A compact
+   chip must pass its reduced line through to those parts so a nested badge
+   can fit without making the host row taller. */
+:where(.bf-theme) :where(.bf-chip.is-nested) :where(.bf-chip-lead, .bf-chip-value) {
+  line-height: inherit;
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:hover) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-hover);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:is(:active, [aria-pressed='true'], .is-selected)) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-active);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-nested) {
+  border-block-width: 0;
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  align-self: center;
+  line-height: var(--bf-nested-auxiliary-line-height);
+  vertical-align: middle;
+}
 `;
 }

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

@@ -11,6 +11,7 @@ export function legacyNavigationCss(options) {
   --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%;
@@ -23,11 +24,31 @@ export function legacyNavigationCss(options) {
 }
 
 :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;
@@ -145,6 +166,7 @@ ${bodySemiboldTypeStyles}  display: block;
 
 :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;
@@ -158,6 +180,7 @@ ${bodySemiboldTypeStyles}  display: block;
 
 :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;

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

@@ -69,13 +69,11 @@ export function navigationLayoutCss() {
   line-height: var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5));
   overflow: visible;
   overflow-wrap: anywhere;
-  /* The first title line and the 1rem mark share the mark's fixed centre:
-   * tag block-end minus the 0.375rem inset minus half the mark. Symmetric title
-   * padding keeps the occupied row stable across all four type-density tiers. */
+  /* The first title line and the 1rem mark share the public brand-line centre.
+   * The derived brand block is twice that fixed centre, so the orange tag can
+   * extend upward without changing the title or adjacent-header baseline. */
   padding-block: calc(
-    var(--bf-top-navigation-logo-tag-block-size)
-    - var(--bf-top-navigation-logo-icon-bottom-offset)
-    - (var(--bf-top-navigation-logo-icon-size) / 2)
+    var(--bf-navigation-brand-line-center-block)
     - (var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
   );
   text-overflow: clip;

package/dist/css-components/panel.js

@@ -52,10 +52,6 @@ export function panelCss(options) {
   inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) :where(.bf-top-navigation-logo-title) {
-  transform: translateY(var(--bf-navigation-brand-title-optical-offset-block));
-}
-
 :where(.bf-theme) :where(.bf-panel-header) > :where(.bf-panel-title) {
   min-inline-size: 0;
 }

package/dist/css-components/table.js

@@ -69,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.js

@@ -89,8 +89,6 @@ export function componentsCss(tokens, themeSurfaces) {
     const h6 = tokens.roles.h6 ?? body;
     const baselineUnit = tokens.baselineUnit;
     const components = tokens.components;
-    const controlBlockPaddingVar = "var(--bf-control-block-padding)";
-    const controlCompactBlockPaddingVar = "var(--bf-control-block-padding-compact)";
     const inputBlockPaddingVar = "var(--bf-input-block-padding)";
     const buttonBlockPaddingVar = "var(--bf-button-block-padding)";
     const bodyLineHeight = roleLineHeightVar("body", body.lineHeight);
@@ -125,14 +123,21 @@ ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable comma
      padding and trailing baseline compensation must resolve through this pair. */
   --bf-single-line-row-padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
   --bf-single-line-row-margin-block-end: ${singleLineRowMarginBottom};
+  --bf-single-line-row-block-size: calc(${bodyLineHeight} + (var(--bf-single-line-row-padding-block) * 2) + (var(--bf-border-width) * 2) + var(--bf-single-line-row-margin-block-end));
+  --bf-single-line-row-in-box-padding-block-start: ${bodySelectedStartNudge};
+  --bf-single-line-row-in-box-padding-block-end: max(0rem, calc(var(--bf-single-line-row-block-size) - ${bodyLineHeight} - var(--bf-single-line-row-in-box-padding-block-start)));
   --bf-single-line-row-visual-offset: ${alignedVisualStart(bodyLineHeight, "var(--bf-control-visual-size)", bodySelectedStartNudge)};
+  /* Auxiliary surfaces may opt into a host-owned nested composition. The
+     shorter line and capped symmetric padding fit their complete paint inside
+     the host body line without introducing a second row rhythm. */
+  --bf-nested-auxiliary-line-height: max(var(--bf-body-font-size), calc(var(--bf-body-line-height) - var(--bf-baseline)));
+  --bf-nested-auxiliary-padding-block: min(var(--bf-single-line-row-padding-block), max(0rem, calc((var(--bf-body-line-height) - var(--bf-nested-auxiliary-line-height)) / 2)));
   --bf-slider-track-size: calc(var(--bf-baseline) * 0.25);
-  --bf-slider-row-block-size: max(var(--bf-control-box-size-compact), calc(${bodySelectedStartNudge} + ${bodyLineHeight} + ${bodySelectedEndNudge}));
+  --bf-slider-row-block-size: var(--bf-single-line-row-block-size);
   --bf-slider-track-offset: ${alignedVisualStart(bodyLineHeight, "var(--bf-slider-track-size)", bodySelectedStartNudge)};
   --bf-table-row-border-size: var(--bf-border-width);
-  --bf-table-row-padding-block-start: ${bodySelectedStartNudge};
-  --bf-table-row-content-size: calc(${bodyLineHeight} + (var(--bf-table-row-padding-block-start) * 2) + var(--bf-table-row-border-size));
-  --bf-table-row-block-size: calc(var(--bf-table-row-content-size) + mod(calc(var(--bf-baseline) - mod(var(--bf-table-row-content-size), var(--bf-baseline))), var(--bf-baseline)));
+  --bf-table-row-padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
+  --bf-table-row-block-size: var(--bf-single-line-row-block-size);
   --bf-table-row-padding-block-end: max(0rem, calc(var(--bf-table-row-block-size) - ${bodyLineHeight} - var(--bf-table-row-padding-block-start) - var(--bf-table-row-border-size)));
   --bf-table-row-line-height: ${bodyLineHeight};
   --bf-switch-track-offset: var(--bf-single-line-row-visual-offset);
@@ -182,7 +187,8 @@ ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable comma
   --bf-top-navigation-logo-tag-gap: 0.25rem;
   --bf-top-navigation-logo-icon-bottom-offset: 0.375rem;
   --bf-top-navigation-logo-icon-optical-offset-inline: -0.0125rem;
-  --bf-navigation-brand-title-optical-offset-block: 0rem;
+  --bf-navigation-brand-line-center-block: calc(var(--bf-top-navigation-logo-tag-block-size) - var(--bf-top-navigation-logo-icon-bottom-offset) - (var(--bf-top-navigation-logo-icon-size) / 2));
+  --bf-navigation-brand-block-size: calc(var(--bf-navigation-brand-line-center-block) * 2);
   --bf-icon-size-default: 1rem;
   --bf-icon-size-medium: 2.5rem;
   --bf-icon-size-large: 4rem;
@@ -192,6 +198,7 @@ ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable comma
   --bf-leading-icon-gap: var(--bf-leading-mark-gap);
   --bf-leading-icon-offset: var(--bf-single-line-row-visual-offset);
   --bf-ui-chip-padding-inline: var(--bf-component-inline-inset-field);
+  --bf-ui-chip-radius: 999rem;
   --bf-ui-badge-padding-inline: calc(${bodyLineHeight} * 0.25);
   --bf-ui-badge-overhang: calc(var(--bf-ui-badge-padding-inline) * -0.75);
   --bf-grid-max-inline-size: var(--bf-content-max-width);
@@ -264,7 +271,7 @@ ${foundryComponentColorVars("dark")}
   margin: 0;
 }
 
-.bf-theme button {
+:where(.bf-theme) :where(button) {
   font: inherit;
 }
 
@@ -377,10 +384,33 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
 ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-component-inline-inset-field);
 }
 
-:where(.bf-theme) :where(input[type='color'].bf-color-input) {
+:where(.bf-theme) :where(.bf-color-control) {
+  display: grid;
+  grid-template-areas: "color-control";
   inline-size: 4rem;
-  min-block-size: var(--bf-control-box-size);
-  padding: calc(var(--bf-baseline) * 0.5);
+}
+
+/* Native color inputs do not expose a body-text line box. This invisible
+   metric strut gives their wrapper the same natural padding/border/margin
+   construction as every textual control, including under browser zoom. */
+:where(.bf-theme) :where(.bf-color-control)::before {
+  border-block: var(--bf-border-width) solid transparent;
+  content: "\\00a0";
+  grid-area: color-control;
+  line-height: var(--bf-body-line-height);
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  visibility: hidden;
+}
+
+:where(.bf-theme) :where(.bf-color-control) > :where(input[type='color'].bf-color-input) {
+  align-self: stretch;
+  block-size: auto;
+  grid-area: color-control;
+  inline-size: 100%;
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  min-block-size: 0;
+  padding: var(--bf-border-width);
 }
 
 :where(.bf-theme) :where(.bf-input, input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea, select):hover {
@@ -416,13 +446,13 @@ ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-component-inli
 :where(.bf-theme) :where(input[type='file']) {
 ${typeStyles(body, { includeCase: false })}  background: transparent;
   border: 0 solid transparent;
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
-  border-top: var(--bf-border-width) solid transparent;
+  box-shadow: inset 0 calc(var(--bf-border-width) * -1) 0 var(--bf-color-border-default);
   color: var(--bf-color-text-default);
   margin-bottom: ${inputMarginBottom};
   max-inline-size: 100%;
   min-inline-size: 0;
-${controlPadding(inputBlockPaddingVar)}  padding-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   width: 100%;
 }
 
@@ -434,8 +464,9 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   color: var(--bf-color-text-default);
   cursor: pointer;
   margin-inline-end: var(--bf-field-gap);
-  min-block-size: var(--bf-control-box-size-compact);
-${controlPadding(controlCompactBlockPaddingVar)}  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  min-block-size: 0;
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: var(--bf-control-inline-padding-action-bordered);
 }
 
 :where(.bf-theme) :where(input[type='file'])::file-selector-button:hover {
@@ -779,6 +810,15 @@ ${typeStyles(body, { includeCase: false })}  border-block: var(--bf-border-width
   padding: 0;
 }
 
+/* A composite slider's numeric field owns the shared occupied row. Stretching
+   the track within that real sibling height avoids a second nominal-height
+   calculation that can diverge when rem borders are rasterised under zoom. */
+:where(.bf-theme) :where(.bf-slider:not(.is-stacked)):not(:where(.bf-field.is-range.is-stacked) :where(.bf-slider)) > :where(input[type='range']) {
+  align-self: stretch;
+  block-size: auto;
+  margin-block: 0;
+}
+
 :where(.bf-theme) :where(input[type='range']):focus:not(:focus-visible) {
   outline: none;
 }
@@ -1038,7 +1078,8 @@ ${typeStyles(body, { includeCase: false })}  background: transparent;
   display: block;
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-control-block-padding-compact);
+  padding-block-end: var(--bf-single-line-row-in-box-padding-block-end);
+  padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
   padding-inline: var(--bf-component-inline-inset-action);
   text-align: left;
   text-decoration: none;

package/dist/experiments/ibm-plex-engine-smoke/styles.css

@@ -924,14 +924,21 @@ html.u-baseline-grid::after {
      padding and trailing baseline compensation must resolve through this pair. */
   --bf-single-line-row-padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
   --bf-single-line-row-margin-block-end: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-button-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
+  --bf-single-line-row-block-size: calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-single-line-row-padding-block) * 2) + (var(--bf-border-width) * 2) + var(--bf-single-line-row-margin-block-end));
+  --bf-single-line-row-in-box-padding-block-start: var(--bf-body-nudge-start, 0.375rem);
+  --bf-single-line-row-in-box-padding-block-end: max(0rem, calc(var(--bf-single-line-row-block-size) - var(--bf-body-line-height, 1.5rem) - var(--bf-single-line-row-in-box-padding-block-start)));
   --bf-single-line-row-visual-offset: calc(var(--bf-body-nudge-start, 0.375rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-control-visual-size)) / 2));
+  /* Auxiliary surfaces may opt into a host-owned nested composition. The
+     shorter line and capped symmetric padding fit their complete paint inside
+     the host body line without introducing a second row rhythm. */
+  --bf-nested-auxiliary-line-height: max(var(--bf-body-font-size), calc(var(--bf-body-line-height) - var(--bf-baseline)));
+  --bf-nested-auxiliary-padding-block: min(var(--bf-single-line-row-padding-block), max(0rem, calc((var(--bf-body-line-height) - var(--bf-nested-auxiliary-line-height)) / 2)));
   --bf-slider-track-size: calc(var(--bf-baseline) * 0.25);
-  --bf-slider-row-block-size: max(var(--bf-control-box-size-compact), calc(var(--bf-body-nudge-start, 0.375rem) + var(--bf-body-line-height, 1.5rem) + var(--bf-body-nudge-end)));
+  --bf-slider-row-block-size: var(--bf-single-line-row-block-size);
   --bf-slider-track-offset: calc(var(--bf-body-nudge-start, 0.375rem) + ((var(--bf-body-line-height, 1.5rem) - var(--bf-slider-track-size)) / 2));
   --bf-table-row-border-size: var(--bf-border-width);
-  --bf-table-row-padding-block-start: var(--bf-body-nudge-start, 0.375rem);
-  --bf-table-row-content-size: calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-table-row-padding-block-start) * 2) + var(--bf-table-row-border-size));
-  --bf-table-row-block-size: calc(var(--bf-table-row-content-size) + mod(calc(var(--bf-baseline) - mod(var(--bf-table-row-content-size), var(--bf-baseline))), var(--bf-baseline)));
+  --bf-table-row-padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
+  --bf-table-row-block-size: var(--bf-single-line-row-block-size);
   --bf-table-row-padding-block-end: max(0rem, calc(var(--bf-table-row-block-size) - var(--bf-body-line-height, 1.5rem) - var(--bf-table-row-padding-block-start) - var(--bf-table-row-border-size)));
   --bf-table-row-line-height: var(--bf-body-line-height, 1.5rem);
   --bf-switch-track-offset: var(--bf-single-line-row-visual-offset);
@@ -981,7 +988,8 @@ html.u-baseline-grid::after {
   --bf-top-navigation-logo-tag-gap: 0.25rem;
   --bf-top-navigation-logo-icon-bottom-offset: 0.375rem;
   --bf-top-navigation-logo-icon-optical-offset-inline: -0.0125rem;
-  --bf-navigation-brand-title-optical-offset-block: 0rem;
+  --bf-navigation-brand-line-center-block: calc(var(--bf-top-navigation-logo-tag-block-size) - var(--bf-top-navigation-logo-icon-bottom-offset) - (var(--bf-top-navigation-logo-icon-size) / 2));
+  --bf-navigation-brand-block-size: calc(var(--bf-navigation-brand-line-center-block) * 2);
   --bf-icon-size-default: 1rem;
   --bf-icon-size-medium: 2.5rem;
   --bf-icon-size-large: 4rem;
@@ -991,6 +999,7 @@ html.u-baseline-grid::after {
   --bf-leading-icon-gap: var(--bf-leading-mark-gap);
   --bf-leading-icon-offset: var(--bf-single-line-row-visual-offset);
   --bf-ui-chip-padding-inline: var(--bf-component-inline-inset-field);
+  --bf-ui-chip-radius: 999rem;
   --bf-ui-badge-padding-inline: calc(var(--bf-body-line-height, 1.5rem) * 0.25);
   --bf-ui-badge-overhang: calc(var(--bf-ui-badge-padding-inline) * -0.75);
   --bf-grid-max-inline-size: var(--bf-content-max-width);
@@ -1164,7 +1173,7 @@ html.u-baseline-grid::after {
   margin: 0;
 }
 
-.bf-theme button {
+:where(.bf-theme) :where(button) {
   font: inherit;
 }
 
@@ -1293,10 +1302,33 @@ html.u-baseline-grid::after {
   padding-inline: var(--bf-component-inline-inset-field);
 }
 
-:where(.bf-theme) :where(input[type='color'].bf-color-input) {
+:where(.bf-theme) :where(.bf-color-control) {
+  display: grid;
+  grid-template-areas: "color-control";
   inline-size: 4rem;
-  min-block-size: var(--bf-control-box-size);
-  padding: calc(var(--bf-baseline) * 0.5);
+}
+
+/* Native color inputs do not expose a body-text line box. This invisible
+   metric strut gives their wrapper the same natural padding/border/margin
+   construction as every textual control, including under browser zoom. */
+:where(.bf-theme) :where(.bf-color-control)::before {
+  border-block: var(--bf-border-width) solid transparent;
+  content: "\00a0";
+  grid-area: color-control;
+  line-height: var(--bf-body-line-height);
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  visibility: hidden;
+}
+
+:where(.bf-theme) :where(.bf-color-control) > :where(input[type='color'].bf-color-input) {
+  align-self: stretch;
+  block-size: auto;
+  grid-area: color-control;
+  inline-size: 100%;
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  min-block-size: 0;
+  padding: var(--bf-border-width);
 }
 
 :where(.bf-theme) :where(.bf-input, input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea, select):hover {
@@ -1337,13 +1369,12 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1.5rem);
   background: transparent;
   border: 0 solid transparent;
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
-  border-top: var(--bf-border-width) solid transparent;
+  box-shadow: inset 0 calc(var(--bf-border-width) * -1) 0 var(--bf-color-border-default);
   color: var(--bf-color-text-default);
   margin-bottom: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1.5rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
   max-inline-size: 100%;
   min-inline-size: 0;
-  padding-block: max(0rem, calc(var(--bf-input-block-padding) - var(--bf-border-width)));
+  padding-block: 0;
   padding-inline: 0;
   width: 100%;
 }
@@ -1361,8 +1392,8 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   margin-inline-end: var(--bf-field-gap);
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: max(0rem, calc(var(--bf-control-block-padding-compact) - var(--bf-border-width)));
+  min-block-size: 0;
+  padding-block: var(--bf-single-line-row-padding-block);
   padding-inline: var(--bf-control-inline-padding-action-bordered);
 }
 
@@ -1722,6 +1753,15 @@ html.u-baseline-grid::after {
   padding: 0;
 }
 
+/* A composite slider's numeric field owns the shared occupied row. Stretching
+   the track within that real sibling height avoids a second nominal-height
+   calculation that can diverge when rem borders are rasterised under zoom. */
+:where(.bf-theme) :where(.bf-slider:not(.is-stacked)):not(:where(.bf-field.is-range.is-stacked) :where(.bf-slider)) > :where(input[type='range']) {
+  align-self: stretch;
+  block-size: auto;
+  margin-block: 0;
+}
+
 :where(.bf-theme) :where(input[type='range']):focus:not(:focus-visible) {
   outline: none;
 }
@@ -4055,10 +4095,6 @@ html.u-baseline-grid::after {
   inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) :where(.bf-top-navigation-logo-title) {
-  transform: translateY(var(--bf-navigation-brand-title-optical-offset-block));
-}
-
 :where(.bf-theme) :where(.bf-panel-header) > :where(.bf-panel-title) {
   min-inline-size: 0;
 }
@@ -5675,10 +5711,6 @@ html.u-baseline-grid::after {
   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);
 }
@@ -5699,7 +5731,7 @@ html.u-baseline-grid::after {
   align-items: baseline;
   background-color: var(--bf-ui-chip-background);
   border: var(--bf-border-width) solid var(--bf-ui-chip-border);
-  border-radius: 1rem;
+  border-radius: var(--bf-ui-chip-radius);
   color: var(--bf-color-text-default);
   display: inline-flex;
   gap: 0;
@@ -5888,6 +5920,45 @@ html.u-baseline-grid::after {
   --bf-ui-status-color: var(--bf-color-button-negative-text);
 }
 
+/* Nested auxiliary surfaces fit a body-sized flex/grid host instead of
+   carrying a second standalone occupied-row contract. This modifier is
+   explicit so component density never changes merely because of ancestry. */
+:where(.bf-theme) :where(.bf-chip.is-nested, .bf-status-label.is-nested) {
+  line-height: var(--bf-nested-auxiliary-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-auxiliary-padding-block);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested) {
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border);
+}
+
+/* Chip parts normally carry the standalone body line explicitly. A compact
+   chip must pass its reduced line through to those parts so a nested badge
+   can fit without making the host row taller. */
+:where(.bf-theme) :where(.bf-chip.is-nested) :where(.bf-chip-lead, .bf-chip-value) {
+  line-height: inherit;
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:hover) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-hover);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:is(:active, [aria-pressed='true'], .is-selected)) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-active);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-nested) {
+  border-block-width: 0;
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  align-self: center;
+  line-height: var(--bf-nested-auxiliary-line-height);
+  vertical-align: middle;
+}
+
 
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear) {
   appearance: none;
@@ -6332,6 +6403,7 @@ html.u-baseline-grid::after {
   --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%;
@@ -6344,11 +6416,31 @@ html.u-baseline-grid::after {
 }
 
 :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;
@@ -6477,6 +6569,7 @@ html.u-baseline-grid::after {
 
 :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;
@@ -6495,6 +6588,7 @@ html.u-baseline-grid::after {
   font-weight: var(--bf-body-font-weight, 400);
   line-height: var(--bf-body-line-height, 1.5rem);
   align-items: center;
+  align-self: start;
   background: transparent;
   border: 0;
   border-block: var(--bf-border-width) solid transparent;
@@ -7232,7 +7326,8 @@ html.u-baseline-grid::after {
   display: block;
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-control-block-padding-compact);
+  padding-block-end: var(--bf-single-line-row-in-box-padding-block-end);
+  padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
   padding-inline: var(--bf-component-inline-inset-action);
   text-align: left;
   text-decoration: none;
@@ -8321,13 +8416,11 @@ html.u-baseline-grid::after {
   line-height: var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5));
   overflow: visible;
   overflow-wrap: anywhere;
-  /* The first title line and the 1rem mark share the mark's fixed centre:
-   * tag block-end minus the 0.375rem inset minus half the mark. Symmetric title
-   * padding keeps the occupied row stable across all four type-density tiers. */
+  /* The first title line and the 1rem mark share the public brand-line centre.
+   * The derived brand block is twice that fixed centre, so the orange tag can
+   * extend upward without changing the title or adjacent-header baseline. */
   padding-block: calc(
-    var(--bf-top-navigation-logo-tag-block-size)
-    - var(--bf-top-navigation-logo-icon-bottom-offset)
-    - (var(--bf-top-navigation-logo-icon-size) / 2)
+    var(--bf-navigation-brand-line-center-block)
     - (var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
   );
   text-overflow: clip;