baseline-foundry 0.1.6 → 0.2.0

package/dist/css-components/logo-media.js

@@ -29,7 +29,7 @@ export function logoMediaCss() {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  column-gap: var(--bf-space-4);
+  column-gap: var(--bf-component-inline-inset-continuation);
   min-inline-size: 0;
   padding-block: var(--bf-space-1);
 }
@@ -202,7 +202,7 @@ export function logoMediaCss() {
 
 :where(.bf-theme) :where(.bf-media-object-meta) {
   align-items: start;
-  column-gap: var(--bf-space-1);
+  column-gap: var(--bf-leading-mark-gap);
   display: grid;
   grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
   min-inline-size: 0;

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

@@ -0,0 +1,5 @@
+/**
+ * Shared disclosure and navigation geometry. Horizontal placement consumes
+ * the field/action/continuation insets instead of introducing another inset.
+ */
+export declare function navigationGeometryCss(): string;

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

@@ -0,0 +1,30 @@
+/**
+ * Shared disclosure and navigation geometry. Horizontal placement consumes
+ * the field/action/continuation insets instead of introducing another inset.
+ */
+export function navigationGeometryCss() {
+    return `:where(.bf-theme) {
+  --bf-disclosure-gap: var(--bf-leading-mark-gap);
+  --bf-disclosure-icon-inline-size: 1rem;
+  --bf-disclosure-group-inset: max(0rem, calc(var(--bf-component-inline-inset-continuation) - var(--bf-disclosure-icon-inline-size) - var(--bf-disclosure-gap)));
+  --bf-icon-label-optical-offset-block: 0.1875rem;
+  --bf-disclosure-icon-optical-offset-block: 0rem;
+  --bf-side-navigation-icon-optical-offset-block: var(--bf-icon-label-optical-offset-block);
+  --bf-side-navigation-icon-gap: var(--bf-leading-mark-gap);
+  --bf-navigation-bar-min-block-size: calc(var(--bf-baseline) * 6);
+  --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);
+}
+`;
+}

package/dist/css-components/nested-controls.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Explicit nested controls for composition inside a host-owned single-line
+ * row. Standalone controls retain the normal occupied-block contract.
+ */
+export declare const nestedTextInputTypes: readonly ["text", "number", "search", "password", "email", "url", "tel"];
+export declare const nestedFieldSelector: string;
+export declare const nestedInteractiveSelector: string;
+export declare function nestedControlsCss(): string;

package/dist/css-components/nested-controls.js

@@ -0,0 +1,37 @@
+/**
+ * Explicit nested controls for composition inside a host-owned single-line
+ * row. Standalone controls retain the normal occupied-block contract.
+ */
+export const nestedTextInputTypes = ["text", "number", "search", "password", "email", "url", "tel"];
+export const nestedFieldSelector = [
+    "input.bf-input.is-nested:not([type])",
+    ...nestedTextInputTypes.map(type => `input.bf-input.is-nested[type='${type}']`),
+    "select.bf-input.is-nested"
+].join(", ");
+export const nestedInteractiveSelector = `${nestedFieldSelector}, .bf-button.is-nested:not(.is-link)`;
+export function nestedControlsCss() {
+    return `:where(.bf-theme) :where(${nestedInteractiveSelector}) {
+  line-height: var(--bf-nested-row-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-framed-row-padding-block);
+}
+
+/* Replaced textual controls retain a browser-owned intrinsic block floor even
+   after their line and padding adopt the nested contract. This derived size is the exact
+   sum of that same line, padding and real borders; it is not a density target
+   independent of the active tier. */
+:where(.bf-theme) :where(${nestedFieldSelector}) {
+  block-size: var(--bf-nested-framed-row-painted-block-size);
+}
+
+:where(.bf-theme) :where(.bf-checkbox.is-nested, .bf-radio.is-nested) {
+  --bf-tick-box-offset: var(--bf-nested-framed-row-visual-offset);
+}
+
+:where(.bf-theme) :where(.bf-checkbox.is-nested > .bf-checkbox-label, .bf-radio.is-nested > .bf-radio-label) {
+  line-height: var(--bf-nested-row-line-height);
+  margin-block: 0;
+  padding-block: var(--bf-nested-framed-row-padding-block);
+}
+`;
+}

package/dist/css-components/panel.js

@@ -24,9 +24,8 @@ export function panelCss(options) {
   overscroll-behavior: contain;
 }
 
-/* Panel chrome and content consume the live page-grid gutter through a local
- * derived property, so their internal text rails follow the same
- * viewport brackets as surrounding page content. */
+/* Panel chrome and content share the continuation component inset through a
+ * local property. Structural surface padding remains a separate contract. */
 :where(.bf-theme) :where(.bf-panel-header) {
   align-items: start;
   display: flex;
@@ -35,7 +34,7 @@ export function panelCss(options) {
   justify-content: space-between;
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline: var(--bf-panel-content-padding-inline);
 }
 
 /* A navigation brand keeps the Canonical tag attached to the panel's top edge
@@ -45,7 +44,7 @@ export function panelCss(options) {
   gap: 0;
   padding-block: 0;
   padding-inline-end: 0;
-  padding-inline-start: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline-start: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
@@ -72,10 +71,10 @@ export function panelCss(options) {
   flex-wrap: wrap;
   gap: var(--bf-field-gap);
   justify-content: space-between;
-  min-block-size: calc(var(--bf-control-box-size-compact) + var(--bf-panel-padding-block));
+  min-block-size: calc(var(--bf-interface-row-occupied-block-size) + var(--bf-panel-padding-block));
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: 0;
-  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-panel-footer.is-sticky) {
@@ -104,16 +103,16 @@ ${h4TypeStyles}  margin: 0 0 var(--bf-h4-margin-bottom);
 ${bodyTypeStyles}  align-items: center;
   appearance: none;
   background: transparent;
-  border: 0;
+  border: 0 solid transparent;
+  border-block-width: var(--bf-border-width);
   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: flex-start;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
+  margin: 0 0 var(--bf-interface-row-compensation-block-end);
   min-inline-size: 0;
-  padding-block: var(--bf-control-block-padding-compact);
+  padding-block: var(--bf-interface-row-padding-block);
   padding-inline: 0;
   text-align: left;
 }
@@ -136,7 +135,7 @@ ${bodyTypeStyles}  align-items: center;
   min-block-size: 0;
   padding-block-end: var(--bf-panel-padding-block);
   padding-block-start: var(--bf-panel-padding-block);
-  padding-inline: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+  padding-inline: var(--bf-panel-content-padding-inline);
 }
 
 :where(.bf-theme) :where(.bf-panel-content.is-flush) {

package/dist/css-components/search-box-and-filter.d.ts

@@ -1,7 +1,6 @@
 type SearchBoxAndFilterCssOptions = {
     bodySelectedStartNudge: string;
     bodyTypeStyles: string;
-    buttonBlockPaddingVar: string;
     inputMarginBottom: string;
 };
 export declare function searchBoxAndFilterCss(options: SearchBoxAndFilterCssOptions): string;

package/dist/css-components/search-box-and-filter.js

@@ -1,5 +1,5 @@
 export function searchBoxAndFilterCss(options) {
-    const { bodySelectedStartNudge, bodyTypeStyles, buttonBlockPaddingVar, inputMarginBottom, } = options;
+    const { bodySelectedStartNudge, bodyTypeStyles, inputMarginBottom, } = options;
     return `:where(.bf-theme) :where(.bf-search-box) {
   --bf-search-box-action-inline-size: calc(1rem + (var(--bf-component-inline-inset-field) * 2));
   --bf-search-box-trailing-inline-size: calc((var(--bf-search-box-action-inline-size) * 2) + var(--bf-border-width));
@@ -95,7 +95,7 @@ export function searchBoxAndFilterCss(options) {
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-search-container[aria-expanded='false']) {
-  min-block-size: var(--bf-control-box-size);
+  min-block-size: var(--bf-interface-row-painted-block-size);
 }
 
 :where(.bf-theme) :where(.bf-search-and-filter-box) {
@@ -174,7 +174,7 @@ ${bodyTypeStyles}  appearance: none;
   cursor: pointer;
   display: inline-flex;
   margin: 0;
-  padding-block: ${buttonBlockPaddingVar};
+  padding-block: ${bodySelectedStartNudge};
   padding-inline: 0;
   position: static;
 }

package/dist/css-components/sites-editorial-ports.js

@@ -68,7 +68,7 @@ export function sitesEditorialPortsCss() {
 
 /* Current Vanilla scopes a one-spacing-unit icon/value gap to the hero. */
 :where(.bf-theme) :where(.bf-hero-chip.bf-chip) {
-  column-gap: var(--bf-space-1);
+  column-gap: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-hero-media > :where(img, picture, video, canvas, svg), .bf-hero-signpost > :where(img, picture, video, canvas, svg)) {
@@ -117,6 +117,13 @@ export function sitesEditorialPortsCss() {
   }
 }
 
+/* A hero can keep its entry rule while placing its content directly against
+   that boundary. Scope this exception to the hero instead of publishing a
+   global padding utility. */
+:where(.bf-theme) :where(.bf-hero.is-top-flush) {
+  padding-block-start: 0;
+}
+
 @container bf-hero (width >= 45rem) {
   :where(.bf-theme) :where(.bf-hero-layout) {
     column-gap: var(--bf-grid-gap-inline);

package/dist/css-components/sites-foundation.js

@@ -66,10 +66,10 @@ export function sitesFoundationCss() {
   text-underline-offset: 0.12em;
 }
 
-/* A balanced section switches at the shared readable 50/50 threshold. The
+/* A balanced section switches at the standard medium container threshold. The
    layout descendant reacts to the root container; the query never tries to
    restyle the container that established it. */
-@container bf-basic-section (width >= 45rem) {
+@container bf-basic-section (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-basic-section-layout) {
     column-gap: var(--bf-grid-gap-inline);
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/dist/css-components/table.js

@@ -1,6 +1,14 @@
 export function tableCss(options) {
     const { bodyLineHeight, bodyMediumTypeStyles, bodyTypeStyles } = options;
-    return `:where(.bf-theme) :where(.bf-table-scroll) {
+    return `:where(.bf-theme) {
+  --bf-table-row-border-size: var(--bf-border-width);
+  --bf-table-row-padding-block-start: var(--bf-in-box-row-padding-block-start);
+  --bf-table-row-block-size: var(--bf-interface-row-occupied-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};
+}
+
+:where(.bf-theme) :where(.bf-table-scroll) {
   max-inline-size: 100%;
   min-inline-size: 0;
   overflow-x: auto;

package/dist/css-components/tabs-choice-breadcrumbs.js

@@ -32,11 +32,11 @@ ${bodyTypeStyles}  align-items: center;
   color: var(--bf-color-text-muted);
   cursor: pointer;
   display: flex;
-  gap: calc(var(--bf-baseline) * 0.5);
+  gap: var(--bf-leading-mark-gap);
   justify-content: center;
   margin-bottom: 0;
-  padding-block-end: calc(var(--bf-single-line-row-padding-block) + var(--bf-single-line-row-margin-block-end));
-  padding-block-start: var(--bf-single-line-row-padding-block);
+  padding-block-end: calc(var(--bf-interface-row-padding-block) + var(--bf-interface-row-compensation-block-end));
+  padding-block-start: var(--bf-interface-row-padding-block);
   padding-inline: var(--bf-component-inline-inset-action);
   text-decoration: none;
 }
@@ -79,7 +79,7 @@ ${bodyTypeStyles}  align-items: center;
 
 :where(.bf-theme) :where(.bf-tabs.is-equal) :where(.bf-tabs-list) {
   display: grid;
-  gap: calc(var(--bf-baseline) * 2);
+  gap: var(--bf-component-inline-inset-action);
   grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bf-ui-tabs-equal-min)), 1fr));
   overflow: visible;
   white-space: normal;
@@ -109,7 +109,7 @@ ${bodyTypeStyles}  align-items: center;
   color: var(--bf-color-text-default);
   cursor: pointer;
   display: grid;
-  gap: calc(var(--bf-baseline) * 0.75);
+  gap: var(--bf-leading-mark-gap);
   grid-template-columns: auto minmax(0, 1fr) auto;
   margin: 0 0 ${buttonMarginBottom};
   min-inline-size: 0;
@@ -175,7 +175,7 @@ ${bodyCaseTypeStyles}  color: var(--bf-color-text-muted);
 :where(.bf-theme) :where(.bf-inline-options-options) {
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--bf-baseline) * 3);
+  gap: var(--bf-component-inline-inset-continuation);
 }
 
 :where(.bf-theme) :where(.bf-inline-options-option) {
@@ -226,7 +226,7 @@ ${bodyTypeStyles}  align-items: center;
   margin-bottom: ${buttonMarginBottom};
   max-inline-size: 100%;
   overflow: hidden;
-${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;
   text-overflow: ellipsis;
@@ -273,7 +273,7 @@ ${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action-bordere
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  gap: calc(var(--bf-baseline) * 0.5) calc(var(--bf-baseline) * 1.25);
+  gap: calc(var(--bf-baseline) * 0.5) var(--bf-leading-mark-gap);
   list-style: none;
   margin: 0;
   min-inline-size: 0;
@@ -291,7 +291,7 @@ ${bodyCaseTypeStyles}  color: var(--bf-color-text-muted);
 :where(.bf-theme) :where(.bf-breadcrumbs-item) + :where(.bf-breadcrumbs-item)::before {
   color: var(--bf-color-text-muted);
   content: "/";
-  margin-inline-end: calc(var(--bf-baseline) * 0.75);
+  margin-inline-end: var(--bf-leading-mark-gap);
 }
 
 :where(.bf-theme) :where(.bf-breadcrumbs-item) a {

package/dist/css-components/tiered-list-equal-height-row.js

@@ -93,9 +93,9 @@ export function tieredListEqualHeightRowCss() {
 }
 
 /* ------------------------------------------------------------------ */
-/* Header split (≥ 45rem): the shared readable 50/50 title/content split. */
+/* Header split (≥ 38.75rem): the standard medium 50/50 title/content split. */
 /* ------------------------------------------------------------------ */
-@container (width >= 45rem) {
+@container (width >= 38.75rem) {
   :where(.bf-theme) :where(.bf-tiered-list:not(.is-description-full-width)) :where(.bf-tiered-list-header) {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }