@repobit/dex-system-design 1.0.1 → 2.0.0

package/src/components/button/button.css.js

@@ -79,6 +79,11 @@ export default css`
        boundary, so the value is switched rather than the rule */
     --bd-button-accent-ring: var(--button-accent-ring-default);
 
+    /* the focus ring is switched the same way: surface="dark" swaps the blue
+       outline for a white one. white and outline-white do not read this; see
+       FOCUS. */
+    --bd-button-focus-ring: var(--button-shared-focus-outline);
+
     --bd-button-border-width: var(--border-width-2);
   }
 
@@ -121,14 +126,29 @@ export default css`
      FOCUS
      The design specifies no focus state, but 2.4.7 requires one.
 
+     The ring is an outline held 2px off the control, and the 2px between is
+     left transparent, so it is whatever surface the button sits on. That is
+     the one thing code can do here that Figma cannot, and it is why the two
+     differ. Figma builds a ring from spread shadows, every band of which is a
+     painted colour, so its library paints the gap and keeps one ring per
+     surface: focus/ring-primary on light, focus/ring-inverse on dark and
+     brand. Painted in code, that gap is what went wrong twice: a white band
+     merged into a white fill on surface="dark", and the neutral-900 band
+     that replaced it drew a black outline round every button on a brand
+     hero. A transparent gap cannot do either, on any surface.
+
+     So only the colour switches: blue on light, white under surface="dark",
+     which covers a brand hero and a neutral one alike; the numbers are on
+     --focus-outline-traditional. Every variant takes the same ring, ghost
+     included. An outline is also kept in forced-colors mode, where a
+     box-shadow ring is not drawn at all.
+
+     The rule leaves box-shadow alone, so an outlined variant's own boundary
+     in --bd-button-edge stays put while focused.
+
      This used to be driven from JavaScript: two requestAnimationFrame hops
      checked :focus-visible and set a data attribute the CSS then styled.
