baseline-foundry 0.1.4 → 0.1.6

package/README.md

@@ -115,7 +115,7 @@ The verified GitHub release artifact remains available as a fallback for
 environments that cannot reach the npm registry:
 
 ```bash
-npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.3/baseline-foundry-0.1.3.tgz
+npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.6/baseline-foundry-0.1.6.tgz
 ```
 
 Use the attached `.tgz`, not the GitHub source archive: generated `dist/`
@@ -188,7 +188,10 @@ The demo runs at:
 - [http://127.0.0.1:4174/demo/patterns/index.html](http://127.0.0.1:4174/demo/patterns/index.html) — Patterns, site compositions, recipes, layouts, and documented exclusions
 - [http://127.0.0.1:4174/demo/components/engine-illustration.html](http://127.0.0.1:4174/demo/components/engine-illustration.html) — Three-way raw / compensated / cap comparison
 
-Standalone historical Canonical example batches also live under `examples/grid/` and `examples/spacing/`. Each family has one shared stylesheet (`grid-examples.css` / `spacing-examples.css`); current decisions live in the active Spec Kit package rather than one-off root prompts.
+Standalone grid examples live under `examples/grid/` and share
+`grid-examples.css`. Spacing behavior is documented by the living spacing
+chapter and verified on the component or pattern that owns each relationship;
+the catalog does not expose separate diagnostic spacing pages.
 
 ## Component and pattern QA
 
@@ -268,15 +271,20 @@ into a broader tier set.
 
 The default theme uses Ubuntu Sans Variable and generates metric-driven typography tokens, spacing tokens, layout values, component density tokens, and a published surface manifest. Four first-class tiers plus two legacy preset aliases:
 
-| Tier/Preset | Purpose |
-|---|---|
-| `editorial` | Root default, widest long-form composition |
-| `documentation` | Tighter chapter-reading tier |
-| `app` | Canonical-facing application chrome |
-| `os` | Dense OS-style tier with metric alignment and compact control geometry |
+| Tier/Preset | Content cap | Purpose |
+|---|---:|---|
+| `editorial` | `90rem` | Root default, widest long-form composition |
+| `documentation` | `80rem` | Tighter chapter-reading tier |
+| `app` | `60rem` | Fluid application chrome with a cap only on explicit `bf-fixed-width` rows |
+| `os` | `60rem` | Dense OS-style tier with metric alignment and compact control geometry |
 
 Legacy aliases: `prose` → editorial, `app-tier` → app.
 
+The caps are a non-increasing density progression (`90 >= 80 >= 60 >= 60`).
+App `.bf-page` and application grids remain uncapped and fluid; the App/OS
+value governs only explicit bounded content. Tier and density are currently one
+coupled choice, not independent axes.
+
 Independent surface contract:
 
 - each built-in tier emits a complete scoped token surface instead of inheriting editorial defaults through diffs
@@ -487,7 +495,7 @@ Example sketch for a downstream Ubuntu Sans theme:
 		"pageMarginBaselineUnits": 2
 	},
 	"components": {
-		"borderWidthPx": 1,
+		"borderWidthRem": 0.0625,
 		"radiusRem": 0,
 		"controlBlockPaddingRem": 0.5,
 		"controlCompactBlockPaddingRem": 0.25,

package/config/experiments/ibm-plex-engine-smoke.json

@@ -101,7 +101,7 @@
     "pageMarginBaselineUnits": 3
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0,
     "controlBlockPaddingRem": 0.5,
     "controlCompactBlockPaddingRem": 0.25,

package/config/experiments/ubuntu-engine-smoke.json

@@ -101,7 +101,7 @@
     "pageMarginBaselineUnits": 3
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0,
     "controlBlockPaddingRem": 0.5,
     "controlCompactBlockPaddingRem": 0.25,

package/config/foundation-theme.json

@@ -103,7 +103,7 @@
     "pageMarginBaselineUnits": 2
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0,
     "controlBlockPaddingRem": 0.5,
     "controlCompactBlockPaddingRem": 0.25,

package/config/tiers/app.json

@@ -92,29 +92,29 @@
     "h6": "h6"
   },
   "layout": {
-    "contentMaxWidthRem": 90,
+    "contentMaxWidthRem": 60,
     "contentPaddingInlineRem": 1,
     "measureRem": 40,
     "sectionSpaceBaselineUnits": 4,
     "sectionSpaceShallowBaselineUnits": 2,
     "sectionSpaceDeepBaselineUnits": 8,
-    "stripSpaceBaselineUnits": 16,
+    "stripSpaceBaselineUnits": 12,
     "gridGapInlineBaselineUnits": 6,
     "gridGapBlockBaselineUnits": 6,
     "pageMarginBaselineUnits": 8
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0.125,
     "controlBlockPaddingRem": 0.5,
     "controlCompactBlockPaddingRem": 0.375,
     "controlInlinePaddingRem": 1,
-    "controlInlinePaddingActionRem": 0.5,
+    "controlInlinePaddingActionRem": 1,
     "controlInlinePaddingFieldRem": 0.25,
     "controlVisualSizeRem": 1,
     "fieldGapBaselineUnits": 2,
-    "panelPaddingInlineBaselineUnits": 6,
-    "panelPaddingBlockBaselineUnits": 6,
+    "panelPaddingInlineBaselineUnits": 3,
+    "panelPaddingBlockBaselineUnits": 3,
     "accordionIndentBaselineUnits": 6
   }
 }

