baseline-foundry 0.1.3 → 0.1.4

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

@@ -12,195 +12,195 @@
  *   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;
-}
-
+    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;
-}
-
+  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));
-  }
-}
+  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.js

@@ -17,87 +17,87 @@
  * 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;
-  }
-}
+    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;
+  }
+}
 `;
 }