baseline-foundry 0.1.3

package/dist/css-components/static-content-ports.js

@@ -0,0 +1,206 @@
+/**
+ * Static Vanilla parity ports: data spotlight and divided section. The
+ * 38.75rem and 64.75rem container thresholds preserve Vanilla's 620px and
+ * 1036px composition changes while allowing the patterns to respond to their
+ * allocated inline size.
+ *
+ * Vanilla → BF token mapping:
+ * - `$spv--strip-shallow` (1.5rem) → `--bf-section-space-shallow`.
+ * - Vanilla grid gutters → `--bf-grid-gap-inline`.
+ * - Data-spotlight statistics and headlines → the public `h1` and `h3` roles.
+ *   The slots own that mapping so consumers do not need companion utility
+ *   classes to receive correct four-tier typography.
+ */
+export function staticContentPortsCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Static content ports — Vanilla data spotlight and divided section. */
+/* Their children retain role-owned rhythm; these layout */
+/* wrappers add only structural columns, rules, and explicit section ends. */
+/* ------------------------------------------------------------------ */
+
+/* Data spotlight: Vanilla's equal-height wrap becomes an intrinsic grid.
+   Each item begins with a public highlighted rule using the shared emphasis
+   thickness. Item padding remains item-owned, so compositions never erase the
+   shallow inter-row rhythm when the pattern narrows. */
+:where(.bf-theme) :where(.bf-data-spotlight) {
+  container-type: inline-size;
+  margin-block-end: var(--bf-section-space);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-header) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-items) {
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-item) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-item:not(:last-child)) {
+  padding-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-stat) {
+  color: var(--bf-color-text-default);
+  display: block;
+  font-family: var(--bf-h1-font-family);
+  font-size: var(--bf-h1-font-size);
+  font-style: var(--bf-h1-font-style);
+  font-variant-caps: var(--bf-h1-font-variant-caps);
+  font-weight: var(--bf-h1-font-weight);
+  letter-spacing: var(--bf-h1-letter-spacing);
+  line-height: var(--bf-h1-line-height);
+  margin-block: 0 var(--bf-h1-margin-bottom);
+  overflow-wrap: anywhere;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h1-nudge-start);
+  text-transform: var(--bf-h1-text-transform);
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-headline) {
+  font-family: var(--bf-h3-font-family);
+  font-size: var(--bf-h3-font-size);
+  font-style: var(--bf-h3-font-style);
+  font-variant-caps: var(--bf-h3-font-variant-caps);
+  font-weight: var(--bf-h3-font-weight);
+  letter-spacing: var(--bf-h3-letter-spacing);
+  line-height: var(--bf-h3-line-height);
+  margin-block: 0 var(--bf-h3-margin-bottom);
+  min-inline-size: 0;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-h3-nudge-start);
+  text-transform: var(--bf-h3-text-transform);
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-description, .bf-data-spotlight-action) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-data-spotlight-action) {
+  display: block;
+  margin-block: 0 var(--bf-body-margin-bottom);
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
+}
+
+/* Vanilla's tablet wrap has two equal items per row. For three items the
+   in-grid title shares the first row; its first statistic owns the shallow
+   row separation. Four items give both first-row statistics that separation. */
+@container (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-data-spotlight-items) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-header, .bf-data-spotlight-item) {
+    display: grid;
+    grid-row: span 5;
+    grid-template-rows: subgrid;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight-item) {
+    padding-block-end: 0;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-header) {
+    block-size: 0;
+    overflow: visible;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
+    padding-block-end: var(--bf-section-space-shallow);
+  }
+}
+
+/* At Vanilla's large threshold the four stat blocks align in one row. Two
+   blocks reserve the leading half for the overhanging title; three reserve a
+   single leading column. The zero block-size matches Vanilla's height: 0
+   title cell without hiding its readable text. */
+@container (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-data-spotlight-items) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-two-blocks) :where(.bf-data-spotlight-header) {
+    block-size: 0;
+    grid-column: span 2;
+    overflow: visible;
+  }
+
+  :where(.bf-theme) :where(.bf-data-spotlight.is-three-blocks) :where(.bf-data-spotlight-item:first-of-type),
+  :where(.bf-theme) :where(.bf-data-spotlight.is-four-blocks) :where(.bf-data-spotlight-item:nth-child(-n + 2)) {
+    padding-block-end: 0;
+  }
+}
+
+/* Divided section: Vanilla's ruled 50/50 section is a one-column composition
+   until the relevant container can support the split. The rule is structural;
+   headings, copy, and content items keep their own metric-derived rhythm. */
+:where(.bf-theme) :where(.bf-divided-section) {
+  container-type: inline-size;
+  margin-block-end: var(--bf-section-space);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-header, .bf-divided-section-content) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-list) {
+  align-content: start;
+  display: grid;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-item) {
+  align-content: start;
+  display: grid;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-divided-section-item:not(:last-child)) {
+  padding-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-divided-section-item + .bf-divided-section-item) {
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  padding-block-start: calc(var(--bf-section-space-shallow) - var(--bf-border-width));
+}
+
+@container (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-divided-section.is-split-medium) :where(.bf-divided-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-divided-section) :where(.bf-divided-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+`;
+}

package/dist/css-components/tab-section.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Vanilla Sites tab-section as a BF-native composition.
+ *
+ * This module retains the rendered layout contract from vf_tab_section while
+ * deliberately leaving content assembly to HTML and BF's existing tabs
+ * runtime. The section never interprets a content-block type: quote, logo,
+ * divided-section and basic-section remain independent BF components.
+ *
+ * Vanilla → BF mapping:
+ * - 1036px large-grid switch → the 64.75rem descendant container query.
+ * - p-section / shallow / deep → BF section boundary tokens.
+ * - the intermediate p-section--shallow before a separate tab rail →
+ *   padding-block-start on that rail using --bf-section-space-shallow.
+ * - 8-column 4/4 and 2/6 spans → intrinsic 1/1 and 1/3 tracks.
+ *
+ * Heading type and content rhythm remain owned by semantic BF elements. The
+ * root establishes the container; every query styles descendants only.
+ */
+export declare function tabSectionCss(): string;

package/dist/css-components/tab-section.js

@@ -0,0 +1,103 @@
+/**
+ * Vanilla Sites tab-section as a BF-native composition.
+ *
+ * This module retains the rendered layout contract from vf_tab_section while
+ * deliberately leaving content assembly to HTML and BF's existing tabs
+ * runtime. The section never interprets a content-block type: quote, logo,
+ * divided-section and basic-section remain independent BF components.
+ *
+ * Vanilla → BF mapping:
+ * - 1036px large-grid switch → the 64.75rem descendant container query.
+ * - p-section / shallow / deep → BF section boundary tokens.
+ * - the intermediate p-section--shallow before a separate tab rail →
+ *   padding-block-start on that rail using --bf-section-space-shallow.
+ * - 8-column 4/4 and 2/6 spans → intrinsic 1/1 and 1/3 tracks.
+ *
+ * Heading type and content rhythm remain owned by semantic BF elements. The
+ * root establishes the container; every query styles descendants only.
+ */
+export function tabSectionCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Sites tab section — structural layout over the existing BF tabs API. */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-tab-section) {
+  container-name: bf-tab-section;
+  container-type: inline-size;
+  margin-block-end: var(--bf-section-space);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tab-section.is-shallow) {
+  margin-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-tab-section.is-deep) {
+  margin-block-end: var(--bf-section-space-deep);
+}
+
+:where(.bf-theme) :where(.bf-tab-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-tab-section-header, .bf-tab-section-intro, .bf-tab-section-tabs) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Vanilla wraps every tab rail except the unadorned 50/50 special case in a
+   shallow section. This explicit composition padding does not change any
+   child's semantic margins. */
+:where(.bf-theme) :where(.bf-tab-section:not(.is-50-50)) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs),
+:where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-tabs) {
+  padding-block-start: var(--bf-section-space-shallow);
+}
+
+@container bf-tab-section (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
+    grid-column: 1 / -1;
+  }
+
+  /* With supporting copy or actions, Vanilla's heading row is 50/50 for all
+     three section layouts. The following tab rail retains its own requested
+     full, half or three-quarter span. */
+  :where(.bf-theme) :where(.bf-tab-section-layout:has(> .bf-tab-section-intro)) > :where(.bf-tab-section-header) {
+    grid-column: 1 / 3;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-intro) {
+    grid-column: 3 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
+    grid-column: 1 / -1;
+  }
+
+  /* An unadorned 50/50 section lets auto-placement put the heading and tabs
+     in the same row. If an intro exists, it occupies that right-hand cell and
+     the tabs move to the following row, matching the upstream rendering. */
+  :where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-header) {
+    grid-column: 1 / 3;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section.is-50-50) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
+    grid-column: 3 / -1;
+  }
+
+  :where(.bf-theme) :where(.bf-tab-section.is-25-75) > :where(.bf-tab-section-layout) > :where(.bf-tab-section-tabs) {
+    grid-column: 2 / -1;
+  }
+}
+`;
+}

