baseline-foundry 0.1.4 → 0.1.6

package/dist/css-components.js

@@ -89,43 +89,66 @@ 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);
     const inputMarginBottom = controlMarginBottomExpression(bodyLineHeight, inputBlockPaddingVar, "0rem");
-    const buttonMarginBottom = controlMarginBottomExpression(bodyLineHeight, buttonBlockPaddingVar, "0rem");
+    const singleLineRowMarginBottom = controlMarginBottomExpression(bodyLineHeight, buttonBlockPaddingVar, "0rem");
+    const buttonMarginBottom = "var(--bf-single-line-row-margin-block-end)";
     const bodySelectedStartNudge = roleSelectedStartNudgeVar("body", body.nudgeTop);
     const bodySelectedEndNudge = roleSelectedEndNudgeVar("body");
     const h4LineHeight = roleLineHeightVar("h4", h4.lineHeight);
     const h5LineHeight = roleLineHeightVar("h5", h5.lineHeight);
-    const h5SelectedStartNudge = roleSelectedStartNudgeVar("h5", h5.nudgeTop);
-    const h5SelectedEndNudge = roleSelectedEndNudgeVar("h5");
     const h6LineHeight = roleLineHeightVar("h6", h6.lineHeight);
     const bodyTypeStyles = typeStyles(body, { includeCase: false });
     const h6TypeStyles = typeStyles(h6, { includeCase: false });
