@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/feature-bullets/FeatureBullets.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__inner {

package/dist/components/blocks/feature-bullets/feature-bullets-impl.css

@@ -91,11 +91,24 @@
  */
 :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media > * {
   block-size: 100%;
-  display: block;
   inline-size: 100%;
   object-fit: cover;
 }
 
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-featurebullets .dds-featurebullets__media > *) {
+  display: block;
+}
+
+
 :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media img {
   block-size: 100%;
   display: block;

package/dist/components/blocks/feature-cards/FeatureCards.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__inner {

package/dist/components/blocks/feature-cards/FeatureCards.d.ts

@@ -13,7 +13,8 @@ export type { FeatureCardsProps };
  * how many cards share a row.
  *
  * The row is read from the cards. One column on a phone and two from the fold; at full width three,
- * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * four when there are exactly four, two filling the row half each, and one held to two thirds of
+ * it, centred. A card
  * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
  * count is already there, and a prop restating it is a second place for the two to disagree.
  *

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -1,31 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, Fragment, isValidElement, useId } from 'react';
+import { useId } from 'react';
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
 import { given } from '../../given.js';
+import { cardsOf } from '../cards-of.js';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureCardsDefaults, featureCardsParts } from './FeatureCards.types.js';
-/**
- * The cards, with any fragment opened out.
- *
- * `Children.toArray` flattens arrays and leaves a fragment whole, so a page writing
- * `<>{cards}</>` handed over one child: every card in a single cell, and the grid reading the set
- * as one card alone. A fragment is the page grouping its own markup, never a card, so it is opened
- * out here and the grid counts what is inside it.
- */
-function cardsOf(children, within = '') {
-    return Children.toArray(children).flatMap((child, at) => {
-        // `toArray` keys a fragment's children afresh — `.0`, `.1` — so a card is keyed by the
-        // fragment it came out of as well as its own place, or two cards from different groups share a
-        // key and React reconciles one into the other's cell.
-        const key = `${within}${isValidElement(child) && child.key !== null ? child.key : at}`;
-        return isValidElement(child) && child.type === Fragment
-            ? cardsOf(child.props.children, `${key}/`)
-            : [{ key, card: child }];
-    });
-}
 /**
  * Where a card comes in the arrival, capped so a long set does not keep a reader waiting.
  *
@@ -46,7 +28,8 @@ const LAST_STEP = FIRST_CARD + 3;
  * how many cards share a row.
  *
  * The row is read from the cards. One column on a phone and two from the fold; at full width three,
- * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * four when there are exactly four, two filling the row half each, and one held to two thirds of
+ * it, centred. A card
  * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
  * count is already there, and a prop restating it is a second place for the two to disagree.
  *

package/dist/components/blocks/feature-cards/feature-cards-impl.css

@@ -122,22 +122,23 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  /* A pair as two columns of their own, rather than two of three with an empty third beside them —
-     the rule below then holds the pair to the width two columns take in a row of three. */
+  /* A pair as two columns of their own, rather than two of three with an empty third beside them,
+     across the whole row as three and four are — each card half of it. */
   :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :nth-child(2):last-child) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   /*
-   * One or two cards hold to two thirds of the row, centred, rather than the whole of it.
+   * One card alone holds to two thirds of the row, centred, rather than the whole of it.
    *
-   * Two cards across the full width are each half as wide again as a card in a row of three, and
-   * one alone is a banner. Two thirds is exactly two of the three columns and the gutter between
-   * them, so a pair is the width a pair is in any other set, and a single card the width of that
-   * pair. Computed from the row's own width and gutter rather than a fixed measure, so it follows
-   * the grid wherever the grid is.
+   * One across the full width is a banner. Two thirds is exactly two of the three columns and the
+   * gutter between them — the width a pair takes in a row of three. Computed from the row's own
+   * width and gutter rather than a fixed measure, so it follows the grid wherever the grid is.
+   *
+   * A pair is not held: it fills the row, as three and four do, so a section's cards reach the same
+   * edges whatever their number.
    */
