baseline-foundry 0.1.6 → 0.2.0

package/dist/css-app-tier.js

@@ -1,34 +1,12 @@
 export function appTierPresetCss(scopes) {
     const scoped = (suffix = "") => scopes.map(scope => `${scope}${suffix}`).join(",\n");
-    return `/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
+    return `/* Canonical app-tier preset: application chrome only. Component
+   typography and spacing resolve from the tier inputs in their source modules. */
 ${scoped()} {
   --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
-  --bf-radius: 0;
   color-scheme: light;
 }
 
-${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message)")} {
-  font-family: inherit;
-  font-size: var(--bf-body-font-size);
-  font-style: normal;
-  font-weight: 400;
-  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);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--bf-body-line-height);
-}
-
 ${scoped(" :where(.bf-application)")} {
   background: var(--bf-app-demo-page-bg);
 }
@@ -39,13 +17,6 @@ ${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
   box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.12), 0 0 0.1875rem rgba(0, 0, 0, 0.12);
 }
 
-${scoped(" :where(.bf-panel-header)")} {
-  align-items: start;
-  gap: calc(var(--bf-baseline) * 1.5);
-  padding-block-end: var(--bf-panel-padding-block);
-  padding-block-start: var(--bf-panel-padding-block);
-}
-
 ${scoped(" :where(.bf-panel-header.is-navigation-brand)")} {
   gap: 0;
   padding-block: 0;
@@ -56,22 +27,10 @@ ${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
 }
 
 ${scoped(" :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand)")} {
-  gap: calc(var(--bf-baseline) * 2);
+  gap: var(--bf-leading-mark-gap);
   padding-block: 0;
 }
 
-${scoped(" :where(.bf-panel-controls)")} {
-  gap: calc(var(--bf-baseline) * 1.5);
-}
-
-${scoped(" :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title)")} {
-  font-family: inherit;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5rem;
-}
-
 ${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true'])")} {
   background: transparent;
   box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
@@ -79,8 +38,7 @@ ${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[a
 
 ${scoped(" :where(.bf-navigation-bar)")},
 ${scoped(" :where(.bf-navigation-drawer)")},
-${scoped(" :where(.bf-aside)")},
-${scoped(" :where(.bf-panel)")} {
+${scoped(" :where(.bf-aside)")} {
   background: var(--vf-color-background-default, #ffffff);
 }
 

package/dist/css-component-contracts.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeSurface, ThemeTokens } from "./types.js";
+/**
+ * Shared component spacing contracts. Tier scopes provide facts; every
+ * derived value below remains expressed in those facts so class-scoped and
+ * direct tier bundles use identical geometry.
+ */
+export declare function componentContractsCss(tokens: ThemeTokens, themeSurfaces?: ThemeSurface[]): string;

package/dist/css-component-contracts.js

@@ -0,0 +1,82 @@
+function componentInputDeclarations(components) {
+    return `  --bf-border-width: ${components.borderWidth};
+  --bf-bar-thickness: ${components.barThickness};
+  --bf-radius: ${components.radius};
+  --bf-component-inline-inset-action-bordered: max(0rem, calc(var(--bf-component-inline-inset-action) - var(--bf-border-width)));
+  --bf-control-visual-size: ${components.controlVisualSize};
+`;
+}
+/**
+ * Shared component spacing contracts. Tier scopes provide facts; every
+ * derived value below remains expressed in those facts so class-scoped and
+ * direct tier bundles use identical geometry.
+ */
+export function componentContractsCss(tokens, themeSurfaces = []) {
+    const body = tokens.roles.body;
+    const bodyLineHeight = `var(--bf-body-line-height, ${body.lineHeight})`;
+    const bodyNudgeStart = `var(--bf-body-nudge-start, ${body.nudgeTop})`;
+    return `:where(.bf-theme) {
+${componentInputDeclarations(tokens.components)}  /* Three authoritative component content insets. Page margins, grid
+     gutters, surface placement and navigation depth remain structural. */
+
+  /* Regular single-line interface rows use one metric-derived occupied block.
+     Visible and transparent block borders both consume the frame slots. */
+  --bf-interface-row-line-height: ${bodyLineHeight};
+  --bf-interface-row-padding-block: max(0rem, calc(${bodyNudgeStart} - var(--bf-border-width)));
+  --bf-interface-row-painted-block-size: calc(var(--bf-interface-row-line-height) + (var(--bf-interface-row-padding-block) * 2) + (var(--bf-border-width) * 2));
+  --bf-interface-row-compensation-block-end: mod(calc(var(--bf-baseline) - mod(var(--bf-interface-row-painted-block-size), var(--bf-baseline))), var(--bf-baseline));
+  --bf-interface-row-occupied-block-size: calc(var(--bf-interface-row-painted-block-size) + var(--bf-interface-row-compensation-block-end));
+  --bf-interface-row-content-offset-block-start: calc(var(--bf-border-width) + var(--bf-interface-row-padding-block));
+  --bf-interface-row-visual-offset: calc(var(--bf-interface-row-content-offset-block-start) + ((var(--bf-interface-row-line-height) - var(--bf-control-visual-size)) / 2));
+
+  /* Host-owned rows keep the same occupied target but absorb compensation
+     inside the box. A ruled host subtracts its separator in its own module. */
+  --bf-in-box-row-padding-block-start: var(--bf-interface-row-content-offset-block-start);
+  --bf-in-box-row-padding-block-end: max(0rem, calc(var(--bf-interface-row-occupied-block-size) - var(--bf-interface-row-line-height) - var(--bf-in-box-row-padding-block-start)));
+
+  /* Nested children fit inside the host body line and contribute no external
+     compensation. Zero-footprint surfaces and real two-border controls use
+     the body line minus one baseline; build validation proves that this line
+     can contain the font, visual and framed ledgers for every tier. */
+  --bf-nested-row-line-height: calc(var(--bf-interface-row-line-height) - var(--bf-baseline));
+  --bf-nested-row-padding-block: max(0rem, calc((var(--bf-interface-row-line-height) - var(--bf-nested-row-line-height)) / 2));
+  --bf-nested-row-painted-block-size: calc(var(--bf-nested-row-line-height) + (var(--bf-nested-row-padding-block) * 2));
+  --bf-nested-framed-row-padding-block: max(0rem, calc((var(--bf-interface-row-line-height) - var(--bf-nested-row-line-height) - (var(--bf-border-width) * 2)) / 2));
+  --bf-nested-framed-row-painted-block-size: calc(var(--bf-nested-row-line-height) + (var(--bf-nested-framed-row-padding-block) * 2) + (var(--bf-border-width) * 2));
+  --bf-nested-framed-row-visual-offset: calc(var(--bf-border-width) + var(--bf-nested-framed-row-padding-block) + ((var(--bf-nested-row-line-height) - var(--bf-control-visual-size)) / 2));
+
+  /* Block-derived members consume one inline-minimum name. The default is
+     the regular framed paint; selectors below re-point the name to what each
+     member actually paints, rather than to the row ledger it occupies. */
+  --bf-square-block-size: var(--bf-interface-row-painted-block-size);
+
+  /* Leading marks are positioned backwards from the continuation copy inset;
+     a mark never creates a fourth content inset. */
+  --bf-leading-mark-size: var(--bf-control-visual-size);
+  --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);
+}
+
+:where(.bf-theme) :where(.bf-badge) {
+  --bf-square-block-size: var(--bf-interface-row-line-height);
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  --bf-square-block-size: var(--bf-nested-row-line-height);
+}
+
+:where(.bf-theme) :where(.bf-button.is-link.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  --bf-square-block-size: var(--bf-body-line-height);
+}
+
+:where(.bf-theme) :where(.bf-notification-close) {
+  --bf-square-block-size: var(--bf-notification-close-painted-block-size);
+}
+
+${themeSurfaces
+        .filter(surface => surface.className)
+        .map(surface => `:where(.bf-theme.${surface.className}) {\n${componentInputDeclarations(surface.tokens.components)}}`)
+        .join("\n\n")}
+`;
+}

package/dist/css-components/application-geometry.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Application-shell dimensions. These are shell facts, not component inset
+ * or occupied-row contracts; colors remain owned by the theme color map.
+ */
+export declare function applicationGeometryCss(): string;

package/dist/css-components/application-geometry.js

@@ -0,0 +1,31 @@
+/**
+ * Application-shell dimensions. These are shell facts, not component inset
+ * or occupied-row contracts; colors remain owned by the theme color map.
+ */
+export function applicationGeometryCss() {
+    return `:where(.bf-theme) {
+  --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-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);
+}
+`;
+}

package/dist/css-components/article-pagination.js

@@ -22,9 +22,9 @@ export function articlePaginationCss(options) {
   box-sizing: border-box;
   color: var(--bf-color-text-default);
   display: grid;
-  column-gap: var(--bf-space-2);
+  column-gap: var(--bf-leading-mark-gap);
   grid-template-rows: auto auto;
-  inline-size: calc((100cqi - var(--bf-space-2)) / 2);
+  inline-size: calc((100cqi - var(--bf-leading-mark-gap)) / 2);
   min-inline-size: 0;
   padding-block: calc(var(--bf-space-2) + (var(--bf-baseline) / 4) - var(--bf-border-width));
   position: relative;
@@ -49,7 +49,7 @@ export function articlePaginationCss(options) {
 :where(.bf-theme) :where(.bf-article-pagination-link.is-previous) {
   grid-column: 1;
   grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
-  padding-inline: var(--bf-space-1) var(--bf-space-2);
+  padding-inline: var(--bf-leading-mark-gap) var(--bf-component-inline-inset-action);
   text-align: start;
 }
 
@@ -57,7 +57,7 @@ export function articlePaginationCss(options) {
   grid-column: 2;
   grid-template-columns: minmax(0, 1fr) var(--bf-icon-size-default);
   justify-self: end;
-  padding-inline: var(--bf-space-2) var(--bf-space-1);
+  padding-inline: var(--bf-component-inline-inset-action) var(--bf-leading-mark-gap);
   text-align: end;
 }
 
@@ -94,6 +94,7 @@ ${bodyCaseTypeStyles}  color: inherit;
 
 :where(.bf-theme) :where(.bf-article-pagination-direction > .bf-icon) {
   --bf-icon-size: var(--bf-icon-size-default);
+  margin-block-start: 0;
 }
 
 :where(.bf-theme) .bf-article-pagination:dir(rtl) .bf-article-pagination-link.is-previous .bf-icon {
@@ -126,7 +127,7 @@ ${titleTypeStyles}  color: inherit;
   :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child)) {
     grid-template-columns: var(--bf-icon-size-default);
     inline-size: calc(var(--bf-space-6) + var(--bf-space-1));
-    padding-inline: var(--bf-space-1);
+    padding-inline: var(--bf-leading-mark-gap);
   }
 
   :where(.bf-theme) :where(.bf-article-pagination-link.is-next:not(:only-child)) {

package/dist/css-components/button-actions.js

@@ -9,7 +9,7 @@ ${bodyTypeStyles}  appearance: none;
   cursor: pointer;
   display: inline-block;
   margin-bottom: ${buttonMarginBottom};
-${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordered);
+${buttonPadding}  padding-inline: var(--bf-component-inline-inset-action-bordered);
   text-align: center;
   text-decoration: none;
 }
@@ -138,7 +138,7 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordere
 
 :where(.bf-theme) :where(.bf-button.is-icon) {
   align-items: center;
-  column-gap: var(--bf-space-1);
+  column-gap: var(--bf-leading-mark-gap);
   display: inline-flex;
   justify-content: center;
 }
@@ -146,21 +146,44 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordere
 /* An icon-only flex button has no text line box to preserve the occupied
  * control rhythm. A zero-width metric strut restores the active body line
  * without imposing a target block size or changing icon/label spacing. */
-:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label))) {
+:where(.bf-theme) :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  --bf-action-target-overflow: max(0rem, calc((24px - var(--bf-square-block-size)) / 2));
+
   column-gap: 0;
+  justify-self: start;
+  margin-inline: var(--bf-action-target-overflow);
+  min-inline-size: var(--bf-square-block-size);
+  padding-inline: 0;
+  position: relative;
 }
 
-:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label)))::before {
+:where(.bf-theme) :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label)))::before {
   block-size: var(--bf-body-line-height);
   content: "";
   inline-size: 0;
 }
 