-     :focus-visible does that natively, so the detection is gone and the ring
-     is the shared one from Foundations/Focus — a two-colour ring whose white
-     inner band keeps it visible on a coloured hero, which the old
-     single-colour outline could not do. It is composed with
-     --bd-button-edge rather than replacing it, so an outlined variant keeps
-     its own boundary while focused; see the note on that property.
+     :focus-visible does that natively.
      ============================================ */
   button:focus,
   a:focus {
@@ -136,21 +156,17 @@ export default css`
   }
 
   .button:focus-visible {
-    outline: none;
-    box-shadow: var(--focus-outline-primary), var(--bd-button-edge);
+    outline: var(--bd-button-focus-ring);
+    outline-offset: var(--button-shared-focus-outlineOffset);
   }
 
-  /* A white control needs the ring the other way up. --focus-outline-primary
-     puts its WHITE band against the control, which is what keeps it visible on
-     a coloured hero -- and is exactly wrong when the control is itself white:
-     measured on Button — White / Outline-White, the inner band was 1.00:1
-     against the button's own fill and the blue band 2.38:1 against the hero
-     (1.75:1 at the gradient's light end), so neither reached the 3:1 WCAG
-     2.4.11 asks. outline-white is here too because restoring its boundary
-     above puts a white border where the white band used to sit on the hero. */
+  /* white and outline-white are presets for a coloured banner and ignore
+     surface, so they take the white ring on their own: 4.53:1 on blue-500,
+     7.95:1 at the light end of the banner gradient. A blue ring there was
+     2.38:1, and 1.75:1 at that end. */
   .button--white:focus-visible,
   .button--outline-white:focus-visible {
-    box-shadow: var(--focus-outline-inverse), var(--bd-button-edge);
+    outline: var(--focus-outline-traditional-inverse);
   }
 
   a.button {
@@ -175,14 +191,14 @@ export default css`
     vertical-align: middle;
     box-sizing: border-box;
 
-    /* The variant's own boundary, held in a custom property so the focus ring
-       can COMPOSE with it. box-shadow is a single list, not additive, and
-       .button:focus-visible (0,2,0) outranks .button--ghost (0,1,0) -- so a
-       focus rule that declared box-shadow directly erased the border of every
-       outlined variant. A focused ghost button lost its dark outline and wore
-       a blue ring instead, which read as a tertiary button. The default is a
-       zero-spread transparent shadow rather than the keyword none, so the value
-       a valid shadow the focus rule can append to. */
+    /* The variant's own boundary, held in a custom property so each state can
+       switch it. It was introduced while the focus ring was a box-shadow, so
+       the ring could COMPOSE with it: box-shadow is a single list, not
+       additive, and .button:focus-visible (0,2,0) outranks .button--ghost
+       (0,1,0) -- so a focus rule that declared box-shadow directly erased the
+       border of every outlined variant, and a focused ghost button read as a
+       tertiary one. The ring is an outline now and does not touch box-shadow;
+       a focus rule that goes back to declaring it brings that defect back. */
     --bd-button-edge: 0 0 0 0 transparent;
     box-shadow: var(--bd-button-edge);
 
@@ -557,6 +573,11 @@ export default css`
     /* unchanged red, plus a boundary against the hero */
     --bd-button-accent-ring: var(--color-neutral-0);
 
+    /* a white ring, the one colour that clears 3:1 on a brand hero and a
+       neutral one alike, which this surface has to cover without knowing
+       which it is on. The gap inside it is the hero itself; see FOCUS. */
+    --bd-button-focus-ring: var(--focus-outline-traditional-inverse);
+
     /* muted downward instead of upward: a neutral-100 fill would read as an
        active control on a dark hero. Exempt from contrast under WCAG 1.4.3. */
     --bd-button-disabled-bg: var(--color-neutral-700);  /* no role: on-dark ground; see the block note */

package/src/components/button/button.js

@@ -29,6 +29,14 @@ const SIZE_CLASS = { sm: "button--small", md: "button--medium", lg: "button--lar
 const SURFACES = ["light", "dark"];
 const SHAPES = ["default", "rounded"];
 
+/* custom-click bubbles and is composed, like every sibling event in the
+   package -- bd-checkbox's and bd-radio's change, bd-switch's and
+   bd-custom-input's bd-change. It was a plain Event, which does not bubble,
+   so it reached a listener on the button itself and nothing above it: a form
+   or a card delegating from a wrapper heard nothing. composed carries it out
+   of any shadow root the button is rendered inside, too. */
+const clickEvent = () => new CustomEvent("custom-click", { bubbles: true, composed: true });
+
 /**
  * Everything bd-button and bd-button-link share.
  *
@@ -42,31 +50,37 @@ class BdButtonBase extends LitElement {
   static styles = [buttonsCSS];
 
   static properties = {
-    label     : { type: String },
-    size      : { type: String },
-    variant   : { type: String, reflect: true },
+    label      : { type: String },
+    size       : { type: String },
+    variant    : { type: String, reflect: true },
     /** @deprecated pass `variant`. kind meant four different things across the
         atoms; on this one it always meant appearance. */
-    kind      : { type: String },
-    fullWidth : { type: Boolean, attribute: "fullwidth" },
-    strong    : { type: Boolean },
-    disabled  : { type: Boolean, reflect: true },
-    loading   : { type: Boolean, reflect: true },
-    fontSize  : { type: String, attribute: "font-size" },
-    fontWeight: { type: String, attribute: "font-weight" },
-    align     : { type: String },
-    surface   : { type: String, reflect: true },
+    kind       : { type: String },
+    fullWidth  : { type: Boolean, attribute: "fullwidth" },
+    strong     : { type: Boolean },
+    disabled   : { type: Boolean, reflect: true },
+    loading    : { type: Boolean, reflect: true },
+    fontSize   : { type: String, attribute: "font-size" },
+    fontWeight : { type: String, attribute: "font-weight" },
+    align      : { type: String },
+    surface    : { type: String, reflect: true },
     /** "rounded" takes the pill corner; see .button--rounded. */
-    shape     : { type: String, reflect: true },
+    shape      : { type: String, reflect: true },
     /** The accent variant reveals a trailing arrow on hover; this opts out. */
-    noArrow   : { type: Boolean, attribute: "no-arrow" },
+    noArrow    : { type: Boolean, attribute: "no-arrow" },
     /* A circle holding one icon instead of a label: the homepage's audience
        cards and the mobile menu toggle. A mode, not a variant, because every
        variant, size, surface and state applies to it unchanged -- which is how
        the Button icon sets in the foundation Figma file are drawn. With no
        visible text there is nothing to name the control, so label becomes
        required rather than optional. */
-    iconOnly  : { type: Boolean, attribute: "icon-only", reflect: true }
+    iconOnly   : { type: Boolean, attribute: "icon-only", reflect: true },
+    /* Extra text a screen reader reads after the name, through
+       aria-describedby on the inner control. It has to be carried in here:
+       the control is in this shadow root, so an aria-describedby written on
+       the host, or pointing at an id outside, never reaches it. bd-tooltip
+       sets it on a bd-button trigger; a page can set it directly. */
+    description: { type: String }
   };
 
   constructor() {
@@ -90,6 +104,7 @@ class BdButtonBase extends LitElement {
     this.shape = "default";
     this.noArrow = false;
     this.iconOnly = false;
+    this.description = "";
   }
 
   willUpdate(changed) {
@@ -162,6 +177,14 @@ class BdButtonBase extends LitElement {
    * lg 24 against padding 8, 12 and 16 -- so the size passes straight through
    * and the circle comes out 32, 44 and 56.
    */
+  get _describedBy() {
+    return this.description ? "description" : nothing;
+  }
+
+  get _description() {
+    return this.description ? html`<span id="description" hidden>${this.description}</span>` : nothing;
+  }
+
   get _iconContent() {
     if (this.loading) return html`<span class="spinner" aria-hidden="true"></span>`;
     return html`<slot><bd-arrow-icon size="${this.size}" aria-hidden="true"></bd-arrow-icon></slot>`;
@@ -173,7 +196,7 @@ class BdButtonBase extends LitElement {
       e.stopPropagation();
       return;
     }
-    this.dispatchEvent(new Event("custom-click"));
+    this.dispatchEvent(clickEvent());
   }
 }
 
@@ -186,10 +209,11 @@ class Button extends BdButtonBase {
         class="${this._classes}"
         aria-label="${this.label || nothing}"
         aria-busy="${this.loading ? "true" : nothing}"
+        aria-describedby="${this._describedBy}"
         ?disabled="${this.disabled}"
         style="${this._inlineStyle}"
         @click=${this._handleClick}
-      >${this._content}</button>
+      >${this._content}</button>${this._description}
     `;
   }
 }