-  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:is(:has(> :only-child), :has(> :nth-child(2):last-child)) {
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :only-child) {
     margin-inline: auto;
     max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
     inline-size: 100%;

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.css

@@ -0,0 +1,115 @@
+/* GENERATED from featurecardscarousel.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__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-featurecardscarousel .dds-featurecardscarousel__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__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);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__carousel {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track {
+  display: flex;
+  outline-style: solid;
+  column-gap: var(--space-grid-gutter);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__item {
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__footer {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav {
+  display: flex;
+  flex: none;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav-slot {
+  display: flex;
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[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);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel[data-ground="strong"] .dds-featurecardscarousel__track:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.d.ts

@@ -0,0 +1,30 @@
+import './FeatureCardsCarousel.css';
+import './feature-cards-carousel-impl.css';
+import '../block-reveal.css';
+import { type FeatureCardsCarouselProps } from './FeatureCardsCarousel.types.js';
+export type { FeatureCardsCarouselProps };
+/**
+ * A heading over a row of the page's own cards, moved along a stop at a time — the reference site's
+ * FeatureCardsCarousel.
+ *
+ * The cards are Card or CardButton with a CardBody inside, as in FeatureCards: a card's fill, its
+ * picture and where it leads are the card's, so the reference's coral, dark and light slides are
+ * Card's accent, accent-strong and surface-light, and its cover picture is CardBody's overMedia.
+ * What this decides is the heading, the row and the way along it.
+ *
+ * The browser does the scrolling and the snapping, TestimonialRow's way; this reads where the row
+ * is. A stop is a card's start, until the last few cards are all in view — those share the last
+ * stop, the row's end, so the row never scrolls into empty space and there are fewer dots than
+ * cards at full width. The dots say which stop the row is at and move to any one pressed; the
+ * arrows step one either way.
+ *
+ * Autoplay is off unless asked for. On, PaginationDots holds the clock, as it does for every block
+ * that rotates: each motion.duration.dwell it reports the next stop, wrapping from the last to the
+ * first, and this scrolls there. It 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 the band or swipes the row.
+ *
+ * `'use client'` for the row's position, the clock, the arrival, and `useId`, which names the
+ * region by its heading.
+ */
+export declare function FeatureCardsCarousel({ ground, title, description, autoplay, label, previousLabel, nextLabel, controlsLabel, stopLabel, children, }: FeatureCardsCarouselProps): import("react").JSX.Element | null;

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { ChevronLeftRegularIcon, ChevronRightRegularIcon } from '@deriv-com/quill-icons-web';
+import './FeatureCardsCarousel.css';
+import './feature-cards-carousel-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { ButtonIcon } from '../../core/button-icon/ButtonIcon.js';
+import { PaginationDots } from '../../core/pagination-dots/PaginationDots.js';
+import { cardsOf } from '../cards-of.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureCardsCarouselDefaults, featureCardsCarouselParts, } from './FeatureCardsCarousel.types.js';
+/** Close enough to an end to call it the end: a snapped row can rest a pixel short of it. */
+const AT_END = 2;
+const OPENING = { stops: 1, current: 0, back: false, on: true };
+/**
+ * The row's own measures, read rather than assumed: one card and the gap after it, and how far the
+ * row can scroll at all.
+ */
+function measure(row) {
+    const card = row.firstElementChild;
+    const gap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
+    return {
+        step: (card?.offsetWidth ?? row.clientWidth) + gap,
+        furthest: Math.max(0, row.scrollWidth - row.clientWidth),
+    };
+}
+/**
+ * A heading over a row of the page's own cards, moved along a stop at a time — the reference site's
+ * FeatureCardsCarousel.
+ *
+ * The cards are Card or CardButton with a CardBody inside, as in FeatureCards: a card's fill, its
+ * picture and where it leads are the card's, so the reference's coral, dark and light slides are
+ * Card's accent, accent-strong and surface-light, and its cover picture is CardBody's overMedia.
+ * What this decides is the heading, the row and the way along it.
+ *
+ * The browser does the scrolling and the snapping, TestimonialRow's way; this reads where the row
+ * is. A stop is a card's start, until the last few cards are all in view — those share the last
+ * stop, the row's end, so the row never scrolls into empty space and there are fewer dots than
+ * cards at full width. The dots say which stop the row is at and move to any one pressed; the
+ * arrows step one either way.
+ *
+ * Autoplay is off unless asked for. On, PaginationDots holds the clock, as it does for every block
+ * that rotates: each motion.duration.dwell it reports the next stop, wrapping from the last to the
+ * first, and this scrolls there. It 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 the band or swipes the row.
+ *
+ * `'use client'` for the row's position, the clock, the arrival, and `useId`, which names the
+ * region by its heading.
+ */
+export function FeatureCardsCarousel({ ground = featureCardsCarouselDefaults.ground, title, description, autoplay = featureCardsCarouselDefaults.autoplay, label = featureCardsCarouselDefaults.label, previousLabel = featureCardsCarouselDefaults.previousLabel, nextLabel = featureCardsCarouselDefaults.nextLabel, controlsLabel = featureCardsCarouselDefaults.controlsLabel, stopLabel = featureCardsCarouselDefaults.stopLabel, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const row = useRef(null);
+    const back = useRef(null);
+    const on = useRef(null);
+    const [place, setPlace] = useState(OPENING);
+    // The same answer, read outside a render: the focus hand-off below compares against it, and a
+    // state updater is no place for a side effect — React may call one twice.
+    const was = useRef(place);
+    /*
+      A pointer over the band or focus inside it holds the clock for as long as it lasts; a press or a
+      swipe stops it for good — CtaBannerSlider's rules, the WAI carousel pattern's. PaginationDots
+      keeps its own stop for a dot pressed; these cover the rest of the band.
+    */
+    const [held, setHeld] = useState(false);
+    const [stopped, setStopped] = useState(false);
+    const cards = cardsOf(children);
+    const read = useCallback(() => {
+        const element = row.current;
+        if (element === null)
+            return;
+        const { step, furthest } = measure(element);
+        // `abs`, because a right-to-left row counts its scroll position down from zero.
+        const at = Math.abs(element.scrollLeft);
+        const stops = furthest <= AT_END || step <= 0 ? 1 : Math.ceil((furthest - AT_END) / step) + 1;
+        const current = at >= furthest - AT_END ? stops - 1 : Math.min(stops - 1, Math.round(at / step));
+        const next = { stops, current, back: at > AT_END, on: at < furthest - AT_END };
+        const before = was.current;
+        if (before.stops === next.stops &&
+            before.current === next.current &&
+            before.back === next.back &&
+            before.on === next.on) {
+            return;
+        }
+        // An arrow pressed to the end of the row is about to go inert with focus on it, which drops
+        // focus to the page. Hand it to the other arrow first, which has somewhere to go.
+        const focused = document.activeElement;
+        if (before.on && !next.on && on.current?.contains(focused))
+            back.current?.querySelector('button')?.focus();
+        if (before.back && !next.back && back.current?.contains(focused))
+            on.current?.querySelector('button')?.focus();
+        was.current = next;
+        setPlace(next);
+    }, []);
+    useEffect(() => {
+        const element = row.current;
+        if (element === null)
+            return;
+        read();
+        // Asked defensively: a renderer with no ResizeObserver measures once, on mount.
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const watching = new ResizeObserver(read);
+        watching.observe(element);
+        return () => watching.disconnect();
+        // The count too: a page that swaps the set at the same width leaves the row's own box the size
+        // it was, so nothing above would fire, and the dots would describe the old set.
+    }, [read, cards.length]);
+    // Nothing to show is nothing drawn: a named region with no card in it leads nowhere.
+    if (cards.length === 0)
+        return null;
+    /** Scroll the row to a stop: a card's start, or the row's end for the last. */
+    const go = (to) => {
+        const element = row.current;
+        if (element === null)
+            return;
+        const { step, furthest } = measure(element);
+        const stop = Math.min(Math.max(0, to), place.stops - 1);
+        const left = stop >= place.stops - 1 ? furthest : stop * step;
+        const style = getComputedStyle(element);
+        const still = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        element.scrollTo({
+            left: left * (style.direction === 'rtl' ? -1 : 1),
+            behavior: still ? 'auto' : 'smooth',
+        });
+    };
+    const scrolls = place.back || place.on;
+    // Button's secondary, as a circle; on the dark band its inverse tone turns the tint white.
+    const arrow = { variant: 'secondary', tone: ground === 'strong' ? 'inverse' : 'default' };
+    // Any primary press in the band stops the clock; the press itself still does what it does.
+    const press = (event) => {
+        if (event.isPrimary && (event.pointerType !== 'mouse' || event.button === 0))
+            setStopped(true);
+    };
+    return (_jsx("section", { className: featureCardsCarouselParts.root, "data-ground": ground, "aria-labelledby": titleId, onPointerEnter: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(true);
+        }, onPointerLeave: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(false);
+        }, onPointerDownCapture: press, 
+        // A keyboard press on an arrow is a press too; a pointer's has already stopped it.
+        onClickCapture: () => setStopped(true), onFocus: () => setHeld(true), onBlur: (event) => {
+            // Held while focus is anywhere inside, released only when it leaves the band altogether.
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setHeld(false);
+        }, children: _jsxs("div", { className: featureCardsCarouselParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureCardsCarouselParts.header, children: [_jsx("h2", { className: featureCardsCarouselParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureCardsCarouselParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: featureCardsCarouselParts.carousel, children: [_jsx("div", { ref: row, className: featureCardsCarouselParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: cards.map(({ key, card }) => (
+                            /* Each card in a place of its own, so the card is the page's element and keeps its
+                               own transitions; the place is what takes the row's measure. */
+                            _jsx("div", { className: featureCardsCarouselParts.item, children: card }, key))) }), cards.length > 1 ? (_jsxs("div", { className: featureCardsCarouselParts.footer, hidden: !scrolls, ...arriving(3), children: [_jsx(PaginationDots
+                                // The coral marks on the page's own white, and the band's ink on a painted one —
+                                // PaginationDots' own ruling on where its accent belongs.
+                                , { 
+                                    // The coral marks on the page's own white, and the band's ink on a painted one —
+                                    // PaginationDots' own ruling on where its accent belongs.
+                                    variant: ground === 'page' ? 'accent' : 'default', page: place.current + 1, totalPages: place.stops, onPageChange: (page) => go(page - 1), autoplay: autoplay, paused: held || stopped, label: controlsLabel, itemLabel: stopLabel }), _jsxs("div", { className: featureCardsCarouselParts.nav, children: [_jsx("span", { ref: back, className: featureCardsCarouselParts['nav-slot'], "data-available": place.back, inert: !place.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => go(place.current - 1) }) }), _jsx("span", { ref: on, className: featureCardsCarouselParts['nav-slot'], "data-available": place.on, inert: !place.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => go(place.current + 1) }) })] })] })) : null] })] }) }));
+}

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.types.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+export interface FeatureCardsCarouselOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its gray.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The coloured cards keep their own grounds on it; a neutral card — surface or surface-raised — turns to Card's inverse fill and white ink, and a plain card takes the white ink alone, because their own would be dark ink on near-black; an eyebrow inside any of them takes the band's quieter ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the cards are, in the fewest words that name them — "What you get", "Built for every trader". */
+    title: string;
+    /** A line saying what the set has in common, when the title alone does not. */
+    description?: string;
+    /** Whether the row moves on to the next stop on its own, holding each for motion.duration.dwell and returning to the start after the last. Off by default, so a row nobody configured stays still. On, it holds while the pointer is over the band 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 card, an arrow, a dot — or swipes the row: the WAI carousel pattern's rule that a reader who has touched it is reading, not watching. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, as in CtaBannerSlider: a page that needs 2.2.2 met plainly should leave it off. */
+    autoplay?: boolean;
+    /** The name the row is announced by. The row is a scrolling region a keyboard has to be able to reach, so it carries a tab stop and a name of its own — Scroller's rule, as in TestimonialRow. Its own name rather than the section's, so a screen reader moving into it hears what it is. Translate it with the page. */
+    label?: string;
+    /** The accessible name of the arrow stepping the row back. A glyph announces nothing, so this is the whole of the control's name. Translate it with the page, and keep it parallel to nextLabel. */
+    previousLabel?: string;
+    /** The accessible name of the arrow stepping the row on, for the reason previousLabel exists. */
+    nextLabel?: string;
+    /** The name the dots are announced by, as a group inside the band. Its own name rather than the row's, so a screen reader moving into the dots hears what they are. Translate it with the page, like label. */
+    controlsLabel?: string;
+    /** The word each dot is announced by, before its number — "Position 2". A dot is a place the row stops, not a card: at full width the last few cards share the last stop, so there are fewer dots than cards. Translate it with the page, as controlsLabel is. */
+    stopLabel?: string;
+    /** Allowed: Card, CardButton */
+    children: ReactNode;
+}
+export type FeatureCardsCarouselProps = FeatureCardsCarouselOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureCardsCarouselParts: {
+    readonly root: "dds-featurecardscarousel";
+    readonly inner: "dds-featurecardscarousel__inner";
+    readonly header: "dds-featurecardscarousel__header";
+    readonly title: "dds-featurecardscarousel__title";
+    readonly description: "dds-featurecardscarousel__description";
+    readonly carousel: "dds-featurecardscarousel__carousel";
+    readonly track: "dds-featurecardscarousel__track";
+    readonly item: "dds-featurecardscarousel__item";
+    readonly footer: "dds-featurecardscarousel__footer";
+    readonly nav: "dds-featurecardscarousel__nav";
+    readonly 'nav-slot': "dds-featurecardscarousel__nav-slot";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureCardsCarouselDefaults: {
+    readonly ground: "page";
+    readonly autoplay: false;
+    readonly label: "Features";
+    readonly previousLabel: "Previous cards";
+    readonly nextLabel: "Next cards";
+    readonly controlsLabel: "Positions";
+    readonly stopLabel: "Position";
+};

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.types.js

@@ -0,0 +1,17 @@
+// GENERATED from feature-cards-carousel.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureCardsCarouselParts = {
+    root: 'dds-featurecardscarousel',
+    inner: 'dds-featurecardscarousel__inner',
+    header: 'dds-featurecardscarousel__header',
+    title: 'dds-featurecardscarousel__title',
+    description: 'dds-featurecardscarousel__description',
+    carousel: 'dds-featurecardscarousel__carousel',
+    track: 'dds-featurecardscarousel__track',
+    item: 'dds-featurecardscarousel__item',
+    footer: 'dds-featurecardscarousel__footer',
+    nav: 'dds-featurecardscarousel__nav',
+    'nav-slot': 'dds-featurecardscarousel__nav-slot',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureCardsCarouselDefaults = { ground: 'page', autoplay: false, label: 'Features', previousLabel: 'Previous cards', nextLabel: 'Next cards', controlsLabel: 'Positions', stopLabel: 'Position' };