+/* WCAG 2.2 SC 2.5.8 defines its minimum in CSS pixels. This transparent,
+ * out-of-flow box extends only the pointer target; it does not change the
+ * control's paint or occupied block geometry. */
+:where(.bf-theme) :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label)))::after {
+  block-size: max(100%, 24px);
+  content: "";
+  inline-size: max(100%, 24px);
+  left: 50%;
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  translate: -50% -50%;
+}
+
 :where(.bf-theme) :where(.bf-button-label) {
   min-inline-size: 0;
 }
 
 :where(.bf-theme) :where(.bf-actions) {
+  --bf-action-target-row-gap-floor: var(--bf-baseline);
+
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -168,6 +191,19 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordere
   min-inline-size: 0;
 }
 
+/* Row-gap has no single-line cost and cannot move a flex item's paint. BF's
+ * wrapping primitives therefore own a positive block-axis target separation
+ * without inspecting their descendants through :has(). */
+:where(.bf-theme) :where(.bf-actions:not(.is-nowrap)) {
+  row-gap: max(var(--bf-field-gap), var(--bf-action-target-row-gap-floor));
+}
+
+:where(.bf-theme) :where(.bf-cluster:not(.is-nowrap)) {
+  --bf-action-target-row-gap-floor: var(--bf-baseline);
+
+  row-gap: max(var(--bf-cluster-space), var(--bf-action-target-row-gap-floor));
+}
+
 :where(.bf-theme) :where(.bf-actions.is-end) {
   justify-content: flex-end;
 }
