@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/banner-data.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The messages a CtaBannerSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` is: a block whose content is a list is
+ * one whose consumer builds a value before passing it, and building it without the type means
+ * writing the shape out twice.
+ *
+ * A record rather than a component per slide, by decision on 2026-10-01. A slide was CtaBannerSlide,
+ * a child that took its actions as elements; it existed only so a slide could carry a Button, and it
+ * was a second component to learn for what is one block. As data, the set can come from a CMS, and
+ * the slider draws the buttons itself — the primary as Button variant="inverse", the second as the
+ * white-tinted secondary, both at tone="brand" — so no slide can put a coral button on the coral
+ * ground. What it costs is the slot: an action is a label and a href, not a Button the page composed.
+ */
+/** A way onward from a slide: the words on the button and where it goes. */
+export interface CtaBannerAction {
+    /** What the button says, as a verb — 'Open account', 'Try TradersView'. */
+    label: string;
+    /** Where it goes. A slide's action is always a link; a banner that runs code on press is not a banner. */
+    href: string;
+}
+/** One message in a CtaBannerSlider: the headline, the line under it, and what it asks for. */
+export interface CtaBannerSlide {
+    /**
+     * The message, in a few words. Short enough to take in as the slide arrives; drawn as a heading
+     * at font.h1, so a reader moving by heading finds the message in view.
+     */
+    title: string;
+    /** A line saying why the action is worth taking. A sentence, not a paragraph. */
+    description?: string;
+    /** The action the message asks for, drawn as Button variant="inverse" tone="brand" — near-black in both themes. */
+    primaryAction?: CtaBannerAction;
+    /**
+     * A second, lesser action, drawn as the white-tinted secondary, Button tone="brand". Drawn only beside a
+     * primary: a slide with one action makes it the primary, the rule Navbar holds its pair to.
+     */
+    secondaryAction?: CtaBannerAction;
+}

package/dist/components/banner-data.js

@@ -0,0 +1,15 @@
+/**
+ * The messages a CtaBannerSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` is: a block whose content is a list is
+ * one whose consumer builds a value before passing it, and building it without the type means
+ * writing the shape out twice.
+ *
+ * A record rather than a component per slide, by decision on 2026-10-01. A slide was CtaBannerSlide,
+ * a child that took its actions as elements; it existed only so a slide could carry a Button, and it
+ * was a second component to learn for what is one block. As data, the set can come from a CMS, and
+ * the slider draws the buttons itself — the primary as Button variant="inverse", the second as the
+ * white-tinted secondary, both at tone="brand" — so no slide can put a coral button on the coral
+ * ground. What it costs is the slot: an action is a label and a href, not a Button the page composed.
+ */
+export {};

package/dist/components/blocks/block-reveal.css

