baseline-foundry 0.1.3

package/dist/css-components/list-tree.js

@@ -0,0 +1,98 @@
+export function listTreeCss(options) {
+    const { bodyTypeStyles } = options;
+    return `:where(.bf-theme) :where(.bf-list-tree) {
+  list-style: none;
+  margin: 0;
+  padding-left: calc(var(--bf-baseline) * 0.5);
+}
+
+:where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree) {
+  display: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+:where(.bf-theme) :where(.bf-list-tree) :where(.bf-list-tree[aria-hidden='false']) {
+  display: block;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-item) {
+  margin: 0;
+  padding-left: calc(var(--bf-baseline) * 1.5);
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link) {
+${bodyTypeStyles}  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  min-block-size: var(--bf-control-box-size-compact);
+  padding-block: var(--bf-control-block-padding-compact);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link):hover {
+  color: var(--bf-color-link-default);
+  text-decoration: underline;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link.is-active) {
+  color: var(--bf-color-link-default);
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-link):focus-visible {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle) {
+${bodyTypeStyles}  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: inline-flex;
+  gap: calc(var(--bf-baseline) * 0.5);
+  margin: 0 0 0 calc(var(--bf-baseline) * -1.5);
+  min-block-size: var(--bf-control-box-size-compact);
+  padding-block: var(--bf-control-block-padding-compact);
+  padding-inline: calc(var(--bf-baseline) * 0.25) calc(var(--bf-baseline) * 0.5);
+  text-align: left;
+  width: 100%;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle):hover {
+  background: var(--bf-color-background-hover);
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle):focus-visible {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle)::before {
+  background-image: var(--bf-ui-icon-chevron-down);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+  block-size: 1rem;
+  content: "";
+  flex: 0 0 1rem;
+  inline-size: 1rem;
+  transform: rotate(-90deg);
+}
+
+:where(.bf-theme) :where(.bf-list-tree-toggle[aria-expanded='true'])::before {
+  transform: rotate(0deg);
+}
+`;
+}

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

@@ -0,0 +1,3 @@
+export declare function listCss({ bodyTypeStyles }: {
+    bodyTypeStyles: string;
+}): string;

package/dist/css-components/list.js

@@ -0,0 +1,119 @@
+export function listCss({ bodyTypeStyles }) {
+    return `:where(.bf-theme) :where(.bf-list) {
+  align-content: start;
+  display: grid;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-list-item) {
+${bodyTypeStyles}  color: var(--bf-color-text-default);
+  margin: 0 0 var(--bf-body-margin-bottom);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  padding-block-end: 0;
+  padding-block-start: var(--bf-body-nudge-start);
+}
+
+:where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item) {
+  box-shadow: inset 0 1px 0 var(--bf-color-border-low-contrast);
+  padding-block-end: var(--bf-baseline);
+}
+
+:where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item:first-child) {
+  box-shadow: none;
+}
+
+:where(.bf-theme) :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed) {
+  padding-inline-start: calc(var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-list-item.is-ticked)::before,
+:where(.bf-theme) :where(.bf-list-item.is-crossed)::before {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  block-size: var(--bf-leading-icon-size);
+  content: "";
+  inline-size: var(--bf-leading-icon-size);
+  left: 0;
+  position: absolute;
+  top: var(--bf-leading-icon-offset);
+}
+
+:where(.bf-theme) :where(.bf-list-item.is-ticked)::before {
+  background-image: var(--bf-ui-icon-success-grey);
+}
+
+:where(.bf-theme) :where(.bf-list-item.is-crossed)::before {
+  background-image: var(--bf-ui-icon-error-grey);
+}
+
+:where(.bf-theme) :where(.bf-list.is-divided) > :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed)::before {
+  top: calc(var(--bf-leading-icon-offset) + (var(--bf-baseline) * 0.5));
+}
+
+:where(.bf-theme) :where(ol.bf-list.is-divided) {
+  counter-reset: bf-list-counter;
+}
+
+:where(.bf-theme) :where(ol.bf-list.is-divided) > :where(.bf-list-item) {
+  counter-increment: bf-list-counter;
+  list-style: none;
+  padding-inline-start: calc(var(--bf-baseline) * 4);
+  position: relative;
+}
+
+:where(.bf-theme) :where(ol.bf-list.is-divided) > :where(.bf-list-item)::before {
+${bodyTypeStyles}  color: var(--bf-color-text-default);
+  content: counters(bf-list-counter, ".") ".";
+  inline-size: calc(var(--bf-baseline) * 2.5);
+  left: 0;
+  position: absolute;
+  text-align: right;
+  top: var(--bf-body-nudge-start);
+}
+
+:where(.bf-theme) :where(.bf-list-item) > :where(.bf-list) {
+  margin-inline-start: calc(var(--bf-baseline) * 3);
+  padding-block-start: var(--bf-body-nudge-end);
+}
+
+:where(.bf-theme) :where(.bf-list-item.is-ticked, .bf-list-item.is-crossed) > :where(.bf-list) {
+  margin-inline-start: 0;
+}
+
+:where(.bf-theme) :where(.bf-inline-list) {
+  margin: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-inline-list-item) {
+${bodyTypeStyles}  display: inline-block;
+  list-style: none;
+  margin-inline-end: calc(var(--bf-baseline) * 1.5);
+  padding-block-end: var(--bf-body-nudge-end);
+  padding-block-start: var(--bf-body-nudge-start);
+}
+
+:where(.bf-theme) :where(.bf-inline-list-item:last-of-type) {
+  margin-inline-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item) {
+  margin-inline-end: calc(var(--bf-baseline) * 1);
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item)::after {
+  content: "\\2022";
+  display: inline;
+  margin-inline-start: calc(var(--bf-baseline) * 0.25);
+}
+
+:where(.bf-theme) :where(.bf-inline-list.is-middot) :where(.bf-inline-list-item:last-of-type)::after {
+  content: "";
+}`;
+}

