baseline-foundry 0.1.3 → 0.1.5

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

@@ -3,149 +3,149 @@
  * primitives without changing their interaction ownership.
  */
 export function navigationLayoutCss() {
-    return `/* ------------------------------------------------------------------ */
-/* Navigation layout and page shell                                    */
-/* ------------------------------------------------------------------ */
-
-/* The row is only a layout owner. Interactive children own the occupied
- * block; row padding would leave an unpainted strip below their highlights. */
-:where(.bf-theme) :where(.bf-top-navigation-row) {
-  padding-block: 0;
-}
-
-/* The tagged treatment is opt-in. The Circle of Friends is aligned to the
- * first title line, then the 38px tag extends upward to the navigation edge.
- * Its 22px inline size preserves the established 38:22 (~1.73) tag ratio; the
- * tag must not stretch to the full occupied navigation row. */
-:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) {
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) > :where(.bf-top-navigation-link) {
-  align-items: start;
-  column-gap: 0;
-  display: inline-flex;
-  inline-size: 100%;
-  justify-content: flex-start;
-  padding-block: 0;
-  padding-inline: 0;
-  padding-inline-start: calc(var(--bf-top-navigation-logo-tag-inline-size) + var(--bf-top-navigation-logo-tag-gap));
-  position: relative;
-}
-
-:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-tag) {
-  align-items: flex-end;
-  background: var(--bf-color-brand);
-  block-size: var(--bf-top-navigation-logo-tag-block-size);
-  box-sizing: border-box;
-  display: flex;
-  inline-size: var(--bf-top-navigation-logo-tag-inline-size);
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  justify-content: center;
-  padding-block: 0 var(--bf-top-navigation-logo-icon-bottom-offset);
-  padding-inline: 0;
-  position: absolute;
-}
-
-:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) ~ :where(.bf-top-navigation-list.is-banner-actions) :where(.bf-top-navigation-menu-toggle, .bf-top-navigation-search-toggle),
-:where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-nav) :where(.bf-top-navigation-link, .bf-top-navigation-search-toggle) {
-  block-size: 100%;
-}
-
-:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-icon) {
-  block-size: var(--bf-top-navigation-logo-icon-size);
-  display: block;
-  flex: 0 0 auto;
-  inline-size: var(--bf-top-navigation-logo-icon-size);
-  transform: translateX(var(--bf-top-navigation-logo-icon-optical-offset-inline));
-}
-
-:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-title) {
-  align-self: start;
-  color: var(--bf-color-text-default);
-  font-size: var(--bf-top-navigation-logo-title-font-size, var(--bf-body-font-size, 1rem));
-  font-weight: 300;
-  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 16px mark share the mark's fixed centre:
-   * tag block-end minus the 6px inset minus half the mark. Symmetric title
-   * padding keeps the occupied row stable across all four type-density tiers. */
-  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-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
-  );
-  text-overflow: clip;
-  white-space: normal;
-}
-
-/* A grid-aligned header uses the same eight tracks and gutter as page content.
- * The brand/banner owns columns one and two; primary navigation starts at
- * column three. No independent brand-width token can drift from that grid. */
-:where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) {
-  container-type: inline-size;
-}
-
-@media (min-width: 64.75rem) {
-  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-row) {
-    column-gap: var(--bf-grid-gap-inline);
-    display: grid;
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-banner) {
-    grid-column: 1 / span 2;
-    min-inline-size: 0;
-  }
-
-  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-nav) {
-    grid-column: 3 / -1;
-    min-inline-size: 0;
-  }
-
-  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-dropdown) {
-    top: 100%;
-  }
-}
-
-/* Documentation composition stays single-column until its own container can
- * support the intentional 2/6 navigation/content split. The optional
- * navigation slot never creates a mobile rail. */
-:where(.bf-theme) :where(.bf-docs-layout) {
-  align-items: start;
-  column-gap: var(--bf-grid-gap-inline);
-  container-type: inline-size;
-  display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
-  min-inline-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-docs-layout-navigation, .bf-docs-layout-content) {
-  grid-column: 1 / -1;
-  min-inline-size: 0;
-}
-
-@media (min-width: 64.75rem) {
-  @container (width >= 38.75rem) {
-    :where(.bf-theme) :where(.bf-docs-layout:has(> .bf-docs-layout-navigation)) > :where(.bf-docs-layout-navigation) {
-      grid-column: span 2;
-    }
-
-    :where(.bf-theme) :where(.bf-docs-layout:has(> .bf-docs-layout-navigation)) > :where(.bf-docs-layout-content) {
-      grid-column: span 6;
-    }
-  }
-}
-
-/* This is deliberately scoped to an explicit page shell. Importing a BF tier
- * alone never changes the consuming document body's user-agent margin. */
-:where(body.bf-theme.bf-page-shell) {
-  background: var(--bf-color-background-default);
-  margin: 0;
-  min-block-size: 100dvb;
-}
+    return `/* ------------------------------------------------------------------ */
+/* Navigation layout and page shell                                    */
+/* ------------------------------------------------------------------ */
+
+/* The row is only a layout owner. Interactive children own the occupied
+ * block; row padding would leave an unpainted strip below their highlights. */
+:where(.bf-theme) :where(.bf-top-navigation-row) {
+  padding-block: 0;
+}
+
+/* The tagged treatment is opt-in. The Circle of Friends is aligned to the
+ * first title line, then the 2.375rem tag extends upward to the navigation edge.
+ * Its 1.375rem inline size preserves the established 38:22 (~1.73) tag ratio; the
+ * tag must not stretch to the full occupied navigation row. */
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) > :where(.bf-top-navigation-link) {
+  align-items: start;
+  column-gap: 0;
+  display: inline-flex;
+  inline-size: 100%;
+  justify-content: flex-start;
+  padding-block: 0;
+  padding-inline: 0;
+  padding-inline-start: calc(var(--bf-top-navigation-logo-tag-inline-size) + var(--bf-top-navigation-logo-tag-gap));
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-tag) {
+  align-items: flex-end;
+  background: var(--bf-color-brand);
+  block-size: var(--bf-top-navigation-logo-tag-block-size);
+  box-sizing: border-box;
+  display: flex;
+  inline-size: var(--bf-top-navigation-logo-tag-inline-size);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  justify-content: center;
+  padding-block: 0 var(--bf-top-navigation-logo-icon-bottom-offset);
+  padding-inline: 0;
+  position: absolute;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) ~ :where(.bf-top-navigation-list.is-banner-actions) :where(.bf-top-navigation-menu-toggle, .bf-top-navigation-search-toggle),
+:where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-nav) :where(.bf-top-navigation-link, .bf-top-navigation-search-toggle) {
+  block-size: 100%;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-icon) {
+  block-size: var(--bf-top-navigation-logo-icon-size);
+  display: block;
+  flex: 0 0 auto;
+  inline-size: var(--bf-top-navigation-logo-icon-size);
+  transform: translateX(var(--bf-top-navigation-logo-icon-optical-offset-inline));
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-title) {
+  align-self: start;
+  color: var(--bf-color-text-default);
+  font-size: var(--bf-top-navigation-logo-title-font-size, var(--bf-body-font-size, 1rem));
+  font-weight: 300;
+  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. */
+  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-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
+  );
+  text-overflow: clip;
+  white-space: normal;
+}
+
+/* A grid-aligned header uses the same eight tracks and gutter as page content.
+ * The brand/banner owns columns one and two; primary navigation starts at
+ * column three. No independent brand-width token can drift from that grid. */
+:where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) {
+  container-type: inline-size;
+}
+
+@media (min-width: 64.75rem) {
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-row) {
+    column-gap: var(--bf-grid-gap-inline);
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-banner) {
+    grid-column: 1 / span 2;
+    min-inline-size: 0;
+  }
+
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-nav) {
+    grid-column: 3 / -1;
+    min-inline-size: 0;
+  }
+
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-dropdown) {
+    top: 100%;
+  }
+}
+
+/* Documentation composition stays single-column until its own container can
+ * support the intentional 2/6 navigation/content split. The optional
+ * navigation slot never creates a mobile rail. */
+:where(.bf-theme) :where(.bf-docs-layout) {
+  align-items: start;
+  column-gap: var(--bf-grid-gap-inline);
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-docs-layout-navigation, .bf-docs-layout-content) {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
+}
+
+@media (min-width: 64.75rem) {
+  @container (width >= 38.75rem) {
+    :where(.bf-theme) :where(.bf-docs-layout:has(> .bf-docs-layout-navigation)) > :where(.bf-docs-layout-navigation) {
+      grid-column: span 2;
+    }
+
+    :where(.bf-theme) :where(.bf-docs-layout:has(> .bf-docs-layout-navigation)) > :where(.bf-docs-layout-content) {
+      grid-column: span 6;
+    }
+  }
+}
+
+/* This is deliberately scoped to an explicit page shell. Importing a BF tier
+ * alone never changes the consuming document body's user-agent margin. */
+:where(body.bf-theme.bf-page-shell) {
+  background: var(--bf-color-background-default);
+  margin: 0;
+  min-block-size: 100dvb;
+}
 `;
 }

package/dist/css-components/panel.js

@@ -1,148 +1,152 @@
 export function panelCss(options) {
     const { bodyTypeStyles, h4TypeStyles } = options;
-    return `:where(.bf-theme) :where(.bf-panel) {
-  background: var(--bf-color-background-default);
-  color: var(--bf-color-text-default);
-  display: flex;
-  flex-direction: column;
-  inline-size: 100%;
-  max-inline-size: 100%;
-  min-block-size: 0;
-}
-
-:where(.bf-theme) :where(.bf-panel.is-fill) {
-  block-size: 100%;
-  max-inline-size: none;
-  min-block-size: 0;
-  resize: none;
-}
-
-:where(.bf-theme) :where(.bf-panel.is-fill) > :where(.bf-panel-content) {
-  min-block-size: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-:where(.bf-theme) :where(.bf-panel-header) {
-  align-items: start;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--bf-field-gap);
-  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-padding-inline);
-}
-
-/* A navigation brand keeps the Canonical tag attached to the panel's top edge
- * while sharing the panel-content inline inset used by the opposing main
- * region. Ordinary content-panel headers retain their complete padding. */
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) {
-  gap: 0;
-  padding-block: 0;
-  padding-inline-end: 0;
-  padding-inline-start: var(--bf-panel-padding-inline);
-}
-
-:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
-  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;
-}
-
-:where(.bf-theme) :where(.bf-panel-header.is-sticky) {
-  background: var(--bf-color-background-default);
-  position: sticky;
-  top: 0;
-  z-index: 5;
-}
-
-/* Panel chrome that remains outside the panel's scrolling content. */
-:where(.bf-theme) :where(.bf-panel-footer) {
-  align-items: center;
-  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
-  display: flex;
-  flex: 0 0 auto;
-  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) * 2));
-  padding-block-end: var(--bf-panel-padding-block);
-  padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-  padding-inline: var(--bf-panel-padding-inline);
-}
-
-:where(.bf-theme) :where(.bf-panel-footer.is-sticky) {
-  background: var(--bf-color-background-default);
-  bottom: 0;
-  position: sticky;
-  z-index: 5;
-}
-
-:where(.bf-theme) :where(.bf-panel-title) {
-${h4TypeStyles}  margin: 0 0 var(--bf-h4-margin-bottom);
-  min-inline-size: 0;
-  padding-block-end: 0;
-  padding-block-start: var(--bf-h4-nudge-start);
-}
-
-:where(.bf-theme) :where(.bf-panel-controls) {
-  align-items: start;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--bf-field-gap);
-  margin-inline-start: auto;
-}
-
-:where(.bf-theme) :where(.bf-panel-toggle) {
-${bodyTypeStyles}  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--bf-color-text-default);
-  cursor: pointer;
-  display: inline-flex;
-  gap: calc(var(--bf-baseline) * 0.5);
-  justify-content: flex-start;
-  margin: 0;
-  min-block-size: var(--bf-control-box-size-compact);
-  min-inline-size: 0;
-  padding-block: var(--bf-control-block-padding-compact);
-  padding-inline: 0;
-  text-align: left;
-}
-
-:where(.bf-theme) :where(.bf-panel-toggle:hover) {
-  color: var(--bf-color-link-default);
-}
-
-:where(.bf-theme) :where(.bf-panel-toggle:focus:not(:focus-visible)) {
-  outline: none;
-}
-
-:where(.bf-theme) :where(.bf-panel-toggle:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
-}
-
-:where(.bf-theme) :where(.bf-panel-content) {
-  flex: 1 1 auto;
-  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-padding-inline);
-}
-
-:where(.bf-theme) :where(.bf-panel-content.is-flush) {
-  padding-block: 0;
-  padding-inline: 0;
-}
-
+    return `:where(.bf-theme) :where(.bf-panel) {
+  --bf-panel-content-padding-inline: var(--bf-component-inline-inset-continuation);
+  background: var(--bf-color-background-default);
+  color: var(--bf-color-text-default);
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-block-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-panel.is-fill) {
+  block-size: 100%;
+  max-inline-size: none;
+  min-block-size: 0;
+  resize: none;
+}
+
+:where(.bf-theme) :where(.bf-panel.is-fill) > :where(.bf-panel-content) {
+  min-block-size: 0;
+  overflow: auto;
+  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. */
+:where(.bf-theme) :where(.bf-panel-header) {
+  align-items: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-field-gap);
+  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));
+}
+
+/* A navigation brand keeps the Canonical tag attached to the panel's top edge
+ * while sharing the panel-content inline inset used by the opposing main
+ * region. Ordinary content-panel headers retain their complete padding. */
+:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) {
+  gap: 0;
+  padding-block: 0;
+  padding-inline-end: 0;
+  padding-inline-start: var(--bf-panel-content-padding-inline, var(--bf-panel-padding-inline));
+}
+
+:where(.bf-theme) :where(.bf-panel-header.is-navigation-brand) > :where(.bf-top-navigation-logo.is-canonical-tagged) {
+  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;
+}
+
+:where(.bf-theme) :where(.bf-panel-header.is-sticky) {
+  background: var(--bf-color-background-default);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+/* Panel chrome that remains outside the panel's scrolling content. */
+:where(.bf-theme) :where(.bf-panel-footer) {
+  align-items: center;
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: flex;
+  flex: 0 0 auto;
+  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));
+  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));
+}
+
+:where(.bf-theme) :where(.bf-panel-footer.is-sticky) {
+  background: var(--bf-color-background-default);
+  bottom: 0;
+  position: sticky;
+  z-index: 5;
+}
+
+:where(.bf-theme) :where(.bf-panel-title) {
+${h4TypeStyles}  margin: 0 0 var(--bf-h4-margin-bottom);
+  min-inline-size: 0;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h4-nudge-start);
+}
+
+:where(.bf-theme) :where(.bf-panel-controls) {
+  align-items: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-field-gap);
+  margin-inline-start: auto;
+}
+
+:where(.bf-theme) :where(.bf-panel-toggle) {
+${bodyTypeStyles}  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: inline-flex;
+  gap: calc(var(--bf-baseline) * 0.5);
+  justify-content: flex-start;
+  margin: 0;
+  min-block-size: var(--bf-control-box-size-compact);
+  min-inline-size: 0;
+  padding-block: var(--bf-control-block-padding-compact);
+  padding-inline: 0;
+  text-align: left;
+}
+
+:where(.bf-theme) :where(.bf-panel-toggle:hover) {
+  color: var(--bf-color-link-default);
+}
+
+:where(.bf-theme) :where(.bf-panel-toggle:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-panel-toggle:focus-visible) {
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
+}
+
+:where(.bf-theme) :where(.bf-panel-content) {
+  flex: 1 1 auto;
+  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));
+}
+
+:where(.bf-theme) :where(.bf-panel-content.is-flush) {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
 `;
 }

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

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