@@ -0,0 +1,90 @@
+/*
+ * The arrival every block shares, defined once.
+ *
+ * A section's parts wait a short way below where they land and come up in reading order as a
+ * reader reaches the block. It is the only motion these blocks have in common, and a copy per
+ * block is how six sections come to disagree about what arriving looks like — one tuned, five not,
+ * and nothing to say which is the house answer. So the movement is stated here and each block's
+ * own stylesheet says which of its parts make it.
+ *
+ * Imported by each block's component, which is what puts it in the bundle once however many
+ * blocks a page uses.
+ *
+ * `data-revealed` goes on the box that is watched — see `use-reveal.ts`, which explains why
+ * neither trigger CSS can offer on its own is enough. `data-reveal-at` marks each part inside it
+ * that arrives, and the same number is set as `--dds-reveal-at` for the arithmetic: an attribute
+ * is what CSS can select on, and a custom property is what it can multiply. Two spellings of one
+ * index, each doing the job the other cannot.
+ *
+ * The waiting state is `[data-revealed="false"]` rather than the absence of a value, so a block
+ * rendered before any script has run — or where none ever will — is visible rather than hidden.
+ * Content behind a script is the one failure this could have that is worse than no motion.
+ *
+ * Every value is a token, and three of them are the set this system already had for the job:
+ * `motion.duration.reveal` is described as "content appearing on scroll, section reveals, feature
+ * items fading in", `motion.easing.reveal` is its curve, and `motion.translate.reveal` is the
+ * distance. `opacity.hidden` is what a part waits at and `motion.duration.stagger` is the step
+ * between one part and the next.
+ *
+ * The duration was `motion.duration.dramatic` for a while, which is the role for an editorial hero
+ * entrance — right while the opening bands were on a timer and wrong once every block arrived on a
+ * reader reaching it. Two roles were named for these two triggers and the work had drifted onto
+ * the wrong one.
+ */
+/*
+ * Waiting is instant; only arriving is animated.
+ *
+ * A transition is decided by the state a thing is moving *to*, so declaring it on both states
+ * animates the way in and the way out alike — and the way out is not a thing anybody should see.
+ * A block is marked as waiting once, in a layout effect, before the browser has painted; if that
+ * ever lands a frame late the block has already been drawn, and an animated hide turns one dropped
+ * frame into three-quarters of a second of the section fading away in front of a reader. That is
+ * exactly what it looked like.
+ *
+ * `transition: none` here rather than nothing, because the arrived rule below is what carries the
+ * timings and a part moving back to waiting must not inherit them.
+ *
+ * Both spellings on every rule: a part is usually inside the box that is watched, and sometimes it
+ * is that box. FeatureScroll's heading is the case — the section watches the heading itself, and
+ * wrapping it in something whose only job was to be a container would put a box in the markup to
+ * satisfy a stylesheet.
+ */
+:where([data-dds-context="marketing"]) [data-revealed='false'] [data-reveal-at],
+:where([data-dds-context="marketing"]) [data-revealed='false'][data-reveal-at] {
+  opacity: var(--opacity-hidden);
+  transition: none;
+  translate: var(--motion-translate-reveal);
+}
+
+/*
+ * Each part a step behind the one before it.
+ *
+ * On the way in only. The delay is declared on the arrived state, which is the state a part is
+ * transitioning *to* — so a block that is somehow put back to waiting drops without a queue.
+ *
+ * A block arrives as one thing that happens to be made of parts, which is what the step size is
+ * for: at a tenth of a second, five parts trail the first by less than half a second, well inside
+ * the movement's own duration. A longer step would be the section assembling itself while a reader
+ * waits for the sentence they came to read.
+ */
+:where([data-dds-context="marketing"]) [data-revealed='true'] [data-reveal-at],
+:where([data-dds-context="marketing"]) [data-revealed='true'][data-reveal-at] {
+  transition-delay: calc(var(--dds-reveal-at, 0) * var(--motion-duration-stagger));
+  transition-duration: var(--motion-duration-reveal);
+  transition-property: opacity, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+/*
+ * A reader who asked for less movement gets none of it.
+ *
+ * The hook declines to hide anything under this preference, so the parts are never in the waiting
+ * state to begin with. This is the second half of the same answer: if a part is somehow marked as
+ * waiting, it still arrives without travelling and without queueing behind its neighbours.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) [data-revealed] [data-reveal-at],
+  :where([data-dds-context="marketing"]) [data-revealed][data-reveal-at] {
+    transition: none;
+  }
+}

package/dist/components/blocks/cta-banner/CtaBanner.css

@@ -0,0 +1,66 @@
+/* GENERATED from ctabanner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-ctabanner {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  position: relative;
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__description {
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+

package/dist/components/blocks/cta-banner/CtaBanner.d.ts

@@ -0,0 +1,22 @@
+import './CtaBanner.css';
+import './cta-banner-impl.css';
+import '../block-reveal.css';
+import { type CtaBannerProps } from './CtaBanner.types.js';
+export type { CtaBannerProps };
+/**
+ * A full-bleed coral band carrying one promotion and the action it asks for.
+ *
+ * The reference site's CoralBanner in its single form, named for what it is for. The ground is
+ * color.bg.brand and the ink color.fg.on-brand, both the same in light and dark, so the banner is
+ * the same coral whatever theme the reader is in. Nothing moves: two or three promotions to rotate
+ * between are CtaBannerSlider, which is this band with a slider in it — the same column, the same
+ * headline and line, so a page can carry either and read the same.
+ *
+ * The region is named by its headline, the way PageHeader's is, so a reader can jump to the band
+ * and past it. `'use client'` only for `useId`, which ties the region to its headline — the same
+ * reason PageHeader carries it.
+ *
+ * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
+ * brings the headline, the line and the actions up a step apart once the band is in view.
+ */
+export declare function CtaBanner({ title, headingLevel, description, actions, }: CtaBannerProps): import("react").JSX.Element;

package/dist/components/blocks/cta-banner/CtaBanner.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './CtaBanner.css';
+import './cta-banner-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
+/**
+ * A full-bleed coral band carrying one promotion and the action it asks for.
+ *
+ * The reference site's CoralBanner in its single form, named for what it is for. The ground is
+ * color.bg.brand and the ink color.fg.on-brand, both the same in light and dark, so the banner is
+ * the same coral whatever theme the reader is in. Nothing moves: two or three promotions to rotate
+ * between are CtaBannerSlider, which is this band with a slider in it — the same column, the same
+ * headline and line, so a page can carry either and read the same.
+ *
+ * The region is named by its headline, the way PageHeader's is, so a reader can jump to the band
+ * and past it. `'use client'` only for `useId`, which ties the region to its headline — the same
+ * reason PageHeader carries it.
+ *
+ * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
+ * brings the headline, the line and the actions up a step apart once the band is in view.
+ */
+export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h3' ? 'h3' : 'h2';
+    return (_jsx("section", { className: ctaBannerParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) }) }));
+}