package/dist/css-components/logo-media.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Vanilla parity ports: logo section and media object.
+ *
+ * Vanilla → BF rhythm mapping (at Vanilla's 8px unit):
+ * - Logo mark heights 72px / 104px → `space-8 + space-1` / `space-12 +
+ *   space-1` (nine / thirteen BF baselines).
+ * - Logo 32px inline gap → `space-4`; Vanilla's 8px / 16px negative row pull
+ *   and matching wrapper compensation → `space-1` / `space-2`.
+ * - Media thumbnails 48px / 96px → `space-6` / `space-12`; their 16px
+ *   gap → `space-2`; trailing 24px → `section-space-shallow`; metadata top
+ *   8px → `space-1`.
+ *
+ * Those are relative values, rather than fixed pixels, so the same semantics
+ * retain the deliberately denser documentation, app, and OS tiers.
+ */
+export declare function logoMediaCss(): string;

package/dist/css-components/logo-media.js

@@ -0,0 +1,219 @@
+/**
+ * Vanilla parity ports: logo section and media object.
+ *
+ * Vanilla → BF rhythm mapping (at Vanilla's 8px unit):
+ * - Logo mark heights 72px / 104px → `space-8 + space-1` / `space-12 +
+ *   space-1` (nine / thirteen BF baselines).
+ * - Logo 32px inline gap → `space-4`; Vanilla's 8px / 16px negative row pull
+ *   and matching wrapper compensation → `space-1` / `space-2`.
+ * - Media thumbnails 48px / 96px → `space-6` / `space-12`; their 16px
+ *   gap → `space-2`; trailing 24px → `section-space-shallow`; metadata top
+ *   8px → `space-1`.
+ *
+ * Those are relative values, rather than fixed pixels, so the same semantics
+ * retain the deliberately denser documentation, app, and OS tiers.
+ */
+export function logoMediaCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Logo section — intrinsic linked marks, without the deprecated logo-block. */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-logo-section) {
+  container-name: bf-logo-section;
+  container-type: inline-size;
+  margin-block-end: var(--bf-section-space-shallow);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-logo-section-items) {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--bf-space-4);
+  min-inline-size: 0;
+  padding-block: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-logo-section-item) {
+  align-items: center;
+  block-size: calc(var(--bf-space-8) + var(--bf-space-1));
+  display: flex;
+  flex: 0 0 auto;
+  max-inline-size: 100%;
+  margin-block: calc(var(--bf-space-1) * -1);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-logo-section-link) {
+  align-items: center;
+  display: inline-flex;
+  max-inline-size: 100%;
+}
+
+:where(.bf-theme) :where(.bf-logo-section-link:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-logo-section-link:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: 2px;
+}
+
+:where(.bf-theme) :where(.bf-logo-section-logo) {
+  block-size: 100%;
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+  object-fit: contain;
+}
+
+/* An explicit fallback for marks supplied in inconsistent intrinsic ratios.
+   It is named for the component's behaviour—not Vanilla's legacy selector. */
+:where(.bf-theme) :where(.bf-logo-section.is-contained) :where(.bf-logo-section-item) {
+  inline-size: calc(var(--bf-space-8) + var(--bf-space-1));
+  margin-block: 0 var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-logo-section.is-contained) :where(.bf-logo-section-items) {
+  padding-block: 0;
+}
+
+:where(.bf-theme) :where(.bf-logo-section.is-contained) :where(.bf-logo-section-logo) {
+  block-size: auto;
+  inline-size: 100%;
+}
+
+/* Vanilla's small breakpoint is 620px. The items descendant, rather than the
+   query container itself, responds when its allocated space reaches it. */
+@container bf-logo-section (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-logo-section-items) {
+    padding-block: var(--bf-space-2);
+  }
+
+  :where(.bf-theme) :where(.bf-logo-section-item) {
+    block-size: calc(var(--bf-space-12) + var(--bf-space-1));
+    margin-block: calc(var(--bf-space-2) * -1);
+  }
+
+  :where(.bf-theme) :where(.bf-logo-section.is-contained) :where(.bf-logo-section-item) {
+    inline-size: calc(var(--bf-space-12) + var(--bf-space-1));
+    margin-block: 0 var(--bf-space-1);
+  }
+
+  :where(.bf-theme) :where(.bf-logo-section.is-contained) :where(.bf-logo-section-items) {
+    padding-block: 0;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Media object — semantic media/content slots with a container-owned */
+/* structural collapse only. Content roles retain their own spacing.  */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-media-object) {
+  margin-block-end: var(--bf-section-space-shallow);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-media-object-layout) {
+  display: grid;
+  align-items: start;
+  column-gap: var(--bf-space-2);
+  grid-template-columns: auto minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-media-object-media) {
+  align-self: start;
+  block-size: var(--bf-space-6);
+  inline-size: var(--bf-space-6);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-media-object-media > :where(img, picture, svg, video)) {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  object-fit: contain;
+}
+
+:where(.bf-theme) :where(.bf-media-object-media.is-round > :where(img, picture, svg, video)) {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+:where(.bf-theme) :where(.bf-media-object-content) {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/* This is a real heading slot. The class may be applied to h1–h6; regular
+   media objects use BF h4 while the large composition promotes to h1. */
+:where(.bf-theme) :where(.bf-media-object-title) {
+  font-family: var(--bf-h4-font-family);
+  font-size: var(--bf-h4-font-size);
+  font-style: var(--bf-h4-font-style);
+  font-variant-caps: var(--bf-h4-font-variant-caps);
+  font-weight: var(--bf-h4-font-weight);
+  letter-spacing: var(--bf-h4-letter-spacing);
+  line-height: var(--bf-h4-line-height);
+  margin-block: 0 var(--bf-h4-margin-bottom);
+  overflow-wrap: anywhere;
+  padding-block: var(--bf-h4-nudge-start) 0;
+  text-transform: var(--bf-h4-text-transform);
+}
+
+:where(.bf-theme) :where(.bf-media-object.is-large) :where(.bf-media-object-media) {
+  block-size: var(--bf-space-12);
+  inline-size: var(--bf-space-12);
+}
+
+:where(.bf-theme) :where(.bf-media-object.is-large) :where(.bf-media-object-title) {
+  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);
+  padding-block: var(--bf-h1-nudge-start) 0;
+  text-transform: var(--bf-h1-text-transform);
+}
+
+:where(.bf-theme) :where(.bf-media-object-meta-list) {
+  list-style: none;
+  margin: var(--bf-space-1) 0 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-media-object-meta) {
+  align-items: start;
+  column-gap: var(--bf-space-1);
+  display: grid;
+  grid-template-columns: var(--bf-icon-size-default) minmax(0, 1fr);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.bf-theme) :where(.bf-media-object-meta + .bf-media-object-meta) {
+  margin-block-start: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-media-object-meta .bf-icon) {
+  margin-block-start: var(--bf-body-nudge-start);
+}
+
+:where(.bf-theme) :where(.bf-media-object.is-media-end) :where(.bf-media-object-content) {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+:where(.bf-theme) :where(.bf-media-object.is-media-end) :where(.bf-media-object-media) {
+  grid-column: 2;
+  grid-row: 1;
+}
+`;
+}

package/dist/css-components/navigation-layout.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Navigation and page composition contracts that compose existing navigation
+ * primitives without changing their interaction ownership.
+ */
+export declare function navigationLayoutCss(): string;

package/dist/css-components/navigation-layout.js

@@ -0,0 +1,151 @@
+/**
+ * Navigation and page composition contracts that compose existing navigation
+ * primitives without changing their interaction ownership.
+ */
+export function navigationLayoutCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Navigation layout and page shell                                    */
+/* ------------------------------------------------------------------ */
+
+/* The row is only a layout owner. Interactive children own the occupied
+ * block; row padding would leave an unpainted strip below their highlights. */
+:where(.bf-theme) :where(.bf-top-navigation-row) {
+  padding-block: 0;
+}
+
+/* The tagged treatment is opt-in. The Circle of Friends is aligned to the
+ * first title line, then the 38px tag extends upward to the navigation edge.
+ * Its 22px inline size preserves the established 38:22 (~1.73) tag ratio; the
+ * tag must not stretch to the full occupied navigation row. */
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) > :where(.bf-top-navigation-link) {
+  align-items: start;
+  column-gap: 0;
+  display: inline-flex;
+  inline-size: 100%;
+  justify-content: flex-start;
+  padding-block: 0;
+  padding-inline: 0;
+  padding-inline-start: calc(var(--bf-top-navigation-logo-tag-inline-size) + var(--bf-top-navigation-logo-tag-gap));
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-tag) {
+  align-items: flex-end;
+  background: var(--bf-color-brand);
+  block-size: var(--bf-top-navigation-logo-tag-block-size);
+  box-sizing: border-box;
+  display: flex;
+  inline-size: var(--bf-top-navigation-logo-tag-inline-size);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  justify-content: center;
+  padding-block: 0 var(--bf-top-navigation-logo-icon-bottom-offset);
+  padding-inline: 0;
+  position: absolute;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) ~ :where(.bf-top-navigation-list.is-banner-actions) :where(.bf-top-navigation-menu-toggle, .bf-top-navigation-search-toggle),
+:where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-nav) :where(.bf-top-navigation-link, .bf-top-navigation-search-toggle) {
+  block-size: 100%;
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-icon) {
+  block-size: var(--bf-top-navigation-logo-icon-size);
+  display: block;
+  flex: 0 0 auto;
+  inline-size: var(--bf-top-navigation-logo-icon-size);
+  transform: translateX(var(--bf-top-navigation-logo-icon-optical-offset-inline));
+}
+
+:where(.bf-theme) :where(.bf-top-navigation-logo.is-canonical-tagged) :where(.bf-top-navigation-logo-title) {
+  align-self: start;
+  color: var(--bf-color-text-default);
+  font-size: var(--bf-top-navigation-logo-title-font-size, var(--bf-body-font-size, 1rem));
+  font-weight: 300;
+  line-height: var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5));
+  overflow: visible;
+  overflow-wrap: anywhere;
+  /* The first title line and the 16px mark share the mark's fixed centre:
+   * tag block-end minus the 6px inset minus half the mark. Symmetric title
+   * padding keeps the occupied row stable across all four type-density tiers. */
+  padding-block: calc(
+    var(--bf-top-navigation-logo-tag-block-size)
+    - var(--bf-top-navigation-logo-icon-bottom-offset)
+    - (var(--bf-top-navigation-logo-icon-size) / 2)
+    - (var(--bf-top-navigation-logo-title-line-height, var(--bf-body-line-height, 1.5rem)) / 2)
+  );
+  text-overflow: clip;
+  white-space: normal;
+}
+
+/* A grid-aligned header uses the same eight tracks and gutter as page content.
+ * The brand/banner owns columns one and two; primary navigation starts at
+ * column three. No independent brand-width token can drift from that grid. */
+:where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) {
+  container-type: inline-size;
+}
+
+@media (min-width: 64.75rem) {
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-row) {
+    column-gap: var(--bf-grid-gap-inline);
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-banner) {
+    grid-column: 1 / span 2;
+    min-inline-size: 0;
+  }
+
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-nav) {
+    grid-column: 3 / -1;
+    min-inline-size: 0;
+  }
+
+  :where(.bf-theme) :where(.bf-top-navigation.is-grid-aligned) :where(.bf-top-navigation-dropdown) {
+    top: 100%;
+  }
+}
+
+/* Documentation composition stays single-column until its own container can
+ * support the intentional 2/6 navigation/content split. The optional
+ * navigation slot never creates a mobile rail. */
+:where(.bf-theme) :where(.bf-docs-layout) {
+  align-items: start;
+  column-gap: var(--bf-grid-gap-inline);
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-docs-layout-navigation, .bf-docs-layout-content) {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
+}
+
+@media (min-width: 64.75rem) {
+  @container (width >= 38.75rem) {
+    :where(.bf-theme) :where(.bf-docs-layout:has(> .bf-docs-layout-navigation)) > :where(.bf-docs-layout-navigation) {
+      grid-column: span 2;
+    }
+
+    :where(.bf-theme) :where(.bf-docs-layout:has(> .bf-docs-layout-navigation)) > :where(.bf-docs-layout-content) {
+      grid-column: span 6;
+    }
+  }
+}
+
+/* This is deliberately scoped to an explicit page shell. Importing a BF tier
+ * alone never changes the consuming document body's user-agent margin. */
+:where(body.bf-theme.bf-page-shell) {
+  background: var(--bf-color-background-default);
+  margin: 0;
+  min-block-size: 100dvb;
+}
+`;
+}

package/dist/css-components/panel.d.ts

@@ -0,0 +1,6 @@
+type PanelCssOptions = {
+    bodyTypeStyles: string;
+    h4TypeStyles: string;
+};
+export declare function panelCss(options: PanelCssOptions): string;
+export {};