@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/blocks/use-reveal.js

@@ -0,0 +1,120 @@
+'use client';
+import { useLayoutEffect, useRef, useState } from 'react';
+/**
+ * Whether a block has arrived on screen yet, so its stylesheet can bring it in.
+ *
+ * Every trigger CSS alone can offer is invisible somewhere, and both were tried here first. A
+ * timed animation fires when the element is created, so a block below the fold has finished
+ * arriving before a reader scrolls to it. A scroll-driven one — `animation-timeline: view()` —
+ * fires as the element enters the viewport, so a block that is *already* in view at the first
+ * frame is past the range before anything is painted, and an opening band never moves at all.
+ *
+ * What is wanted is "when it comes into view, counting already being there as coming into view",
+ * and that is the one thing a view timeline cannot say. An observer can, which is the whole reason
+ * this file exists.
+ *
+ * It answers `true` before it knows anything, and that is deliberate. A block hidden until
+ * JavaScript says otherwise is content behind a script — a reader with none, or one whose bundle
+ * failed, gets a blank band. So the resting answer is visible, and hiding is something this only
+ * does once it is running and has somewhere to put the block back.
+ *
+ * `useLayoutEffect` so the hiding lands before the browser paints. In an effect it would run after
+ * the first frame, and every block would show itself, hide, and come back — a flash on every
+ * section of the page.
+ *
+ * It fires once. A section that re-arrived every time a reader scrolled back up would be a page
+ * that will not settle, and the observer is disconnected rather than left listening.
+ */
+export function useReveal() {
+    const held = useRef(null);
+    const [revealed, setRevealed] = useState(true);
+    useLayoutEffect(() => {
+        const element = held.current;
+        if (element === null)
+            return;
+        // A reader who asked for less movement is not hidden and then shown; they are simply shown.
+        // The stylesheet drops the transition as well, so this is the half that matters: without it
+        // the block would still be hidden for a frame before appearing, which is the flicker that
+        // preference exists to remove.
+        //
+        // Asked defensively, like the observer below. A renderer with no `matchMedia` cannot be
+        // asked what the reader prefers, and the honest answer to a question that cannot be asked
+        // is the one that hides nothing.
+        const asked = typeof window.matchMedia === 'function';
+        if (asked && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        // Anything the browser cannot observe arrives already arrived, which is the same answer this
+        // hook starts on: seen rather than waiting.
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        /**
+         * A box that does not exist cannot come into view, so it is never hidden.
+         *
+         * `display: contents` is the case, and it cost a section its words: FeatureScroll's text column
+         * gives up its box on a phone so the picture can sit between the title and the line under it,
+         * an observer watching it was never going to report anything, and the copy stayed waiting for
+         * an arrival that could not happen. Permanently invisible content is the worst failure this
+         * hook has available to it, so it checks.
+         *
+         * A caller that wants motion for such a group watches something inside it that does have a box
+         * and marks the group — the ref and the attribute need not sit on the same element. This is the
+         * floor under that, not a substitute for it.
+         */
+        if (element.getClientRects().length === 0)
+            return;
+        setRevealed(false);
+        /**
+         * The arrival is put off to the next frame, and that one frame is the whole of it.
+         *
+         * A transition needs a painted starting state. For a block already on screen the observer's
+         * first callback is delivered in the rendering steps of the frame the block was laid out in —
+         * so flipping there applies the landed state before the waiting one has ever been painted, and
+         * the browser has nothing to move between. It goes straight to the end, which looks exactly
+         * like no animation at all.
+         *
+         * That was the bug, and it hid itself well: a block below the fold worked, because the
+         * observer does not fire until a reader scrolls and by then the waiting state has been on
+         * screen for many frames. Everything a reader sees first — the heading, the first block, any
+         * band shown on its own — did not.
+         */
+        let frame = 0;
+        const watching = new IntersectionObserver((entries) => {
+            if (!entries.some((entry) => entry.isIntersecting))
+                return;
+            watching.disconnect();
+            frame = window.requestAnimationFrame(() => {
+                frame = 0;
+                setRevealed(true);
+            });
+        }, 
+        // A tenth of the block, so a band a screen tall is not held back until a reader has scrolled
+        // most of it into view, and a short one is not brought in by a sliver at the edge.
+        { threshold: 0.1 });
+        watching.observe(element);
+        return () => {
+            watching.disconnect();
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, []);
+    return [
+        (element) => {
+            held.current = element;
+        },
+        revealed,
+    ];
+}
+/**
+ * One part's place in the order its block arrives in.
+ *
+ * Spread onto each part that moves: `<p {...arriving(1)} …>`. Two spellings of one number, because
+ * CSS needs both and can do neither job with the other's — an attribute is what a selector can
+ * match, and a custom property is what `calc()` can multiply into a delay.
+ *
+ * The number is the reading order rather than the DOM order, and they are not always the same: a
+ * hero's picture sits before its words in the markup, because a band paints its ground before it
+ * sets type on it, and a reader still meets the claim first.
+ */
+export function arriving(at) {
+    return { 'data-reveal-at': at, style: { '--dds-reveal-at': at } };
+}

package/dist/components/blocks/use-rotation.d.ts

@@ -0,0 +1,62 @@
+import { type FocusEvent, type MouseEvent, type PointerEvent } from 'react';
+/**
+ * One block rotating between a few things in place — which one is in view, and every way a reader
+ * moves it, holds it or stops it.
+ *
+ * Shared because two blocks rotate, CtaBannerSlider and TestimonialSlider, and a carousel is the
+ * kind of thing that drifts: one stops on a press and the other does not, one swallows the click a swipe
+ * ends in and the other follows the link. The rules are stated once here and each block spreads
+ * what this hands back onto its own parts.
+ *
+ * The clock is not here. PaginationDots holds the timer and the reduced-motion stillness, and this
+ * tells it when to wait — so there is one clock per block, and it is the one a reader can see.
+ *
+ * What it hands back:
+ * - `root`, the ref for the block's own element, which the swipe threshold and the reading
+ *   direction are read off;
+ * - `region`, spread on that element: the carousel's role description and the hold and stop
+ *   handlers;
+ * - `track`, spread on the element holding the items: the swipe and what is announced;
+ * - `item(at)`, spread on each item: its group role, its "2 / 3" name and its inert state;
+ * - `dots`, spread on PaginationDots alongside the block's own label.
+ *
+ * Fewer than two items is a set with nothing to move to, drawn still rather than broken: every
+ * attribute that says "carousel" is left off and the dots are the block's to omit.
+ */
+export declare function useRotation(count: number, autoplay: boolean): {
+    current: number;
+    rotating: boolean;
+    root: import("react").RefObject<HTMLElement | null>;
+    region: {
+        'aria-roledescription': string | undefined;
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+        onFocus: () => void;
+        onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+    };
+    track: {
+        'aria-live': "polite" | "off";
+        onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+        onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+        onPointerCancel: () => void;
+        onPointerLeave: () => void;
+        onClickCapture: (event: MouseEvent<HTMLElement>) => void;
+    };
+    /** Whether an item is out of view: inert, hidden, and waiting rather than arrived. */
+    away: (at: number) => boolean;
+    item: (at: number) => {
+        role: string | undefined;
+        'aria-roledescription': string | undefined;
+        'aria-label': string | undefined;
+        'aria-hidden': true | undefined;
+        inert: true | undefined;
+    };
+    dots: {
+        page: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+        autoplay: boolean;
+        paused: boolean;
+    };
+};

package/dist/components/blocks/use-rotation.js

@@ -0,0 +1,176 @@
+'use client';
+import { useRef, useState } from 'react';
+/**
+ * How soon after a swipe a click still belongs to it. The browser sends the click a swipe ends
+ * with straight after the release; anything later is a press of its own.
+ */
+const SWIPE_CLICK_MS = 300;
+/** A token read off the block's own element, so it is the value the page actually resolved. */
+function tokenOn(element, name) {
+    return element === null ? '' : getComputedStyle(element).getPropertyValue(name);
+}
+/**
+ * One block rotating between a few things in place — which one is in view, and every way a reader
+ * moves it, holds it or stops it.
+ *
+ * Shared because two blocks rotate, CtaBannerSlider and TestimonialSlider, and a carousel is the
+ * kind of thing that drifts: one stops on a press and the other does not, one swallows the click a swipe
+ * ends in and the other follows the link. The rules are stated once here and each block spreads
+ * what this hands back onto its own parts.
+ *
+ * The clock is not here. PaginationDots holds the timer and the reduced-motion stillness, and this
+ * tells it when to wait — so there is one clock per block, and it is the one a reader can see.
+ *
+ * What it hands back:
+ * - `root`, the ref for the block's own element, which the swipe threshold and the reading
+ *   direction are read off;
+ * - `region`, spread on that element: the carousel's role description and the hold and stop
+ *   handlers;
+ * - `track`, spread on the element holding the items: the swipe and what is announced;
+ * - `item(at)`, spread on each item: its group role, its "2 / 3" name and its inert state;
+ * - `dots`, spread on PaginationDots alongside the block's own label.
+ *
+ * Fewer than two items is a set with nothing to move to, drawn still rather than broken: every
+ * attribute that says "carousel" is left off and the dots are the block's to omit.
+ */
+export function useRotation(count, autoplay) {
+    const rotating = count > 1;
+    const root = useRef(null);
+    const [index, setIndex] = useState(0);
+    /*
+      A pointer over the block or focus inside it, which holds the rotation only for as long as it
+      lasts. The rotation itself is PaginationDots' — the timer and the reduced-motion stillness — so
+      there is one clock, and this only tells it to wait while the reader is on the item.
+    */
+    const [held, setHeld] = useState(false);
+    /*
+      Stopped for good once the reader presses anything in the block — an item, its action, a dot —
+      or swipes it. The WAI carousel pattern's rule: a reader who has touched the carousel is
+      reading it, and moving it on under them takes that back. It is also the way this offers a
+      stop without a control for one. A hold lets go; this does not.
+    */
+    const [stopped, setStopped] = useState(false);
+    // A count that shrinks under the index would leave the track pointing past its end.
+    const current = count === 0 ? 0 : index % count;
+    const go = (to) => setIndex(((to % count) + count) % count);
+    // A move the reader made — a swipe — moves the set and stops it.
+    const step = (to) => {
+        setStopped(true);
+        go(to);
+    };
+    /*
+      A swipe is a pointer that travelled. How far counts as travelling is the smallest target the
+      package names, size.target.min: a move shorter than something a reader could aim at is a
+      press that wobbled, not a gesture.
+    */
+    const from = useRef(null);
+    /*
+      When a gesture last travelled far enough to be a swipe, spent on the click the browser sends
+      after it. Without it a drag that starts and ends on an item's call to action both moves the set
+      and follows the link.
+  
+      A time rather than a flag, because the click does not always come: a touch that travelled
+      usually ends with no click at all. A flag left standing then swallowed the next click that
+      arrived without a press on the track — Enter on the call to action, or a screen reader's
+      activation — and the link went nowhere. Only a click that follows the swipe closely is its own.
+    */
+    const swipedAt = useRef(null);
+    const onPointerDown = (event) => {
+        // The primary pointer and, for a mouse, the primary button: a right-button drag or a second
+        // finger is not a swipe.
+        if (!event.isPrimary || (event.pointerType === 'mouse' && event.button !== 0))
+            return;
+        from.current = event.clientX;
+        swipedAt.current = null;
+    };
+    // The browser took the gesture — a vertical scroll, a system swipe — or the pointer left the
+    // track before it was let go, so there is no swipe to read. Left standing, the start of an
+    // abandoned drag would be measured against the next release on the track.
+    const onPointerCancel = () => {
+        from.current = null;
+    };
+    const onPointerUp = (event) => {
+        const start = from.current;
+        from.current = null;
+        if (start === null || !rotating || !event.isPrimary)
+            return;
+        const threshold = Number.parseFloat(tokenOn(root.current, '--size-target-min'));
+        const travel = event.clientX - start;
+        if (!Number.isFinite(threshold) || Math.abs(travel) < threshold)
+            return;
+        // Leftward travel brings the next item in from the end the reader is reading towards; in a
+        // right-to-left page that end is the left one, so the direction follows the page.
+        const rtl = root.current !== null && getComputedStyle(root.current).direction === 'rtl';
+        swipedAt.current = event.timeStamp;
+        step(current + ((travel < 0) !== rtl ? 1 : -1));
+    };
+    const onClickCapture = (event) => {
+        const at = swipedAt.current;
+        swipedAt.current = null;
+        if (at === null || event.timeStamp - at > SWIPE_CLICK_MS)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    // Held while focus is anywhere inside, released only when it leaves the block altogether.
+    const onBlur = (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget))
+            setHeld(false);
+    };
+    return {
+        current,
+        rotating,
+        root,
+        region: {
+            'aria-roledescription': rotating ? 'carousel' : undefined,
+            onPointerEnter: (event) => {
+                if (event.pointerType === 'mouse')
+                    setHeld(true);
+            },
+            onPointerLeave: (event) => {
+                if (event.pointerType === 'mouse')
+                    setHeld(false);
+            },
+            onFocus: () => setHeld(true),
+            // Any primary press in the block stops the rotation; the press itself still does what it does.
+            onPointerDownCapture: (event) => {
+                if (event.isPrimary && (event.pointerType !== 'mouse' || event.button === 0))
+                    setStopped(true);
+            },
+            onBlur,
+        },
+        track: {
+            /*
+              An item that changes on its own is not announced — a reader would be talked over every few
+              seconds. One the reader moved to is, because they asked for it: whenever autoplay is off,
+              and whenever it is held — which it always is while focus is on a dot, the only way a
+              keyboard or screen reader user moves it.
+            */
+            'aria-live': (rotating && (!autoplay || held || stopped) ? 'polite' : 'off'),
+            onPointerDown,
+            onPointerUp,
+            onPointerCancel,
+            onPointerLeave: onPointerCancel,
+            onClickCapture,
+        },
+        /** Whether an item is out of view: inert, hidden, and waiting rather than arrived. */
+        away: (at) => rotating && at !== current,
+        item: (at) => {
+            const away = rotating && at !== current;
+            return {
+                role: rotating ? 'group' : undefined,
+                'aria-roledescription': rotating ? 'slide' : undefined,
+                'aria-label': rotating ? `${at + 1} / ${count}` : undefined,
+                'aria-hidden': away || undefined,
+                inert: away || undefined,
+            };
+        },
+        dots: {
+            page: current + 1,
+            totalPages: count,
+            onPageChange: (page) => go(page - 1),
+            autoplay,
+            paused: held || stopped,
+        },
+    };
+}

package/dist/components/core/accordion/Accordion.css

@@ -0,0 +1,10 @@
+/* GENERATED from accordion.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-accordion {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  border-width: var(--border-width-none);
+}
+

package/dist/components/core/accordion/Accordion.d.ts

@@ -0,0 +1,20 @@
+import './Accordion.css';
+import { type AccordionProps } from './Accordion.types.js';
+export type { AccordionProps };
+/**
+ * A set of rows, and the two things about them that belong to the set rather than to any row:
+ * how deep they sit in the outline, and which one is open.
+ *
+ * The level is pushed down rather than set per row because every row of one accordion is at one
+ * depth by definition — a set whose rows disagreed would describe a hierarchy the design does
+ * not have, and a reader navigating by heading would be told it exists.
+ *
+ * One open row is not a setting here, which is where this parts company with Product's. A
+ * marketing page is read by scrolling, and a set that could hold every row open is the long page
+ * the accordion was put there to shorten. So the set always holds the answer: a row cannot see
+ * its siblings, and left to themselves they would all open.
+ *
+ * Seeded from whichever row arrived open, so a set that opens showing one keeps it. A row's own
+ * handler still runs — it is how a page learns what was pressed, and the only way it could.
+ */
+export declare function Accordion({ headingLevel, children, ...rest }: AccordionProps): import("react").JSX.Element;

package/dist/components/core/accordion/Accordion.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useState } from 'react';
+import './Accordion.css';
+import { accordionDefaults, accordionParts } from './Accordion.types.js';
+/**
+ * Both handlers, the row's own first.
+ *
+ * `cloneElement` replaces rather than merges, so a row already reporting its own state would
+ * silently stop — and that is the handler a page is most likely to have written, since it is
+ * how they learn which row was opened.
+ */
+function chain(theirs, ours) {
+    if (theirs === undefined)
+        return ours;
+    return (expanded) => {
+        theirs(expanded);
+        ours(expanded);
+    };
+}
+/**
+ * A set of rows, and the two things about them that belong to the set rather than to any row:
+ * how deep they sit in the outline, and which one is open.
+ *
+ * The level is pushed down rather than set per row because every row of one accordion is at one
+ * depth by definition — a set whose rows disagreed would describe a hierarchy the design does
+ * not have, and a reader navigating by heading would be told it exists.
+ *
+ * One open row is not a setting here, which is where this parts company with Product's. A
+ * marketing page is read by scrolling, and a set that could hold every row open is the long page
+ * the accordion was put there to shorten. So the set always holds the answer: a row cannot see
+ * its siblings, and left to themselves they would all open.
+ *
+ * Seeded from whichever row arrived open, so a set that opens showing one keeps it. A row's own
+ * handler still runs — it is how a page learns what was pressed, and the only way it could.
+ */
+export function Accordion({ headingLevel = accordionDefaults.headingLevel, children, ...rest }) {
+    const rows = Children.toArray(children).filter(isValidElement);
+    const [open, setOpen] = useState(() => {
+        const first = rows.findIndex((row) => row.props.expanded === true);
+        return first === -1 ? null : first;
+    });
+    return (_jsx("div", { className: accordionParts.root, ...rest, children: rows.map((row, index) => {
+            const props = row.props;
+            /*
+             * A DOM element is left exactly as it arrived.
+             *
+             * `cloneElement` hands its second argument to whatever it is given, and an
+             * intrinsic element does not know what `expanded` is — React warns three times
+             * and puts `headinglevel="3"` in the markup. `allowedChildren` already says this
+             * is misuse, but a contract is not a runtime and the reader who did it by
+             * accident deserves a stray div rather than a console full of noise.
+             *
+             * Keyed on the type being a string, which is what an intrinsic element's is, so a
+             * page's own wrapper component still receives the set's answer and can forward
+             * it. Comparing against AccordionItem itself would refuse those too, and a
+             * component that renders a row is a reasonable thing for a page to have written.
+             */
+            if (typeof row.type === 'string')
+                return row;
+            return cloneElement(row, {
+                key: row.key ?? index,
+                headingLevel,
+                expanded: open === index,
+                onExpandedChange: chain(props.onExpandedChange, (expanded) => {
+                    setOpen(expanded ? index : null);
+                }),
+            });
+        }) }));
+}

package/dist/components/core/accordion/Accordion.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AccordionOwnProps {
+    /**
+     * `2` — The rows are the page's own sections, sitting directly under its title — a page that is nothing but questions is the case
+     * `3` — The default. The set sits under a section heading of its own, which is where an accordion usually is
+     * `4` — The set is inside a subsection that already carries a heading above it
+     */
+    headingLevel?: '2' | '3' | '4';
+    /** Allowed: AccordionItem */
+    children: ReactNode;
+}
+export type AccordionProps = AccordionOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'headingLevel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const accordionParts: {
+    readonly root: "dds-accordion";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const accordionDefaults: {
+    readonly headingLevel: "3";
+};

package/dist/components/core/accordion/Accordion.types.js

@@ -0,0 +1,7 @@
+// GENERATED from accordion.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const accordionParts = {
+    root: 'dds-accordion',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const accordionDefaults = { headingLevel: '3' };

package/dist/components/core/accordion-item/AccordionItem.css

@@ -0,0 +1,99 @@
+/* GENERATED from accordionitem.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-accordionitem {
+  border-block-start-style: solid;
+  box-sizing: border-box;
+  display: block;
+  border-color: var(--color-border-subtle);
+  border-width: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__heading {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger {
+  transition-property: color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background: none;
+  border-style: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  inline-size: 100%;
+  outline-style: solid;
+  padding-inline: 0;
+  text-align: start;
+  color: var(--color-fg-default);
+  gap: var(--space-gap-md);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-inset-md);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__title {
+  text-align: start;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__marker {
+  transition-property: rotate;
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__panel {
+  overflow: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__content {
+  overflow: hidden;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  line-height: var(--font-body-md-line-height);
+  padding-block-end: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="false"] .dds-accordionitem__panel {
+  display: none;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="true"] .dds-accordionitem__panel {
+  display: grid;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:hover:where(:not(:disabled)) {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="false"] .dds-accordionitem__marker {
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="true"] .dds-accordionitem__marker {
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-accordionitem,
+  :where([data-dds-context="marketing"]) .dds-accordionitem * { transition: none !important; }
+}
+

package/dist/components/core/accordion-item/AccordionItem.d.ts

@@ -0,0 +1,44 @@
+import './AccordionItem.css';
+import './accordion-item-impl.css';
+import { type AccordionItemProps } from './AccordionItem.types.js';
+export type { AccordionItemProps };
+/**
+ * One row: a heading that stays, and the detail under it that does not.
+ *
+ * It works alone and it works in a set, and the difference is only who holds the
+ * answer. Alone, the row keeps its own — `expanded` is read once as the state it
+ * opens in, and every press after that is its own business. Inside an Accordion
+ * the set injects `expanded` on every render, so the row stops deciding and
+ * starts reporting: a row cannot see its siblings, which is exactly the fact that
+ * makes one-at-a-time impossible to arrange from here.
+ *
+ * `useState` seeded from the prop rather than derived from it. A row that read
+ * the prop every render would be uncontrolled and unable to move; one that
+ * ignored it could not be opened by the set. Holding both and preferring the
+ * injected value is what lets the same component be either — and it is why
+ * `expanded` declares no default: absent has to stay distinguishable from false,
+ * because absent is the only way a row knows nobody is controlling it.
+ *
+ * The heading is a `<div role="heading">` with the level as a number, not an
+ * `<h3>`. The level is a prop, and an element cannot be picked at runtime without
+ * six branches saying the same thing — the role and `aria-level` say it once.
+ *
+ * `aria-expanded` sits on the button rather than the panel, because that is what
+ * the reader is about to press: the state belongs to the thing they act on, not
+ * to a region they cannot see until it opens.
+ *
+ * The panel is a named region, and the name is the heading that opened it. A
+ * `region` is a landmark, and an unnamed one is worse than none — it fills a
+ * screen reader's landmark list with anonymous entries nobody can choose between.
+ * Naming it is what makes it worth having: a reader who has found the question
+ * can jump straight to the answer. Product declines the role instead, which is
+ * also correct and is the other way to avoid the same fault; it can afford to
+ * because its rows open independently and a set of them would proliferate
+ * landmarks, where only one of these is ever open.
+ *
+ * The panel stays mounted when shut. Unmounting it would take its height with it,
+ * so there would be nothing to move between — and it would take the words out of
+ * the browser's own find-on-page, which is how a reader looks for an answer they
+ * half remember.
+ */
+export declare function AccordionItem({ expanded, onExpandedChange, title, headingLevel, children, ...rest }: AccordionItemProps): import("react").JSX.Element;