@repobit/dex-system-design 0.25.11 → 0.26.0

package/src/components/compatibility-table/compatibility-table.js

@@ -3,6 +3,7 @@ import { tokens } from "../../tokens/tokens.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import compatibilityTableCSS from "./compatibility-table.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class CompatibilityTable extends LitElement {
   static properties = {
@@ -15,7 +16,7 @@ class CompatibilityTable extends LitElement {
     rows        : { type: Array }
   };
 
-  static styles = [tokens, compatibilityTableCSS];
+  static styles = [tokens, ensembleCSS, compatibilityTableCSS];
 
   constructor() {
     super();
@@ -36,13 +37,34 @@ class CompatibilityTable extends LitElement {
     return ["Environment", "Coverage", "Notes"];
   }
 
+  /**
+   * The column name a cell shows below md, where the header row is hidden.
+   *
+   * It has to come from `columns`, because that is what the header shows. The
+   * stylesheet used to carry these as hardcoded strings in `content` --
+   * "Without AI Guardian: " and four others -- so a consumer who passed their
+   * own columns got them in the header and the component's English in the
+   * cells. Measured at 375 with columns set to Romanian: the header read
+   * "Fara AI Guardian" and the cell label still read "Without AI Guardian".
+   * There was no way to change it and no way to translate it.
+   *
+   * Passed to CSS as a string custom property so the label stays generated
+   * content: it is a visual stand-in for a header that is still in the
+   * accessibility tree, and putting it in the DOM would say it twice.
+   */
+  _cellLabel(index) {
+    const columns = this._defaultColumns();
+    const name = columns?.[index];
+    return name ? `--bd-cell-label: "${String(name).replace(/["\\]/g, "")}: "` : nothing;
+  }
+
   _renderRow(row) {
     if (this.variant === "outcome") {
       return html`
         <div class="bd-compattable-row" role="row">
           <span class="bd-compattable-cell bd-compattable-cell--event" role="cell">${row.event}</span>
-          <span class="bd-compattable-cell bd-compattable-cell--without" role="cell">${row.without}</span>
-          <span class="bd-compattable-cell bd-compattable-cell--with" role="cell">${row.with}</span>
+          <span class="bd-compattable-cell bd-compattable-cell--without" role="cell" style=${this._cellLabel(1)}>${row.without}</span>
+          <span class="bd-compattable-cell bd-compattable-cell--with" role="cell" style=${this._cellLabel(2)}>${row.with}</span>
         </div>
       `;
     }
@@ -51,7 +73,7 @@ class CompatibilityTable extends LitElement {
       return html`
         <div class="bd-compattable-row" role="row">
           <span class="bd-compattable-cell bd-compattable-cell--category" role="cell">${row.category}</span>
-          <span class="bd-compattable-cell bd-compattable-cell--riskcoverage" role="cell">${row.coverage}</span>
+          <span class="bd-compattable-cell bd-compattable-cell--riskcoverage" role="cell" style=${this._cellLabel(1)}>${row.coverage}</span>
         </div>
       `;
     }
@@ -68,8 +90,8 @@ class CompatibilityTable extends LitElement {
     return html`
       <div class="bd-compattable-row" role="row">
         <span class="bd-compattable-cell bd-compattable-cell--environment" role="cell">${row.environment}</span>
-        <span class="bd-compattable-cell bd-compattable-cell--coverage" role="cell">${row.coverage}</span>
-        <span class="bd-compattable-cell bd-compattable-cell--notes" role="cell">${row.notes}</span>
+        <span class="bd-compattable-cell bd-compattable-cell--coverage" role="cell" style=${this._cellLabel(1)}>${row.coverage}</span>
+        <span class="bd-compattable-cell bd-compattable-cell--notes" role="cell" style=${this._cellLabel(2)}>${row.notes}</span>
       </div>
     `;
   }
@@ -78,7 +100,7 @@ class CompatibilityTable extends LitElement {
     const columns = this._defaultColumns();
 
     return html`
-      <div class="bd-compattable-wrapper">
+      <div class="bd-ensemble bd-compattable-wrapper">
         ${this.title
           ? html`
               <bd-h as="h2" class="bd-compattable-title">
@@ -89,7 +111,7 @@ class CompatibilityTable extends LitElement {
 
         ${this.description
           ? html`
-              <bd-p kind="large" class="bd-compattable-description" color="var(--color-neutral-600)">
+              <bd-p variant="large" class="bd-compattable-description" color="muted">
                 <slot name="description">${this.description}</slot>
               </bd-p>
             `
@@ -114,7 +136,13 @@ class CompatibilityTable extends LitElement {
                   )}
                 </div>
 
-                <div class="bd-compattable-body">
+                <!-- role="rowgroup", because role="table" must own rowgroups or
+                     rows and this div had no role at all. Measured in the
+                     accessibility tree before it: table > row (the header),
+                     then a "none" node holding all five data rows, so the rows
+                     were not table-owned and their position and count were not
+                     the table's to compute. One attribute; no visual change. -->
+                <div class="bd-compattable-body" role="rowgroup">
                   ${this.rows.map((row) => this._renderRow(row))}
                 </div>
 

package/src/components/control-alignment.stories.js

@@ -0,0 +1,393 @@
+import { html } from 'lit';
+
+import './button/button.js';
+import './input/input.js';
+import './dropdown/dropdown.js';
+import './textarea/textarea.js';
+import './label/label.js';
+import './help-text/help-text.js';
+import './fieldset/fieldset.js';
+import './checkbox/checkbox.js';
+import './radio/radio.js';
+import './switch/switch.js';
+import './badge/badge.js';
+import './tag/tag.js';
+import './alert/alert.js';
+import './heading/heading.js';
+import './display/display.js';
+import './paragraph/paragraph.js';
+import './list/list.js';
+import './list/list-item/list-item.js';
+import './code/code.js';
+import './tooltip/tooltip.js';
+import './avatar/avatar.js';
+import './spinner/spinner.js';
+import './progress/progress.js';
+import './skeleton/skeleton.js';
+import './video/video.js';
+
+/**
+ * Atoms rendered next to the atoms they are supposed to agree with.
+ *
+ * `check:ds` can prove every value came from a token. It cannot prove two
+ * components ended up looking the same — the focus ring was the standing
+ * example, where 35 declarations every one of which passed the lint produced
+ * three different results. These stories are the other half of that check:
+ * each one puts a set of atoms that share a visual role in a single frame, so a
+ * change to a shared token shows up as a difference *between* components rather
+ * than only as a diff inside one.
+ *
+ * They exist to be looked at, in Storybook and in the visual-regression diff.
+ * Nothing here is a usage example — do not copy these compositions into a page.
+ */
+export default {
+  title     : 'Foundations/Control Alignment',
+  tags      : ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs  : {
+      description: {
+        component: `
+Cross-atom comparisons. Every story here renders atoms that share a visual role
+side by side, so the system can be judged as a system.
+
+Read each one by asking whether the atoms in it look like they came from the
+same place. Where they do not, the difference is the finding.
+        `
+      }
+    }
+  }
+};
+
+const row = children => html`
+  <div style="display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--spacing-24)">
+    ${children}
+  </div>
+`;
+
+const caption = text => html`
+  <p
+    style="margin: 0 0 var(--spacing-8); font-family: var(--typography-fontFamily-mono);
+           font-size: var(--typography-fontSize-xxs); letter-spacing: var(--typography-letterSpacing-wide);
+           text-transform: uppercase; color: var(--color-neutral-500)"
+  >${text}</p>
+`;
+
+const stack = children => html`
+  <div style="display: grid; gap: var(--spacing-32)">${children}</div>
+`;
+
+/**
+ * The composition the whole form family is built for: a button and a field of
+ * the same size, side by side in one row.
+ *
+ * Both axes should agree. Heights derive from the same three tokens and match
+ * to within half a pixel — 33.5 / 44 / 54.5 — and each control now reads its
+ * radius from its own size-matched alias, so `sm` is 4px on both, `md` 6px and
+ * `lg` 8px.
+ *
+ * **The textarea is not in that comparison, and should not be read as if it
+ * were.** It agrees on the three axes that mean anything across a form row —
+ * padding, type step and radius — and it is rendered here at two rows so it
+ * reads as the multi-line control it is. Its height comes from `rows`; a
+ * single-line height would collapse it.
+ *
+ * It also does not compute its height the same way, and the difference is
+ * larger than it looks: the other three set a fixed height with
+ * `box-sizing: border-box`, which absorbs their 1px borders, while a textarea
+ * sized by `rows` adds its borders on top. Between that and the taller line
+ * box — `normal` rather than `tight`, because 1.25 is cramped for running text
+ * — a one-row textarea lands about 6px above the row it sits in. Making the
+ * two formulas agree would mean forcing `tight` on a box of running text, and
+ * a multi-line control being taller than a single-line one is correct anyway.
+ *
+ * So: check the textarea's radius, padding and type against the row, and
+ * ignore its height. The other three must agree on all four.
+ *
+ * None of this held before, and both failures are the kind this story exists
+ * to catch — neither side looked wrong on its own.
+ *
+ * The button spelled its radius as a raw `--radius-*` step while the field used
+ * the `--form-input-*` aliases, and the field's `sm` pointed at the *medium*
+ * alias and its `md` at the *large* one: a step apart at both.
+ *
+ * The textarea was the one form control left outside
+ * shared/form-field.css.js, with no size axis at all, so it rendered the `md`
+ * radius and a fixed 16px type in all three rows of this story — including the
+ * two where the caption named it alongside three controls it did not match.
+ *
+ * Worth a look on every diff rather than only when something here is being
+ * changed on purpose.
+ */
+export const ControlSizes = () => stack([
+  ['sm', 'Small'], ['md', 'Medium'], ['lg', 'Large']
+].map(([size, name]) => html`
+  <div>
+    ${caption(`${name} — button, input, select · textarea (height from rows)`)}
+    ${row(html`
+      <bd-button size=${size}>Continue</bd-button>
+      <div style="width: 14rem">
+        <bd-custom-input label="Email" size=${size} placeholder="you@example.com"></bd-custom-input>
+      </div>
+      <div style="width: 12rem">
+        <bd-custom-dropdown
+          label="Plan"
+          size=${size}
+          .options=${['Total Security', 'Internet Security', 'Antivirus Plus']}
+        ></bd-custom-dropdown>
+      </div>
+      <div style="width: 12rem">
+        <bd-textarea size=${size} rows="2" placeholder="Notes"></bd-textarea>
+      </div>
+    `)}
+  </div>
+`));
+
+/**
+ * Button and field alternating at each size, which is where a difference of a
+ * single radius step is easiest to see — the two corners sit one above the
+ * other rather than across a row. Each label names the alias that rule reads,
+ * so a mismatch is legible in the snapshot without opening the stylesheet.
+ */
+export const ControlRadii = () => html`
+  <div style="display: grid; gap: var(--spacing-16); max-width: 26rem">
+    ${caption('Corner radius at matching sizes — 4px / 6px / 8px')}
+    <bd-button size="sm">Button sm — button-small-borderRadius</bd-button>
+    <bd-custom-input label="Input sm — form-input-small-borderRadius" size="sm"></bd-custom-input>
+    <bd-button size="md">Button md — button-medium-borderRadius</bd-button>
+    <bd-custom-input label="Input md — form-input-medium-borderRadius" size="md"></bd-custom-input>
+    <bd-button size="lg">Button lg — button-large-borderRadius</bd-button>
+    <bd-custom-input label="Input lg — form-input-large-borderRadius" size="lg"></bd-custom-input>
+  </div>
+`;
+
+/**
+ * The label / field / help-text stack, built two ways: from the standalone
+ * atoms on the left, and from the field's own built-in label and help text on
+ * the right. They are the same three parts and should produce the same stack.
+ *
+ * They do now. Both read `--form-label-*` and `--form-help-text-*`, so the
+ * weight and both gaps come from the same place.
+ *
+ * They did not before. The field hardcoded its label bold where the token says
+ * medium — 200 units apart on the same line of the same form — and the two
+ * gaps were 1px against 4px, because the margin tokens had been written
+ * against a step-indexed spacing scale and never converted.
+ */
+export const FieldStackVsBuiltIn = () => html`
+  <div style="display: flex; gap: var(--spacing-48); flex-wrap: wrap">
+    <div style="width: 18rem">
+      ${caption('bd-label + input + bd-help-text')}
+      <bd-label for="a" required>Email address</bd-label>
+      <bd-custom-input label="" size="md" placeholder="you@example.com"></bd-custom-input>
+      <bd-help-text>We only use this for receipts.</bd-help-text>
+    </div>
+    <div style="width: 18rem">
+      ${caption("the field's own label and help text")}
+      <bd-custom-input
+        label="Email address"
+        size="md"
+        required
+        placeholder="you@example.com"
+        tooltip="We only use this for receipts."
+      ></bd-custom-input>
+    </div>
+  </div>
+`;
+
+/**
+ * Field spacing inside a group. The gap between rows is `--form-fieldSpacing`,
+ * which is the token most likely to look wrong at a glance.
+ */
+export const FieldSpacing = () => html`
+  <div style="max-width: 22rem">
+    <bd-fieldset legend="Contact details">
+      <bd-custom-input label="First name" size="md"></bd-custom-input>
+      <bd-custom-input label="Last name" size="md"></bd-custom-input>
+      <bd-custom-input label="Email" size="md"></bd-custom-input>
+    </bd-fieldset>
+  </div>
+`;
+
+/**
+ * The three selection controls in one row. Checkbox and radio were written
+ * together; switch was written separately and has been brought onto their
+ * grammar — the row is the control, with their padding, their inherited label
+ * weight, a hover state it did not have, and the focus ring on the row rather
+ * than on the track. Measured, the three now agree on weight, size,
+ * line-height, padding and gap.
+ *
+ * One difference remains and is not a mistake: the switch track is 24px where
+ * the box and the circle are 20px, so its row is three pixels taller.
+ */
+export const SelectionControls = () => html`
+  <div style="display: grid; gap: var(--spacing-24)">
+    <div>
+      ${caption('unchecked')}
+      ${row(html`
+        <bd-checkbox label="Checkbox"></bd-checkbox>
+        <bd-radio label="Radio" name="align-a"></bd-radio>
+        <bd-switch label="Switch"></bd-switch>
+      `)}
+    </div>
+    <div>
+      ${caption('checked')}
+      ${row(html`
+        <bd-checkbox label="Checkbox" checked></bd-checkbox>
+        <bd-radio label="Radio" name="align-b" checked></bd-radio>
+        <bd-switch label="Switch" checked></bd-switch>
+      `)}
+    </div>
+    <div>
+      ${caption('disabled')}
+      ${row(html`
+        <bd-checkbox label="Checkbox" disabled></bd-checkbox>
+        <bd-radio label="Radio" name="align-c" disabled></bd-radio>
+        <bd-switch label="Switch" disabled></bd-switch>
+      `)}
+    </div>
+  </div>
+`;
+
+/**
+ * The three atoms that report state, now sharing one vocabulary and one set of
+ * `--status-*` roles. Badge's earlier `default` and `primary` still resolve, to
+ * `neutral` and `brand`.
+ *
+ * The remaining difference between badge and tag is deliberate and documented
+ * on the tag page: a tag carries a border and sits on the lighter tint, a badge
+ * has no border and takes the heavier one — the lighter fill is what lets the
+ * tag's border read. They are two roles, `-surface` and `-surface-strong`,
+ * rather than one flattened value. Brand is the exception: its heavier tint
+ * would be info's blue-100, so a brand badge sits on the lighter tint and
+ * differs from a brand tag only by the tag's border.
+ *
+ * What to look for: the text colour of a badge and a tag of the same tone
+ * should match, and an alert's left rule should be the same colour as a badge
+ * dot of that tone. Both used to be true only by coincidence, and success was
+ * the one where it had already stopped being true.
+ */
+export const StatusFamily = () => html`
+  <div style="display: grid; gap: var(--spacing-24); max-width: 34rem">
+    <div>
+      ${caption('badge — neutral · brand · success · warning · error · info')}
+      ${row(html`
+        <bd-badge>Neutral</bd-badge>
+        <bd-badge tone="brand">Brand</bd-badge>
+        <bd-badge tone="success">Success</bd-badge>
+        <bd-badge tone="warning">Warning</bd-badge>
+        <bd-badge tone="error">Error</bd-badge>
+        <bd-badge tone="info">Info</bd-badge>
+      `)}
+    </div>
+    <div>
+      ${caption('tag — neutral · brand · success · warning · error · info')}
+      ${row(html`
+        <bd-tag>Neutral</bd-tag>
+        <bd-tag tone="brand">Brand</bd-tag>
+        <bd-tag tone="success">Success</bd-tag>
+        <bd-tag tone="warning">Warning</bd-tag>
+        <bd-tag tone="error">Error</bd-tag>
+        <bd-tag tone="info">Info</bd-tag>
+      `)}
+    </div>
+    <div>
+      ${caption('alert — info · success · warning · error')}
+      <div style="display: grid; gap: var(--spacing-8)">
+        <bd-alert>Info</bd-alert>
+        <bd-alert tone="success">Success</bd-alert>
+        <bd-alert tone="warning">Warning</bd-alert>
+        <bd-alert tone="error">Error</bd-alert>
+      </div>
+    </div>
+  </div>
+`;
+
+/**
+ * The four text atoms in one column, on one background. Each sets its own ink:
+ * heading sets none and inherits, display sets `--color-neutral-900`, paragraph
+ * sets `--color-neutral-1000` and list item sets `--color-neutral-700`. List
+ * item is also the only one not set in the sans family.
+ */
+export const TextInk = () => html`
+  <div style="max-width: 34rem">
+    ${caption('heading · display · paragraph · list item')}
+    <bd-display variant="sm">Display</bd-display>
+    <bd-h as="h3">Heading level 3</bd-h>
+    <bd-p variant="regular">
+      A paragraph of body copy, so the ink of the running text can be compared
+      with the heading above it and the list below it.
+    </bd-p>
+    <bd-list type="unordered">
+      <bd-li variant="bullet" size="md">First list item</bd-li>
+      <bd-li variant="check" size="md">Second list item</bd-li>
+    </bd-list>
+  </div>
+`;
+
+/**
+ * Every corner radius the atom layer uses, on the atoms that use it.
+ *
+ * The scale has eight steps and there is still no written rule for which
+ * surface takes which, but the census no longer has a step used exactly once:
+ * the code block was on `--radius-3xl` (24px), the only use of the top step
+ * anywhere, and it is now on `--radius-xl` (12px). That also brought its focus
+ * ring back into the 4-12px range every other atom sits in — the ring is a
+ * box-shadow, so it takes the shape of whatever it is drawn on.
+ */
+export const RadiusCensus = () => html`
+  <div style="display: grid; gap: var(--spacing-24); max-width: 34rem">
+    <div>
+      ${caption('radius-sm — tooltip, inline code, checkbox box, skeleton')}
+      ${row(html`
+        <bd-code>--radius-sm</bd-code>
+        <bd-checkbox label="Checkbox"></bd-checkbox>
+        <div style="width: 8rem"><bd-skeleton></bd-skeleton></div>
+      `)}
+    </div>
+    <div>
+      ${caption('radius-md — alert, fieldset, button md')}
+      ${row(html`<bd-button size="md">Button</bd-button>`)}
+      <div style="margin-top: var(--spacing-8)"><bd-alert>Alert</bd-alert></div>
+    </div>
+    <div>
+      ${caption('radius-lg — video, button lg')}
+      ${row(html`<bd-button size="lg">Button</bd-button>`)}
+    </div>
+    <div>
+      ${caption('radius-xl — code block')}
+      <bd-code block>npm install @repobit/dex-system-design</bd-code>
+    </div>
+    <div>
+      ${caption('radius-full — badge, tag, avatar, switch, progress, spinner')}
+      ${row(html`
+        <bd-badge tone="primary">Badge</bd-badge>
+        <bd-tag tone="brand">Tag</bd-tag>
+        <bd-avatar name="Ana Popescu"></bd-avatar>
+        <bd-switch label="Switch" checked></bd-switch>
+        <bd-spinner></bd-spinner>
+      `)}
+      <div style="margin-top: var(--spacing-12); width: 14rem">
+        <bd-progress value="60"></bd-progress>
+      </div>
+    </div>
+  </div>
+`;
+
+/**
+ * Every atom that draws a hairline, so the border colours can be compared. Tab
+ * list uses `--color-neutral-100`, tag and fieldset `--color-neutral-200`,
+ * input and divider `--color-neutral-400` — three different answers to the same
+ * question.
+ */
+export const HairlineColours = () => html`
+  <div style="display: grid; gap: var(--spacing-16); max-width: 26rem">
+    ${caption('tag · fieldset · input · divider')}
+    <bd-tag>neutral-200 border</bd-tag>
+    <bd-fieldset legend="neutral-200 border">
+      <bd-checkbox label="A field"></bd-checkbox>
+    </bd-fieldset>
+    <bd-custom-input label="neutral-400 border" size="md"></bd-custom-input>
+    <hr style="border: none; border-top: var(--border-width-1) solid var(--color-neutral-400); margin: 0" />
+  </div>
+`;

package/src/components/cta-banner/cta-banner.css.js

@@ -1,14 +1,16 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
   :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
+    /* the band runs full-bleed on the host; the column inside it is bd-ensemble */
+    background: radial-gradient(1200px 600px at 78% -10%, var(--color-blue-400) 0%, transparent 55%), linear-gradient(160deg, var(--color-blue-500) 0%, var(--color-blue-700) 48%, var(--color-blue-950) 100%);
   }
 
   .bd-ctabanner-container {
-    background: radial-gradient(1200px 600px at 78% -10%, var(--color-blue-400) 0%, transparent 55%), linear-gradient(160deg, var(--color-blue-500) 0%, var(--color-blue-700) 48%, var(--color-blue-950) 100%);
-    padding: var(--spacing-64) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    padding-block: var(--spacing-64);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -17,11 +19,11 @@ export default css`
     gap: var(--spacing-16);
   }
   .bd-ctabanner-footer {
-    margin-top: var(--spacing-24, 24px);
+    margin-top: var(--spacing-24);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--spacing-8, 8px);
+    gap: var(--spacing-8);
     text-align: center;
   }
 
@@ -31,15 +33,26 @@ export default css`
   .bd-ctabanner-title {
     display: block;
     margin: 0;
-    color: var(--color-neutral-0, #fff);
-    line-height: var(--typography-lineHeight-tight, 1.1);
     max-width: 800px;
   }
 
   .bd-ctabanner-description {
     display: block;
     margin: 0 0 var(--spacing-16);
-    color: rgba(255, 255, 255, 0.85);
+    /* no role: translucent white, deliberately, and the translucency is doing
+       work -- it lets the gradient behind show through the text, where a flat
+       --color-text-muted-inverse would read as grey on a brand ground. No role
+       expresses white at a fraction.
+       .
+       Measured on the real gradient, not the token values: the text is hidden,
+       the ground under the glyph band is sampled from a screenshot, and the ink
+       composited over it. Worst point rgb(23,97,202) -> composites to
+       rgb(220,231,247) -> 4.67:1 at 16px/400, where the bar is 4.5. PASSES.
+       .
+       Mixed over the palette rather than written as a raw rgba, so it follows
+       --color-neutral-0 instead of nothing. Pixel-identical to the rgba it
+       replaces. */
+    color: color-mix(in srgb, var(--color-neutral-0) 85%, transparent);
     max-width: 640px;
   }
 
@@ -53,14 +66,29 @@ export default css`
   .bd-ctabanner-caption {
     display: block;
     margin: var(--spacing-8) 0 0;
-    color: rgba(255, 255, 255, 0.6);
-    font-family: var(--typography-fontFamily-mono, monospace);
-    font-size: var(--typography-fontSize-xs);
+    /* no role: as the description above, and THIS ONE HAS ALMOST NO MARGIN.
+       Measured the same way -- text hidden, ground sampled under the glyph
+       band, ink composited: worst point rgb(0,61,154) -> rgb(153,177,215) ->
+       4.51:1 at 16px/400 against a 4.5 bar. It passes by 0.01.
+       .
+       So treat it as load-bearing. Darkening the gradient's light end, moving
+       this caption up the banner, or dropping the alpha any further all break
+       it, and none of those would look like an accessibility change to whoever
+       made it. If this needs to move, re-measure rather than reason: arithmetic
+       on the token values says 1.99:1 over blue-400, which is the gradient's
+       lightest stop and is NOT where this text sits.
+       .
+       Mixed over the palette; pixel-identical to the rgba it replaces. */
+    color: color-mix(in srgb, var(--color-neutral-0) 60%, transparent);
+    font-family: var(--typography-fontFamily-mono);
+    /* No font-size: this class is on a <bd-p variant="small"> host, and bd-p
+       sets font-size on its own inner element, so a host declaration never
+       reached the text -- it rendered at body-small's 14px either way. */
   }
 
-  @media (max-width: 599px) {
+  @media ${unsafeCSS(below('sm'))} {
     .bd-ctabanner-container {
-      padding: var(--spacing-48) var(--spacing-24);
+      padding-block: var(--spacing-48);
     }
 
     .bd-ctabanner-cta {

package/src/components/cta-banner/cta-banner.js

@@ -3,6 +3,7 @@ import { tokens } from "../../tokens/tokens.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import ctaBannerCSS from "./cta-banner.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class CtaBanner extends LitElement {
   static properties = {
@@ -11,7 +12,7 @@ class CtaBanner extends LitElement {
     caption    : { type: String }
   };
 
-  static styles = [tokens, ctaBannerCSS];
+  static styles = [tokens, ensembleCSS, ctaBannerCSS];
 
   constructor() {
     super();
@@ -22,10 +23,10 @@ class CtaBanner extends LitElement {
 
   render() {
     return html`
-      <div class="bd-ctabanner-container">
+      <div class="bd-ensemble bd-ctabanner-container">
         ${this.title
           ? html`
-              <bd-h as="h2" class="bd-ctabanner-title">
+              <bd-h as="h2" color="inverse" class="bd-ctabanner-title">
                 <slot name="title">${this.title}</slot>
               </bd-h>
             `
@@ -33,7 +34,7 @@ class CtaBanner extends LitElement {
 
         ${this.description
           ? html`
-              <bd-p kind="large" class="bd-ctabanner-description">
+              <bd-p variant="large" class="bd-ctabanner-description">
                 <slot name="description">${this.description}</slot>
               </bd-p>
             `
@@ -47,7 +48,7 @@ class CtaBanner extends LitElement {
         ${this.caption
           ? html`
              <bd-p
-  kind="small"
+  variant="small"
   class="bd-ctabanner-caption"
   font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
 >