@@ -178,6 +214,34 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordere
   scrollbar-width: thin;
 }
 
+/* A nowrap row becomes a clipping scrollport. Only direct icon-only targets
+ * reserve their own block overflow, so text-only strips keep their original
+ * block size and leading keyline. Existing target-owned inline margins supply
+ * the corresponding logical-edge scroll extent. */
+:where(.bf-theme) :where(.bf-actions.is-nowrap) > :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  --bf-action-target-block-clearance: var(--bf-baseline);
+
+  margin-block-end: calc(var(--bf-action-target-block-clearance) + ${buttonMarginBottom});
+  margin-block-start: var(--bf-action-target-block-clearance);
+}
+
+:where(.bf-theme) :where(.bf-actions.is-nowrap) > :where(.bf-button.is-link.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+  margin-block-end: var(--bf-action-target-block-clearance);
+}
+
+/* Modern CSS rounds the exact inter-row and per-edge scrollport shortfalls up
+ * to the active baseline. The one-baseline fallback is safe for built-in tiers
+ * and remains on phase in older engines. */
+@supports (row-gap: round(up, 0.0625rem, 0.0625rem)) {
+  :where(.bf-theme) :where(.bf-actions:not(.is-nowrap), .bf-cluster:not(.is-nowrap)) {
+    --bf-action-target-row-gap-floor: round(up, max(0rem, calc(24px - var(--bf-body-line-height) + var(--bf-border-width))), var(--bf-baseline));
+  }
+
+  :where(.bf-theme) :where(.bf-actions.is-nowrap) > :where(.bf-button.is-icon:not(.is-nested):not(:has(.bf-button-label))) {
+    --bf-action-target-block-clearance: round(up, max(0rem, calc((24px - var(--bf-body-line-height)) / 2)), var(--bf-baseline));
+  }
+}
+
 :where(.bf-theme) :where(.bf-actions.is-nowrap) > * {
   flex: 0 0 auto;
 }