package/dist/components/blocks/cta-banner/CtaBanner.types.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface CtaBannerOwnProps {
+    /** Always — the message, in a few words. Short enough to take in at a glance; a line break goes where the words pause, not where the box runs out. */
+    title: string;
+    /**
+     * `h2` — The default: a banner is a section of the page, under the page's own h1
+     * `h3` — A banner nested inside a section that already carries the h2 it belongs to
+     */
+    headingLevel?: 'h2' | 'h3';
+    /** A line saying why the action is worth taking — what the reader gets, or how little it costs them. */
+    description?: string;
+    /** The one action the message asks for, or two at most. The coral is the banner's ground, so the primary is Button variant="inverse" tone="brand" — a primary Button is coral on coral, and the tone keeps it near-black in both themes — and a second is Button variant="secondary" tone="brand" — a white tint with a white label, fixed in both themes like the band. */
+    actions?: ReactNode;
+}
+export type CtaBannerProps = CtaBannerOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const ctaBannerParts: {
+    readonly root: "dds-ctabanner";
+    readonly inner: "dds-ctabanner__inner";
+    readonly content: "dds-ctabanner__content";
+    readonly text: "dds-ctabanner__text";
+    readonly title: "dds-ctabanner__title";
+    readonly description: "dds-ctabanner__description";
+    readonly actions: "dds-ctabanner__actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const ctaBannerDefaults: {
+    readonly headingLevel: "h2";
+};

package/dist/components/blocks/cta-banner/CtaBanner.types.js

@@ -0,0 +1,13 @@
+// GENERATED from cta-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const ctaBannerParts = {
+    root: 'dds-ctabanner',
+    inner: 'dds-ctabanner__inner',
+    content: 'dds-ctabanner__content',
+    text: 'dds-ctabanner__text',
+    title: 'dds-ctabanner__title',
+    description: 'dds-ctabanner__description',
+    actions: 'dds-ctabanner__actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const ctaBannerDefaults = { headingLevel: 'h2' };