package/config/tiers/documentation.json

@@ -92,7 +92,7 @@
     "h6": "h6"
   },
   "layout": {
-    "contentMaxWidthRem": 96,
+    "contentMaxWidthRem": 80,
     "contentPaddingInlineRem": 1.5,
     "measureRem": 38,
     "sectionSpaceBaselineUnits": 12,
@@ -104,7 +104,7 @@
     "pageMarginBaselineUnits": 6
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0,
     "controlBlockPaddingRem": 0.5,
     "controlCompactBlockPaddingRem": 0.375,

package/config/tiers/editorial.json

@@ -104,7 +104,7 @@
     "pageMarginBaselineUnits": 2
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0,
     "controlBlockPaddingRem": 0.5,
     "controlCompactBlockPaddingRem": 0.25,

package/config/tiers/os.json

@@ -92,29 +92,29 @@
     "h6": "h6"
   },
   "layout": {
-    "contentMaxWidthRem": 67.5,
+    "contentMaxWidthRem": 60,
     "contentPaddingInlineRem": 0.75,
     "measureRem": 30,
     "sectionSpaceBaselineUnits": 12,
     "sectionSpaceShallowBaselineUnits": 6,
     "sectionSpaceDeepBaselineUnits": 24,
-    "stripSpaceBaselineUnits": 12,
+    "stripSpaceBaselineUnits": 8,
     "gridGapInlineBaselineUnits": 4,
     "gridGapBlockBaselineUnits": 4,
     "pageMarginBaselineUnits": 4
   },
   "components": {
-    "borderWidthPx": 1,
+    "borderWidthRem": 0.0625,
     "radiusRem": 0,
     "controlBlockPaddingRem": 0.375,
     "controlCompactBlockPaddingRem": 0.25,
     "controlInlinePaddingRem": 0.75,
-    "controlInlinePaddingActionRem": 0.5,
+    "controlInlinePaddingActionRem": 1,
     "controlInlinePaddingFieldRem": 0.25,
     "controlVisualSizeRem": 0.75,
     "fieldGapBaselineUnits": 1,
-    "panelPaddingInlineBaselineUnits": 4,
-    "panelPaddingBlockBaselineUnits": 4,
+    "panelPaddingInlineBaselineUnits": 2,
+    "panelPaddingBlockBaselineUnits": 2,
     "accordionIndentBaselineUnits": 3
   }
 }

package/dist/baseline-grid-overlay.js

