baseline-foundry 0.1.3

package/dist/css-components/sites-foundation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Small composition contracts for the first Vanilla Sites tranche.
+ *
+ * Vanilla's basic-section, cta-section and text-spotlight macros mostly
+ * compose existing section, rule, heading, copy and CTA primitives. This is
+ * intentionally not a macro compatibility layer: the styles below retain
+ * only the repeated structural geometry found in their rendered output.
+ *
+ * Vanilla → BF mapping:
+ * - 25/75 and 50/50 layouts use intrinsic one-/two-column grids and BF's
+ *   existing gutter token instead of legacy span utility classes.
+ * - Pattern internals use nested stack gaps; complete patterns use an outer
+ *   section stack.
+ * - Heading, paragraph, list, figure and CTA children retain only metric
+ *   compensation.
+ */
+export declare function sitesFoundationCss(): string;

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

@@ -0,0 +1,173 @@
+/**
+ * Small composition contracts for the first Vanilla Sites tranche.
+ *
+ * Vanilla's basic-section, cta-section and text-spotlight macros mostly
+ * compose existing section, rule, heading, copy and CTA primitives. This is
+ * intentionally not a macro compatibility layer: the styles below retain
+ * only the repeated structural geometry found in their rendered output.
+ *
+ * Vanilla → BF mapping:
+ * - 25/75 and 50/50 layouts use intrinsic one-/two-column grids and BF's
+ *   existing gutter token instead of legacy span utility classes.
+ * - Pattern internals use nested stack gaps; complete patterns use an outer
+ *   section stack.
+ * - Heading, paragraph, list, figure and CTA children retain only metric
+ *   compensation.
+ */
+export function sitesFoundationCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Sites composition foundation — basic section, CTA and text spotlight. */
+/* ------------------------------------------------------------------ */
+
+/* Basic section: the top rule and the named header/content slots make the
+   composition legible without recreating the upstream Jinja item API. */
+:where(.bf-theme) :where(.bf-basic-section) {
+  container-name: bf-basic-section;
+  container-type: inline-size;
+  margin-block-end: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-basic-section.is-shallow) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-basic-section.is-deep) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-basic-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+  /* The rule already owns its half-rem trailing compensation. This structural
+     grid must not add the generic pattern-stack gap on top of it. */
+  row-gap: 0;
+}
+
+:where(.bf-theme) :where(.bf-basic-section-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-basic-section-header, .bf-basic-section-content) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/* A section title may be the route action without looking like body copy. */
+:where(.bf-theme) :where(.bf-basic-section-title-link, .bf-basic-section-title-link:visited) {
+  color: var(--bf-color-link-default);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-basic-section-title-link:hover) {
+  text-decoration: underline;
+  text-decoration-thickness: var(--bf-border-width);
+  text-underline-offset: 0.12em;
+}
+
+/* Vanilla splits at medium only on request, otherwise at its large breakpoint.
+   The layout descendant reacts to the root container; the query never tries to
+   restyle the container that established it. */
+@container bf-basic-section (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-basic-section.is-split-medium) :where(.bf-basic-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container bf-basic-section (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-basic-section:not(.is-split-medium)) :where(.bf-basic-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+}
+
+/* CTA section: Vanilla's 25/75 variant is an offset content rail. The full
+   variant stays naturally full-width. Typography and action presentation are
+   supplied by real heading elements and bf-cta-block. */
+:where(.bf-theme) :where(.bf-cta-section) {
+  container-name: bf-cta-section;
+  container-type: inline-size;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-cta-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+  padding-block: calc(var(--bf-section-space-deep) / 2);
+}
+
+:where(.bf-theme) :where(.bf-cta-section-content) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+@container bf-cta-section (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-cta-section-layout) {
+    padding-block: var(--bf-section-space-deep);
+  }
+
+  :where(.bf-theme) :where(.bf-cta-section.is-offset) :where(.bf-cta-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-cta-section.is-offset) :where(.bf-cta-section-content) {
+    grid-column: 2;
+  }
+}
+
+/* Text spotlight: a ruled title rail and two-to-seven prominent list items.
+   The ordered list itself is structural; each item uses a genuine BF heading
+   role and therefore keeps the correct tier-specific rhythm. */
+:where(.bf-theme) :where(.bf-text-spotlight) {
+  container-name: bf-text-spotlight;
+  container-type: inline-size;
+  margin-block-end: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-text-spotlight-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-text-spotlight-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-text-spotlight-header, .bf-text-spotlight-content) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-text-spotlight-items) {
+  align-content: start;
+  display: grid;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-text-spotlight-item) {
+  align-content: start;
+  display: grid;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-text-spotlight-item) > :where(a) {
+  overflow-wrap: anywhere;
+}
+
+@container bf-text-spotlight (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-text-spotlight-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+}
+`;
+}

package/dist/css-components/sites-rich-lists.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Vanilla Sites parity: rich horizontal and rich vertical lists.
+ *
+ * These contracts preserve the current macros' rendered compositions without
+ * reproducing their Jinja slot API. The horizontal variant combines a title,
+ * optional media/description/logos, a responsive ruled list and CTA. The
+ * vertical variant is the selected media-object composition: structured BF
+ * content paired with one responsive image or video slot.
+ *
+ * Vanilla → BF spacing mapping:
+ * - horizontal item 8px/16px block padding → `space-1`/`space-2`;
+ * - 16px grid gutters → `grid-gap-inline`;
+ * - shallow/default/deep section exits → BF's existing section tokens;
+ * - the 620px/1036px page breakpoints → 38.75rem/64.75rem container
+ *   thresholds for descendants. Text roles keep their own metric-derived
+ *   margins and baseline compensation in every tier.
+ */
+export declare function sitesRichListsCss(): string;

package/dist/css-components/sites-rich-lists.js

@@ -0,0 +1,364 @@
+/**
+ * Vanilla Sites parity: rich horizontal and rich vertical lists.
+ *
+ * These contracts preserve the current macros' rendered compositions without
+ * reproducing their Jinja slot API. The horizontal variant combines a title,
+ * optional media/description/logos, a responsive ruled list and CTA. The
+ * vertical variant is the selected media-object composition: structured BF
+ * content paired with one responsive image or video slot.
+ *
+ * Vanilla → BF spacing mapping:
+ * - horizontal item 8px/16px block padding → `space-1`/`space-2`;
+ * - 16px grid gutters → `grid-gap-inline`;
+ * - shallow/default/deep section exits → BF's existing section tokens;
+ * - the 620px/1036px page breakpoints → 38.75rem/64.75rem container
+ *   thresholds for descendants. Text roles keep their own metric-derived
+ *   margins and baseline compensation in every tier.
+ */
+export function sitesRichListsCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Sites rich lists — structural slots around existing BF primitives.   */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-rich-list) {
+  container-name: bf-rich-list;
+  container-type: inline-size;
+  min-inline-size: 0;
+  padding-block-end: calc(var(--bf-section-space) / 2);
+}
+
+:where(.bf-theme) :where(.bf-rich-list.is-shallow) {
+  padding-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-rich-list.is-deep) {
+  padding-block-end: calc(var(--bf-section-space-deep) / 2);
+}
+
+:where(.bf-theme) :where(.bf-rich-list-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-rule) {
+  grid-column: 1 / -1;
+  order: -2;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-header, .bf-rich-list-support, .bf-rich-list-content, .bf-rich-list-media, .bf-rich-list-list-slot, .bf-rich-list-cta) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-rich-list:not(.is-shallow)) {
+    padding-block-end: var(--bf-section-space);
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-deep) {
+    padding-block-end: var(--bf-section-space-deep);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Horizontal: the full composition remains stacked. The 50/50 variant */
+/* places title and support in equal logical rails at the large split. */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-rich-list.is-horizontal) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-visual, .bf-rich-list-header, .bf-rich-list-support, .bf-rich-list-list-slot, .bf-rich-list-cta-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-visual) {
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-visual > :where(img, picture, svg, video, canvas)) {
+  block-size: auto;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+/* A full-width ratio inside a fluid Sites rail otherwise leaves the next
+   heading on a fractional pixel. The visual alone absorbs the trailing
+   compensation; semantic children retain their own margins unchanged. */
+@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+  :where(.bf-theme) :where(.bf-rich-list-visual > .bf-aspect) {
+    block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
+  }
+}
+
+:where(.bf-theme) :where(.bf-rich-list-list-slot) {
+  container-name: bf-rich-horizontal-items;
+  container-type: inline-size;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-list) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+/* Vanilla gives every horizontal-list row a continuous leading divider. */
+:where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item {
+  margin: 0;
+  padding-block: var(--bf-space-1) var(--bf-space-2);
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item::after {
+  background: var(--bf-color-border-low-contrast);
+  block-size: var(--bf-border-width);
+  content: "";
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  position: absolute;
+}
+
+/* Prefixes are logical here even though the shared list predates BF's
+   logical-property rule. This keeps ticks, bullets and numbers RTL-safe. */
+:where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:is(.is-ticked, .is-crossed) {
+  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+}
+
+:where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:is(.is-ticked, .is-crossed)::before {
+  inset: auto;
+  inset-inline-start: 0;
+  inset-block-start: calc(var(--bf-body-nudge-start) + var(--bf-space-1));
+}
+
+:where(.bf-theme) :where(.bf-rich-list-list.is-bulleted) > :where(.bf-list-item) {
+  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+}
+
+:where(.bf-theme) :where(.bf-rich-list-list.is-bulleted) > :where(.bf-list-item)::before {
+  color: var(--bf-color-text-default);
+  content: "•";
+  inline-size: var(--bf-leading-icon-size);
+  inset-block-start: var(--bf-space-1);
+  inset-inline-start: 0;
+  position: absolute;
+  text-align: center;
+}
+
+:where(.bf-theme) :where(ol.bf-rich-list-list) {
+  counter-reset: bf-rich-horizontal-counter;
+}
+
+:where(.bf-theme) :where(ol.bf-rich-list-list) > :where(.bf-list-item) {
+  counter-increment: bf-rich-horizontal-counter;
+  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+}
+
+:where(.bf-theme) :where(ol.bf-rich-list-list) > :where(.bf-list-item)::before {
+  color: var(--bf-color-text-default);
+  content: counter(bf-rich-horizontal-counter) ".";
+  inline-size: var(--bf-leading-icon-size);
+  inset-block-start: var(--bf-space-1);
+  inset-inline-start: 0;
+  position: absolute;
+  text-align: end;
+}
+
+/* Vanilla's list measures are content-derived: one column below 66ch, two
+   from 66ch, and four from 100ch. Pseudo-rules span the complete row. */
+@container bf-rich-horizontal-items (width >= 66ch) {
+  :where(.bf-theme) :where(.bf-rich-list-list) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item::after {
+    content: none;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:nth-child(2n + 1)::after {
+    content: "";
+    inline-size: calc(200% + var(--bf-grid-gap-inline));
+  }
+}
+
+@container bf-rich-horizontal-items (width >= 100ch) {
+  :where(.bf-theme) :where(.bf-rich-list-list) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item::after,
+  :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:nth-child(2n + 1)::after {
+    content: none;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-list) > .bf-list-item:nth-child(4n + 1)::after {
+    content: "";
+    inline-size: calc(400% + (var(--bf-grid-gap-inline) * 3));
+  }
+}
+
+@container bf-rich-list (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-header) {
+    grid-column: 1;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-horizontal.is-50-50) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-support) {
+    grid-column: 2;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-horizontal) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-cta) {
+    grid-column: 2;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Vertical: a rich media object, not a Jinja content-block adapter.    */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-rich-list.is-vertical) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-rule) {
+  grid-column: 1 / -1;
+}
+
+:where(.bf-theme) :where(.bf-rich-list.is-vertical) :where(.bf-rich-list-media) {
+  container-type: inline-size;
+  padding-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-rich-list.is-vertical.is-flipped) :where(.bf-rich-list-media) {
+  order: -1;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media-frame) {
+  aspect-ratio: 3 / 2;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+/* The media object deliberately stretches across fluid 1/2 and 2/3 ratios.
+   Snap that resulting block, rather than resetting content spacing, so each
+   tier's baseline survives both portrait and landscape allocations. */
+@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+  :where(.bf-theme) :where(.bf-rich-list-media-frame) {
+    block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
+  }
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media.is-narrow-3-2) :where(.bf-rich-list-media-frame) {
+  aspect-ratio: 3 / 2;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media.is-narrow-16-9) :where(.bf-rich-list-media-frame),
+:where(.bf-theme) :where(.bf-rich-list-media.is-video) :where(.bf-rich-list-media-frame) {
+  aspect-ratio: 16 / 9;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media.is-narrow-square) :where(.bf-rich-list-media-frame) {
+  aspect-ratio: 1 / 1;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media > .bf-rich-list-media-frame > :where(img, picture, svg, video, canvas, iframe)) {
+  block-size: 100%;
+  border: 0;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  object-fit: cover;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media > .bf-rich-list-media-frame > :where(picture) > :where(img)) {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+:where(.bf-theme) :where(.bf-rich-list-media.is-contain > .bf-rich-list-media-frame > :where(img, svg, video, canvas)),
+:where(.bf-theme) :where(.bf-rich-list-media.is-contain > .bf-rich-list-media-frame > :where(picture) > :where(img)) {
+  object-fit: contain;
+}
+
+/* Auto height has no shallow media wrapper in Vanilla. At narrow widths it
+   remains a normal 3:2 frame; at the wide split it stretches with the content
+   rail, clamped between the equivalent 16:9 and 2:3 heights. */
+:where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) {
+  padding-block-end: 0;
+}
+
+@container bf-rich-list (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-rich-list.is-vertical) > :where(.bf-rich-list-layout) {
+    align-items: stretch;
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-vertical) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-content) {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-vertical) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-media) {
+    grid-column: 2;
+    grid-row: 2;
+    order: 0;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-vertical.is-flipped) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-content) {
+    grid-column: 2;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list.is-vertical.is-flipped) > :where(.bf-rich-list-layout) > :where(.bf-rich-list-media) {
+    grid-column: 1;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-media.is-wide-16-9) :where(.bf-rich-list-media-frame) {
+    aspect-ratio: 16 / 9;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-media.is-wide-3-2) :where(.bf-rich-list-media-frame) {
+    aspect-ratio: 3 / 2;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-media.is-wide-square) :where(.bf-rich-list-media-frame) {
+    aspect-ratio: 1 / 1;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-media.is-wide-2-3) :where(.bf-rich-list-media-frame) {
+    aspect-ratio: 2 / 3;
+  }
+
+  :where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) :where(.bf-rich-list-media-frame) {
+    aspect-ratio: auto;
+    block-size: 100%;
+    max-block-size: 150cqi;
+    min-block-size: 56.25cqi;
+  }
+
+  @supports (min-block-size: round(up, 1px, 1px)) {
+    :where(.bf-theme) :where(.bf-rich-list-media.is-auto-height) :where(.bf-rich-list-media-frame) {
+      max-block-size: round(down, 150cqi, var(--bf-baseline));
+      min-block-size: round(up, 56.25cqi, var(--bf-baseline));
+    }
+  }
+
+  /* Vanilla's auto-height image is absolutely positioned inside the clamped
+     frame. Removing intrinsic media from track sizing lets the content rail
+     determine the shared row before the 16:9/2:3 clamps are applied. */
+  :where(.bf-theme) :where(.bf-rich-list-media.is-auto-height > .bf-rich-list-media-frame > :where(img, picture, svg, video, canvas, iframe)) {
+    inset: 0;
+    position: absolute;
+  }
+}
+`;
+}

package/dist/css-components/static-content-ports.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 declare function staticContentPortsCss(): string;