@@ -211,35 +235,11 @@ class ButtonLink extends BdButtonBase {
     super();
     this.href = "";
     this.buyLink = false;
-    this.shadow = true;
     this.align = "left";
     this.target = "";
     this.rel = "";
   }
 
-  _onFocusin(e) {
-    const el = e.currentTarget;
-    requestAnimationFrame(() =>
-      requestAnimationFrame(() => {
-        if (el.matches(':focus-visible')) {
-          this.setAttribute('data-bd-button-focus', '');
-        }
-      })
-    );
-  }
-
-  _onFocusout() {
-    this.removeAttribute('data-bd-button-focus');
-  }
-
-  get fullWidthClass() {
-    return this.fullWidth ? "max--width" : "";
-  }
-
-  get strongClass() {
-    return this.strong ? "button--bold" : "";
-  }
-
   /* Reverse tabnabbing is the reason rather than convention: a new tab opened
      from here keeps a window.opener handle back unless rel says otherwise. An
      explicit rel always wins, so a consumer can still opt out deliberately. */
@@ -265,11 +265,12 @@ class ButtonLink extends BdButtonBase {
         aria-label="${this.label || nothing}"
         aria-busy="${this.loading ? "true" : nothing}"
         aria-disabled="${this.disabled ? "true" : nothing}"
+        aria-describedby="${this._describedBy}"
         style="${this._inlineStyle}"
         @click=${this._handleClick}
         ?data-store-render="${this.buyLink}"
         ?data-store-buy-link="${this.buyLink}"
-      >${this._content}</a>
+      >${this._content}</a>${this._description}
     `;
   }
 }
@@ -297,7 +298,7 @@ class ContactButton extends LitElement {
   }
 
   _handleClick() {
-    this.dispatchEvent(new Event("custom-click"));
+    this.dispatchEvent(clickEvent());
   }
 
   render() {

package/src/components/button/button.stories.js

@@ -100,7 +100,7 @@ variant, so every \`variant\`, \`size\`, \`surface\` and state applies unchanged
 | \`right\` | Aligns button to the right |
 
 ### Events
-- \`custom-click\` — dispatched on click or Enter/Space keypress
+- \`custom-click\` — dispatched on click or Enter/Space keypress. It bubbles and is composed, so a wrapper can listen for it
         `
       }
     }
