baseline-foundry 0.1.3

package/dist/css-components/panel.js

@@ -0,0 +1,148 @@
+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;
+}
+
+`;
+}

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

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

package/dist/css-components/search-box-and-filter.js

@@ -0,0 +1,267 @@
+export function searchBoxAndFilterCss(options) {
+    const { bodySelectedStartNudge, bodyTypeStyles, buttonBlockPaddingVar, h6TypeStyles, inputMarginBottom, } = options;
+    return `:where(.bf-theme) :where(.bf-search-box) {
+  --bf-search-box-action-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-search-box-trailing-inline-size: calc((var(--bf-search-box-action-inline-size) * 2) + var(--bf-border-width));
+  display: flex;
+  inline-size: 100%;
+  margin: 0 0 ${inputMarginBottom};
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-search-box-input) {
+  margin-bottom: 0;
+  padding-inline-end: var(--bf-search-box-trailing-inline-size);
+}
+
+:where(.bf-theme) :where(.bf-search-box-reset, .bf-search-box-button) {
+  align-items: center;
+  block-size: var(--bf-control-box-size);
+  display: inline-flex;
+  inline-size: var(--bf-search-box-action-inline-size);
+  justify-content: center;
+  position: absolute;
+  top: 0;
+}
+
+:where(.bf-theme) :where(.bf-search-box-reset) {
+  inset-inline-end: calc(var(--bf-search-box-action-inline-size) + var(--bf-border-width));
+}
+
+:where(.bf-theme) :where(.bf-search-box-button) {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-inline-start: var(--bf-border-width) solid var(--bf-color-border-default);
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  inset-inline-end: var(--bf-border-width);
+  margin: 0;
+  padding: 0;
+  text-indent: -9999px;
+}
+
+:where(.bf-theme) :where(.bf-search-box-button)::before {
+  background-image: var(--bf-ui-icon-search);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  block-size: 1rem;
+  content: "";
+  inline-size: 1rem;
+  left: 50%;
+  position: absolute;
+  text-indent: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:where(.bf-theme) :where(.bf-search-box-button)::after {
+  content: none;
+}
+
+:where(.bf-theme) :where(.bf-search-box-reset:focus:not(:focus-visible), .bf-search-box-button:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-search-box-reset:focus-visible, .bf-search-box-button:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter) {
+  display: grid;
+  inline-size: 100%;
+  margin: 0;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-container) {
+  align-items: stretch;
+  background: transparent;
+  box-shadow: inset 0 -1px 0 var(--bf-color-border-high-contrast);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-field-gap);
+  margin: 0 0 ${inputMarginBottom};
+  min-block-size: 0;
+  overflow: visible;
+  padding: 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-container[aria-expanded='false']) {
+  min-block-size: var(--bf-control-box-size);
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-box) {
+  --bf-search-and-filter-action-inline-size: calc(1rem + (var(--bf-control-inline-padding-field) * 2));
+  --bf-search-and-filter-trailing-inline-size: calc(var(--bf-search-and-filter-action-inline-size) * 2);
+  display: inline-flex;
+  flex: 1 1 12rem;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-input) {
+  margin-bottom: 0;
+  padding-inline-end: var(--bf-search-and-filter-trailing-inline-size);
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-button) {
+  appearance: none;
+  background: transparent;
+  block-size: var(--bf-control-box-size);
+  border: 0;
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  inline-size: var(--bf-search-and-filter-action-inline-size);
+  inset-inline-end: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  text-indent: -9999px;
+  top: 0;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-button)::before {
+  background-image: var(--bf-ui-icon-search);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  block-size: 1rem;
+  content: "";
+  inline-size: 1rem;
+  left: 50%;
+  position: absolute;
+  text-indent: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-button)::after {
+  content: none;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-button:focus:not(:focus-visible), .bf-search-and-filter-selected-count:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-button:focus-visible, .bf-search-and-filter-selected-count:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-clear) {
+  block-size: var(--bf-control-box-size);
+  inline-size: var(--bf-search-and-filter-action-inline-size);
+  inset-inline-end: var(--bf-search-and-filter-action-inline-size);
+  position: absolute;
+  top: 0;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-selected-count) {
+${bodyTypeStyles}  appearance: none;
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  color: var(--bf-color-link-default);
+  cursor: pointer;
+  display: inline-flex;
+  margin: 0;
+  padding-block: ${buttonBlockPaddingVar};
+  padding-inline: 0;
+  position: static;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-container[aria-expanded='true']) :where(.bf-search-and-filter-selected-count) {
+  display: none;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-panel) {
+  background-color: var(--bf-color-background-inputs);
+  border: var(--bf-border-width) solid var(--bf-color-border-default);
+  border-top: 0;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
+  display: grid;
+  gap: var(--bf-field-gap);
+  opacity: 1;
+  padding-bottom: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+  padding-inline: var(--bf-panel-padding-inline);
+  padding-top: var(--bf-panel-padding-block);
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 20;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-panel[aria-hidden='true']) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-prompt) {
+  background: var(--bf-color-background-inputs);
+  color: var(--bf-color-text-muted);
+  cursor: pointer;
+  margin: 0;
+  overflow: hidden;
+  padding-block-end: 0;
+  padding-block-start: ${bodySelectedStartNudge};
+  padding-inline: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-search-and-filter-search-query) {
+  color: var(--bf-color-text-default);
+  font-weight: 600;
+}
+
+:where(.bf-theme) :where(.bf-filter-panel-section) {
+  border-bottom: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: grid;
+  gap: var(--bf-field-gap);
+  margin: 0;
+  padding-bottom: calc(var(--bf-baseline) * 0.75);
+}
+
+:where(.bf-theme) :where(.bf-filter-panel-section:last-child) {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+:where(.bf-theme) :where(.bf-filter-panel-section-heading) {
+${h6TypeStyles}  color: var(--bf-color-text-muted);
+  margin: 0;
+  padding-block: 0;
+}
+
+:where(.bf-theme) :where(.bf-filter-panel-section-chips) {
+  overflow: hidden;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-filter-panel-section-chips[aria-expanded='false']) {
+  max-block-size: calc(var(--bf-baseline) * 5);
+}
+
+:where(.bf-theme) :where(.bf-filter-panel-section-counter) {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  bottom: 0;
+  color: var(--bf-color-link-default);
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+}
+`;
+}

package/dist/css-components/sites-editorial-ports.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Vanilla Sites parity ports: hero and quote wrapper.
+ *
+ * These are structural compositions, rather than a compatibility rendition of
+ * the Jinja macros. The named slots let a page assemble BF headings, prose,
+ * CTA blocks, figures and chips without importing a parallel item schema.
+ *
+ * Vanilla → BF spacing mapping:
+ * - Hero's `$spv--large` / `$spv--x-large` top boundary → `space-2` /
+ *   `space-3`; `$spv--strip-regular / 2` / full strip bottom boundary →
+ *   half `section-space` / full `section-space`.
+ * - The 50/50, 25/75 and 75/25 grid relationships use BF's intrinsic grid
+ *   and gutter token at Vanilla's 620px / 1036px composition thresholds.
+ * - Quote-wrapper's signpost/content and quote/citation relationships use
+ *   the same 25/75 and 2/1 proportions. A quotation itself remains the
+ *   existing semantic BF prose `blockquote`; it is not recreated as a
+ *   heading-styled paragraph.
+ */
+export declare function sitesEditorialPortsCss(): string;

package/dist/css-components/sites-editorial-ports.js

@@ -0,0 +1,264 @@
+/**
+ * Vanilla Sites parity ports: hero and quote wrapper.
+ *
+ * These are structural compositions, rather than a compatibility rendition of
+ * the Jinja macros. The named slots let a page assemble BF headings, prose,
+ * CTA blocks, figures and chips without importing a parallel item schema.
+ *
+ * Vanilla → BF spacing mapping:
+ * - Hero's `$spv--large` / `$spv--x-large` top boundary → `space-2` /
+ *   `space-3`; `$spv--strip-regular / 2` / full strip bottom boundary →
+ *   half `section-space` / full `section-space`.
+ * - The 50/50, 25/75 and 75/25 grid relationships use BF's intrinsic grid
+ *   and gutter token at Vanilla's 620px / 1036px composition thresholds.
+ * - Quote-wrapper's signpost/content and quote/citation relationships use
+ *   the same 25/75 and 2/1 proportions. A quotation itself remains the
+ *   existing semantic BF prose `blockquote`; it is not recreated as a
+ *   heading-styled paragraph.
+ */
+export function sitesEditorialPortsCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Sites editorial compositions — hero and quote wrapper.              */
+/* Section boundaries and grid tracks are structural; nested stacks own */
+/* semantic gaps and every text child keeps metric compensation.        */
+/* ------------------------------------------------------------------ */
+
+/* Hero: its deliberately asymmetric boundary mirrors the current Vanilla
+   section--hero: a compact arrival space, then the normal section exit. The
+   entry rule replaces one pixel of padding so it never changes the rhythm. */
+:where(.bf-theme) :where(.bf-hero) {
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  container-name: bf-hero;
+  container-type: inline-size;
+  min-inline-size: 0;
+  padding-block-end: calc(var(--bf-section-space) / 2);
+  padding-block-start: calc(var(--bf-space-2) - var(--bf-border-width));
+}
+
+/* The hero owns its entry rule so consumers do not need a loose sibling.
+   The established borderless modifier removes only that visual boundary. */
+:where(.bf-theme) :where(.bf-hero.is-borderless) {
+  border-block-start: 0;
+  padding-block-start: var(--bf-space-2);
+}
+
+:where(.bf-theme) :where(.bf-hero-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-hero-copy, .bf-hero-title, .bf-hero-content, .bf-hero-media, .bf-hero-signpost, .bf-hero-intro, .bf-hero-lead) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The normal hero keeps title, supporting heading, chip, prose and CTA in a
+   semantic copy stack. Hero titles are h1 slots and supporting titles are h2
+   slots. */
+:where(.bf-theme) :where(.bf-hero-copy) {
+  align-content: start;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+:where(.bf-theme) :where(.bf-hero-chip) {
+  margin-block: 0 var(--bf-body-margin-bottom);
+}
+
+/* Current Vanilla scopes a one-spacing-unit icon/value gap to the hero. */
+:where(.bf-theme) :where(.bf-hero-chip.bf-chip) {
+  column-gap: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-hero-media > :where(img, picture, video, canvas, svg), .bf-hero-signpost > :where(img, picture, video, canvas, svg)) {
+  block-size: auto;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+/* Intrinsic media ratios commonly resolve to fractional pixels once a hero is
+   allocated a fluid grid track. Snap only the media block to the active tier
+   baseline so the following semantic text remains on-grid; its inline track
+   and the surrounding Vanilla proportions remain unchanged. */
+@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+  :where(.bf-theme) :where(.bf-hero-media > .bf-aspect, .bf-hero-signpost > :where(img, picture, video, canvas, svg)) {
+    block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
+  }
+}
+
+/* A signpost is a compact associated mark, not a decorative background. */
+:where(.bf-theme) :where(.bf-hero-signpost) {
+  align-self: start;
+  max-inline-size: var(--bf-measure);
+}
+
+/* Full-width media follows the paired title/content tracks. */
+:where(.bf-theme) :where(.bf-hero-media.is-full) {
+  grid-column: 1 / -1;
+}
+
+/* A closing visual remains inside the hero after its lead. The hero's stack
+   owns their shallow internal separation. */
+:where(.bf-theme) :where(.bf-hero) > :where(.bf-hero-media.is-full:last-child) {
+  inline-size: 100%;
+}
+
+/* Vanilla's desktop hero boundary is 1036px. The layout descendant responds
+   to the root container so embedding it in a narrower rail still collapses
+   correctly. */
+/* The section boundary itself follows Vanilla's page-level desktop switch;
+   the composition below continues to react to the allocated container. */
+@media (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-hero) {
+    padding-block-end: var(--bf-section-space);
+    padding-block-start: calc(var(--bf-space-3) - var(--bf-border-width));
+  }
+
+  :where(.bf-theme) :where(.bf-hero.is-borderless) {
+    padding-block-start: var(--bf-space-3);
+  }
+}
+
+@container bf-hero (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-hero-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-hero.is-25-75) :where(.bf-hero-layout) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-hero.is-75-25) :where(.bf-hero-layout) {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
+  }
+
+  /* A fallback puts its introduction above the text/media pair. */
+  :where(.bf-theme) :where(.bf-hero.is-fallback) :where(.bf-hero-intro) {
+    max-inline-size: calc((100cqi - var(--bf-grid-gap-inline)) / 2);
+  }
+}
+
+/* Vanilla can intentionally split the three proportioned layouts at its
+   medium threshold. The modifier changes only structural tracks. */
+@container bf-hero (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-hero.is-split-medium) :where(.bf-hero-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-hero.is-split-medium.is-25-75) :where(.bf-hero-layout) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-hero.is-split-medium.is-75-25) :where(.bf-hero-layout) {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
+  }
+}
+
+/* Quote wrapper: a heading may introduce a series of quotes. When it does,
+   its top rule belongs to the wrapper boundary, not to the quote itself. */
+:where(.bf-theme) :where(.bf-quote-wrapper) {
+  container-name: bf-quote-wrapper;
+  container-type: inline-size;
+  margin-block-end: var(--bf-section-space);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper.is-shallow) {
+  margin-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-header, .bf-quote-wrapper-layout, .bf-quote-wrapper-signpost, .bf-quote-wrapper-content, .bf-quote-wrapper-citation, .bf-quote-wrapper-media) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-header) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* This class is a composition rail around the built-in prose blockquote, not
+   a second quotation type scale. The source may still contain rich semantic
+   inline markup and retains BF's metric compensation. */
+:where(.bf-theme) :where(.bf-quote-wrapper-prose) {
+  inline-size: min(100%, var(--bf-measure));
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-citation) {
+  color: var(--bf-color-text-muted);
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-citation-name) {
+  color: var(--bf-color-text-default);
+  font-weight: var(--bf-h6-font-weight);
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-signpost) {
+  align-self: start;
+  max-inline-size: 100%;
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-signpost > :where(img, picture, svg)) {
+  block-size: auto;
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
+/* The quote rail can also be a fractional grid track. Keep its media from
+   introducing a sub-baseline row while leaving quotation and citation rhythm
+   entirely baseline-compensated while its stack owns semantic gaps. */
+@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+  :where(.bf-theme) :where(.bf-quote-wrapper-signpost > :where(img, picture, svg), .bf-quote-wrapper-media > .bf-aspect) {
+    block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
+  }
+}
+
+:where(.bf-theme) :where(.bf-quote-wrapper-quote-row) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+@container bf-quote-wrapper (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-quote-wrapper-header) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-header-link) {
+    grid-column: 4;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+
+  /* Vanilla offsets a quote block without a signpost into the content rail. */
+  :where(.bf-theme) :where(.bf-quote-wrapper-content:only-child) {
+    grid-column: 2;
+  }
+
+  :where(.bf-theme) :where(.bf-quote-wrapper-quote-row) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container bf-quote-wrapper (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-quote-wrapper-quote-row) {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  }
+}
+`;
+}