package/dist/css-components/cards-options.js

@@ -115,7 +115,7 @@ export function cardsOptionsCss(options) {
 
 :where(.bf-theme) :where(.bf-option-grid) {
   display: grid;
-  gap: calc(var(--bf-baseline) * 2.5);
+  gap: var(--bf-component-inline-inset-action);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
 }
 
@@ -128,7 +128,7 @@ export function cardsOptionsCss(options) {
   display: grid;
   gap: var(--bf-field-gap);
   margin: 0;
-  min-block-size: calc((var(--bf-control-box-size) * 2) + var(--bf-baseline));
+  min-block-size: calc((var(--bf-interface-row-occupied-block-size) * 2) + var(--bf-baseline));
   min-inline-size: 0;
   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));

package/dist/css-components/chip-badge-status.d.ts

@@ -1,6 +1,5 @@
 type ChipBadgeStatusCssOptions = {
     bodyCaseTypeStyles: string;
-    bodyLineHeight: string;
     bodyTypeStyles: string;
 };
 export declare function chipBadgeStatusCss(options: ChipBadgeStatusCssOptions): string;

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

@@ -1,6 +1,13 @@
 export function chipBadgeStatusCss(options) {
-    const { bodyCaseTypeStyles, bodyLineHeight, bodyTypeStyles, } = options;
-    return `:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) {
+    const { bodyCaseTypeStyles, bodyTypeStyles, } = options;
+    return `:where(.bf-theme) {
+  --bf-ui-chip-padding-inline: var(--bf-component-inline-inset-action);
+  --bf-ui-chip-radius: 999rem;
+  --bf-ui-badge-padding-inline: var(--bf-border-width);
+  --bf-ui-badge-overhang: calc(var(--bf-ui-badge-padding-inline) * -0.75);
+}
+
+:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) {
   --bf-ui-chip-border: var(--bf-color-border-neutral);
   --bf-ui-chip-border-hover: var(--bf-color-border-neutral);
   --bf-ui-chip-border-active: var(--bf-color-border-neutral);
@@ -15,10 +22,14 @@ ${bodyTypeStyles}  align-items: baseline;
   display: inline-flex;
   gap: 0;
   inline-size: fit-content;
+  justify-content: center;
   justify-self: start;
-  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-single-line-row-margin-block-end) 0;
+  margin: 0 var(--bf-component-inline-inset-field) var(--bf-interface-row-compensation-block-end) 0;
   max-inline-size: 100%;
