@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/dropdown/dropdown.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import './dropdown.js';
 
 export default {
-  title     : 'Components/Dropdown',
+  title     : 'Atoms/Dropdown',
   tags      : ['autodocs'],
   parameters: {
     docs: {
@@ -15,7 +15,7 @@ export default {
 <bd-custom-dropdown
   label="Select country"
   .options="${['Romania', 'Germany', 'France']}"
-  kind="md"
+  size="md"
   required
 ></bd-custom-dropdown>
 \`\`\`
@@ -29,16 +29,48 @@ export default {
 | Disabled | \`disabled\` | \`form-input--disabled\` |
 
 ### Size Variants
-| Kind | Input Class | Label Class |
-|---|---|---|
-| \`sm\` | \`input-sm\` | \`label-sm\` |
-| \`md\` | \`input-md\` | \`label-md\` |
-| \`lg\` | \`input-lg\` | \`label-lg\` |
+| Kind | Height | Input Class | Label Class |
+|---|---|---|---|
+| \`sm\` | 33.5px | \`input-sm\` | \`label-sm\` |
+| \`md\` | 44px | \`input-md\` | \`label-md\` |
+| \`lg\` | 54.5px | \`input-lg\` | \`label-lg\` |
+
+**A select, a \`bd-custom-input\`, a \`bd-custom-input-clipboard\` and a
+\`bd-button\` of the same size are exactly the same height.** All four derive it
+from the same three tokens — the vertical \`--spacing-*\`, the
+\`--typography-fontSize-*\` step and \`--typography-lineHeight-tight\` — rather
+than from four numbers kept in step by hand, because these controls almost
+always share a row.
+
+That derivation is also what stopped the select clipping its own option text.
+It previously set \`lineHeight-normal\` (1.5) against a fixed height, which left
+the line box 3 to 6px taller than the content box and cut the bottom off any
+descender.
 
 ### Notes
 - Options can be passed as an Array or a JSON string
 - First option is auto-selected by default
 - Tooltip/help text is only rendered when \`tooltip\` prop is non-empty
+- This component is documented in **two** places: here, and as the Dropdown
+  stories under **Atoms/Input**. They are one component; the Atoms/Input page
+  carries the fuller write-up.
+
+### Known gaps
+Three things the sibling \`bd-custom-input\` has and this does not. They are
+listed here because the states above imply a parity that is not there yet:
+
+- **No \`value\` and no event.** Nothing is emitted when a selection changes, so
+  the chosen option cannot be read without reaching into the shadow root. The
+  input's \`value\` property plus \`bd-input\` / \`bd-change\` is the pattern to
+  copy.
+- **\`invalid\` is colour only.** It sets a red border but no
+  \`aria-invalid="true"\`, so a screen reader is told nothing. The input sets it.
+- **\`tooltip\` is not announced.** It renders as help text but the select does
+  not point at it with \`aria-describedby\`, so when it carries the reason a
+  field is invalid, that reason is visual only.
+
+Being in a shadow root, the select also does not participate in an enclosing
+\`<form>\` — a \`<form>\` containing it yields no \`FormData\` entry.
         `
       }
     }
@@ -54,7 +86,7 @@ export default {
       description: 'Array of option strings. Can also be passed as a JSON string.',
       table      : { type: { summary: 'string[]' }, defaultValue: { summary: '[]' }, category: 'Content' }
     },
-    kind: {
+    size: {
       control    : { type: 'select' },
       options    : ['sm', 'md', 'lg'],
       description: 'Size variant controlling input and label CSS classes',
@@ -94,7 +126,7 @@ const render = (args) => html`
   <bd-custom-dropdown
     label="${args.label}"
     .options="${args.options}"
-    kind="${args.kind}"
+    size="${args.kind}"
     tooltip="${args.tooltip}"
     ?required="${args.required}"
     ?invalid="${args.invalid}"
@@ -105,7 +137,7 @@ const render = (args) => html`
 
 const defaultArgs = {
   label    : 'Select a plan', options  : defaultOptions,
-  kind     : 'md', tooltip  : '', required : false,
+  size     : 'md', tooltip  : '', required : false,
   invalid  : false, validated: false, disabled : false
 };
 
@@ -114,7 +146,7 @@ const defaultArgs = {
 export const Default = {
   name  : 'Default',
   render: () => html`
-    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" size="md"></bd-custom-dropdown>
   `,
   parameters: { docs: { description: { story: 'Default dropdown with no validation state and no tooltip.' } } }
 };
@@ -123,9 +155,9 @@ export const AllSizes = {
   name  : 'All Sizes',
   render: () => html`
     <div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
-      <bd-custom-dropdown label="Small"  .options="${defaultOptions}" kind="sm"></bd-custom-dropdown>
-      <bd-custom-dropdown label="Medium" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
-      <bd-custom-dropdown label="Large"  .options="${defaultOptions}" kind="lg"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Small"  .options="${defaultOptions}" size="sm"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Medium" .options="${defaultOptions}" size="md"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Large"  .options="${defaultOptions}" size="lg"></bd-custom-dropdown>
     </div>
   `,
   parameters: { docs: { description: { story: 'All three size variants stacked for comparison.' } } }
@@ -134,7 +166,7 @@ export const AllSizes = {
 export const Required = {
   name  : 'Required',
   render: () => html`
-    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" required></bd-custom-dropdown>
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" size="md" required></bd-custom-dropdown>
   `,
   parameters: { docs: { description: { story: 'Required field — shows a `*` after the label.' } } }
 };
@@ -145,7 +177,7 @@ export const WithTooltip = {
     <bd-custom-dropdown
       label="Select a plan"
       .options="${defaultOptions}"
-      kind="md"
+      size="md"
       tooltip="Choose the plan that best fits your needs."
     ></bd-custom-dropdown>
   `,
@@ -158,7 +190,7 @@ export const Invalid = {
     <bd-custom-dropdown
       label="Select a plan"
       .options="${defaultOptions}"
-      kind="md"
+      size="md"
       invalid
       tooltip="Please select a valid option."
     ></bd-custom-dropdown>
@@ -172,7 +204,7 @@ export const Validated = {
     <bd-custom-dropdown
       label="Select a plan"
       .options="${defaultOptions}"
-      kind="md"
+      size="md"
       validated
       tooltip="Great choice!"
     ></bd-custom-dropdown>
@@ -183,7 +215,7 @@ export const Validated = {
 export const Disabled = {
   name  : 'Disabled',
   render: () => html`
-    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" size="md" disabled></bd-custom-dropdown>
   `,
   parameters: { docs: { description: { story: 'Disabled select — applies `form-input--disabled` class.' } } }
 };
@@ -192,10 +224,10 @@ export const AllStates = {
   name  : 'All Validation States',
   render: () => html`
     <div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
-      <bd-custom-dropdown label="Default"   .options="${defaultOptions}" kind="md" tooltip="Default help text."></bd-custom-dropdown>
-      <bd-custom-dropdown label="Invalid"   .options="${defaultOptions}" kind="md" invalid    tooltip="This field has an error."></bd-custom-dropdown>
-      <bd-custom-dropdown label="Validated" .options="${defaultOptions}" kind="md" validated  tooltip="Looks good!"></bd-custom-dropdown>
-      <bd-custom-dropdown label="Disabled"  .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
+      <bd-custom-dropdown label="Default"   .options="${defaultOptions}" size="md" tooltip="Default help text."></bd-custom-dropdown>
+      <bd-custom-dropdown label="Invalid"   .options="${defaultOptions}" size="md" invalid    tooltip="This field has an error."></bd-custom-dropdown>
+      <bd-custom-dropdown label="Validated" .options="${defaultOptions}" size="md" validated  tooltip="Looks good!"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Disabled"  .options="${defaultOptions}" size="md" disabled></bd-custom-dropdown>
     </div>
   `,
   parameters: { docs: { description: { story: 'All four states stacked: default, invalid, validated, disabled.' } } }
@@ -207,7 +239,7 @@ export const ManyOptions = {
     <bd-custom-dropdown
       label="Select your country"
       .options="${['Select country', 'Romania', 'Germany', 'France', 'Spain', 'Italy', 'Netherlands', 'Belgium', 'Poland', 'Sweden']}"
-      kind="md"
+      size="md"
     ></bd-custom-dropdown>
   `,
   parameters: { docs: { description: { story: 'Dropdown with 10 options. Tests scroll behavior of the native select.' } } }

package/src/components/features/features.css.js

@@ -1,19 +1,30 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
+  /* padding-block, not padding-top alone. This section opened with 64px above
+     it and closed with nothing, so whatever followed it sat flush against the
+     last feature column -- measured 64px/0px while every other module in the
+     family pads both ends (48/48 for five of them, 64/64 for three). The
+     bottom now matches the top, which is what the module was already doing at
+     one end.
+
+     The duplicate display went with it: block was declared and then
+     immediately overridden by flex on the next line but one, so it had never
+     applied. */
   :host {
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--bd-features-padding-bottom, 0);
     --bd-acc-header-margin-bottom: var(--spacing-8);
     display: flex;
     justify-content: center;
-    max-width: 1290px;
-    margin-inline: auto;
-    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
+    padding-top: var(--spacing-64);
+    /* A host that nests the section (bd-tabs) can shorten the closing pad. */
+    padding-bottom: var(--bd-features-padding-bottom, var(--spacing-64));
+    padding-inline: var(--layout-ensemble-inline-padding);
   }
 
-  /* Columns grid */
+  /* Columns grid: its own measure -- N columns of 400 -- centred inside the column */
   .bd-features-container {
+    margin-inline: auto;
     display: grid;
     gap: var(--spacing-32);
     width: 100%;
@@ -47,14 +58,16 @@ export default css`
   .col-description {
     margin-bottom: var(--spacing-24);
     font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-md);
-    color: var(--color-neutral-700);
-    line-height: var(--typography-lineHeight-normal);
+    /* body-regular: base / normal / 1.5, which is what this already rendered.
+       Size and leading only -- the role's family and tracking are not adopted. */
+    font-size: var(--typography-body-regular-fontSize);
+    color: var(--color-text-secondary);
+    line-height: var(--typography-body-regular-lineHeight);
     overflow: hidden;
   }
 
   /* Responsive */
-  @media (max-width: 992px) {
+  @media ${unsafeCSS(below('lg'))} {
     .bd-col {
       max-width: 100%;
     }

package/src/components/features/features.js

@@ -1,10 +1,12 @@
 import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import "../accordion/accordion.js";
 import "../heading/heading.js";
 import "../image/image.js";
 import "../paragraph/paragraph.js";
 import featuresCSS from "./features.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class BdFeatureCol extends HTMLElement {}
 customElements.define("bd-feature-col", BdFeatureCol);
@@ -14,7 +16,7 @@ class BdFeatures extends LitElement {
     _minHeight: { state: true }
   };
 
-  static styles = [tokens, featuresCSS];
+  static styles = [ensembleCSS, featuresCSS];
 
   constructor() {
     super();
@@ -152,7 +154,7 @@ class BdFeatures extends LitElement {
           <bd-h as="h4">${title}</bd-h>
         </div>
         ${descEl
-          ? html`<div class="col-description"><bd-p kind="regular">${descEl.textContent}</bd-p></div>`
+          ? html`<div class="col-description"><bd-p variant="regular">${descEl.textContent}</bd-p></div>`
           : ""}
         ${accordionEl
           ? (() => {
@@ -175,12 +177,14 @@ class BdFeatures extends LitElement {
     const maxWidth = colCount * colWidth + (colCount - 1) * gap;
 
     return html`
+      <div class="bd-ensemble">
       <div
         class="bd-features-container"
         style="grid-template-columns: repeat(${colCount}, 1fr); max-width: ${maxWidth}px; ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
       >
         ${cols.map(col => this._renderCol(col))}
       </div>
+      </div>
     `;
   }
 }

package/src/components/features/features.stories.js

@@ -5,7 +5,7 @@ import "../paragraph/paragraph.js";
 import "./features.js";
 
 export default {
-  title     : "Components/Features",
+  title     : "Modules/Features",
   tags      : ["autodocs"],
   parameters: {
     layout: "padded",
@@ -21,10 +21,10 @@ Componentă Lit pentru afișarea de feature-uri în coloane cu icon, titlu, desc
     icon-src="/assets/pic1.png"
     icon-alt="Protection icon"
   >
-    <bd-p slot="description" kind="small">Descriere coloana</bd-p>
+    <bd-p slot="description" variant="small">Descriere coloana</bd-p>
     <bd-accordion-section no-container>
       <bd-accordion-item title="Feature 1" open>
-        <bd-p kind="small">Detalii</bd-p>
+        <bd-p variant="small">Detalii</bd-p>
       </bd-accordion-item>
     </bd-accordion-section>
   </bd-feature-col>
@@ -61,22 +61,22 @@ export const ThreeColumns = {
         icon-src="/assets/pic1.png"
         icon-alt="Protection icon"
       >
-        <bd-p slot="description" kind="small">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
+        <bd-p slot="description" variant="small">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Complete Real-Time Data Protection" open>
-            <bd-p kind="small">Absolute power in the most efficient security bundle available today.</bd-p>
+            <bd-p variant="small">Absolute power in the most efficient security bundle available today.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Network Threat Prevention">
-            <bd-p kind="small">Proactive network monitoring and threat detection.</bd-p>
+            <bd-p variant="small">Proactive network monitoring and threat detection.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Advanced Threat Defense">
-            <bd-p kind="small">Behavioral detection stops unknown threats before they execute.</bd-p>
+            <bd-p variant="small">Behavioral detection stops unknown threats before they execute.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Scam Copilot">
-            <bd-p kind="small">AI-powered scam detection and prevention.</bd-p>
+            <bd-p variant="small">AI-powered scam detection and prevention.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Multi-Layer Ransomware Protection">
-            <bd-p kind="small">Protects your files from unauthorized encryption.</bd-p>
+            <bd-p variant="small">Protects your files from unauthorized encryption.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -86,22 +86,22 @@ export const ThreeColumns = {
         icon-src="/assets/pic2.png"
         icon-alt="Privacy icon"
       >
-        <bd-p slot="description" kind="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
+        <bd-p slot="description" variant="small">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Unlimited VPN Traffic" open>
-            <bd-p kind="small">Encrypt your connection and stay private online.</bd-p>
+            <bd-p variant="small">Encrypt your connection and stay private online.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Password Manager">
-            <bd-p kind="small">Store and autofill passwords securely.</bd-p>
+            <bd-p variant="small">Store and autofill passwords securely.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Anti-tracker">
-            <bd-p kind="small">Block trackers and keep your browsing private.</bd-p>
+            <bd-p variant="small">Block trackers and keep your browsing private.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Webcam Protection">
-            <bd-p kind="small">Prevent unauthorized webcam access.</bd-p>
+            <bd-p variant="small">Prevent unauthorized webcam access.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Privacy Firewall">
-            <bd-p kind="small">Advanced firewall protection for your network.</bd-p>
+            <bd-p variant="small">Advanced firewall protection for your network.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -111,22 +111,22 @@ export const ThreeColumns = {
         icon-src="/assets/pic3.png"
         icon-alt="Identity Protection icon"
       >
-        <bd-p slot="description" kind="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
+        <bd-p slot="description" variant="small">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Continuous Dark Web Monitoring" open>
-            <bd-p kind="small">Get instant alerts if your data appears on the dark web.</bd-p>
+            <bd-p variant="small">Get instant alerts if your data appears on the dark web.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Digital Footprint Visualization">
-            <bd-p kind="small">See and reduce your digital exposure online.</bd-p>
+            <bd-p variant="small">See and reduce your digital exposure online.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Identity Protection Score">
-            <bd-p kind="small">Understand your identity risk at a glance.</bd-p>
+            <bd-p variant="small">Understand your identity risk at a glance.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Real Time Breach Notifications">
-            <bd-p kind="small">Be first to know when your accounts are compromised.</bd-p>
+            <bd-p variant="small">Be first to know when your accounts are compromised.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Credit Report Monitoring">
-            <bd-p kind="small">Track changes to your credit report in real time.</bd-p>
+            <bd-p variant="small">Track changes to your credit report in real time.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -144,13 +144,13 @@ export const TwoColumns = {
         icon-src="/assets/pic1.png"
         icon-alt="Protection icon"
       >
-        <bd-p slot="description" kind="small">Protection description.</bd-p>
+        <bd-p slot="description" variant="small">Protection description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Real-Time Protection" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Network Threat Prevention">
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -160,13 +160,13 @@ export const TwoColumns = {
         icon-src="/assets/pic2.png"
         icon-alt="Privacy icon"
       >
-        <bd-p slot="description" kind="small">Privacy description.</bd-p>
+        <bd-p slot="description" variant="small">Privacy description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="VPN Traffic" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Password Manager">
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -184,16 +184,16 @@ export const OneColumn = {
         icon-src="/assets/pic1.png"
         icon-alt="Protection icon"
       >
-        <bd-p slot="description" kind="small">Single column protection description.</bd-p>
+        <bd-p slot="description" variant="small">Single column protection description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Real-Time Protection" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Network Threat Prevention">
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Advanced Threat Defense">
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -214,10 +214,10 @@ export const MobileView = {
         icon-src="/assets/pic1.png"
         icon-alt="Protection icon"
       >
-        <bd-p slot="description" kind="small">Protection description.</bd-p>
+        <bd-p slot="description" variant="small">Protection description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Real-Time Protection" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -227,10 +227,10 @@ export const MobileView = {
         icon-src="/assets/pic2.png"
         icon-alt="Privacy icon"
       >
-        <bd-p slot="description" kind="small">Privacy description.</bd-p>
+        <bd-p slot="description" variant="small">Privacy description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="VPN Traffic" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -240,10 +240,10 @@ export const MobileView = {
         icon-src="/assets/pic3.png"
         icon-alt="Identity Protection icon"
       >
-        <bd-p slot="description" kind="small">Identity description.</bd-p>
+        <bd-p slot="description" variant="small">Identity description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Dark Web Monitoring" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>

package/src/components/features-tab/features-tab.css.js

@@ -1,12 +1,10 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
   :host {
     display: block;
     width: 100%;
-    max-width: 1290px;
-    margin: 0 auto;
-    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
     box-sizing: border-box;
   }
 
@@ -15,7 +13,9 @@ export default css`
     align-items: center;
     gap: var(--spacing-64);
     width: 100%;
-    animation: bd-fade-slide-right 350ms ease forwards;
+    /* slow, not 350ms: a 50ms difference nobody chose, on a one-shot
+       entrance that is not repeated. */
+    animation: bd-fade-slide-right var(--transition-duration-slow) var(--transition-easing-ease) forwards;
   }
 
   .bd-features-tab-left {
@@ -47,10 +47,21 @@ export default css`
     width: 100%;
     max-width: 520px;
     height: auto;
-    border-radius: var(--radius-lg, 16px);
+    border-radius: var(--radius-lg);
     display: block;
   }
 
+  /* The entrance is skipped rather than shortened. Its first frame is
+     opacity 0 and a 24px offset, so under reduced motion the container simply
+     renders where it belongs, fully opaque: it declares no opacity of its own,
+     and none is what the keyframes stop supplying. Content is present
+     immediately rather than waiting to be revealed. */
+  @media (prefers-reduced-motion: reduce) {
+    .bd-features-tab-container {
+      animation: none;
+    }
+  }
+
   @keyframes bd-fade-slide-right {
     from {
       opacity: 0;
@@ -62,7 +73,7 @@ export default css`
     }
   }
 
-  @media (max-width: 992px) {
+  @media ${unsafeCSS(below('lg'))} {
     .bd-features-tab-container {
       flex-direction: column-reverse;
       gap: var(--spacing-32);
@@ -82,7 +93,7 @@ export default css`
     }
   }
 
-  @media (max-width: 600px) {
+  @media ${unsafeCSS(below('sm'))} {
     .bd-features-tab-container {
       gap: var(--spacing-24);
     }

package/src/components/features-tab/features-tab.js

@@ -1,10 +1,12 @@
 import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import "../button/button.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import "../video-player/video-player.js";
 import featuresTabCSS from "./features-tab.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class BdFeaturesTab extends LitElement {
   static properties = {
@@ -15,7 +17,7 @@ class BdFeaturesTab extends LitElement {
     reverse : { type: Boolean, reflect: true           }
   };
 
-  static styles = [tokens, featuresTabCSS];
+  static styles = [ensembleCSS, featuresTabCSS];
 
   constructor() {
     super();
@@ -42,10 +44,9 @@ class BdFeaturesTab extends LitElement {
             ? html`
                 <bd-button-link
                   href="${this.ctaHref}"
-                  kind="${this.ctaKind}"
+                  variant="${this.ctaKind}"
                   size="${this.ctaSize}"
                   label="${this.ctaLabel}"
-                  strong="true"
                 >
                   ${this.ctaLabel}
                 </bd-button-link>`
@@ -62,7 +63,7 @@ class BdFeaturesTab extends LitElement {
     `;
 
     return html`
-      <div class="bd-features-tab-container ${this.reverse ? "bd-features-tab-reverse" : ""}">
+      <div class="bd-ensemble bd-features-tab-container ${this.reverse ? "bd-features-tab-reverse" : ""}">
         ${this.reverse
           ? html`${rightContent}${leftContent}`
           : html`${leftContent}${rightContent}`}