package/dist/components/blocks/cta-banner/cta-banner-impl.css

@@ -0,0 +1,29 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * Starts on a phone, centred once the band is wide enough to hold a line.
+ *
+ * PageHeader's rule and its reason: centred text starts every line at a different edge, which costs
+ * little across a wide measure and a great deal across a narrow one. CtaBannerSlider centres at the
+ * same width, so a page can carry either band and read the same.
+ *
+ * The text and the line under it are capped narrower than the column, so `margin-inline: auto` is
+ * what centres those boxes rather than their words inside a box left at the start edge.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__text,
+  :where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__actions {
+    justify-content: center;
+  }
+}

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.css

@@ -0,0 +1,90 @@
+/* GENERATED from ctabannerslider.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__track {
+  display: grid;
+  transition-property: none;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-shift);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__description {
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__controls {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider,
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider * { transition: none !important; }
+}
+

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.d.ts

@@ -0,0 +1,39 @@
+import './CtaBannerSlider.css';
+import './cta-banner-slider-impl.css';
+import '../block-reveal.css';
+import { type CtaBannerSliderProps } from './CtaBannerSlider.types.js';
+export type { CtaBannerSliderProps };
+/**
+ * CtaBanner's layout with a slider in it: the same coral band, rotating between a few promotions.
+ *
+ * The reference site's CoralBanner in its carousel form. The ground is color.bg.brand and the ink
+ * color.fg.on-brand, both the same in light and dark, exactly as CtaBanner paints them. A single
+ * promotion is CtaBanner; this is for two or three, and handed only one it draws it still rather
+ * than as a carousel with nowhere to go.
+ *
+ * One slide is in view. The slides are stacked in one place, and a change is the new one fading in
+ * where the old one stood — no travel, the old one's words gone at once. PaginationDots says
+ * where the reader is and moves to any slide pressed; with the swipe, it is the whole of how a reader
+ * moves the slider — there are no previous and next steps, by decision.
+ * Autoplay is off unless asked for. When it is on, rotation holds while the pointer is over the
+ * band or focus is inside it, never runs for a reader who asked for less motion, and stops for good
+ * once the reader presses anything in it. There is no pause control, by decision, so that press is
+ * the reader's only way to stop it, and nothing on screen says so — the contract records what that
+ * does and does not give WCAG 2.2.2. The default keeps a slider nobody configured still.
+ *
+ * Every slide out of view is inert and hidden from assistive technology, so Tab never reaches a
+ * button the reader cannot see, and the one in view is named by its position.
+ *
+ * The slides arrive as data and the banner draws them, buttons included: the primary as Button
+ * variant="inverse" and the second as the white-tinted secondary, both at tone="brand" so neither
+ * switches with the theme on a band that does not. A slide was once a
+ * child component of its own, which existed only to carry its Button; as a record it is one
+ * component to learn, and no slide can put a coral button on the coral ground.
+ *
+ * A slide's words arrive the way every block's do — block-reveal.css, the house answer — and they do
+ * it each time a slide comes into view, not only when the band first scrolls in: the slide in view
+ * is the one marked arrived, so a change puts the new slide's headline, line and actions through
+ * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
+ * part do, so the outgoing words never travel.
+ */
+export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, }: CtaBannerSliderProps): import("react").JSX.Element | null;

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './CtaBannerSlider.css';
+import './cta-banner-slider-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { useRotation } from '../use-rotation.js';
+import { given } from '../../given.js';
+import { Button } from '../../core/button/Button.js';
+import { PaginationDots } from '../../core/pagination-dots/PaginationDots.js';
+import { ctaBannerSliderDefaults, ctaBannerSliderParts, } from './CtaBannerSlider.types.js';
+/**
+ * CtaBanner's layout with a slider in it: the same coral band, rotating between a few promotions.
+ *
+ * The reference site's CoralBanner in its carousel form. The ground is color.bg.brand and the ink
+ * color.fg.on-brand, both the same in light and dark, exactly as CtaBanner paints them. A single
+ * promotion is CtaBanner; this is for two or three, and handed only one it draws it still rather
+ * than as a carousel with nowhere to go.
+ *
+ * One slide is in view. The slides are stacked in one place, and a change is the new one fading in
+ * where the old one stood — no travel, the old one's words gone at once. PaginationDots says
+ * where the reader is and moves to any slide pressed; with the swipe, it is the whole of how a reader
+ * moves the slider — there are no previous and next steps, by decision.
+ * Autoplay is off unless asked for. When it is on, rotation holds while the pointer is over the
+ * band or focus is inside it, never runs for a reader who asked for less motion, and stops for good
+ * once the reader presses anything in it. There is no pause control, by decision, so that press is
+ * the reader's only way to stop it, and nothing on screen says so — the contract records what that
+ * does and does not give WCAG 2.2.2. The default keeps a slider nobody configured still.
+ *
+ * Every slide out of view is inert and hidden from assistive technology, so Tab never reaches a
+ * button the reader cannot see, and the one in view is named by its position.
+ *
+ * The slides arrive as data and the banner draws them, buttons included: the primary as Button
+ * variant="inverse" and the second as the white-tinted secondary, both at tone="brand" so neither
+ * switches with the theme on a band that does not. A slide was once a
+ * child component of its own, which existed only to carry its Button; as a record it is one
+ * component to learn, and no slide can put a coral button on the coral ground.
+ *
+ * A slide's words arrive the way every block's do — block-reveal.css, the house answer — and they do
+ * it each time a slide comes into view, not only when the band first scrolls in: the slide in view
+ * is the one marked arrived, so a change puts the new slide's headline, line and actions through
+ * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
+ * part do, so the outgoing words never travel.
+ */
+export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, }) {
+    const Title = headingLevel === 'h3' ? 'h3' : 'h2';
+    const count = slides.length;
+    // The band arriving on screen, as every block does; until then no slide has arrived.
+    const [band, revealed] = useReveal();
+    // Which slide is in view, and every way a reader moves, holds or stops the set — shared with
+    // TestimonialSlider, so the two rotate by one set of rules. See use-rotation.ts.
+    const { current, rotating, root, region, track, item, away, dots } = useRotation(count, autoplay);
+    // Nothing to show is nothing drawn: a named region with no message in it is a landmark that
+    // leads a screen reader to an empty band.
+    if (count === 0)
+        return null;
+    return (_jsx("section", { ref: root, className: ctaBannerSliderParts.root, "aria-label": label, ...region, children: _jsxs("div", { className: ctaBannerSliderParts.inner, ref: band, children: [_jsx("div", { className: ctaBannerSliderParts.track, ...track, children: slides.map((slide, at) => (_jsxs("div", { className: ctaBannerSliderParts.slide, ...item(at), "data-revealed": revealed && !away(at), children: [_jsxs("div", { className: ctaBannerSliderParts.text, children: [_jsx(Title, { className: ctaBannerSliderParts.title, ...arriving(0), children: slide.title }), given(slide.description) ? (_jsx("p", { className: ctaBannerSliderParts.description, ...arriving(1), children: slide.description })) : null] }), slide.primaryAction ? (_jsxs("div", { className: ctaBannerSliderParts.actions, ...arriving(2), children: [_jsx(Button, { variant: "inverse", tone: "brand", href: slide.primaryAction.href, children: slide.primaryAction.label }), slide.secondaryAction ? (_jsx(Button, { variant: "secondary", tone: "brand", href: slide.secondaryAction.href, children: slide.secondaryAction.label })) : null] })) : null] }, at))) }), rotating ? (_jsx("div", { className: ctaBannerSliderParts.controls, children: _jsx(PaginationDots, { ...dots, 
+                        /* A dot pressed stops the dots' own rotation; the band's press handler stops this. */
+                        label: controlsLabel, itemLabel: slideLabel }) })) : null] }) }));
+}

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.d.ts