-  padding-block: var(--bf-single-line-row-padding-block);
+  min-inline-size: min(100%, calc(var(--bf-interface-row-painted-block-size) + (var(--bf-border-width) * 2)));
+  padding-block: var(--bf-interface-row-padding-block);
+  /* Chips use the Action text keyline. The paint-derived floor only governs
+     very short dense labels, keeping them stadium-shaped rather than circular. */
   padding-inline: max(0rem, calc(var(--bf-ui-chip-padding-inline) - var(--bf-border-width)));
   position: relative;
   text-decoration: none;
@@ -111,17 +122,17 @@ ${bodyTypeStyles}  color: var(--bf-color-text-muted);
 ${bodyTypeStyles}  align-items: center;
   background-color: var(--bf-color-text-default);
   border-radius: 1rem;
-  box-sizing: content-box;
   color: var(--bf-color-background-default);
   display: inline-block;
+  inline-size: fit-content;
+  justify-self: start;
   margin: 0;
-  max-inline-size: 4ch;
-  min-width: calc(${bodyLineHeight} - (var(--bf-ui-badge-padding-inline) * 2));
-  overflow: hidden;
+  min-inline-size: var(--bf-square-block-size);
   padding-block: 0;
   padding-inline: var(--bf-ui-badge-padding-inline);
   text-align: center;
   text-indent: 0;