package/dist/css-components/table.d.ts

@@ -0,0 +1,7 @@
+type TableCssOptions = {
+    bodyLineHeight: string;
+    bodyMediumTypeStyles: string;
+    bodyTypeStyles: string;
+};
+export declare function tableCss(options: TableCssOptions): string;
+export {};

package/dist/css-components/table.js

@@ -0,0 +1,79 @@
+export function tableCss(options) {
+    const { bodyLineHeight, bodyMediumTypeStyles, bodyTypeStyles } = options;
+    return `:where(.bf-theme) :where(.bf-table-scroll) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+:where(.bf-theme) :where(.bf-table-scroll) > :where(table, .bf-table) {
+  min-inline-size: var(--bf-table-scroll-min-inline-size, 48rem);
+}
+
+:where(.bf-theme) :where(table, .bf-table) {
+  border: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: bottom;
+  line-height: ${bodyLineHeight};
+  margin: 0;
+  table-layout: auto;
+  width: 100%;
+}
+
+:where(.bf-theme) :where(caption, .bf-table-caption) {
+${bodyTypeStyles}  color: var(--bf-color-text-muted);
+  margin: 0;
+  padding-bottom: calc(var(--bf-baseline) * 0.5);
+  padding-top: calc(var(--bf-baseline) * 0.5);
+  text-align: left;
+}
+
+:where(.bf-theme) :where(th, td) {
+  border: 0;
+  border-block-end: var(--bf-table-row-border-size) solid transparent;
+  color: var(--bf-color-text-default);
+  line-height: var(--bf-table-row-line-height);
+  margin: 0;
+  overflow: hidden;
+  padding-block: var(--bf-table-row-padding);
+  padding-inline: calc(var(--bf-baseline) * 0.75);
+  text-align: left;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+:where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) {
+  padding-inline-start: calc((var(--bf-baseline) * 0.75) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+}
+
+:where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) > :where(.bf-icon:first-child) {
+  --bf-icon-size: var(--bf-leading-icon-size);
+  margin-inline-end: var(--bf-leading-icon-gap);
+  margin-inline-start: calc((var(--bf-leading-icon-size) + var(--bf-leading-icon-gap)) * -1);
+}
+
+:where(.bf-theme) :where(td) {
+  font-weight: var(--bf-body-font-weight, 400);
+}
+
+:where(.bf-theme) :where(thead th) {
+${bodyMediumTypeStyles}  color: var(--bf-color-text-default);
+  border-block-end-color: var(--bf-color-border-default);
+  line-height: var(--bf-table-row-line-height);
+}
+
+:where(.bf-theme) :where(tbody tr:not(:last-child) td, tfoot td) {
+  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);
+}
+`;
+}

package/dist/css-components/tabs-choice-breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+type TabsChoiceBreadcrumbsCssOptions = {
+    bodyCaseTypeStyles: string;
+    bodyStrongTypeStyles: string;
+    bodyTypeStyles: string;
+    buttonMarginBottom: string;
+    buttonPadding: string;
+};
+export declare function tabsChoiceBreadcrumbsCss(options: TabsChoiceBreadcrumbsCssOptions): string;
+export {};