baseline-foundry 0.1.5 → 0.1.7

package/dist/tiers/os/styles.css

@@ -1254,14 +1254,21 @@ html.u-baseline-grid::after {
      padding and trailing baseline compensation must resolve through this pair. */
   --bf-single-line-row-padding-block: max(0rem, calc(var(--bf-button-block-padding) - var(--bf-border-width)));
   --bf-single-line-row-margin-block-end: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1rem) + (var(--bf-button-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
+  --bf-single-line-row-block-size: calc(var(--bf-body-line-height, 1rem) + (var(--bf-single-line-row-padding-block) * 2) + (var(--bf-border-width) * 2) + var(--bf-single-line-row-margin-block-end));
+  --bf-single-line-row-in-box-padding-block-start: var(--bf-body-nudge-start, 0.245rem);
+  --bf-single-line-row-in-box-padding-block-end: max(0rem, calc(var(--bf-single-line-row-block-size) - var(--bf-body-line-height, 1rem) - var(--bf-single-line-row-in-box-padding-block-start)));
   --bf-single-line-row-visual-offset: calc(var(--bf-body-nudge-start, 0.245rem) + ((var(--bf-body-line-height, 1rem) - var(--bf-control-visual-size)) / 2));
+  /* Auxiliary surfaces may opt into a host-owned nested composition. The
+     shorter line and capped symmetric padding fit their complete paint inside
+     the host body line without introducing a second row rhythm. */
+  --bf-nested-auxiliary-line-height: max(var(--bf-body-font-size), calc(var(--bf-body-line-height) - var(--bf-baseline)));
+  --bf-nested-auxiliary-padding-block: min(var(--bf-single-line-row-padding-block), max(0rem, calc((var(--bf-body-line-height) - var(--bf-nested-auxiliary-line-height)) / 2)));
   --bf-slider-track-size: calc(var(--bf-baseline) * 0.25);
-  --bf-slider-row-block-size: max(var(--bf-control-box-size-compact), calc(var(--bf-body-nudge-start, 0.245rem) + var(--bf-body-line-height, 1rem) + var(--bf-body-nudge-end)));
+  --bf-slider-row-block-size: var(--bf-single-line-row-block-size);
   --bf-slider-track-offset: calc(var(--bf-body-nudge-start, 0.245rem) + ((var(--bf-body-line-height, 1rem) - var(--bf-slider-track-size)) / 2));
   --bf-table-row-border-size: var(--bf-border-width);
-  --bf-table-row-padding-block-start: var(--bf-body-nudge-start, 0.245rem);
-  --bf-table-row-content-size: calc(var(--bf-body-line-height, 1rem) + (var(--bf-table-row-padding-block-start) * 2) + var(--bf-table-row-border-size));
-  --bf-table-row-block-size: calc(var(--bf-table-row-content-size) + mod(calc(var(--bf-baseline) - mod(var(--bf-table-row-content-size), var(--bf-baseline))), var(--bf-baseline)));
+  --bf-table-row-padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
+  --bf-table-row-block-size: var(--bf-single-line-row-block-size);
   --bf-table-row-padding-block-end: max(0rem, calc(var(--bf-table-row-block-size) - var(--bf-body-line-height, 1rem) - var(--bf-table-row-padding-block-start) - var(--bf-table-row-border-size)));
   --bf-table-row-line-height: var(--bf-body-line-height, 1rem);
   --bf-switch-track-offset: var(--bf-single-line-row-visual-offset);
@@ -1311,7 +1318,8 @@ html.u-baseline-grid::after {
   --bf-top-navigation-logo-tag-gap: 0.25rem;
   --bf-top-navigation-logo-icon-bottom-offset: 0.375rem;
   --bf-top-navigation-logo-icon-optical-offset-inline: -0.0125rem;
-  --bf-navigation-brand-title-optical-offset-block: 0rem;
+  --bf-navigation-brand-line-center-block: calc(var(--bf-top-navigation-logo-tag-block-size) - var(--bf-top-navigation-logo-icon-bottom-offset) - (var(--bf-top-navigation-logo-icon-size) / 2));
+  --bf-navigation-brand-block-size: calc(var(--bf-navigation-brand-line-center-block) * 2);
   --bf-icon-size-default: 1rem;
   --bf-icon-size-medium: 2.5rem;
   --bf-icon-size-large: 4rem;
@@ -1321,6 +1329,7 @@ html.u-baseline-grid::after {
   --bf-leading-icon-gap: var(--bf-leading-mark-gap);
   --bf-leading-icon-offset: var(--bf-single-line-row-visual-offset);
   --bf-ui-chip-padding-inline: var(--bf-component-inline-inset-field);
+  --bf-ui-chip-radius: 999rem;
   --bf-ui-badge-padding-inline: calc(var(--bf-body-line-height, 1rem) * 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);
@@ -1557,7 +1566,7 @@ html.u-baseline-grid::after {
   margin: 0;
 }
 
-.bf-theme button {
+:where(.bf-theme) :where(button) {
   font: inherit;
 }
 
@@ -1686,10 +1695,33 @@ html.u-baseline-grid::after {
   padding-inline: var(--bf-component-inline-inset-field);
 }
 
-:where(.bf-theme) :where(input[type='color'].bf-color-input) {
+:where(.bf-theme) :where(.bf-color-control) {
+  display: grid;
+  grid-template-areas: "color-control";
   inline-size: 4rem;
-  min-block-size: var(--bf-control-box-size);
-  padding: calc(var(--bf-baseline) * 0.5);
+}
+
+/* Native color inputs do not expose a body-text line box. This invisible
+   metric strut gives their wrapper the same natural padding/border/margin
+   construction as every textual control, including under browser zoom. */
+:where(.bf-theme) :where(.bf-color-control)::before {
+  border-block: var(--bf-border-width) solid transparent;
+  content: "\00a0";
+  grid-area: color-control;
+  line-height: var(--bf-body-line-height);
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  padding-block: var(--bf-single-line-row-padding-block);
+  visibility: hidden;
+}
+
+:where(.bf-theme) :where(.bf-color-control) > :where(input[type='color'].bf-color-input) {
+  align-self: stretch;
+  block-size: auto;
+  grid-area: color-control;
+  inline-size: 100%;
+  margin-bottom: var(--bf-single-line-row-margin-block-end);
+  min-block-size: 0;
+  padding: var(--bf-border-width);
 }
 
 :where(.bf-theme) :where(.bf-input, input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea, select):hover {
@@ -1730,13 +1762,12 @@ html.u-baseline-grid::after {
   line-height: var(--bf-body-line-height, 1rem);
   background: transparent;
   border: 0 solid transparent;
-  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
-  border-top: var(--bf-border-width) solid transparent;
+  box-shadow: inset 0 calc(var(--bf-border-width) * -1) 0 var(--bf-color-border-default);
   color: var(--bf-color-text-default);
   margin-bottom: calc(0rem + mod(calc(var(--bf-baseline) - mod(calc(var(--bf-body-line-height, 1rem) + (var(--bf-input-block-padding) * 2)), var(--bf-baseline))), var(--bf-baseline)));
   max-inline-size: 100%;
   min-inline-size: 0;
-  padding-block: max(0rem, calc(var(--bf-input-block-padding) - var(--bf-border-width)));
+  padding-block: 0;
   padding-inline: 0;
   width: 100%;
 }
@@ -1754,8 +1785,8 @@ html.u-baseline-grid::after {
   color: var(--bf-color-text-default);
   cursor: pointer;
   margin-inline-end: var(--bf-field-gap);
-  min-block-size: var(--bf-control-box-size-compact);
-  padding-block: max(0rem, calc(var(--bf-control-block-padding-compact) - var(--bf-border-width)));
+  min-block-size: 0;
+  padding-block: var(--bf-single-line-row-padding-block);
   padding-inline: var(--bf-control-inline-padding-action-bordered);
 }
 
@@ -2115,6 +2146,15 @@ html.u-baseline-grid::after {
   padding: 0;
 }
 
+/* A composite slider's numeric field owns the shared occupied row. Stretching
+   the track within that real sibling height avoids a second nominal-height
+   calculation that can diverge when rem borders are rasterised under zoom. */
+:where(.bf-theme) :where(.bf-slider:not(.is-stacked)):not(:where(.bf-field.is-range.is-stacked) :where(.bf-slider)) > :where(input[type='range']) {
+  align-self: stretch;
+  block-size: auto;
+  margin-block: 0;
+}
+
 :where(.bf-theme) :where(input[type='range']):focus:not(:focus-visible) {
   outline: none;
 }
@@ -4448,10 +4488,6 @@ html.u-baseline-grid::after {
   inline-size: 100%;
 }
 
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) :where(.bf-top-navigation-logo-title) {
-  transform: translateY(var(--bf-navigation-brand-title-optical-offset-block));
-}
-
 :where(.bf-theme) :where(.bf-panel-header) > :where(.bf-panel-title) {
   min-inline-size: 0;
 }
@@ -6068,10 +6104,6 @@ html.u-baseline-grid::after {
   border-block-end-color: var(--bf-color-border-low-contrast);
 }
 
-:where(.bf-theme) :where(tbody tr:has(.bf-status-label) > td) {
-  padding-block: calc((var(--bf-baseline) - var(--bf-table-row-border-size)) / 2);
-}
-
 :where(.bf-theme) :where(tbody tr:hover td) {
   background: color-mix(in srgb, var(--bf-color-background-hover) 68%, transparent);
 }
@@ -6092,7 +6124,7 @@ html.u-baseline-grid::after {
   align-items: baseline;
   background-color: var(--bf-ui-chip-background);
   border: var(--bf-border-width) solid var(--bf-ui-chip-border);
-  border-radius: 1rem;
+  border-radius: var(--bf-ui-chip-radius);
   color: var(--bf-color-text-default);
   display: inline-flex;
   gap: 0;
@@ -6281,6 +6313,45 @@ html.u-baseline-grid::after {
   --bf-ui-status-color: var(--bf-color-button-negative-text);
 }
 
+/* Nested auxiliary surfaces fit a body-sized flex/grid host instead of
+   carrying a second standalone occupied-row contract. This modifier is
+   explicit so component density never changes merely because of ancestry. */
+:where(.bf-theme) :where(.bf-chip.is-nested, .bf-status-label.is-nested) {
+  line-height: var(--bf-nested-auxiliary-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-auxiliary-padding-block);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested) {
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border);
+}
+
+/* Chip parts normally carry the standalone body line explicitly. A compact
+   chip must pass its reduced line through to those parts so a nested badge
+   can fit without making the host row taller. */
+:where(.bf-theme) :where(.bf-chip.is-nested) :where(.bf-chip-lead, .bf-chip-value) {
+  line-height: inherit;
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:hover) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-hover);
+}
+
+:where(.bf-theme) :where(.bf-chip.is-nested:is(:active, [aria-pressed='true'], .is-selected)) {
+  box-shadow: inset 0 0 0 var(--bf-border-width) var(--bf-ui-chip-border-active);
+}
+
+:where(.bf-theme) :where(.bf-status-label.is-nested) {
+  border-block-width: 0;
+}
+
+:where(.bf-theme) :where(.bf-badge.is-nested) {
+  align-self: center;
+  line-height: var(--bf-nested-auxiliary-line-height);
+  vertical-align: middle;
+}
+
 
 :where(.bf-theme) :where(.bf-chip-dismiss, .bf-search-box-reset, .bf-search-and-filter-clear) {
   appearance: none;
@@ -6725,6 +6796,7 @@ html.u-baseline-grid::after {
   --bf-side-navigation-disclosure-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-disclosure-gap)));
   --bf-side-navigation-depth-step: var(--bf-space-2);
   --bf-side-navigation-group-gap: 1.5rem;
+  --bf-side-navigation-heading-list-gap: 0.5rem;
   color: var(--bf-color-text-inactive);
   display: block;
   inline-size: 100%;
@@ -6737,11 +6809,31 @@ html.u-baseline-grid::after {
 }
 
 :where(.bf-theme) :where(.bf-side-navigation-group) {
+  display: grid;
+  gap: var(--bf-side-navigation-heading-list-gap);
+  min-inline-size: 0;
+}
+
+/* Keep the divider and heading as one tight header. The group owns only the
+   larger transition from that header to its list, so the compensated rule
+   cannot change the heading/list phase. */
+:where(.bf-theme) :where(.bf-side-navigation-group-header) {
   display: grid;
   gap: 0rem;
   min-inline-size: 0;
 }
 
+:where(.bf-theme) :where(.bf-side-navigation-group-header) > hr {
+  inline-size: auto;
+  margin-inline: var(--bf-side-navigation-content-inset) 0;
+}
+
+/* A single-line group heading occupies four baselines. min-block-size keeps
+   that phase exact while still allowing a long heading to wrap and grow. */
+:where(.bf-theme) :where(.bf-side-navigation-group-header) > :where(.bf-side-navigation-heading) {
+  min-block-size: calc((var(--bf-baseline) * 4) - var(--bf-body-margin-bottom));
+}
+
 :where(.bf-theme) :where(.bf-side-navigation-drawer) {
   background: var(--bf-color-background-default);
   bottom: 0;
@@ -6870,6 +6962,7 @@ html.u-baseline-grid::after {
 
 :where(.bf-theme) :where(.bf-side-navigation-list) {
   display: grid;
+  grid-auto-rows: var(--bf-single-line-row-block-size);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -6888,6 +6981,7 @@ html.u-baseline-grid::after {
   font-weight: var(--bf-body-font-weight, 400);
   line-height: var(--bf-body-line-height, 1rem);
   align-items: center;
+  align-self: start;
   background: transparent;
   border: 0;
   border-block: var(--bf-border-width) solid transparent;
@@ -7625,7 +7719,8 @@ html.u-baseline-grid::after {
   display: block;
   margin: 0;
   overflow: hidden;
-  padding-block: var(--bf-control-block-padding-compact);
+  padding-block-end: var(--bf-single-line-row-in-box-padding-block-end);
+  padding-block-start: var(--bf-single-line-row-in-box-padding-block-start);
   padding-inline: var(--bf-component-inline-inset-action);
   text-align: left;
   text-decoration: none;
@@ -8714,13 +8809,11 @@ html.u-baseline-grid::after {
   line-height: var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5));
   overflow: visible;
   overflow-wrap: anywhere;
-  /* The first title line and the 1rem mark share the mark's fixed centre:
-   * tag block-end minus the 0.375rem inset minus half the mark. Symmetric title
-   * padding keeps the occupied row stable across all four type-density tiers. */
+  /* The first title line and the 1rem mark share the public brand-line centre.
+   * The derived brand block is twice that fixed centre, so the orange tag can
+   * extend upward without changing the title or adjacent-header baseline. */
   padding-block: calc(
-    var(--bf-top-navigation-logo-tag-block-size)
-    - var(--bf-top-navigation-logo-icon-bottom-offset)
-    - (var(--bf-top-navigation-logo-icon-size) / 2)
+    var(--bf-navigation-brand-line-center-block)
     - (var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
   );
   text-overflow: clip;
@@ -9733,6 +9826,12 @@ html.u-baseline-grid::after {
   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. */
+:where(.bf-theme.bf-tier-app) :where(.bf-status-label.is-nested, .bf-chip.is-nested) {
+  line-height: var(--bf-nested-auxiliary-line-height);
+}
+
 :where(.bf-theme.bf-tier-app) :where(.bf-input, .bf-button, .bf-button.is-base) {
   font-family: inherit;
   font-size: var(--bf-body-font-size);

package/docs/publishing.md

@@ -21,7 +21,7 @@ npm install baseline-foundry
 The attached GitHub release tarball is the fallback:
 
 ```bash
-npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.5/baseline-foundry-0.1.5.tgz
+npm install https://github.com/lyubomir-popov/baseline-foundry/releases/download/v0.1.7/baseline-foundry-0.1.7.tgz
 ```
 
 Do not install the Git tag or GitHub source archive. `dist/` is generated and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseline-foundry",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Lean baseline-aligned design system focused on typography, editorial flow, spacing, and grid primitives.",
   "author": "Lyubomir Popov",
   "type": "module",