@@ -430,7 +430,7 @@ export const ButtonKeyboard = {
     <p style="font-size:14px; margin-bottom:8px;">Tab to focus, press Enter or Space to trigger.</p>
     <bd-button variant="primary" size="md" label="Keyboard test">Press me</bd-button>
   `,
-  parameters: { docs: { description: { story: 'Demonstrates keyboard activation. Enter/Space trigger `custom-click` and toggle the `active` class briefly.' } } }
+  parameters: { docs: { description: { story: 'Demonstrates keyboard activation. Enter and Space trigger `custom-click`.' } } }
 };
 
 // ─── bd-button-link Stories ────────────────────────────────────────────────

package/src/components/caption/caption.css.js

@@ -13,7 +13,17 @@ export const captionCSS = css`
     color: var(--typography-caption-default-color);
   }
 
+  /* sm takes the caption-small role whole. Today it differs from
+     caption-default in tracking alone -- 0.025em against 0, the design's
+     caption/small -- so reading only letter-spacing drew the same thing, but
+     left the role's other four axes unread, and a change to any of them would
+     never have reached the element. The colour stays the default's: the role
+     carries none of its own. */
   :host([size='sm']) figcaption {
+    font-family: var(--typography-caption-small-fontFamily);
+    font-size: var(--typography-caption-small-fontSize);
+    font-weight: var(--typography-caption-small-fontWeight);
+    line-height: var(--typography-caption-small-lineHeight);
     letter-spacing: var(--typography-caption-small-letterSpacing);
   }
 `;

package/src/components/caption/caption.stories.js

@@ -23,11 +23,11 @@ export default {
 ### Props
 | Prop | Values | Default |
 |---|---|---|
-| \`size\` | \`default\`, \`small\` | \`default\` |
+| \`size\` | \`md\`, \`sm\` — \`sm\` is the same size tracked wider (\`caption-small\`); \`default\` / \`small\` still resolve | \`md\` |
 
 ### Contrast
 The caption is \`--color-neutral-600\`, which is 6.59:1 on white and stays above
-4.5:1 at the \`small\` size too. Caption text is the most common place a design
+4.5:1 at the \`sm\` size too. Caption text is the most common place a design
 system slips below AA, because it is both small and grey — anything lighter
 than \`neutral-600\` would not clear it.
 
@@ -46,9 +46,9 @@ and reach for this only where the styling alone is wanted.
   argTypes: {
     size: {
       control    : { type: 'select' },
-      options    : ['default', 'small'],
+      options    : ['md', 'sm'],
       description: 'Type size of the caption.',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: "default" }, category: 'Appearance' }
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'md' }, category: 'Appearance' }
     }
   }
 };

package/src/components/carousel/carousel.css.js

@@ -12,7 +12,10 @@ export default css`
     display: block;
     align-items: center;
     position: relative;
-    margin-bottom: 100px;
+    /* 100px used to stand here, room for two arrows positioned absolutely
+       65px below the track. The dots are in the flow now, so the space below
+       the track is their margin, their 24px and this: 96. */
+    margin-bottom: var(--spacing-48);
     max-width: 100%;
     flex-direction: column;
   }
@@ -27,17 +30,16 @@ export default css`
      hand while leaving its line-height unset, which is how the title came to
      render at the browser's default leading and with the browser's default h2
      margins. LightCarousel and CardFeatures declare no such rule either. */
-  div.bd-arrow {
-    padding: var(--spacing-2);
-    visibility: visible;
-  }
-
   .bd-box:focus-visible,
-  .bd-arrow:focus-visible,
   .bd-plus-button:focus-visible,
   .bd-modal-content button:focus-visible {
     /* the one focus ring — see Foundations/Focus */
-    outline: none;
+    /* forced-colors mode does not paint box-shadow, so the ring
+       vanishes there; it does paint an outline, in a system colour. This one
+       is transparent everywhere else, and the offset lands it on the ring's
+       outer band. */
+    outline: var(--border-width-2) solid transparent;
+    outline-offset: var(--focus-outline-offset);
     box-shadow: var(--focus-outline-primary);
   }
 
@@ -59,90 +61,16 @@ export default css`
     gap: 1rem;
     padding: 1rem;
   }
