baseline-foundry 0.1.3

package/dist/css-components/tabs-choice-breadcrumbs.js

@@ -0,0 +1,307 @@
+export function tabsChoiceBreadcrumbsCss(options) {
+    const { bodyCaseTypeStyles, bodyStrongTypeStyles, bodyTypeStyles, buttonMarginBottom, buttonPadding, } = options;
+    return `:where(.bf-theme) :where(.bf-tabs) {
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tabs-list) {
+  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
+  display: flex;
+  gap: 0;
+  list-style: none;
+  /* Tabs keep their occupied block on the grid at the list boundary rather
+     than leaving each link's control compensation between its active rule and
+     the list rule. */
+  margin: 0 0 calc((var(--bf-baseline) * 2) - var(--bf-border-width));
+  min-inline-size: 0;
+  overflow-x: auto;
+  padding: 0;
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-tabs-item) {
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-tabs-link) {
+${bodyTypeStyles}  align-items: center;
+  background: transparent;
+  border: 0;
+  border-bottom: var(--bf-bar-thickness) solid transparent;
+  color: var(--bf-color-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  gap: calc(var(--bf-baseline) * 0.5);
+  justify-content: center;
+  margin-bottom: 0;
+  padding-block-end: calc(var(--bf-body-nudge-end) + var(--bf-baseline) - var(--bf-bar-thickness));
+  padding-block-start: var(--bf-body-nudge-start);
+  padding-inline: var(--bf-control-inline-padding-action);
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-tabs-link:hover) {
+  background: var(--bf-color-background-hover);
+  color: var(--bf-color-text-default);
+}
+
+:where(.bf-theme) :where(.bf-tabs-link:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-tabs-link:focus-visible) {
+  color: var(--bf-color-text-default);
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-tabs-link.is-active, .bf-tabs-link[aria-selected='true']) {
+  border-bottom-color: var(--bf-color-text-default);
+  color: var(--bf-color-text-default);
+}
+
+:where(.bf-theme) :where(.bf-tabs-panel) {
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-tabs-panel)[aria-hidden='true'] {
+  display: none;
+}
+
+:where(.bf-theme) :where(.bf-tabs.is-equal) {
+  --bf-ui-tabs-equal-min: 8rem;
+}
+
+:where(.bf-theme) :where(.bf-tabs.is-equal) :where(.bf-tabs-list) {
+  display: grid;
+  gap: calc(var(--bf-baseline) * 2);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bf-ui-tabs-equal-min)), 1fr));
+  overflow: visible;
+  white-space: normal;
+}
+
+:where(.bf-theme) :where(.bf-tabs.is-equal) :where(.bf-tabs-item) {
+  min-inline-size: 0;
+  white-space: normal;
+}
+
+:where(.bf-theme) :where(.bf-tabs.is-equal) :where(.bf-tabs-link) {
+  display: flex;
+  inline-size: 100%;
+  text-align: center;
+  white-space: normal;
+}
+
+:where(.bf-theme) :where(.bf-choice-list) {
+  display: grid;
+  gap: var(--bf-field-gap);
+}
+
+:where(.bf-theme) :where(.bf-choice-row) {
+  align-items: center;
+  background: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid var(--bf-color-border-default);
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: grid;
+  gap: calc(var(--bf-baseline) * 0.75);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  margin: 0 0 ${buttonMarginBottom};
+  min-inline-size: 0;
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-field);
+}
+
+:where(.bf-theme) :where(.bf-choice-row:hover) {
+  background: var(--bf-color-background-hover);
+}
+
+:where(.bf-theme) :where(.bf-choice-row:has(:focus-visible)) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+}
+
+:where(.bf-theme) :where(.bf-choice-row input[type='radio']) {
+  margin: 0;
+}
+
+:where(.bf-theme) :where(.bf-choice-row-name) {
+${bodyStrongTypeStyles}  display: block;
+  margin: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:where(.bf-theme) :where(.bf-choice-row-meta) {
+${bodyTypeStyles}  color: var(--bf-color-text-muted);
+  display: block;
+  margin: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-choice-row.is-active),
+:where(.bf-theme) :where(.bf-choice-row:has(input[type='radio']:checked)) {
+  background: var(--bf-color-background-active);
+  border-color: var(--bf-color-focus);
+}
+
+:where(.bf-theme) :where(.bf-inline-options) {
+  border-bottom: var(--bf-border-width) solid var(--bf-color-border-default);
+  display: grid;
+  gap: var(--bf-field-gap);
+  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+  padding-block-start: var(--bf-panel-padding-block);
+  padding-inline: var(--bf-panel-padding-inline);
+}
+
+:where(.bf-theme) :where(.bf-inline-options-heading) {
+${bodyCaseTypeStyles}  color: var(--bf-color-text-muted);
+  display: block;
+  margin: 0;
+}
+
+:where(.bf-theme) :where(.bf-inline-options-heading) :where(.bf-form-label) {
+  color: inherit;
+}
+
+:where(.bf-theme) :where(.bf-inline-options-options) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--bf-baseline) * 3);
+}
+
+:where(.bf-theme) :where(.bf-inline-options-option) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: var(--bf-field-gap);
+}
+
+:where(.bf-theme) :where(.bf-inline-options-option) input[type='radio'] {
+  margin: 0;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control, .bf-tab-buttons) {
+  display: block;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-list, .bf-tab-buttons-list) {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-item, .bf-tab-buttons-item) {
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-item + .bf-segmented-control-item, .bf-tab-buttons-item + .bf-tab-buttons-item) {
+  margin-inline-start: calc(var(--bf-border-width) * -1);
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-button, .bf-tab-buttons-button) {
+${bodyTypeStyles}  align-items: center;
+  appearance: none;
+  background-color: var(--bf-color-background-default);
+  border: var(--bf-border-width) solid var(--bf-color-border-high-contrast);
+  border-radius: 0;
+  color: var(--bf-color-text-default);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  margin-bottom: ${buttonMarginBottom};
+  max-inline-size: 100%;
+  overflow: hidden;
+${buttonPadding}  padding-inline: var(--bf-control-inline-padding-action);
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-item:first-child .bf-segmented-control-button, .bf-tab-buttons-item:first-child .bf-tab-buttons-button) {
+  border-end-start-radius: var(--bf-radius);
+  border-start-start-radius: var(--bf-radius);
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-item:last-child .bf-segmented-control-button, .bf-tab-buttons-item:last-child .bf-tab-buttons-button) {
+  border-end-end-radius: var(--bf-radius);
+  border-start-end-radius: var(--bf-radius);
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-button:hover, .bf-tab-buttons-button:hover) {
+  background-color: var(--bf-color-background-hover);
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-button:focus:not(:focus-visible), .bf-tab-buttons-button:focus:not(:focus-visible)) {
+  outline: none;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-button:focus-visible, .bf-tab-buttons-button:focus-visible) {
+  outline: 2px solid var(--bf-color-focus);
+  outline-offset: -2px;
+  z-index: 2;
+}
+
+:where(.bf-theme) :where(.bf-segmented-control-button.is-active, .bf-tab-buttons-button.is-active, .bf-segmented-control-button[aria-pressed='true'], .bf-tab-buttons-button[aria-pressed='true'], .bf-segmented-control-button[aria-selected='true'], .bf-tab-buttons-button[aria-selected='true']) {
+  background-color: var(--bf-color-background-active);
+  color: var(--bf-color-text-default);
+  z-index: 1;
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs) {
+  display: block;
+  margin: 0;
+  width: 100%;
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs-items) {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--bf-baseline) * 0.5) calc(var(--bf-baseline) * 1.25);
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs-item) {
+${bodyCaseTypeStyles}  color: var(--bf-color-text-muted);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs-item) + :where(.bf-breadcrumbs-item)::before {
+  color: var(--bf-color-text-muted);
+  content: "/";
+  margin-inline-end: calc(var(--bf-baseline) * 0.75);
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs-item) a {
+  color: inherit;
+  text-decoration: none;
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs-item) a:hover {
+  color: var(--bf-color-text-default);
+  text-decoration: underline;
+}
+
+:where(.bf-theme) :where(.bf-breadcrumbs-item [aria-current='page'], .bf-breadcrumbs-item.is-active) {
+  color: var(--bf-color-text-default);
+}
+`;
+}