-    const buttonPadding = controlPadding(buttonBlockPaddingVar);
+    const buttonPadding = "  padding-block: var(--bf-single-line-row-padding-block);\n";
     return `:where(.bf-theme) {
 ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable command targets; field surfaces can tighten independently. */
   --bf-disclosure-gap: 1rem;
   --bf-disclosure-icon-inline-size: 1rem;
+  --bf-icon-label-inline-offset: calc(var(--bf-disclosure-icon-inline-size) + var(--bf-disclosure-gap));
+  --bf-disclosure-label-inline-offset: var(--bf-icon-label-inline-offset);
+  /* Every component-owned inline start resolves to one of these three rails.
+     Field and action values remain tier inputs; continuation is the shared
+     icon/mark-to-copy line. Structural page, grid and navigation-depth offsets
+     are deliberately outside this component inset contract. */
+  --bf-component-inline-inset-field: var(--bf-control-inline-padding-field);
+  --bf-component-inline-inset-action: var(--bf-control-inline-padding-action);
+  --bf-component-inline-inset-continuation: var(--bf-disclosure-label-inline-offset);
   --bf-input-block-padding: ${bodySelectedStartNudge};
   --bf-button-block-padding: ${bodySelectedStartNudge};
+  /* One border-aware occupied-block contract for body-sized, single-line UI.
+     Components may paint their block borders differently, but their text line,
+     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(1em, 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: ${bodySelectedStartNudge};
-  --bf-table-row-content-size: calc(${bodyLineHeight} + (var(--bf-table-row-padding) * 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-line-height: calc(var(--bf-table-row-block-size) - (var(--bf-table-row-padding) * 2) - var(--bf-table-row-border-size));
-  --bf-switch-row-block-size: calc(${bodySelectedStartNudge} + ${bodyLineHeight} + ${bodySelectedEndNudge});
-  --bf-switch-track-offset: ${alignedVisualStart(bodyLineHeight, "var(--bf-control-visual-size)", bodySelectedStartNudge)};
-  --bf-tick-row-block-size: max(var(--bf-control-box-size-compact), calc(${bodySelectedStartNudge} + ${bodyLineHeight} + ${bodySelectedEndNudge}));
-  --bf-tick-box-offset: ${alignedVisualStart(bodyLineHeight, "var(--bf-control-visual-size)", bodySelectedStartNudge)};
-  --bf-tick-label-offset: calc(var(--bf-control-visual-size) + var(--bf-control-inline-padding-field));
-  --bf-radio-dot-size: calc(var(--bf-control-visual-size) * 0.375);
+  --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);
+  --bf-tick-box-offset: var(--bf-single-line-row-visual-offset);
+  --bf-leading-mark-size: var(--bf-control-visual-size);
+  --bf-leading-mark-gap: var(--bf-component-inline-inset-field);
+  --bf-leading-mark-offset: calc(var(--bf-leading-mark-size) + var(--bf-leading-mark-gap));
+  --bf-leading-mark-group-inset: calc(var(--bf-component-inline-inset-continuation) - var(--bf-leading-mark-offset));
+  --bf-tick-label-offset: var(--bf-leading-mark-offset);
+  --bf-radio-dot-size: calc((var(--bf-control-visual-size) * 0.375) + var(--bf-border-width));
+  --bf-list-marker-dot-size: calc(var(--bf-border-width) * 4);
   --bf-app-drawer-width-icon: 2rem;
   --bf-app-drawer-width-small: 15rem;
   --bf-app-drawer-width-small-max: 20rem;
@@ -137,7 +160,9 @@ ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable comma
   --bf-app-aside-width-max: var(--bf-app-drawer-width-medium-max);
   --bf-app-navigation-width: 15rem;
   --bf-app-navigation-width-collapsed: 3rem;
-  --bf-side-navigation-icon-optical-offset-block: 0.1875rem;
+  --bf-icon-label-optical-offset-block: 0.1875rem;
+  --bf-disclosure-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
+  --bf-side-navigation-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
   --bf-side-navigation-icon-gap: 0.625rem;
   --bf-navigation-bar-min-block-size: calc(var(--bf-baseline) * 6);
   --bf-authoring-accent: #f6b73c;
@@ -150,9 +175,10 @@ ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable comma
   --bf-authoring-accent-focus-ring: rgba(246, 183, 60, 0.55);
   --bf-application-resize-handle-active: var(--bf-authoring-accent-strong);
   --bf-application-resize-handle-focus-ring: var(--bf-authoring-accent-focus-ring);
-  --bf-top-navigation-link-padding-inline: var(--bf-control-inline-padding-action);
-  --bf-top-navigation-end-slot-inline-size: calc(1rem + var(--bf-control-inline-padding-field));
-  --bf-top-navigation-search-toggle-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-control-inline-padding-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
+  --bf-top-navigation-link-padding-inline: var(--bf-component-inline-inset-action);
+  --bf-top-navigation-end-slot-inline-size: calc(1rem + var(--bf-component-inline-inset-field));
+  --bf-top-navigation-search-toggle-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   --bf-top-navigation-link-padding-block: max(var(--bf-body-nudge-start), calc(var(--bf-baseline) * 1.5));
   --bf-top-navigation-search-max-inline-size: 20rem;
   --bf-top-navigation-logo-tag-inline-size: 1.375rem;
@@ -161,18 +187,18 @@ ${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;
   --bf-icon-size-x-large: 4.5rem;
   --bf-icon-size-xx-large: 6rem;
-  --bf-leading-icon-size: calc(var(--bf-baseline) * 2);
-  --bf-leading-icon-gap: calc(var(--bf-baseline) * 1);
-  --bf-leading-icon-offset: ${alignedVisualStart(bodyLineHeight, "var(--bf-leading-icon-size)", bodySelectedStartNudge)};
-  --bf-ui-chip-padding-inline: calc(${bodyLineHeight} * 0.4);
-  --bf-ui-chip-padding-block: max(0rem, calc((var(--bf-control-inline-padding-action) * 0.25) - var(--bf-border-width)));
-  --bf-ui-chip-block-size: calc(${bodyLineHeight} + (var(--bf-ui-chip-padding-block) * 2) + (var(--bf-border-width) * 2));
+  --bf-leading-icon-size: var(--bf-leading-mark-size);
+  --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);
@@ -189,6 +215,7 @@ ${componentAlignmentVars(components)}  /* Action surfaces keep comfortable comma
   --bf-application-navigation-width-collapsed: var(--bf-app-navigation-width-collapsed);
 ${foundryComponentColorVars("light")}
   --bf-ui-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 6.25 8 10l3.75-3.75'/%3E%3C/svg%3E");
+  --bf-ui-icon-number-stepper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 5.75 8 2l3.75 3.75M4.25 10.25 8 14l3.75-3.75'/%3E%3C/svg%3E");
   --bf-ui-icon-close: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
   --bf-ui-icon-error-grey: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='%23111' fill-rule='evenodd'/%3E%3C/svg%3E");
   --bf-ui-icon-search: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='%23111' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -222,16 +249,13 @@ ${(themeSurfaces ?? []).map(surface => {
         const inputBlockPadding = bodySurface && parseRemValue(bodySurface.nudgeTop) > 0
             ? bodySurface.nudgeTop
             : surfaceComponents.controlBlockPadding;
-        const tableRowPadding = bodySurface && parseRemValue(bodySurface.nudgeTop) > 0
-            ? bodySurface.nudgeTop
-            : surfaceComponents.controlCompactBlockPadding;
-        return `:where(.bf-theme.${surface.className}) {\n  --bf-control-baseline-reserve: 0rem;\n  --bf-input-block-padding: ${inputBlockPadding};\n  --bf-button-block-padding: ${inputBlockPadding};\n  --bf-table-row-padding: ${tableRowPadding};\n${componentAlignmentVars(surfaceComponents)}\n}\n`;
+        return `:where(.bf-theme.${surface.className}) {\n  --bf-input-block-padding: ${inputBlockPadding};\n  --bf-button-block-padding: ${inputBlockPadding};\n${componentAlignmentVars(surfaceComponents)}\n}\n`;
     }).join("\n")}
 
-:where(.bf-theme.is-dark),
 :where(.bf-theme.is-dark) {
 ${foundryComponentColorVars("dark")}
   --bf-ui-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 6.25 8 10l3.75-3.75'/%3E%3C/svg%3E");
+  --bf-ui-icon-number-stepper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 5.75 8 2l3.75 3.75M4.25 10.25 8 14l3.75-3.75'/%3E%3C/svg%3E");
   --bf-ui-icon-close: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
   --bf-ui-icon-error-grey: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
   --bf-ui-icon-search: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -315,6 +339,10 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
   grid-template-columns: minmax(0, 1fr);
 }
 
+:where(.bf-theme) :where(.bf-field.is-range.is-stacked) > :where(.bf-control, .bf-form-help) {
+  grid-column: 1;
+}
+
 :where(.bf-theme) :where(.bf-field.is-range.is-stacked) > :where(.bf-control) {
   min-inline-size: 0;
 }
@@ -332,7 +360,7 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
   margin: 0;
   min-inline-size: 0;
   padding-block-end: 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-block-start: var(--bf-panel-padding-block);
 }
 
@@ -353,13 +381,36 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   max-inline-size: 100%;
   min-inline-size: 0;
   margin-bottom: ${inputMarginBottom};
-${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-control-inline-padding-field);
+${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 {
@@ -372,8 +423,8 @@ ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-control-inline
 
 :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):focus-visible {
   background-color: var(--bf-color-background-active);
-  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-input, input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea, select):disabled {
@@ -395,13 +446,13 @@ ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-control-inline
 :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%;
 }
 
@@ -413,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);
+  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 {
@@ -423,16 +475,31 @@ ${controlPadding(controlCompactBlockPaddingVar)}  padding-inline: var(--bf-contr
 
 :where(.bf-theme) :where(select) {
   background-image: var(--bf-ui-icon-chevron-down);
-  background-position: right var(--bf-control-inline-padding-field) center;
+  background-position: right var(--bf-component-inline-inset-field) center;
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
-  padding-inline-end: calc(var(--bf-control-inline-padding-field) * 2.5);
+  overflow: hidden;
+  padding-inline-end: calc(var(--bf-component-inline-inset-field) * 2.5);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 :where(.bf-theme) :where(input[type='number'], .bf-slider-input) {
   font-variant-numeric: tabular-nums;
 }
 
+/* Number fields retain their native input semantics and keyboard stepping,
+   while one field-owned background paints the compact pair. Sharing select's
+   1rem canvas and end position avoids a second browser-reserved spin slot. */
+:where(.bf-theme) :where(input[type='number']) {
+  appearance: textfield;
+  background-image: var(--bf-ui-icon-number-stepper);
+  background-position: right var(--bf-component-inline-inset-field) center;
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  padding-inline-end: calc(var(--bf-component-inline-inset-field) * 2.5);
+}
+
 :where(.bf-theme) :where(.bf-slider-input) {
   flex: 0 1 5rem;
   inline-size: min(100%, 5rem);
@@ -444,12 +511,14 @@ ${controlPadding(controlCompactBlockPaddingVar)}  padding-inline: var(--bf-contr
 
 :where(.bf-theme) :where(input[type='number'])::-webkit-inner-spin-button,
 :where(.bf-theme) :where(input[type='number'])::-webkit-outer-spin-button {
+  appearance: none;
   margin: 0;
 }
 
 :where(.bf-theme) :where(.bf-checkbox, .bf-radio) {
+  display: grid;
   margin: 0;
-  min-block-size: var(--bf-tick-row-block-size);
+  padding-inline-start: var(--bf-leading-mark-group-inset);
   position: relative;
 }
 
@@ -465,12 +534,11 @@ ${controlPadding(controlCompactBlockPaddingVar)}  padding-inline: var(--bf-contr
 
 :where(.bf-theme) :where(.bf-checkbox-label, .bf-radio-label) {
 ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-default);
+  border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: block;
-  margin-bottom: 0;
-  min-block-size: var(--bf-tick-row-block-size);
-  padding-block-end: ${bodySelectedEndNudge};
-  padding-block-start: ${bodySelectedStartNudge};
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
   padding-inline-start: var(--bf-tick-label-offset);
   position: relative;
 }
@@ -501,7 +569,7 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-default)
   border-left: calc(var(--bf-border-width) * 2) solid var(--bf-color-background-default);
   inline-size: calc(var(--bf-control-visual-size) * 0.6);
   inset-inline-start: calc(var(--bf-control-visual-size) * 0.2);
-  inset-block-start: calc(var(--bf-tick-box-offset) + (var(--bf-control-visual-size) * 0.18));
+  inset-block-start: calc(var(--bf-tick-box-offset) + (var(--bf-control-visual-size) * 0.18) + (var(--bf-border-width) * 2));
   opacity: 0;
   transform: rotate(-45deg);
 }
@@ -539,20 +607,19 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-default)
 }
 
 :where(.bf-theme) :where(.bf-checkbox-input:focus-visible + .bf-checkbox-label)::before {
-  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-radio-input:focus-visible + .bf-radio-label)::before {
-  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-switch) {
   align-items: flex-start;
   display: inline-flex;
   gap: var(--bf-field-gap);
-  min-block-size: var(--bf-switch-row-block-size);
   position: relative;
 }
 
@@ -601,8 +668,8 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-default)
 }
 
 :where(.bf-theme) :where(.bf-switch-input:focus-visible + .bf-switch-slider) {
-  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-switch-input:disabled + .bf-switch-slider) {
@@ -611,19 +678,20 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-default)
 
 :where(.bf-theme) :where(.bf-switch-label) {
 ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-default);
+  border-block: var(--bf-border-width) solid transparent;
   cursor: pointer;
   display: inline-block;
-  margin: 0 0 var(--bf-body-margin-bottom);
-  padding-block-end: 0;
-  padding-block-start: ${bodySelectedStartNudge};
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
 }
 
 :where(.bf-theme) :where(.bf-validation-message) {
-${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
-  margin: 0 0 var(--bf-body-margin-bottom);
-  padding-block-end: 0;
-  padding-block-start: ${bodySelectedStartNudge};
-  padding-inline-start: calc(var(--bf-control-visual-size) + var(--bf-field-gap));
+${typeStyles(body, { includeCase: false })}  border-block: var(--bf-border-width) solid transparent;
+  color: var(--bf-color-text-muted);
+  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+  margin-inline-start: var(--bf-leading-mark-group-inset);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
 
@@ -742,6 +810,15 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
   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;
 }
@@ -758,7 +835,7 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
   border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
   block-size: var(--bf-control-visual-size);
   border-radius: 50%;
-  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 0.0625rem rgba(0, 0, 0, 0.2);
   inline-size: var(--bf-control-visual-size);
   margin-top: calc((var(--bf-slider-track-size) - var(--bf-control-visual-size)) / 2);
 }
@@ -784,7 +861,7 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
   border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
   block-size: var(--bf-control-visual-size);
   border-radius: 50%;
-  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 calc(var(--bf-control-visual-size) * 0.25) 0.0625rem rgba(0, 0, 0, 0.2);
   inline-size: var(--bf-control-visual-size);
 }
 
@@ -853,11 +930,11 @@ ${listCss({ bodyTypeStyles })}
 ${typeStyles(body, { includeCase: false })}  background: var(--bf-color-background-alt);
   color: var(--bf-color-link-default);
   display: block;
-  left: -999px;
+  left: -62.4375rem;
   max-inline-size: calc(100vw - var(--bf-baseline));
   position: absolute;
   text-decoration: none;
-  top: -999px;
+  top: -62.4375rem;
 }
 
 :where(.bf-theme) :where(.bf-skip-link:hover) {
@@ -866,7 +943,7 @@ ${typeStyles(body, { includeCase: false })}  background: var(--bf-color-backgrou
 
 :where(.bf-theme) :where(.bf-skip-link:focus, .bf-skip-link:focus-visible) {
   left: calc(var(--bf-baseline) * 0.5);
-  outline: 2px solid var(--bf-color-focus);
+  outline: 0.125rem solid var(--bf-color-focus);
   outline-offset: 0;
   padding-block: calc(var(--bf-baseline) * 1.5);
   padding-inline: calc(var(--bf-baseline) * 1.5);
@@ -884,9 +961,6 @@ ${tableCss({
 ${chipBadgeStatusCss({
         bodyCaseTypeStyles: typeStyles(body),
         bodyLineHeight,
-        bodySelectedStartNudge,
-        h5SelectedEndNudge,
-        h5SelectedStartNudge,
         bodyTypeStyles,
     })}
 
@@ -900,7 +974,7 @@ ${chipBadgeStatusCss({
   margin: 0;
   padding: 0;
   position: relative;
-  text-indent: -9999px;
+  text-indent: -624.9375rem;
 }
 
 :where(.bf-theme) :where(.bf-chip-dismiss) {
@@ -912,7 +986,7 @@ ${chipBadgeStatusCss({
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear)::before,
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear)::after {
   background: currentColor;
-  block-size: 2px;
+  block-size: 0.125rem;
   content: "";
   inline-size: 0.75rem;
   left: 50%;
@@ -933,7 +1007,6 @@ ${searchBoxAndFilterCss({
         bodySelectedStartNudge,
         bodyTypeStyles,
         buttonBlockPaddingVar,
-        h6TypeStyles,
         inputMarginBottom,
     })}
 
@@ -946,8 +1019,7 @@ ${legacyNavigationCss({
         bodySemiboldTypeStyles: typeStyles(body, { fontWeight: 600, includeCase: false }),
         bodyTypeStyles,
         buttonMarginBottom,
-        buttonPadding,
-        compactButtonPadding: controlPadding(controlCompactBlockPaddingVar, "0rem")
+        buttonPadding
     })}
 
 :where(.bf-theme) :where(.bf-contextual-menu, .bf-contextual-menu.is-left, .bf-contextual-menu.is-center) {
@@ -960,7 +1032,7 @@ ${legacyNavigationCss({
 :where(.bf-theme) :where(.bf-contextual-menu-dropdown) {
   background: var(--bf-color-background-default);
   border: var(--bf-border-width) solid var(--bf-color-border-default);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.28);
   display: none;
   list-style: none;
   margin: 0;
@@ -994,7 +1066,7 @@ ${legacyNavigationCss({
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-group) + :where(.bf-contextual-menu-group) {
-  box-shadow: inset 0 1px 0 var(--bf-color-border-default);
+  box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-default);
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-link) {
@@ -1006,8 +1078,9 @@ ${typeStyles(body, { includeCase: false })}  background: transparent;
   display: block;
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: var(--bf-panel-padding-inline);
+  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;
   text-overflow: ellipsis;
@@ -1033,8 +1106,8 @@ ${typeStyles(body, { includeCase: false })}  background: transparent;
 }
 
 :where(.bf-theme) :where(.bf-contextual-menu-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-contextual-menu-link.is-disabled, .bf-contextual-menu-link[disabled]) {
@@ -1057,7 +1130,7 @@ ${typeStyles(body, { includeCase: false })}  background: transparent;
 
 :where(.bf-theme) :where(.bf-tooltip-message) {
 ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-background-alt);
-  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-color-border-default), 0 12px 32px rgba(0, 0, 0, 0.24);
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-color-border-default), 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
   color: var(--bf-color-text-default);
   inline-size: max-content;
   left: 0;
@@ -1066,7 +1139,7 @@ ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-ba
   opacity: 0;
   padding-block-end: ${bodySelectedEndNudge};
   padding-block-start: ${bodySelectedStartNudge};
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   pointer-events: none;
   position: absolute;
   top: 100%;
@@ -1202,7 +1275,7 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
   justify-content: center;
   margin-bottom: ${buttonMarginBottom};
   min-inline-size: var(--bf-control-box-size);
-${controlPadding(buttonBlockPaddingVar)}  padding-inline: var(--bf-control-inline-padding-action);
+${controlPadding(buttonBlockPaddingVar)}  padding-inline: var(--bf-control-inline-padding-action-bordered);
   text-align: center;
   text-decoration: none;
 }
@@ -1216,8 +1289,8 @@ ${controlPadding(buttonBlockPaddingVar)}  padding-inline: var(--bf-control-inlin
 }
 
 :where(.bf-theme) :where(.bf-pagination-link:focus-visible, .bf-pagination-link.is-previous:focus-visible, .bf-pagination-link.is-next: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-pagination-link.is-active, .bf-pagination-link[aria-current='page'], .bf-pagination-link[aria-current='true']) {
@@ -1291,14 +1364,15 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
   appearance: none;
   background: transparent;
   border: 0;
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: flex;
   gap: var(--bf-disclosure-gap);
   inline-size: 100%;
   justify-content: flex-start;
-  min-block-size: var(--bf-control-box-size);
-  padding-block: var(--bf-control-block-padding);
+  margin-block-end: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
   padding-inline: 0;
   text-align: left;
 }
@@ -1308,8 +1382,8 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
 }
 
 :where(.bf-theme) :where(.bf-accordion-tab):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-accordion-tab)::before {
@@ -1322,18 +1396,19 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
   display: inline-block;
   flex: none;
   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-accordion-tab[aria-expanded='false'])::before {
-  transform: rotate(-90deg);
+  transform: translateY(var(--bf-disclosure-icon-optical-offset-block)) rotate(-90deg);
 }
 
 :where(.bf-theme) :where(.bf-accordion-panel) {
   margin: 0;
   overflow: hidden;
   padding-block-start: var(--bf-baseline);
-  padding-inline-start: calc(var(--bf-accordion-indent) + ${roleFontSizeVar("body", body.fontSize)} + var(--bf-baseline));
+  padding-inline-start: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-accordion-panel[aria-hidden='true']) {
@@ -1399,7 +1474,7 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
 :where(.bf-theme) :where(.bf-modal-header, .bf-modal-body, .bf-modal-footer) {
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
   padding-block-start: 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);
 }
 
 :where(.bf-theme) :where(.bf-modal-header) {
@@ -1463,7 +1538,7 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
 :where(.bf-theme) :where(.bf-code-snippet-header) {
   align-items: start;
   background: var(--bf-color-background-active);
-  box-shadow: inset 0 -1px 0 var(--bf-color-border-default);
+  box-shadow: inset 0 -0.0625rem 0 var(--bf-color-border-default);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -1480,7 +1555,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-default);
   margin: 0;
   overflow-wrap: anywhere;
   padding-block: 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-code-snippet-dropdowns) {
@@ -1495,7 +1570,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-default);
 :where(.bf-theme) :where(.bf-code-snippet-header.is-stacked) :where(.bf-code-snippet-dropdowns) {
   justify-content: stretch;
   margin-inline-start: 0;
-  box-shadow: inset 0 1px 0 var(--bf-color-border-default);
+  box-shadow: inset 0 0.0625rem 0 var(--bf-color-border-default);
   width: 100%;
 }
 
@@ -1509,12 +1584,12 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   min-block-size: calc(${bodyLineHeight} + (var(--bf-panel-padding-block) * 2));
   min-inline-size: 0;
   padding-block: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-action);
   text-align: start;
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdown) + :where(.bf-code-snippet-dropdown) {
-  box-shadow: inset 1px 0 0 var(--bf-color-border-default);
+  box-shadow: inset 0.0625rem 0 0 var(--bf-color-border-default);
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdown):focus:not(:focus-visible) {
@@ -1522,8 +1597,8 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-dropdown):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-code-snippet-block, .bf-code-snippet-block.is-icon, .bf-code-snippet-block.is-numbered) {
@@ -1538,7 +1613,7 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   min-inline-size: 0;
   overflow-x: auto;
   padding-block: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   tab-size: 2;
   white-space: pre;
 }
@@ -1554,14 +1629,14 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon) {
   cursor: copy;
-  padding-inline-start: calc(var(--bf-panel-padding-inline) + (var(--bf-baseline) * 3));
+  padding-inline-start: calc(var(--bf-component-inline-inset-continuation) + (var(--bf-baseline) * 3));
   position: relative;
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon)::before {
 ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
   content: "$";
-  inset-inline-start: var(--bf-panel-padding-inline);
+  inset-inline-start: var(--bf-component-inline-inset-continuation);
   inset-block-start: var(--bf-panel-padding-block);
   position: absolute;
 }
@@ -1576,7 +1651,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon.is-copied) {
   background: color-mix(in srgb, var(--bf-color-background-alt) 78%, var(--bf-color-background-information-default));
-  box-shadow: inset 0 0 0 1px var(--bf-color-border-information);
+  box-shadow: inset 0 0 0 0.0625rem var(--bf-color-border-information);
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon):focus:not(:focus-visible) {
@@ -1584,8 +1659,8 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon):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-code-snippet-block.is-numbered) {
@@ -1647,6 +1722,32 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
   z-index: 40;
 }
 
+/* A responsive application brand occupies the persistent bar only while the
+ * full navigation brand is unavailable. The same public tagged-logo contract
+ * is used in both locations; state CSS guarantees that only one copy is
+ * visible and exposed at a time. */
+:where(.bf-theme) :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand) {
+  align-items: start;
+  column-gap: calc(var(--bf-baseline) * 2);
+  padding-inline-end: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+}
+
+:where(.bf-theme) :where(.bf-navigation-bar.is-responsive) {
+  margin-block-end: calc(var(--bf-border-width) * -1);
+}
+
+:where(.bf-theme) :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
+  flex: 1 1 12rem;
+  inline-size: auto;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-application:has(> .bf-navigation:not(.is-collapsed)))
+  > :where(.bf-navigation-bar.is-responsive)
+  :where(.bf-top-navigation-logo) {
+  visibility: hidden;
+}
+
 :where(.bf-theme) :where(.bf-navigation) {
   grid-column: 1 / -1;
   grid-row: 1 / -1;
@@ -1693,7 +1794,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-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);
   visibility: visible;
 }
@@ -1703,10 +1804,10 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-label) {
-  block-size: 1px;
+  block-size: 0.0625rem;
   clip-path: inset(50%);
-  inline-size: 1px;
-  max-inline-size: 1px;
+  inline-size: 0.0625rem;
+  max-inline-size: 0.0625rem;
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
@@ -1724,8 +1825,8 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
   padding-inline: calc(var(--bf-baseline) * 1.25);
 }
 
-:where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-list) {
-  border-bottom-color: transparent;
+:where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-list)::after {
+  content: none;
 }
 
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-item.is-title > .bf-side-navigation-link, .bf-side-navigation-item.is-title > .bf-side-navigation-text) {
@@ -1738,6 +1839,14 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
   grid-template-rows: minmax(0, 1fr);
 }
 
+:where(.bf-theme) :where(.bf-application:has(> .bf-navigation)):has(> .bf-aside.is-pinned:not(.is-collapsed)) {
+  grid-template-areas:
+    "navigation-bar navigation-bar"
+    "main aside";
+  grid-template-columns: minmax(0, 1fr) minmax(0, var(--bf-application-aside-width));
+  grid-template-rows: min-content minmax(0, 1fr);
+}
+
 :where(.bf-theme) :where(.bf-main) {
   grid-area: main;
   min-block-size: 0;
@@ -1776,7 +1885,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 :where(.bf-theme) :where(.bf-aside.is-overlay, .bf-aside.is-drawer) {
   align-self: stretch;
   block-size: auto;
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.38);
   bottom: 0;
   grid-column: 1 / -1;
   grid-row: 1 / -1;
@@ -1866,14 +1975,14 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle)::after {
   background: var(--bf-color-border-default);
-  border-radius: 999px;
+  border-radius: 62.4375rem;
   content: "";
   inset-block: var(--bf-panel-padding-block);
-  inset-inline-start: calc(50% - 1px);
+  inset-inline-start: calc(50% - 0.0625rem);
   opacity: 0.95;
   position: absolute;
   transition: background-color 120ms ease, opacity 120ms ease;
-  width: 2px;
+  width: 0.125rem;
 }
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle):hover::after,
@@ -1883,8 +1992,8 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 }
 
 :where(.bf-theme) :where(.bf-application-aside-resize-handle):focus-visible {
-  outline: 2px solid var(--bf-application-resize-handle-focus-ring);
-  outline-offset: -2px;
+  outline: 0.125rem solid var(--bf-application-resize-handle-focus-ring);
+  outline-offset: -0.125rem;
 }
 
 @media (min-width: 64.75rem) {
@@ -1903,6 +2012,16 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
     grid-template-columns: minmax(0, var(--bf-application-navigation-width)) minmax(0, 1fr) minmax(0, var(--bf-application-aside-width));
   }
 
+  :where(.bf-theme) :where(.bf-application:has(> .bf-navigation:not(.is-collapsed))) > :where(.bf-navigation-bar.is-responsive) {
+    block-size: 0;
+    border: 0;
+    min-block-size: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    visibility: hidden;
+  }
+
   :where(.bf-theme) :where(.bf-application:has(> .bf-navigation.is-collapsed)) {
     --bf-application-navigation-width: var(--bf-application-navigation-width-collapsed);
   }