@@ -12,8 +12,8 @@ export function generateBaselineGridOverlayCss(options) {
   background-image: linear-gradient(
     to top,
     var(--bf-baseline-grid-color),
-    var(--bf-baseline-grid-color) 1px,
-    transparent 1px,
+    var(--bf-baseline-grid-color) 0.0625rem,
+    transparent 0.0625rem,
     transparent
   );
   background-size: 100% var(--bf-baseline-grid-size);

package/dist/build.js

@@ -50,7 +50,7 @@ const REQUIRED_LAYOUT_FIELDS = [
     "pageMarginBaselineUnits"
 ];
 const REQUIRED_COMPONENT_FIELDS = [
-    "borderWidthPx",
+    "borderWidthRem",
     "radiusRem",
     "controlBlockPaddingRem",
     "controlInlinePaddingRem",
@@ -209,9 +209,9 @@ function buildComponentTokens(config) {
     const controlInlinePaddingActionRem = config.components.controlInlinePaddingActionRem ?? config.components.controlInlinePaddingRem;
     const controlInlinePaddingFieldRem = config.components.controlInlinePaddingFieldRem ?? (controlInlinePaddingActionRem / 2);
     return {
-        borderWidth: `${config.components.borderWidthPx}px`,
-        // Vanilla's shared $bar-thickness: 3px at a 16px root, expressed in rem
-        // so emphasis bars scale with root text sizing while thin borders do not.
+        borderWidth: toRem(config.components.borderWidthRem),
+        // Vanilla's shared $bar-thickness is represented as 0.1875rem so emphasis
+        // bars and thin borders both scale with root text sizing.
         barThickness: toRem(3 / 16),
         radius: toRem(config.components.radiusRem),
         controlBlockPadding: toRem(config.components.controlBlockPaddingRem),

package/dist/code-snippet.js

@@ -23,7 +23,7 @@ async function copySnippetText(copyBlock) {
     textarea.value = text;
     textarea.setAttribute("readonly", "");
     textarea.style.position = "fixed";
-    textarea.style.inset = "-9999px";
+    textarea.style.inset = "-624.9375rem";
     document.body.append(textarea);
     textarea.select();
     try {

package/dist/css-app-tier.js

@@ -9,18 +9,24 @@ ${scoped()} {
 
 ${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: 0.875rem;
+  font-size: var(--bf-body-font-size);
   font-style: normal;
   font-weight: 400;
-  line-height: 1.25rem;
+  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: 0.875rem;
+  font-size: var(--bf-body-font-size);
   font-style: normal;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: var(--bf-body-line-height);
 }
 
 ${scoped(" :where(.bf-application)")} {
@@ -30,7 +36,7 @@ ${scoped(" :where(.bf-application)")} {
 ${scoped(" :where(.bf-navigation-drawer)")},
 ${scoped(" :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer)")},
 ${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.12);
+  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)")} {
@@ -49,6 +55,11 @@ ${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
   padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
 }
 
+${scoped(" :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand)")} {
+  gap: calc(var(--bf-baseline) * 2);
+  padding-block: 0;
+}
+
 ${scoped(" :where(.bf-panel-controls)")} {
   gap: calc(var(--bf-baseline) * 1.5);
 }

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

@@ -12,11 +12,11 @@ export function articlePaginationCss(options) {
   container-type: inline-size;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  margin-block-end: var(--bf-section-space-shallow);
+  margin: 0;
   min-inline-size: 0;
 }
 
-:where(.bf-theme) :where(.bf-article-pagination-link) {
+:where(.bf-theme) :where(a.bf-article-pagination-link) {
   background-color: var(--bf-color-background-default);
   border: var(--bf-border-width) solid transparent;
   box-sizing: border-box;
@@ -32,8 +32,9 @@ export function articlePaginationCss(options) {
   text-decoration: none;
 }
 
-:where(.bf-theme) :where(.bf-article-pagination-link:hover) {
+:where(.bf-theme) :where(a.bf-article-pagination-link:hover) {
   background-color: var(--bf-color-background-hover);
+  text-decoration: none;
 }
 
 :where(.bf-theme) :where(.bf-article-pagination-link:focus:not(:focus-visible)) {
@@ -41,8 +42,8 @@ export function articlePaginationCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-article-pagination-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-article-pagination-link.is-previous) {
@@ -134,12 +135,12 @@ ${titleTypeStyles}  color: inherit;
 
   :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-label),
   :where(.bf-theme) :where(.bf-article-pagination-link.is-previous:not(:only-child) .bf-article-pagination-title) {
-    block-size: 1px;
+    block-size: 0.0625rem;
     border: 0;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
-    inline-size: 1px;
-    margin: -1px;
+    inline-size: 0.0625rem;
+    margin: -0.0625rem;
     overflow: hidden;
     padding: 0;
     position: absolute;

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);
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordered);
   text-align: center;
   text-decoration: none;
 }
@@ -27,6 +27,13 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
   background-color: var(--bf-color-background-hover);
 }
 
+/* Anchor buttons are controls, not prose links. Qualifying the element and
+ * its interaction states prevents the generic anchor underline from leaking
+ * through while leaving the explicit is-link variant unchanged. */
+:where(.bf-theme) :where(a.bf-button:not(.is-link):is(:hover, :active)) {
+  text-decoration: none;
+}
+
 :where(.bf-theme) :where(.bf-button:not(.is-base):is(:active, [aria-pressed='true'])) {
   background-color: var(--bf-color-background-active);
 }
@@ -36,8 +43,8 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
 }
 
 :where(.bf-theme) :where(.bf-button, .bf-button.is-base):focus-visible {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
 }
 
 /* ------------------------------------------------------------------ */
@@ -109,7 +116,7 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
   background-color: transparent;
   color: var(--bf-color-link-default);
   text-decoration: underline;
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: 0.0625rem;
   text-underline-offset: 0.075em;
 }
 
@@ -136,6 +143,19 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
   justify-content: center;
 }
 
+/* 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))) {
+  column-gap: 0;
+}
+
+:where(.bf-theme) :where(.bf-button.is-icon:not(:has(.bf-button-label)))::before {
+  block-size: var(--bf-body-line-height);
+  content: "";
+  inline-size: 0;
+}
+
 :where(.bf-theme) :where(.bf-button-label) {
   min-inline-size: 0;
 }

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

@@ -15,7 +15,7 @@ export function cardsOptionsCss(options) {
   overflow: auto;
   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-card.is-highlighted) {
@@ -40,7 +40,7 @@ export function cardsOptionsCss(options) {
 
 :where(.bf-theme) :where(a.bf-card:hover, a.bf-card.is-highlighted:hover, a.bf-card.is-overlay:hover, a.bf-card.is-muted:hover) {
   border-color: var(--bf-color-focus);
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 :where(.bf-theme) :where(a.bf-card:focus:not(:focus-visible), a.bf-card.is-highlighted:focus:not(:focus-visible), a.bf-card.is-overlay:focus:not(:focus-visible), a.bf-card.is-muted:focus:not(:focus-visible)) {
@@ -48,8 +48,8 @@ export function cardsOptionsCss(options) {
 }
 
 :where(.bf-theme) :where(a.bf-card:focus-visible, a.bf-card.is-highlighted:focus-visible, a.bf-card.is-overlay:focus-visible, a.bf-card.is-muted: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-card.is-preview) {
@@ -132,7 +132,7 @@ export function cardsOptionsCss(options) {
   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));
-  padding-inline: var(--bf-panel-padding-inline);
+  padding-inline: var(--bf-component-inline-inset-continuation);
   text-align: left;
 }
 
@@ -145,7 +145,7 @@ export function cardsOptionsCss(options) {
 :where(.bf-theme) :where(button.bf-option-card:hover:not(:disabled)) {
   background: var(--bf-color-background-hover);
   border-color: var(--bf-color-focus);
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 :where(.bf-theme) :where(.bf-option-card.is-active),
@@ -156,8 +156,8 @@ export function cardsOptionsCss(options) {
 }
 
 :where(.bf-theme) :where(button.bf-option-card: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-option-card-label) {

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

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

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

@@ -1,5 +1,5 @@
 export function chipBadgeStatusCss(options) {
-    const { bodyCaseTypeStyles, bodyLineHeight, bodySelectedStartNudge, h5SelectedEndNudge, h5SelectedStartNudge, bodyTypeStyles, } = 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) {
   --bf-ui-chip-border: var(--bf-color-border-neutral);
   --bf-ui-chip-border-hover: var(--bf-color-border-neutral);
@@ -10,21 +10,23 @@ export function chipBadgeStatusCss(options) {
 ${bodyTypeStyles}  align-items: baseline;
   background-color: var(--bf-ui-chip-background);
   border: var(--bf-border-width) solid var(--bf-ui-chip-border);
-  border-radius: 1rem;
+  border-radius: var(--bf-ui-chip-radius);
   color: var(--bf-color-text-default);
   display: inline-flex;
   gap: 0;
   inline-size: fit-content;
   justify-self: start;
-  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-field-gap) 0;
+  margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-single-line-row-margin-block-end) 0;
   max-inline-size: 100%;
-  min-block-size: var(--bf-ui-chip-block-size);
-  padding-block: var(--bf-ui-chip-padding-block);
-  padding-inline: var(--bf-ui-chip-padding-inline);
+  padding-block: var(--bf-single-line-row-padding-block);
+  padding-inline: max(0rem, calc(var(--bf-ui-chip-padding-inline) - var(--bf-border-width)));
   position: relative;
   text-decoration: none;
   user-select: none;
-  vertical-align: calc(var(--bf-border-width) - ${bodySelectedStartNudge});
+  /* Inline-flex exposes the first text child's baseline. The surrounding
+     border-aware row contract now matches buttons instead of inventing a
+     second chip-only occupied height. */
+  vertical-align: baseline;
   white-space: nowrap;
 }
 
@@ -64,6 +66,15 @@ ${bodyTypeStyles}  align-items: baseline;
   --bf-ui-chip-background-active: var(--bf-color-background-information-active);
 }
 
+:where(.bf-theme) :where(.bf-chip.is-borderless) {
+  --bf-ui-chip-border: transparent;
+  --bf-ui-chip-border-hover: transparent;
+  --bf-ui-chip-border-active: transparent;
+  --bf-ui-chip-background: transparent;
+  --bf-ui-chip-background-hover: transparent;
+  --bf-ui-chip-background-active: transparent;
+}
+
 :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):hover {
   background-color: var(--bf-ui-chip-background-hover);
   border-color: var(--bf-ui-chip-border-hover);
@@ -128,11 +139,15 @@ ${bodyTypeStyles}  align-items: center;
   --bf-ui-status-background: color-mix(in srgb, var(--bf-color-background-alt) 70%, black);
   --bf-ui-status-color: var(--bf-color-button-positive-text);
   background-color: var(--bf-ui-status-background);
+  border-block: var(--bf-border-width) solid transparent;
   color: var(--bf-ui-status-color);
   display: inline-block;
-${bodyTypeStyles}  margin: 0;
-  padding-block-end: ${h5SelectedEndNudge};
-  padding-block-start: ${h5SelectedStartNudge};
+  inline-size: fit-content;
+  justify-self: start;
+${bodyTypeStyles}  margin: 0 0 var(--bf-single-line-row-margin-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);
   text-align: center;
   text-decoration: none;
@@ -158,5 +173,37 @@ ${bodyTypeStyles}  margin: 0;
   --bf-ui-status-background: var(--bf-color-border-negative);
   --bf-ui-status-color: var(--bf-color-button-negative-text);
 }
+
+/* Nested auxiliary surfaces fit a body-sized flex/grid host instead of
+   carrying a second standalone occupied-row contract. This modifier is
+   explicit so component density never changes merely because of ancestry. */
+:where(.bf-theme) :where(.bf-chip.is-nested, .bf-status-label.is-nested) {
+  line-height: var(--bf-nested-auxiliary-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-auxiliary-padding-block);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested) {
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:hover) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-hover);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:is(:active, [aria-pressed='true'], .is-selected)) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-active);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-nested) {
+  border-block-width: 0;
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  align-self: center;
+  line-height: var(--bf-nested-auxiliary-line-height);
+  vertical-align: middle;
+}
 `;
 }

package/dist/css-components/content-card.d.ts

@@ -3,14 +3,14 @@
  * separate family from the general-purpose `bf-card` primitive.
  *
  * Vanilla -> BF rhythm mapping (Vanilla's spacing unit is 0.5rem):
- * - 16px content padding/gap -> `--bf-space-2`.
- * - 8px footer/image spacing -> `--bf-space-1`.
- * - 32px wrapper separation -> `--bf-space-4`.
- * - 380px vertical minimum -> 48 BF baselines (384px in editorial), avoiding
+ * - 1rem content padding/gap -> `--bf-space-2`.
+ * - 0.5rem footer/image spacing -> `--bf-space-1`.
+ * - 2rem wrapper separation -> `--bf-space-4`.
+ * - 23.75rem vertical minimum -> 48 BF baselines (24rem in editorial), avoiding
  *   Vanilla's half-baseline ending while retaining its occupied silhouette.
- * - 192px horizontal/text minimum -> 24 BF baselines.
- * - 352px eight-column minimum -> 44 BF baselines.
- * - 284px horizontal media width -> 36 BF baselines (288px in editorial).
+ * - 12rem horizontal/text minimum -> 24 BF baselines.
+ * - 22rem eight-column minimum -> 44 BF baselines.
+ * - 17.75rem horizontal media width -> 36 BF baselines (18rem in editorial).
  *
  * The root card establishes a named query container. Only descendants change
  * inside container queries; this avoids the invalid query-the-container-itself