package/dist/css-components/tiered-list-equal-height-row.d.ts

@@ -0,0 +1 @@
+export declare function tieredListEqualHeightRowCss(): string;

package/dist/css-components/tiered-list-equal-height-row.js

@@ -0,0 +1,286 @@
+export function tieredListEqualHeightRowCss() {
+    return `/* ------------------------------------------------------------------ */
+/* Tiered list                                                         */
+/* Editorial pattern (Vanilla parity): paired list of titles +         */
+/* descriptions under a top-level title + description, with optional   */
+/* CTA. Vanilla uses media queries at tablet/desktop; Baseline Foundry */
+/* uses container queries on the pattern itself so the layout reacts   */
+/* to its own width (panels, drawers, narrow main areas) instead of    */
+/* the viewport. Stack gaps own semantics; text keeps compensation.    */
+/* ------------------------------------------------------------------ */
+
+:where(.bf-theme) :where(.bf-tiered-list) {
+  container-type: inline-size;
+  display: grid;
+  gap: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-tiered-list-items) {
+  display: grid;
+  gap: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-tiered-list-header),
+:where(.bf-theme) :where(.bf-tiered-list-item),
+:where(.bf-theme) :where(.bf-tiered-list-cta) {
+  column-gap: var(--bf-grid-gap-inline);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* Consumer-proven compact rows. These are deliberately independent of the
+   editorial hanging-indent composition below: flush rows describe a plain
+   two-slot datum while triple rows add a named intermediate role. */
+:where(.bf-theme) :where(.bf-tiered-list.is-flush, .bf-tiered-list.is-triple) :where(.bf-tiered-list-item) {
+  align-items: start;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+:where(.bf-theme) :where(.bf-tiered-list-item-label, .bf-tiered-list-item-role, .bf-tiered-list-item-value) {
+  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: var(--bf-body-font-weight);
+  line-height: var(--bf-body-line-height);
+  margin-block: 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-tiered-list-item-role) {
+  color: var(--bf-color-text-muted);
+}
+
+:where(.bf-theme) :where(ol.bf-tiered-list, ul.bf-tiered-list, ol.bf-tiered-list-items, ul.bf-tiered-list-items) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.bf-theme) :where(.bf-tiered-list-header) > :where(.bf-rule),
+:where(.bf-theme) :where(.bf-tiered-list-item) > :where(.bf-rule),
+:where(.bf-theme) :where(.bf-tiered-list-cta) > :where(.bf-rule) {
+  grid-column: 1 / -1;
+}
+
+/* ------------------------------------------------------------------ */
+/* Medium container (≥ 38.75rem): items use BF’s 8-column grid with a  */
+/* hanging indent. Vanilla: title col 3 / span 2, description col 5 / */
+/* span 4. The rule above each item starts at col 3 to match.         */
+/* ------------------------------------------------------------------ */
+@container (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-item),
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-cta) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-item) > :where(.bf-rule),
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-cta) > :where(.bf-rule) {
+    grid-column: 3 / span 6;
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-item-title) {
+    grid-column: 3 / span 2;
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-item-description),
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-list-full-width):not(.is-flush):not(.is-triple)) :where(.bf-tiered-list-cta-block) {
+    grid-column: 5 / span 4;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Header split (≥ 64.75rem): unchanged 50/50 title/description.       */
+/* ------------------------------------------------------------------ */
+@container (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-tiered-list:not(.is-description-full-width)) :where(.bf-tiered-list-header) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Equal-height row (Vanilla parity).                                  */
+/* Cross-column row alignment via CSS subgrid: each column is a 4-row  */
+/* subgrid so items at the same vertical position across columns share */
+/* the same baseline (e.g. icon row, title row, description row,       */
+/* trailing list row). Vanilla uses media queries; BF uses container   */
+/* queries on the row itself so the layout reacts to its own width.    */
+/* Optional cross-column dividers via .is-divider-1 / -2 / -3 mirror   */
+/* Vanilla’s has-divider-N modifiers (renamed for the BF is-* rule).   */
+/* ------------------------------------------------------------------ */
+:where(.bf-theme) :where(.bf-equal-height-row) {
+  container-type: inline-size;
+  display: grid;
+  gap: var(--bf-grid-gap-block) var(--bf-grid-gap-inline);
+  /* Keep the logical track system on the query container itself. Container
+     queries cannot style their own container, so responsive descendants span
+     these tracks instead of relying on an ineligible self-query. */
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  margin-block-end: var(--bf-section-space-shallow);
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-equal-height-row-col) {
+  border-block-start: var(--bf-border-width) solid var(--bf-color-border-low-contrast);
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  margin-block-end: var(--bf-space-1);
+  position: relative;
+}
+
+/* Responsive aspect media can make a shared subgrid track land between
+   baselines. Snap that media box itself; the surrounding composition still
+   does not own or erase any child's semantic margins. */
+@supports (block-size: calc-size(auto, round(up, size, 1px))) {
+  :where(.bf-theme) :where(.bf-equal-height-row-item) > :where(.bf-aspect) {
+    block-size: calc-size(auto, round(up, size, var(--bf-baseline)));
+  }
+}
+
+:where(.bf-theme) :where(.bf-equal-height-row-col.is-borderless) {
+  border-block-start: 0;
+}
+
+@container (width >= 38.75rem) {
+  :where(.bf-theme) :where(.bf-equal-height-row-col) {
+    grid-column: span 8;
+    grid-template-columns: subgrid;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row-col) > :where(.bf-equal-height-row-item) {
+    grid-column: span 4;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row-col) > :where(.bf-equal-height-row-item):first-child {
+    grid-row: span 100;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row.is-wrap) :where(.bf-equal-height-row-col) {
+    grid-column: span 4;
+    grid-template-columns: none;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row.is-wrap) :where(.bf-equal-height-row-col) > :where(.bf-equal-height-row-item) {
+    grid-column: auto;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row.is-wrap) :where(.bf-equal-height-row-col) > :where(.bf-equal-height-row-item):first-child {
+    grid-row: auto;
+  }
+}
+
+@container (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-equal-height-row-col) {
+    border-block-start: 0;
+    grid-column: span 2;
+    margin-block-end: 0;
+  }
+}
+
+/* The Sites equal-heights composition constrains two-item groups to the
+   trailing half of the large grid and three-item groups to its trailing
+   three quarters. These modifiers preserve those rendered proportions while
+   keeping the existing equal-height row as the single alignment primitive. */
+@media (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-equal-height-row.is-columns-2) {
+    inline-size: calc(50% - (var(--bf-grid-gap-inline) / 2));
+    margin-inline-start: auto;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row.is-columns-2) :where(.bf-equal-height-row-col) {
+    grid-column: span 4;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row.is-columns-3) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    inline-size: calc(75% - (var(--bf-grid-gap-inline) / 4));
+    margin-inline-start: auto;
+  }
+
+  :where(.bf-theme) :where(.bf-equal-height-row.is-columns-3) :where(.bf-equal-height-row-col) {
+    grid-column: span 2;
+  }
+}
+
+/* Cross-column dividers — Vanilla pattern uses a single ::before for   */
+/* divider-1 and a single ::after for divider-2; the third divider     */
+/* falls back onto whichever pseudo is still available.                */
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-1)::before,
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-2)::after,
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-1))::before,
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-2))::after {
+  background-color: var(--bf-color-border-low-contrast);
+  block-size: 1px;
+  content: "";
+  display: none;
+  grid-column: 1 / -1;
+  inset-inline: 0;
+  margin: auto;
+  position: absolute;
+}
+
+@container (width >= 64.75rem) {
+  :where(.bf-theme) :where(.bf-equal-height-row.is-divider-1)::before,
+  :where(.bf-theme) :where(.bf-equal-height-row.is-divider-2)::after,
+  :where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-1))::before,
+  :where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-2))::after {
+    display: block;
+  }
+}
+
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-1)::before {
+  grid-row: 2;
+}
+
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-2)::after {
+  grid-row: 3;
+}
+
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-1))::before,
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-2))::after,
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-1):not(.is-divider-2))::before {
+  grid-row: 4;
+}
+
+:where(.bf-theme) :where(.bf-equal-height-row.is-divider-3:not(.is-divider-1):not(.is-divider-2))::after {
+  display: none;
+}
+
+/* Flush and triple rows remain intrinsic at narrow widths, then gain their
+   aligned slots only when their own container has room. */
+@container (width >= 32rem) {
+  :where(.bf-theme) :where(.bf-tiered-list.is-flush) :where(.bf-tiered-list-item) {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list.is-flush) :where(.bf-tiered-list-item-label, .bf-tiered-list-item-title) {
+    grid-column: 1;
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list.is-flush) :where(.bf-tiered-list-item-value, .bf-tiered-list-item-description) {
+    grid-column: 2;
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list.is-triple) :where(.bf-tiered-list-item) {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list.is-triple) :where(.bf-tiered-list-item-label) {
+    grid-column: 1;
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list.is-triple) :where(.bf-tiered-list-item-role) {
+    grid-column: 2;
+  }
+
+  :where(.bf-theme) :where(.bf-tiered-list.is-triple) :where(.bf-tiered-list-item-value) {
+    grid-column: 3;
+  }
+}
+`;
+}

package/dist/css-components.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeSurface, ThemeTokens } from "./types.js";
+export declare function componentsCss(tokens: ThemeTokens, themeSurfaces?: ThemeSurface[]): string;