baseline-foundry 0.1.6 → 0.2.0

package/dist/css-components.js

@@ -1,10 +1,12 @@
 import { buttonActionsCss } from "./css-components/button-actions.js";
 import { articlePaginationCss } from "./css-components/article-pagination.js";
+import { applicationGeometryCss } from "./css-components/application-geometry.js";
 import { cardsOptionsCss } from "./css-components/cards-options.js";
 import { chipBadgeStatusCss } from "./css-components/chip-badge-status.js";
 import { ctaFigureAspectCss } from "./css-components/cta-figure-aspect.js";
 import { controlRowCss } from "./css-components/control-row.js";
 import { contentCardCss } from "./css-components/content-card.js";
+import { alignedVisualStart, controlGeometryCss } from "./css-components/control-geometry.js";
 import { documentNavigationCss } from "./css-components/document-navigation.js";
 import { editorialContentCss } from "./css-components/editorial-content.js";
 import { iconCss } from "./css-components/icon.js";
@@ -16,6 +18,8 @@ import { legacyNavigationCss } from "./css-components/legacy-navigation.js";
 import { linkedLogoSiteLayoutCss } from "./css-components/linked-logo-site-layout.js";
 import { logoMediaCss } from "./css-components/logo-media.js";
 import { navigationLayoutCss } from "./css-components/navigation-layout.js";
+import { navigationGeometryCss } from "./css-components/navigation-geometry.js";
+import { nestedControlsCss } from "./css-components/nested-controls.js";
 import { panelCss } from "./css-components/panel.js";
 import { searchBoxAndFilterCss } from "./css-components/search-box-and-filter.js";
 import { sitesFoundationCss } from "./css-components/sites-foundation.js";
@@ -26,10 +30,8 @@ import { tableCss } from "./css-components/table.js";
 import { tabSectionCss } from "./css-components/tab-section.js";
 import { tabsChoiceBreadcrumbsCss } from "./css-components/tabs-choice-breadcrumbs.js";
 import { tieredListEqualHeightRowCss } from "./css-components/tiered-list-equal-height-row.js";
+import { componentContractsCss } from "./css-component-contracts.js";
 import { foundryComponentColorVars } from "./vanilla-theme-colors.js";
-function parseRemValue(rem) {
-    return Number.parseFloat(rem.replace("rem", ""));
-}
 function roleFontFamilyVar(roleName, fallback) {
     return fallback ? `var(--bf-${roleName}-font-family, ${fallback})` : `var(--bf-${roleName}-font-family)`;
 }
