baseline-foundry 0.1.3

package/dist/css-components/interactive-feedback.js

@@ -0,0 +1,230 @@
+/** Credential and transient-feedback compositions built on BF controls and type roles. */
+export function interactiveFeedbackCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Credential reveal and repeated validation                           */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-credential) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-credential-header) {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--bf-space-2);
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-credential-header > .bf-form-label) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+/* This button is a control inside the field heading, so the composition
+   explicitly trims the standalone control's trailing flow compensation. */
+:where(.bf-theme) :where(.bf-password-reveal) {
+  border: 0;
+  flex: 0 0 auto;
+  margin-block-end: 0;
+  /* This attached action shares the label row. Its borderless base uses the
+     paired body nudges directly, preserving the row's occupied grid block. */
+  padding-block: var(--bf-body-nudge-start) var(--bf-body-nudge-end);
+}
+
+:where(.bf-theme) :where(.bf-password-reveal > .bf-password-reveal-icon) {
+  background-color: currentColor;
+  background-image: none;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.002c2.946 0 5.612 1.666 8 4.998-2.388 3.332-5.054 4.998-8 4.998C5.054 12.998 2.388 11.332 0 8c2.388-3.332 5.054-4.998 8-4.998zM8 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 1.49a1.51 1.51 0 1 1 0 3.02 1.51 1.51 0 0 1 0-3.02z'/%3E%3C/svg%3E");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+:where(.bf-theme) :where(.bf-password-reveal[aria-pressed='true'] > .bf-password-reveal-icon) {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m13.938.624 1.06 1.06-2.653 2.653c1.27.823 2.475 2.026 3.616 3.61v.106l-.193.264C13.44 11.44 10.851 13 8 13a7.654 7.654 0 0 1-3.479-.839l-2.354 2.354-1.06-1.06L13.937.624zm-2.682 4.802L9.714 6.969a2 2 0 0 1-2.745 2.745L5.653 11.03a6.114 6.114 0 0 0 2.098.465L8 11.5c2.076 0 4.03-1.042 5.893-3.233L14.115 8l-.222-.267c-.858-1.01-1.736-1.775-2.637-2.307zM8 3c.608 0 1.203.07 1.787.213L8.482 4.519a6.072 6.072 0 0 0-.233-.014L8 4.5c-2.076 0-4.03 1.042-5.893 3.233L1.884 8l.223.267c.428.503.86.946 1.3 1.33l-1.062 1.061C1.535 9.938.754 9.052 0 8c2.388-3.333 5.054-5 8-5z'/%3E%3C/svg%3E");
+}
+
+/* Revealed readonly credentials stay legible; the generic readonly treatment
+   remains correct for ordinary text fields outside this explicit composition. */
+:where(.bf-theme) :where(.bf-credential input[type='text'][readonly]) {
+  color: var(--bf-color-text-default);
+}
+
+:where(.bf-theme) :where(.bf-credential-validation) {
+  align-content: start;
+  display: grid;
+  gap: var(--bf-space-1);
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+:where(.bf-theme) :where(.bf-credential-validation > .bf-validation) {
+  align-content: start;
+  display: grid;
+  margin-block: 0;
+  min-inline-size: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Notification — transient status feedback, distinct from bf-notice  */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-notification, .bf-notification.is-information, .bf-notification.is-positive, .bf-notification.is-caution, .bf-notification.is-negative) {
+  --bf-notification-accent: var(--bf-color-border-information);
+  background: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid var(--bf-color-border-default);
+  border-inline-start: var(--bf-bar-thickness) solid var(--bf-notification-accent);
+  color: var(--bf-color-text-default);
+  margin-block: 0 var(--bf-space-3);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  padding-block: calc(var(--bf-space-1) - var(--bf-border-width));
+  padding-inline: calc((var(--bf-space-2) * 2) + var(--bf-icon-size-default)) 0;
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-notification.is-positive) {
+  --bf-notification-accent: var(--bf-color-border-positive);
+}
+
+:where(.bf-theme) :where(.bf-notification.is-caution) {
+  --bf-notification-accent: var(--bf-color-border-caution);
+}
+
+:where(.bf-theme) :where(.bf-notification.is-negative) {
+  --bf-notification-accent: var(--bf-color-border-negative);
+}
+
+:where(.bf-theme) :where(.bf-notification[hidden]) {
+  display: none;
+}
+
+:where(.bf-theme) :where(.bf-notification.is-borderless) {
+  border: 0;
+  padding-block: 0;
+  padding-inline: calc(var(--bf-space-2) * 2) 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-icon) {
+  background-color: var(--bf-notification-accent);
+  background-image: none;
+  inset-block-start: calc(var(--bf-space-1) + ((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start));
+  inset-inline-start: var(--bf-space-2);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-.75 5.25h1.5v5h-1.5v-5zM8 3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  position: absolute;
+}
+
+:where(.bf-theme) :where(.bf-notification.is-positive > .bf-notification-icon) {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm2.814 2.45 1.203.897-5.537 7.43-3.485-3.694 1.09-1.03 2.259 2.394 4.47-5.997z'/%3E%3C/svg%3E");
+}
+
+:where(.bf-theme) :where(.bf-notification.is-caution > .bf-notification-icon) {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.865 1.5 15.77 13.5a1 1 0 0 1-.866 1.5H1.096a1 1 0 0 1-.866-1.5l6.905-12a1 1 0 0 1 1.73 0zM8 3.49 2.392 13.5h11.216L8 3.49zm-.75 3.01h1.5v3.75h-1.5V6.5zM8 11.25a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
+}
+
+:where(.bf-theme) :where(.bf-notification.is-negative > .bf-notification-icon) {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm2.282 3.138 1.06 1.061L9.052 7.99l2.291 2.292-1.061 1.06L7.99 9.052l-2.291 2.291-1.061-1.061L6.929 7.99 4.638 5.699l1.061-1.061L7.99 6.929l2.292-2.291z'/%3E%3C/svg%3E");
+}
+
+:where(.bf-theme) :where(.bf-notification.is-borderless > .bf-notification-icon) {
+  inset-block-start: calc(((var(--bf-body-line-height) - var(--bf-icon-size-default)) / 2) + var(--bf-body-nudge-start));
+  inset-inline-start: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-content, .bf-notification-meta) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-content) {
+  margin-block-end: calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  padding-block-start: var(--bf-body-nudge-start);
+  padding-inline-end: var(--bf-space-4);
+}
+
+:where(.bf-theme) :where(.bf-notification-title, .bf-notification-message, .bf-notification-timestamp) {
+  font-family: var(--bf-body-font-family);
+  font-size: var(--bf-body-font-size);
+  font-style: var(--bf-body-font-style);
+  line-height: var(--bf-body-line-height);
+  max-inline-size: 100%;
+}
+
+:where(.bf-theme) :where(.bf-notification-title) {
+  font-weight: 600;
+  margin-block: 0;
+  padding-block: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-message) {
+  font-weight: var(--bf-body-font-weight);
+  margin-block: 0;
+  padding-block: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification.is-inline .bf-notification-title, .bf-notification.is-inline .bf-notification-message) {
+  display: inline;
+}
+
+:where(.bf-theme) :where(.bf-notification-close) {
+  block-size: calc((var(--bf-space-1) * 2) + var(--bf-icon-size-default));
+  border: 0;
+  inline-size: var(--bf-icon-size-default);
+  margin-block-end: 0;
+  padding: 0;
+  position: absolute;
+  inset-block-start: var(--bf-space-1);
+  inset-inline-end: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-notification.is-borderless .bf-notification-close) {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-meta) {
+  align-items: flex-start;
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-space-1) var(--bf-space-2);
+  justify-content: space-between;
+  margin-block-end: var(--bf-space-1);
+  padding-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
+  padding-inline-end: var(--bf-space-2);
+}
+
+:where(.bf-theme) :where(.bf-notification.is-inline .bf-notification-meta) {
+  border-block-start: 0;
+  padding-block-start: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-timestamp) {
+  color: var(--bf-color-text-muted);
+  font-weight: var(--bf-body-font-weight);
+  margin-block: 0 calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  padding-block: var(--bf-body-nudge-start) 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-actions) {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-space-1) var(--bf-space-2);
+  margin-inline-start: auto;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-notification-actions > .bf-button.is-link) {
+  flex: 0 0 auto;
+  margin-block-end: calc(var(--bf-space-2) - var(--bf-body-nudge-start));
+  padding-block: var(--bf-body-nudge-start) 0;
+}
+`;
+}

package/dist/css-components/interactive-tables.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Interactive table presentation layered on the existing bf-table contract.
+ *
+ * Vanilla remains the geometry reference, while BF owns type and vertical
+ * rhythm through its tier tokens. Runtime hooks never participate in styling.
+ */
+export declare function interactiveTablesCss(): string;

package/dist/css-components/interactive-tables.js

@@ -0,0 +1,164 @@
+/**
+ * Interactive table presentation layered on the existing bf-table contract.
+ *
+ * Vanilla remains the geometry reference, while BF owns type and vertical
+ * rhythm through its tier tokens. Runtime hooks never participate in styling.
+ */
+export function interactiveTablesCss() {
+    return `:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort]) {
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  outline-color: var(--bf-color-focus);
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-table-sort-button) {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: inherit;
+  display: inline-block;
+  font: inherit;
+  margin: -2px calc(var(--bf-space-half) * -1);
+  max-inline-size: 100%;
+  overflow: hidden;
+  padding: 2px var(--bf-space-half);
+  text-align: inherit;
+  text-decoration: inherit;
+  text-overflow: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+}
+
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort]:hover, .bf-table-sort-button:focus-visible) {
+  color: var(--bf-color-link-default);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.075em;
+}
+
+:where(.bf-theme) :where(.bf-table-sort-button:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-table-sort-button:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'], .bf-table.is-sortable th[aria-sort='descending'])::after {
+  background-image: var(--bf-ui-icon-chevron-down);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  block-size: var(--bf-icon-size-default);
+  content: "";
+  display: inline-block;
+  inline-size: var(--bf-icon-size-default);
+  margin-inline-start: var(--bf-space-half);
+  vertical-align: calc((1cap - var(--bf-icon-size-default)) / 2);
+}
+
+:where(.bf-theme) :where(.bf-table.is-sortable th[aria-sort='ascending'])::after {
+  transform: rotate(180deg);
+}
+
+:where(.bf-theme) :where(.bf-table.is-expanding .bf-table-expand-toggle) {
+  margin-block-end: 0;
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-table-expanding-row[hidden]) {
+  display: none;
+}
+
+:where(.bf-theme) .bf-table.is-expanding .bf-table-expanding-cell {
+  overflow: visible;
+  /* Complete the ordinary start-nudge inset with the paired end nudge while
+     consuming the row rule inside it, so wrapped detail rows stay on-grid. */
+  padding-block-end: calc(var(--bf-space-1) + var(--bf-body-nudge-end) - var(--bf-table-row-border-size));
+  white-space: normal;
+}
+
+:where(.bf-theme) :where(.bf-table-mobile-card-frame) {
+  container-type: inline-size;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-table-card-label) {
+  display: none;
+}
+
+@container (width < 64.75rem) {
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card) {
+    display: block;
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > thead) {
+    block-size: 1px;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody) {
+    display: grid;
+    gap: 0 var(--bf-space-3);
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    inline-size: 100%;
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody > tr) {
+    border: var(--bf-border-width) solid var(--bf-color-border-default);
+    display: block;
+    margin-block-end: calc(var(--bf-space-3) - (var(--bf-border-width) * 2));
+    min-inline-size: 0;
+    padding-inline: var(--bf-space-2);
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody > tr > :where(th, td)) {
+    border-block-end-color: transparent;
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    overflow: hidden;
+    padding-inline: 0;
+    position: relative;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-word;
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card > tbody > tr > :where(th, td):not(:first-child))::before {
+    background: var(--bf-color-border-low-contrast);
+    block-size: var(--bf-border-width);
+    content: "";
+    inset-block-start: 0;
+    inset-inline: 0;
+    position: absolute;
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card .bf-table-card-label) {
+    color: var(--bf-color-text-default);
+    display: block;
+    font-family: var(--bf-body-font-family);
+    font-size: var(--bf-body-font-size);
+    font-style: var(--bf-body-font-style);
+    font-weight: 550;
+    line-height: var(--bf-body-line-height);
+    margin-block-end: var(--bf-space-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.bf-theme) :where(.bf-table-mobile-card-frame > .bf-table.is-mobile-card :where(th, td).is-overflow-visible) {
+    overflow: visible;
+  }
+}
+`;
+}

package/dist/css-components/linked-logo-site-layout.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Vanilla Sites parity: linked-logo section and the sticky-footer layout.
+ *
+ * The Sites macro places its heading and linked-logo block at full width,
+ * 50/50, or 25/75.  BF keeps that relationship as a small structural grid:
+ * 1/1 and 1/3 are proportions rather than a recreation of Vanilla grid-span
+ * utilities.  The cards deliberately compose the existing `bf-logo-section`
+ * link/mark contract; the additional card slots are semantic link content,
+ * not the deprecated `logo-block` API.
+ *
+ * Vanilla → BF mapping (Vanilla's 8px spacing unit):
+ * - linked-logo image container: retained 16:9 aspect relationship;
+ * - muted rule to copy: 8px → `--bf-space-1`, compensating its border;
+ * - grid gutter: 24px / 32px breakpoint values → existing
+ *   `--bf-grid-gap-inline` (BF's tier-aware grid geometry);
+ * - macro section boundaries: existing shallow/default/deep section tokens.
+ *
+ * The site layout is intentionally opt-in on `bf-page-shell`: it never
+ * changes the document body merely because a tier stylesheet is imported.
+ */
+export declare function linkedLogoSiteLayoutCss(): string;

package/dist/css-components/linked-logo-site-layout.js

@@ -0,0 +1,214 @@
+/**
+ * Vanilla Sites parity: linked-logo section and the sticky-footer layout.
+ *
+ * The Sites macro places its heading and linked-logo block at full width,
+ * 50/50, or 25/75.  BF keeps that relationship as a small structural grid:
+ * 1/1 and 1/3 are proportions rather than a recreation of Vanilla grid-span
+ * utilities.  The cards deliberately compose the existing `bf-logo-section`
+ * link/mark contract; the additional card slots are semantic link content,
+ * not the deprecated `logo-block` API.
+ *
+ * Vanilla → BF mapping (Vanilla's 8px spacing unit):
+ * - linked-logo image container: retained 16:9 aspect relationship;
+ * - muted rule to copy: 8px → `--bf-space-1`, compensating its border;
+ * - grid gutter: 24px / 32px breakpoint values → existing
+ *   `--bf-grid-gap-inline` (BF's tier-aware grid geometry);
+ * - macro section boundaries: existing shallow/default/deep section tokens.
+ *
+ * The site layout is intentionally opt-in on `bf-page-shell`: it never
+ * changes the document body merely because a tier stylesheet is imported.
+ */
+export function linkedLogoSiteLayoutCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Linked logo section — Sites composition of BF logo and content slots. */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-linked-logo-section) {
+  container-name: bf-linked-logo-section;
+  container-type: inline-size;
+  margin-block-end: var(--bf-section-space);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section.is-shallow) {
+  margin-block-end: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section.is-deep) {
+  margin-block-end: var(--bf-section-space-deep);
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-layout) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-header, .bf-linked-logo-section-content) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The card list is a contextual use of bf-logo-section. Its links and marks
+   preserve that component's focus and accessible-image treatment, while a
+   grid gives the Sites pattern its 16:9 linked destinations. */
+:where(.bf-theme) :where(.bf-linked-logo-section) :where(.bf-logo-section.bf-linked-logo-section-logos) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+  align-items: stretch;
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  padding-block: 0;
+  row-gap: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-item) {
+  block-size: auto;
+  inline-size: auto;
+  margin-block: 0;
+  max-inline-size: none;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-card) {
+  align-content: start;
+  align-items: stretch;
+  color: inherit;
+  container-type: inline-size;
+  display: grid;
+  grid-template-rows: auto auto auto;
+  inline-size: 100%;
+  min-inline-size: 0;
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-card:hover) :where(.bf-linked-logo-section-card-copy) {
+  text-decoration: underline;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-mark) {
+  aspect-ratio: 16 / 9;
+  background: var(--bf-color-background-active);
+  display: grid;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: hidden;
+  place-items: center;
+}
+
+/* Card tracks are fluid, so an exact 16:9 mark is often a fractional number
+   of baselines tall. Keep the visual ratio exact and put only the residual
+   rhythm compensation after the mark; the copy keeps its own semantic
+   spacing and the occupied card still lands on the tier grid. */
+@supports (margin-block-end: round(up, 1px, 1px)) {
+  :where(.bf-theme) :where(.bf-linked-logo-section-mark) {
+    margin-block-end: calc(
+      round(up, calc(100cqi * 9 / 16), var(--bf-baseline))
+      - calc(100cqi * 9 / 16)
+    );
+  }
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-mark) > :where(img, svg) {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  object-fit: contain;
+}
+
+:where(.bf-theme) :where(.bf-linked-logo-section-card-rule) {
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: block;
+  margin-block-start: var(--bf-space-1);
+}
+
+/* A span inherits the real body role from the page; it owns only the
+   relationship to its preceding divider, not an alternative type scale. */
+:where(.bf-theme) :where(.bf-linked-logo-section-card-copy) {
+  display: block;
+  margin-block-start: calc(var(--bf-space-1) - var(--bf-border-width));
+  overflow-wrap: anywhere;
+}
+
+/* Vanilla's linked-logo block moves from one to two cards per row at the
+   4-column medium grid.  The section itself does not split until the 8-column
+   large grid: its macro uses large-only grid columns for the 50/50 and 25/75
+   rails.  The root establishes the query context; only descendants change. */
+@container bf-linked-logo-section (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container bf-linked-logo-section (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-layout) {
+    column-gap: var(--bf-grid-gap-inline);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-full) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-50-50) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-linked-logo-section.is-25-75) :where(.bf-linked-logo-section-logos) :where(.bf-logo-section-items) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Site / sticky-footer layout.                                        */
+/* ------------------------------------------------------------------ */
+
+/* The sticky-footer contract is explicitly opt-in, so it remains useful at
+   every viewport width.  The descendant selector intentionally retains the
+   shell classes' specificity: a shell may also be a bf-panel-content region,
+   whose later min-block-size reset must not disable the site layout. */
+:where(.bf-theme.bf-page-shell.is-site-layout),
+:where(.bf-theme) .bf-page-shell.is-site-layout {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100dvb;
+}
+
+:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-main),
+:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-main) {
+  flex: 0 0 auto;
+  min-inline-size: 0;
+}
+
+/* When a site main also consumes panel padding, pull its first text line up
+   one baseline so it shares the tagged navigation brand's optical top. */
+:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-main.bf-panel-content),
+:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-main.bf-panel-content) {
+  padding-block-start: calc(var(--bf-panel-padding-block) - var(--bf-baseline));
+}
+
+/* An application main already represents the available viewport remainder
+   and owns scrolling. A directly nested site shell fills that region instead
+   of claiming a second dynamic viewport; long content can still grow the
+   shell beyond the region and remains reachable through bf-main. */
+:where(.bf-theme.bf-application) > :where(.bf-main) > .bf-page-shell.is-site-layout,
+:where(.bf-theme) :where(.bf-application) > :where(.bf-main) > .bf-page-shell.is-site-layout {
+  min-block-size: 100%;
+}
+
+:where(.bf-theme.bf-page-shell.is-site-layout) > :where(.bf-site-footer.is-sticky),
+:where(.bf-theme) .bf-page-shell.is-site-layout > :where(.bf-site-footer.is-sticky) {
+  margin-block-start: auto;
+}
+`;
+}

package/dist/css-components/list-tree.d.ts

@@ -0,0 +1,5 @@
+type ListTreeCssOptions = {
+    bodyTypeStyles: string;
+};
+export declare function listTreeCss(options: ListTreeCssOptions): string;
+export {};