@deriv-com/dds-marketing 0.2.0 → 1.0.0

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' };

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

@@ -0,0 +1,73 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * One cell for every slide, so a change of message is a change in place.
+ *
+ * Stacked rather than laid out in a row: the band takes the height of its tallest slide whichever is
+ * showing, and nothing under it moves when the messages change. The slide in view is drawn; the
+ * others wait in the same cell at opacity.hidden, and `visibility` takes them out of hit-testing as
+ * well as sight, beside the `inert` the component gives them for focus.
+ *
+ * The fade borrows the track's own timing — motion.duration.slow and motion.easing.shift, bound in
+ * the contract — through `inherit`, because transition timings do not inherit on their own, and one
+ * binding on the track keeps the fade and the dots on a single beat. `visibility` is in the list
+ * so a slide fading out stays drawn until its opacity reaches zero, then drops out of reach.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+  grid-area: 1 / 1;
+  transition-property: opacity, visibility;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide[aria-hidden='true'] {
+  opacity: var(--opacity-hidden);
+  visibility: hidden;
+}
+
+/* A slide changes without fading for a reader who asked for less motion. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+    transition-property: none;
+  }
+}
+
+/*
+ * The track owns horizontal gestures and leaves vertical ones to the page.
+ *
+ * Without it a touch browser claims the pan for itself, sends pointercancel rather than pointerup,
+ * and the swipe never reaches the slider. pan-y keeps the page scrolling under a vertical finger.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__track {
+  touch-action: pan-y;
+}
+
+/*
+ * 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. CtaBanner centres at the same
+ * width, so the two bands still read the same.
+ *
+ * The text and the line under it are capped narrower than the slide, so `margin-inline: auto` is
+ * what centres those boxes rather than their words inside a box left at the start edge. The dots
+ * follow, so the mark of where the reader is sits under the message it counts.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__text,
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__actions,
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__controls {
+    justify-content: center;
+  }
+}

package/dist/components/blocks/faq-accordion/FaqAccordion.css

@@ -0,0 +1,54 @@
+/* GENERATED from faqaccordion.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__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);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__list {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+

package/dist/components/blocks/faq-accordion/FaqAccordion.d.ts

@@ -0,0 +1,20 @@
+import './FaqAccordion.css';
+import './faq-accordion-impl.css';
+import '../block-reveal.css';
+import { type FaqAccordionProps } from './FaqAccordion.types.js';
+export type { FaqAccordionProps };
+/**
+ * A heading over a set of questions — the reference site's FaqAccordion.
+ *
+ * The rows are the page's AccordionItems, handed in as children, rather than question-and-answer
+ * records. An answer is often more than a string — a link to the fees page, a short list — and a
+ * row already holds whatever it is given, so a record here would be a smaller AccordionItem that
+ * could hold less. This draws the heading and the column and puts the rows in an Accordion, which
+ * is what keeps one open and rules between them: the reference's single-open set and its
+ * between-rows dividers are both Accordion's already, so neither is restated here.
+ *
+ * The heading is an `h2`, and the questions are `h3`, Accordion's default, so the outline reads
+ * section then question. It arrives the way every block does — the heading, then the set.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export declare function FaqAccordion({ ground, title, children }: FaqAccordionProps): import("react").JSX.Element;

package/dist/components/blocks/faq-accordion/FaqAccordion.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './FaqAccordion.css';
+import './faq-accordion-impl.css';
+import '../block-reveal.css';
+import { Accordion } from '../../core/accordion/Accordion.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { faqAccordionDefaults, faqAccordionParts } from './FaqAccordion.types.js';
+/**
+ * A heading over a set of questions — the reference site's FaqAccordion.
+ *
+ * The rows are the page's AccordionItems, handed in as children, rather than question-and-answer
+ * records. An answer is often more than a string — a link to the fees page, a short list — and a
+ * row already holds whatever it is given, so a record here would be a smaller AccordionItem that
+ * could hold less. This draws the heading and the column and puts the rows in an Accordion, which
+ * is what keeps one open and rules between them: the reference's single-open set and its
+ * between-rows dividers are both Accordion's already, so neither is restated here.
+ *
+ * The heading is an `h2`, and the questions are `h3`, Accordion's default, so the outline reads
+ * section then question. It arrives the way every block does — the heading, then the set.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export function FaqAccordion({ ground = faqAccordionDefaults.ground, title, children }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: faqAccordionParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: faqAccordionParts.inner, ref: band, "data-revealed": revealed, children: [_jsx("h2", { className: faqAccordionParts.title, id: titleId, ...arriving(0), children: title }), _jsx("div", { className: faqAccordionParts.list, ...arriving(1), children: _jsx(Accordion, { children: children }) })] }) }));
+}