+  white-space: nowrap;
 }
 
 :where(.bf-theme) :where(.bf-badge.is-negative) {
@@ -132,7 +143,7 @@ ${bodyTypeStyles}  align-items: center;
 :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) :where(.bf-badge, .bf-badge.is-negative) {
   align-self: center;
   margin-inline-end: var(--bf-ui-badge-overhang);
-  margin-inline-start: var(--bf-ui-chip-padding-inline);
+  margin-inline-start: var(--bf-component-inline-inset-field);
 }
 
 :where(.bf-theme) :where(.bf-status-label, .bf-status-label.is-positive, .bf-status-label.is-caution, .bf-status-label.is-information, .bf-status-label.is-negative) {
@@ -144,11 +155,11 @@ ${bodyTypeStyles}  align-items: center;
   display: inline-block;
   inline-size: fit-content;
   justify-self: start;
-${bodyTypeStyles}  margin: 0 0 var(--bf-single-line-row-margin-block-end);
+${bodyTypeStyles}  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   /* Status paint is physically symmetric and shares the same occupied block
      as a button; typography still comes from the body role. */
-  padding-block: var(--bf-single-line-row-padding-block);
-  padding-inline: var(--bf-ui-chip-padding-inline);
+  padding-block: var(--bf-interface-row-padding-block);
+  padding-inline: var(--bf-component-inline-inset-field);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -178,14 +189,25 @@ ${bodyTypeStyles}  margin: 0 0 var(--bf-single-line-row-margin-block-end);
    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);
+  line-height: var(--bf-nested-row-line-height);
   margin-block: 0;
-  padding-block: var(--bf-nested-auxiliary-padding-block);
+  padding-block: var(--bf-nested-row-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);
+  min-inline-size: min(100%, calc(var(--bf-nested-row-painted-block-size) + (var(--bf-border-width) * 2)));
+  /* The nested border is inset paint rather than box geometry, so the glyph
+     needs the complete Action inset instead of subtracting a real border. */
+  padding-inline: var(--bf-ui-chip-padding-inline);
+}
+
+/* Chip parts normally carry the standalone body line explicitly. A nested
+   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) {
@@ -202,7 +224,7 @@ ${bodyTypeStyles}  margin: 0 0 var(--bf-single-line-row-margin-block-end);
 
 :where(.bf-theme) :where(.bf-badge.is-nested) {
   align-self: center;
-  line-height: var(--bf-nested-auxiliary-line-height);
+  line-height: var(--bf-nested-row-line-height);
   vertical-align: middle;
 }
 `;

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

@@ -160,7 +160,7 @@ export function contentCardCss() {
   grid-template-rows: minmax(0, 1fr);
   min-inline-size: 0;
   overflow: hidden;
-  padding-inline: var(--bf-space-2);
+  padding-inline: var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-content-card-primary, .bf-content-card-description-panel) {
@@ -265,7 +265,7 @@ export function contentCardCss() {
   color: var(--bf-color-text-muted);
   display: flex;
   flex-wrap: wrap;
-  gap: 0 var(--bf-space-half);
+  gap: 0 var(--bf-leading-mark-gap);
   min-inline-size: 0;
   padding-block-end: var(--bf-space-1);
 }
@@ -317,7 +317,7 @@ export function contentCardCss() {
 :where(.bf-theme) :where(.bf-content-card-footer-inner) {
   align-items: center;
   display: flex;
-  gap: var(--bf-space-1);
+  gap: var(--bf-leading-mark-gap);
   inline-size: 100%;
   mask-image: linear-gradient(to right, #000 85%, transparent 100%);
   min-block-size: var(--bf-space-4);
@@ -325,7 +325,7 @@ export function contentCardCss() {
   overflow-x: auto;
   padding-block-end: var(--bf-space-1);
   padding-block-start: calc(0.5rem - var(--bf-border-width));
-  padding-inline: var(--bf-space-2);
+  padding-inline: var(--bf-panel-padding-inline);
   position: relative;
   scrollbar-width: none;
   z-index: 2;
@@ -348,7 +348,7 @@ export function contentCardCss() {
 :where(.bf-theme) :where(.bf-content-card-resource) {
   align-items: center;
   display: inline-flex;
-  gap: var(--bf-space-half);
+  gap: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-content-card-resource > *) {
@@ -357,7 +357,7 @@ export function contentCardCss() {
 
 :where(.bf-theme) :where(.bf-content-card-footer .bf-chip) {
   margin: 0;
-  margin-inline-end: var(--bf-space-3);
+  margin-inline-end: var(--bf-component-inline-inset-continuation);
 }
 
 /* Internal geometry responds to the card's allocated width. The card root is
@@ -376,10 +376,10 @@ export function contentCardCss() {
 
 @container bf-content-card (width >= 28.75rem) {
   :where(.bf-theme) :where(.bf-content-card:is(.is-cols-4, .is-cols-6)) :where(.bf-content-card-frame) {
-    column-gap: var(--bf-space-2);
+    column-gap: var(--bf-panel-padding-inline);
     flex-direction: row;
     min-block-size: calc((var(--bf-space-12) * 2) - (var(--bf-border-width) * 2));
-    padding: var(--bf-space-2) var(--bf-space-2) 0;
+    padding: var(--bf-space-2) var(--bf-panel-padding-inline) 0;
   }
 
   :where(.bf-theme) :where(.bf-content-card:is(.is-cols-4, .is-cols-6):not(.is-image)) :where(.bf-content-card-frame) {
@@ -425,7 +425,7 @@ export function contentCardCss() {
   }
 
   :where(.bf-theme) :where(.bf-content-card.is-image-top:is(.is-cols-4, .is-cols-6)) :where(.bf-content-card-body, .bf-content-card-footer-inner) {
-    padding-inline: var(--bf-space-2);
+    padding-inline: var(--bf-panel-padding-inline);
   }
 }
 
@@ -450,7 +450,8 @@ export function contentCardCss() {
     block-size: 100%;
     grid-column: 2;
     grid-row: 1;
-    padding: var(--bf-space-1) var(--bf-space-1) 0;
+    padding-block: var(--bf-space-1) 0;
+    padding-inline: var(--bf-component-inline-inset-field);
   }
 
   :where(.bf-theme) :where(.bf-content-card.is-cols-8) :where(.bf-content-card-image) {

package/dist/css-components/control-geometry.d.ts

@@ -0,0 +1,12 @@
+type ControlGeometryCssOptions = {
+    bodyLineHeight: string;
+    bodySelectedStartNudge: string;
+};
+export declare function alignedVisualStart(lineHeight: string, visualSize: string, startNudge: string, offset?: string): string;
+/**
+ * Shared geometry for single-line controls and prose marks that align with
+ * those controls. Component selectors consume these facts; they do not
+ * redefine the alignment model locally.
+ */
+export declare function controlGeometryCss(options: ControlGeometryCssOptions): string;
+export {};