-  .bd-arrow {
-    border-radius: 50%;
-    width: var(--spacing-44);
-    height: var(--spacing-44);
+  /* The dots: bd-pagination-dots, the package's one set of slide controls.
+     Two <img role="button"> arrows stood here, painted by eight data-URI SVGs
+     with the blues and the disabled grey baked in as hex -- invisible to every
+     colour check -- and positioned absolutely 65px under the track. Where they
+     sat, the dots sit now: under the track, at its end. */
+  .bd-carousel-controls {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: var(--spacing-0) var(--spacing-2) var(--spacing-4) rgba(0, 0, 0, 0.1);
-    position: absolute;
-    bottom: -65px;
-    background: var(--color-surface-brand);
-    color: var(--color-text-inverse);
-      /* no role: .bd-arrow is an <img> -- left-arrow.svg / right-arrow.svg in
-         carousel.js. It renders no text, so this styles nothing but the alt
-         text a browser shows when the SVG fails to load. Fallback typography
-         is not a role decision. */
-    font-size: var(--typography-fontSize-xl);
-      /* no role: .bd-arrow is an <img> -- left-arrow.svg / right-arrow.svg in
-         carousel.js. It renders no text, so this styles nothing but the alt
-         text a browser shows when the SVG fails to load. Fallback typography
-         is not a role decision. */
-    line-height: var(--typography-lineHeight-none);
-    text-align: center;
-  }
-
-.bd-left-arrow {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 40 0)" fill="%23006DFF"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="white"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="white"/></svg>');
-}
-
-
-.bd-left-arrow:hover {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 40 0)" fill="%230059D6"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="white"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="white"/></svg>');
-}
-
- .bd-left-arrow:active {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 40 0)" fill="%230045AD"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="white"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="white"/></svg>');
-}
-
-
-  .bd-left-arrow:disabled {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="%23A6ADB4"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="%23A6ADB4"/></svg>');
-  }
-
-.bd-right-arrow {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23006DFF"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="white"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="white"/></svg>');
-}
-
-
-.bd-right-arrow:hover {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%230059D6"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="white"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="white"/></svg>');
-}
-
-
-.bd-right-arrow:active {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%230045AD"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="white"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="white"/></svg>');
-}
-
-
-  .bd-right-arrow:disabled {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="%23A6ADB4"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="%23A6ADB4"/></svg>');
-  }
-.bd-right-arrow.bd-disabled {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="%23A6ADB4"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="%23A6ADB4"/></svg>');
-  cursor: not-allowed;
-}
-
- .bd-left-arrow.bd-disabled {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="%23A6ADB4"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="%23A6ADB4"/></svg>');
-  cursor: not-allowed;
-}
-
-  .bd-disabled {
-    background: var(--color-neutral-50);
-    color: var(--color-text-muted-inverse);
-    cursor: not-allowed;
-  }
-
-  .bd-arrow:first-of-type {
-    right: 60px;
-  }
-
-  .bd-arrow:last-of-type {
-    right: var(--spacing-10);
+    justify-content: flex-end;
+    margin-top: var(--spacing-24);
+    padding-inline: var(--spacing-10);
   }
 
   .bd-carousel-track {
@@ -259,14 +187,6 @@ export default css`
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" fill="%23006DFF" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="white"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="white"/></svg>');
 }
 
-  .bd-left-arrow {
-    margin-right: var(--spacing-6);
-  }
-
-  .bd-right-arrow {
-    margin-left: var(--spacing-6);
-  }
-
   @media ${unsafeCSS(below('md'))} {
     .bd-carousel-track {
       flex-wrap: nowrap;
@@ -284,23 +204,6 @@ export default css`
       max-width: 90%;
       padding: 1.5em;
     }
-
-    .bd-arrow {
-      bottom: -75px;
-      /* no role: .bd-arrow is an <img> -- left-arrow.svg / right-arrow.svg in
-         carousel.js. It renders no text, so this styles nothing but the alt
-         text a browser shows when the SVG fails to load. Fallback typography
-         is not a role decision. */
-      font-size: var(--typography-fontSize-base);
-    }
-
-    .bd-arrow:first-of-type {
-      right: 50px;
-    }
-
-    .bd-arrow:last-of-type {
-      right: var(--spacing-6);
-    }
   }
 
   @media (max-width: 480px) {