@@ -0,0 +1,41 @@
+import type { CtaBannerSlide } from '../../banner-data.js';
+export interface CtaBannerSliderOwnProps {
+    /** Always. The messages, in the order they rotate — two or three. Each is a headline, a line under it, and up to two actions as a label and a href: the banner draws the primary as Button variant="inverse" tone="brand", near-black in both themes, and the second as the white-tinted secondary, Button tone="brand", so no slide can put a coral button on the coral ground. A secondary is drawn only beside a primary — one action is the primary.
+  
+  An empty list draws nothing — no region with nothing in it. A list of records rather than a child per slide, by decision: the set can come from a CMS, and there is one component to learn rather than two. */
+    slides: CtaBannerSlide[];
+    /**
+     * `h2` — The default: a banner is a section of the page, under the page's own h1
+     * `h3` — A banner nested inside a section that already carries the h2 it belongs to
+     */
+    headingLevel?: 'h2' | 'h3';
+    /** Whether it advances on its own, holding each slide for motion.duration.dwell. Off by default, so a slider nobody configured stays still. On, it holds while the pointer is over it or focus is inside it, never moves for a reader who asked for less motion, and stops for good once the reader presses anything in it — a slide, its action, a dot — or swipes it. A press stops it for good — the WAI carousel pattern's rule that a reader who has interacted is reading, not watching. That gives a reader a way to stop the rotation, which WCAG 2.2.2 asks for, but not a visible one: nothing says a press will stop it, so a page that needs 2.2.2 met plainly should still offer its own pause, or leave autoplay off. */
+    autoplay?: boolean;
+    /** The name the banner is announced by — a region a screen reader can jump to and skip. Name what it holds, not that it is a banner: 'Promotions', 'Offers'. Translate it with the page. */
+    label?: string;
+    /** The name the dots are announced by, as a group inside the banner. Its own name rather than the banner's, so a screen reader moving into the dots hears what they are rather than 'Promotions' a second time. Translate it with the page, like label. */
+    controlsLabel?: string;
+    /** The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English. */
+    slideLabel?: string;
+}
+export type CtaBannerSliderProps = CtaBannerSliderOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const ctaBannerSliderParts: {
+    readonly root: "dds-ctabannerslider";
+    readonly inner: "dds-ctabannerslider__inner";
+    readonly track: "dds-ctabannerslider__track";
+    readonly slide: "dds-ctabannerslider__slide";
+    readonly text: "dds-ctabannerslider__text";
+    readonly title: "dds-ctabannerslider__title";
+    readonly description: "dds-ctabannerslider__description";
+    readonly actions: "dds-ctabannerslider__actions";
+    readonly controls: "dds-ctabannerslider__controls";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const ctaBannerSliderDefaults: {
+    readonly headingLevel: "h2";
+    readonly autoplay: false;
+    readonly label: "Promotions";
+    readonly controlsLabel: "Slides";
+    readonly slideLabel: "Slide";
+};

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.js

@@ -0,0 +1,15 @@
+// GENERATED from cta-banner-slider.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const ctaBannerSliderParts = {
+    root: 'dds-ctabannerslider',
+    inner: 'dds-ctabannerslider__inner',
+    track: 'dds-ctabannerslider__track',
+    slide: 'dds-ctabannerslider__slide',
+    text: 'dds-ctabannerslider__text',
+    title: 'dds-ctabannerslider__title',
+    description: 'dds-ctabannerslider__description',
+    actions: 'dds-ctabannerslider__actions',
+    controls: 'dds-ctabannerslider__controls',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const ctaBannerSliderDefaults = { headingLevel: 'h2', autoplay: false, label: 'Promotions', controlsLabel: 'Slides', slideLabel: 'Slide' };