package/dist/css-components/control-geometry.js

@@ -0,0 +1,22 @@
+export function alignedVisualStart(lineHeight, visualSize, startNudge, offset = "0rem") {
+    const base = `${startNudge} + ((${lineHeight} - ${visualSize}) / 2)`;
+    return offset === "0rem" ? `calc(${base})` : `calc(${base} + ${offset})`;
+}
+/**
+ * Shared geometry for single-line controls and prose marks that align with
+ * those controls. Component selectors consume these facts; they do not
+ * redefine the alignment model locally.
+ */
+export function controlGeometryCss(options) {
+    const { bodyLineHeight, bodySelectedStartNudge } = options;
+    return `:where(.bf-theme) {
+  --bf-slider-track-size: calc(var(--bf-baseline) * 0.25);
+  --bf-slider-row-block-size: var(--bf-interface-row-occupied-block-size);
+  --bf-slider-track-offset: ${alignedVisualStart(bodyLineHeight, "var(--bf-slider-track-size)", bodySelectedStartNudge)};
+  --bf-switch-track-offset: var(--bf-interface-row-visual-offset);
+  --bf-tick-box-offset: var(--bf-interface-row-visual-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);
+}
+`;
+}

package/dist/css-components/cta-figure-aspect.js

@@ -11,7 +11,7 @@ export function ctaFigureAspectCss() {
 
 :where(.bf-theme) :where(.bf-cta-block) {
   align-items: baseline;
-  column-gap: var(--bf-space-2);
+  column-gap: var(--bf-component-inline-inset-action);
   display: flex;
   flex-wrap: wrap;
   margin-block-end: 0;
@@ -48,7 +48,7 @@ export function ctaFigureAspectCss() {
 :where(.bf-theme) :where(.bf-figure.is-light-inset) > :where(img, picture, video, canvas, svg, .bf-aspect) {
   background: #fff;
   box-sizing: border-box;
-  padding: var(--bf-space-2);
+  padding: var(--bf-space-2) var(--bf-panel-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-figure-caption) {