@@ -67,34 +69,15 @@ function roleSelectedStartNudgeVar(roleName, fallback) {
 function roleSelectedEndNudgeVar(roleName, fallback) {
     return fallback ? `var(--bf-${roleName}-nudge-end, ${fallback})` : `var(--bf-${roleName}-nudge-end)`;
 }
-function controlPadding(blockPaddingVar, borderWidthVar = "var(--bf-border-width)") {
-    return `  padding-block: max(0rem, calc(${blockPaddingVar} - ${borderWidthVar}));\n`;
-}
-function controlMarginBottomExpression(lineHeightVar, blockPaddingVar, spaceAfter) {
-    return `calc(${spaceAfter} + mod(calc(var(--bf-baseline) - mod(calc(${lineHeightVar} + (${blockPaddingVar} * 2)), var(--bf-baseline))), var(--bf-baseline)))`;
-}
-function componentAlignmentVars(components) {
-    return `  --bf-border-width: ${components.borderWidth};\n  --bf-bar-thickness: ${components.barThickness};\n  --bf-radius: ${components.radius};\n  --bf-control-block-padding: ${components.controlBlockPadding};\n  --bf-control-block-padding-compact: ${components.controlCompactBlockPadding};\n  --bf-control-box-size: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding) * 2));\n  --bf-control-box-size-compact: calc(var(--bf-body-line-height) + (var(--bf-control-block-padding-compact) * 2));\n  --bf-control-inline-padding: ${components.controlInlinePadding};\n  --bf-control-inline-padding-action: ${components.controlInlinePaddingAction};\n  --bf-control-inline-padding-field: ${components.controlInlinePaddingField};\n  --bf-control-visual-size: ${components.controlVisualSize};\n  --bf-field-gap: ${components.fieldGap};\n  --bf-panel-padding-inline: ${components.panelPaddingInline};\n  --bf-panel-padding-block: ${components.panelPaddingBlock};\n  --bf-accordion-indent: ${components.accordionIndent};\n`;
-}
-function alignedVisualStart(lineHeightVar, visualSize, startVar, offset = "0rem") {
-    if (offset === "0rem") {
-        return `calc(${startVar} + ((${lineHeightVar} - ${visualSize}) / 2))`;
-    }
-    return `calc(${startVar} + ((${lineHeightVar} - ${visualSize}) / 2) + ${offset})`;
-}
 export function componentsCss(tokens, themeSurfaces) {
     const body = tokens.roles.body;
     const h4 = tokens.roles.h4 ?? body;
     const h5 = tokens.roles.h5 ?? body;
     const h6 = tokens.roles.h6 ?? body;
     const baselineUnit = tokens.baselineUnit;
-    const components = tokens.components;
-    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 singleLineRowMarginBottom = controlMarginBottomExpression(bodyLineHeight, buttonBlockPaddingVar, "0rem");
-    const buttonMarginBottom = "var(--bf-single-line-row-margin-block-end)";
+    const inputMarginBottom = "var(--bf-interface-row-compensation-block-end)";
+    const buttonMarginBottom = "var(--bf-interface-row-compensation-block-end)";
     const bodySelectedStartNudge = roleSelectedStartNudgeVar("body", body.nudgeTop);
     const bodySelectedEndNudge = roleSelectedEndNudgeVar("body");
     const h4LineHeight = roleLineHeightVar("h4", h4.lineHeight);
@@ -102,120 +85,14 @@ export function componentsCss(tokens, themeSurfaces) {
     const h6LineHeight = roleLineHeightVar("h6", h6.lineHeight);
     const bodyTypeStyles = typeStyles(body, { includeCase: false });
     const h6TypeStyles = typeStyles(h6, { includeCase: false });
-    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: 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: 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;
-  --bf-app-drawer-width-medium: 29.0625rem;
-  --bf-app-drawer-width-medium-max: 40rem;
-  --bf-app-drawer-width-large: min(100vw, max(40rem, 50vw));
-  --bf-app-aside-width: var(--bf-app-drawer-width-medium);
-  --bf-app-aside-width-min: var(--bf-app-drawer-width-small);
-  --bf-app-aside-width-max: var(--bf-app-drawer-width-medium-max);
-  --bf-app-navigation-width: 15rem;
-  --bf-app-navigation-width-collapsed: 3rem;
-  --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;
-  --bf-authoring-accent-hover: #e0a030;
-  --bf-authoring-accent-line: rgba(246, 183, 60, 0.9);
-  --bf-authoring-accent-strong: rgba(246, 183, 60, 0.95);
-  --bf-authoring-accent-outline: rgba(246, 183, 60, 0.4);
-  --bf-authoring-accent-outline-strong: rgba(246, 183, 60, 0.8);
-  --bf-authoring-accent-shadow: rgba(246, 183, 60, 0.22);
-  --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-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;
-  --bf-top-navigation-logo-tag-block-size: 2.375rem;
-  --bf-top-navigation-logo-icon-size: 1rem;
-  --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-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: 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);
-  --bf-application-drawer-width-icon: var(--bf-app-drawer-width-icon);
-  --bf-application-drawer-width-small: var(--bf-app-drawer-width-small);
-  --bf-application-drawer-width-small-max: var(--bf-app-drawer-width-small-max);
-  --bf-application-drawer-width-medium: var(--bf-app-drawer-width-medium);
-  --bf-application-drawer-width-medium-max: var(--bf-app-drawer-width-medium-max);
-  --bf-application-drawer-width-large: var(--bf-app-drawer-width-large);
-  --bf-application-aside-width: var(--bf-app-aside-width);
-  --bf-application-aside-width-min: var(--bf-app-aside-width-min);
-  --bf-application-aside-width-max: var(--bf-app-aside-width-max);
-  --bf-application-navigation-width: var(--bf-app-navigation-width);
-  --bf-application-navigation-width-collapsed: var(--bf-app-navigation-width-collapsed);
+    const buttonPadding = "  padding-block: var(--bf-interface-row-padding-block);\n";
+    return `${componentContractsCss(tokens, themeSurfaces)}
+${controlGeometryCss({ bodyLineHeight, bodySelectedStartNudge })}
+${applicationGeometryCss()}
+${navigationGeometryCss()}
+:where(.bf-theme) {
 ${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");
@@ -239,23 +116,9 @@ ${foundryComponentColorVars("light")}
   margin-bottom: ${inputMarginBottom};
 }
 
-${(themeSurfaces ?? []).map(surface => {
-        if (!surface.className) {
-            return "";
-        }
-        const surfaceTokens = surface.tokens;
-        const bodySurface = surfaceTokens.roles.body;
-        const surfaceComponents = surfaceTokens.components;
-        const inputBlockPadding = bodySurface && parseRemValue(bodySurface.nudgeTop) > 0
-            ? bodySurface.nudgeTop
-            : surfaceComponents.controlBlockPadding;
-        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) {
 ${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");
@@ -271,7 +134,7 @@ ${foundryComponentColorVars("dark")}
   margin: 0;
 }
 
-.bf-theme button {
+:where(.bf-theme) :where(button) {
   font: inherit;
 }
 
@@ -316,7 +179,7 @@ ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
 
 :where(.bf-theme) :where(.bf-field.is-range) {
   align-items: start;
-  column-gap: calc(var(--bf-baseline) * 2);
+  column-gap: var(--bf-component-inline-inset-field);
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
   row-gap: var(--bf-field-gap);
@@ -360,13 +223,13 @@ ${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-component-inline-inset-continuation);
+  padding-inline: var(--bf-panel-padding-inline);
   padding-block-start: var(--bf-panel-padding-block);
 }
 
 :where(.bf-theme) :where(fieldset, .bf-fieldset) > :where(legend, .bf-legend) {
   margin-bottom: 0;
-  padding-inline: calc(var(--bf-baseline) * 0.5);
+  padding-inline: var(--bf-inline-unit);
 }
 
 :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) {
@@ -381,7 +244,8 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   max-inline-size: 100%;
   min-inline-size: 0;
   margin-bottom: ${inputMarginBottom};
-${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-component-inline-inset-field);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-field);
 }
 
 :where(.bf-theme) :where(.bf-color-control) {
@@ -398,8 +262,8 @@ ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-component-inli
   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);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
   visibility: hidden;
 }
 
@@ -408,7 +272,7 @@ ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-component-inli
   block-size: auto;
   grid-area: color-control;
   inline-size: 100%;
-  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  margin-bottom: var(--bf-interface-row-compensation-block-end);
   min-block-size: 0;
   padding: var(--bf-border-width);
 }
@@ -439,7 +303,7 @@ ${controlPadding(inputBlockPaddingVar)}  padding-inline: var(--bf-component-inli
 
 :where(.bf-theme) :where(textarea) {
   block-size: auto;
-  min-block-size: calc(var(--bf-control-box-size) * 2);
+  min-block-size: calc((var(--bf-interface-row-occupied-block-size) * 2) - var(--bf-interface-row-compensation-block-end));
   resize: vertical;
 }
 
@@ -465,8 +329,8 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   cursor: pointer;
   margin-inline-end: var(--bf-field-gap);
   min-block-size: 0;
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
 }
 
 :where(.bf-theme) :where(input[type='file'])::file-selector-button:hover {
@@ -479,7 +343,7 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
   overflow: hidden;
-  padding-inline-end: calc(var(--bf-component-inline-inset-field) * 2.5);
+  padding-inline-end: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -488,16 +352,14 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   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. */
+/* Keep the browser-owned number stepper. A painted replacement cannot expose
+   the native pointer targets, min/max handling, or platform accessibility. */
 :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);
+  appearance: auto;
+}
+
+:where(.bf-theme) :where(select:dir(rtl)) {
+  background-position: left var(--bf-component-inline-inset-field) center;
 }
 
 :where(.bf-theme) :where(.bf-slider-input) {
@@ -509,12 +371,6 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
   text-align: right;
 }
 
-: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;
@@ -537,8 +393,8 @@ ${typeStyles(body, { includeCase: false })}  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-start: var(--bf-tick-label-offset);
   position: relative;
 }
@@ -681,16 +537,16 @@ ${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-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);
 }
 
 :where(.bf-theme) :where(.bf-validation-message) {
 ${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: 0 0 var(--bf-interface-row-compensation-block-end);
   margin-inline-start: var(--bf-leading-mark-group-inset);
-  padding-block: var(--bf-single-line-row-padding-block);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline-start: var(--bf-leading-mark-offset);
   position: relative;
 }
@@ -877,6 +733,8 @@ ${iconCss()}
 
 ${buttonActionsCss({ bodyTypeStyles, buttonMarginBottom, buttonPadding })}
 
+${nestedControlsCss()}
+
 ${ctaFigureAspectCss()}
 
 ${editorialContentCss({ noticeTitleTypeStyles: typeStyles(h4, { includeCase: false }) })}
@@ -930,8 +788,8 @@ ${listCss({ bodyTypeStyles })}
 ${typeStyles(body, { includeCase: false })}  background: var(--bf-color-background-alt);
   color: var(--bf-color-link-default);
   display: block;
-  left: -62.4375rem;
-  max-inline-size: calc(100vw - var(--bf-baseline));
+  inset-inline-start: -62.4375rem;
+  max-inline-size: calc(100vw - (var(--bf-inline-unit) * 2));
   position: absolute;
   text-decoration: none;
   top: -62.4375rem;
@@ -942,11 +800,11 @@ ${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);
+  inset-inline-start: var(--bf-inline-unit);
   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);
+  padding-inline: var(--bf-component-inline-inset-action);
   position: fixed;
   top: calc(var(--bf-baseline) * 0.5);
   z-index: 999999;
@@ -960,7 +818,6 @@ ${tableCss({
 
 ${chipBadgeStatusCss({
         bodyCaseTypeStyles: typeStyles(body),
-        bodyLineHeight,
         bodyTypeStyles,
     })}
 
@@ -1006,7 +863,6 @@ ${chipBadgeStatusCss({
 ${searchBoxAndFilterCss({
         bodySelectedStartNudge,
         bodyTypeStyles,
-        buttonBlockPaddingVar,
         inputMarginBottom,
     })}
 
@@ -1078,8 +934,8 @@ ${typeStyles(body, { includeCase: false })}  background: transparent;
   display: block;
   margin: 0;
   overflow: hidden;
-  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-block-end: var(--bf-in-box-row-padding-block-end);
+  padding-block-start: var(--bf-in-box-row-padding-block-start);
   padding-inline: var(--bf-component-inline-inset-action);
   text-align: left;
   text-decoration: none;
@@ -1117,6 +973,8 @@ ${typeStyles(body, { includeCase: false })}  background: transparent;
 }
 
 :where(.bf-theme) :where(.bf-tooltip) {
+  --bf-tooltip-arrow-size: calc(var(--bf-baseline) * 0.5);
+  --bf-tooltip-arrow-offset-inline: calc(var(--bf-tooltip-arrow-size) * 1.5);
   display: inline-flex;
   position: relative;
   text-decoration: inherit;
@@ -1133,7 +991,7 @@ ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-ba
   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;
+  inset-inline-start: 0;
   margin: 0;
   max-inline-size: min(20rem, calc(100vw - (var(--bf-baseline) * 4)));
   opacity: 0;
@@ -1157,17 +1015,17 @@ ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-ba
 
 :where(.bf-theme) :where(.bf-tooltip-message)::before {
   block-size: 0;
-  border-bottom: calc(var(--bf-baseline) * 0.5) solid var(--bf-color-background-alt);
-  border-inline: calc(var(--bf-baseline) * 0.5) solid transparent;
+  border-bottom: var(--bf-tooltip-arrow-size) solid var(--bf-color-background-alt);
+  border-inline: var(--bf-tooltip-arrow-size) solid transparent;
   bottom: 100%;
   content: "";
   inline-size: 0;
-  left: calc(var(--bf-baseline) * 0.75);
+  inset-inline-start: var(--bf-tooltip-arrow-offset-inline);
   position: absolute;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-detached) > :where(.bf-tooltip-message) {
-  left: auto;
+  inset-inline-start: auto;
   pointer-events: auto;
   position: static;
   top: auto;
@@ -1179,23 +1037,23 @@ ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-ba
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-center) > :where(.bf-tooltip-message) {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(var(--bf-baseline) - var(--bf-border-width)));
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-center) > :where(.bf-tooltip-message)::before {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-right) > :where(.bf-tooltip-message) {
-  left: auto;
-  right: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-btm-right) > :where(.bf-tooltip-message)::before {
-  left: auto;
-  right: calc(var(--bf-baseline) * 0.75);
+  inset-inline-end: var(--bf-tooltip-arrow-offset-inline);
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-left, .bf-tooltip.is-top-center, .bf-tooltip.is-top-right) > :where(.bf-tooltip-message) {
@@ -1206,30 +1064,30 @@ ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-ba
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-left, .bf-tooltip.is-top-center, .bf-tooltip.is-top-right) > :where(.bf-tooltip-message)::before {
   border-bottom: 0;
-  border-inline: calc(var(--bf-baseline) * 0.5) solid transparent;
-  border-top: calc(var(--bf-baseline) * 0.5) solid var(--bf-color-background-alt);
+  border-inline: var(--bf-tooltip-arrow-size) solid transparent;
+  border-top: var(--bf-tooltip-arrow-size) solid var(--bf-color-background-alt);
   bottom: auto;
   top: 100%;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-center) > :where(.bf-tooltip-message) {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, calc(var(--bf-baseline) * -1));
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-center) > :where(.bf-tooltip-message)::before {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-right) > :where(.bf-tooltip-message) {
-  left: auto;
-  right: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(.bf-tooltip.is-top-right) > :where(.bf-tooltip-message)::before {
-  left: auto;
-  right: calc(var(--bf-baseline) * 0.75);
+  inset-inline-end: var(--bf-tooltip-arrow-offset-inline);
+  inset-inline-start: auto;
 }
 
 :where(.bf-theme) :where(nav.bf-pagination) {
@@ -1258,9 +1116,10 @@ ${typeStyles(body, { includeCase: false })}  background-color: var(--bf-color-ba
 
 :where(.bf-theme) :where(.bf-pagination-item.is-truncation) {
 ${typeStyles(body, { includeCase: false })}  color: var(--bf-color-text-muted);
-  min-block-size: var(--bf-control-box-size);
-  padding-block: var(--bf-control-block-padding);
-  padding-inline: calc(var(--bf-baseline) * 0.5);
+  border-block: var(--bf-border-width) solid transparent;
+  margin-block-end: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-inline-unit);
 }
 
 :where(.bf-theme) :where(.bf-pagination-link, .bf-pagination-link.is-previous, .bf-pagination-link.is-next) {
@@ -1271,15 +1130,20 @@ ${typeStyles(body, { includeCase: false })}  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-bottom: ${buttonMarginBottom};
-  min-inline-size: var(--bf-control-box-size);
-${controlPadding(buttonBlockPaddingVar)}  padding-inline: var(--bf-control-inline-padding-action-bordered);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-align: center;
   text-decoration: none;
 }
 
+:where(.bf-theme) :where(.bf-pagination-link:not(.is-previous):not(.is-next)) {
+  min-inline-size: var(--bf-square-block-size);
+  padding-inline: 0;
+}
+
 :where(.bf-theme) :where(.bf-pagination-link:hover, .bf-pagination-link.is-previous:hover, .bf-pagination-link.is-next:hover) {
   background-color: var(--bf-color-background-hover);
 }
@@ -1371,9 +1235,9 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
   gap: var(--bf-disclosure-gap);
   inline-size: 100%;
   justify-content: flex-start;
-  margin-block-end: var(--bf-single-line-row-margin-block-end);
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: 0;
+  margin-block-end: var(--bf-interface-row-compensation-block-end);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-disclosure-group-inset) 0;
   text-align: left;
 }
 
@@ -1434,7 +1298,7 @@ ${typeStyles(body, { includeCase: false })}  align-items: center;
 }
 
 :where(.bf-theme) :where(.bf-modal.is-workflow) {
-  --bf-modal-workflow-viewport-gap: calc(var(--bf-baseline) * 4);
+  --bf-modal-workflow-viewport-gap: var(--bf-component-inline-inset-continuation);
   --bf-modal-workflow-max-inline-size: 42rem;
   --bf-modal-workflow-min-inline-size: 32rem;
   --bf-modal-workflow-max-block-size: 40rem;
@@ -1474,7 +1338,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-component-inline-inset-continuation);
+  padding-inline: var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-modal-header) {
@@ -1629,7 +1493,7 @@ ${typeStyles(body, { includeCase: false })}  appearance: none;
 
 :where(.bf-theme) :where(.bf-code-snippet-block.is-icon) {
   cursor: copy;
-  padding-inline-start: calc(var(--bf-component-inline-inset-continuation) + (var(--bf-baseline) * 3));
+  padding-inline-start: calc(var(--bf-component-inline-inset-continuation) + var(--bf-leading-mark-gap));
   position: relative;
 }
 
@@ -1728,8 +1592,8 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
  * 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));
+  column-gap: var(--bf-leading-mark-gap);
+  padding-inline-end: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-navigation-bar.is-responsive) {
@@ -1822,7 +1686,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-link, .bf-side-navigation-text) {
   align-items: center;
   justify-content: center;
-  padding-inline: calc(var(--bf-baseline) * 1.25);
+  padding-inline: var(--bf-component-inline-inset-action);
 }
 
 :where(.bf-theme) :where(.bf-navigation.is-collapsed) :where(.bf-side-navigation-list)::after {
@@ -1830,7 +1694,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
 }
 
 :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) {
-  padding-inline: calc(var(--bf-baseline) * 1.25);
+  padding-inline: var(--bf-component-inline-inset-action);
 }
 
 :where(.bf-theme) :where(.bf-application:has(> .bf-aside.is-pinned:not(.is-collapsed))) {
@@ -1957,7 +1821,7 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
   cursor: ew-resize;
   display: none;
   inset-block: 0;
-  inset-inline-start: calc(var(--bf-baseline) * -3);
+  inset-inline-start: calc(var(--bf-inline-unit) * -3);
   outline: none;
   position: absolute;
   touch-action: none;
@@ -1974,7 +1838,7 @@ ${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);
+  background: transparent;
   border-radius: 62.4375rem;
   content: "";
   inset-block: var(--bf-panel-padding-block);
@@ -1996,7 +1860,9 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
   outline-offset: -0.125rem;
 }
 
-@media (min-width: 64.75rem) {
+/* Application navigation becomes persistent at 48rem. Standalone top and
+ * document navigation keep their own large-screen contracts. */
+@media (min-width: 48rem) {
   :where(.bf-theme) :where(.bf-application:has(> .bf-navigation)) {
     grid-template-areas:
       "navigation-bar navigation-bar"
@@ -2039,6 +1905,10 @@ ${typeStyles(h6, { includeCase: false })}  color: var(--bf-color-text-muted);
     display: none;
   }
 
+  :where(.bf-theme) :where(.bf-application) :where(.bf-side-navigation-toggle) {
+    display: none;
+  }
+
   :where(.bf-theme) :where(.bf-navigation-drawer),
   :where(.bf-theme) :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer) {
     block-size: 100%;