baseline-foundry 0.1.3 → 0.1.5

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

@@ -15,159 +15,155 @@
  *   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;
-}
-
+    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(a.bf-basic-section-title-link, a.bf-basic-section-title-link:visited) {
+  color: var(--bf-color-link-default);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(a.bf-basic-section-title-link:hover) {
+  text-decoration: underline;
+  text-decoration-thickness: var(--bf-border-width);
+  text-underline-offset: 0.12em;
+}
+
+/* A balanced section switches at the shared readable 50/50 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) {
+  :where(.bf-theme) :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;
+}
+
+:where(.bf-theme) :where(.bf-cta-section-content) {
+  --bf-stack-space: var(--bf-section-space-shallow);
+  align-content: start;
+  display: grid;
+  gap: var(--bf-stack-space);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-cta-section-copy) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+@container bf-cta-section (width >= 64.75rem) {
+  :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;
-}
-
+  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);
-  }
-}
+  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

@@ -8,11 +8,11 @@
  * 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
+ * - horizontal item 0.5rem/1rem block padding → `space-1`/`space-2`;
+ * - 1rem grid gutters → `grid-gap-inline`;
+ * - the 38.75rem/64.75rem page breakpoints → 38.75rem/64.75rem container
  *   thresholds for descendants. Text roles keep their own metric-derived
- *   margins and baseline compensation in every tier.
+ *   margins and baseline compensation in every tier. Parent stacks own every
+ *   boundary outside the pattern.
  */
 export declare function sitesRichListsCss(): string;