@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/steps/use-turn.js

@@ -0,0 +1,75 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
+ * running.
+ *
+ * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
+ * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
+ * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
+ *
+ * It turns only where every condition for it holds:
+ * - `autoplay` is on and there are two steps or more;
+ * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
+ * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
+ * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
+ *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
+ *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
+ *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ */
+export function useTurn(count, autoplay) {
+    const [current, setCurrent] = useState(0);
+    const [seen, setSeen] = useState(false);
+    const [still, setStill] = useState(false);
+    const [held, setHeld] = useState(false);
+    const [stopped, setStopped] = useState(false);
+    const section = useRef(null);
+    const turning = autoplay && count > 1 && !still && !stopped;
+    const playing = turning && seen && !held;
+    useEffect(() => {
+        if (typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const follow = () => setStill(query.matches);
+        follow();
+        query.addEventListener?.('change', follow);
+        return () => query.removeEventListener?.('change', follow);
+    }, []);
+    useEffect(() => {
+        const element = section.current;
+        if (!autoplay || element === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setSeen(entry?.isIntersecting ?? false));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [autoplay]);
+    /** The current step's fill has run: the next step takes over, and the first after the last. */
+    const next = useCallback(() => {
+        if (count > 0)
+            setCurrent((at) => (at + 1) % count);
+    }, [count]);
+    /** A step pressed: it is current, and the turn stops for good. */
+    const choose = useCallback((at) => {
+        setCurrent(at);
+        setStopped(true);
+    }, []);
+    /** Spread on the section: what holds the turn. */
+    const hold = {
+        onPointerEnter: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(true);
+        },
+        onPointerLeave: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(false);
+        },
+        onFocus: () => setHeld(true),
+        onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setHeld(false);
+        },
+    };
+    // A list that shrank under the current step falls back to its first.
+    return { current: current < count ? current : 0, turning, playing, next, choose, section, hold };
+}

package/dist/components/blocks/sticky-cards/StickyCards.css

@@ -0,0 +1,154 @@
+/* GENERATED from stickycards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-stickycards {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__list {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  list-style: none;
+  margin-block: 0;
+  margin-inline: auto;
+  min-inline-size: 0;
+  padding: 0;
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__item {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__backdrop {
+  inset: 0;
+  overflow: clip;
+  pointer-events: none;
+  position: absolute;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__body {
+  box-sizing: border-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__media {
+  min-inline-size: 0;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__image {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__scrim {
+  display: none;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  background-color: var(--color-bg-overlay);
+  border-radius: var(--radius-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[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-stickycards[data-layout="compact"] .dds-stickycards__image {
+  border-radius: var(--radius-surface-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__item {
+  min-block-size: var(--size-sticky-cards-compact-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__list {
+  max-inline-size: var(--size-sticky-cards-compact-max);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__media {
+  border-radius: var(--radius-surface-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__image {
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__item {
+  min-block-size: var(--size-sticky-cards-feature-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__list {
+  max-inline-size: var(--size-content-max);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__media {
+  border-radius: var(--radius-none);
+}
+

package/dist/components/blocks/sticky-cards/StickyCards.d.ts

@@ -0,0 +1,35 @@
+import './StickyCards.css';
+import './sticky-cards-impl.css';
+import '../block-reveal.css';
+import { type StickyCardsProps } from './StickyCards.types.js';
+export type { StickyCardsProps };
+/**
+ * A heading over a pile of cards that builds as the page scrolls — the reference design's
+ * StickyMarketCards (`layout="compact"`), StickyMarketCardsLottie (the `media` callback) and
+ * StickyStackedCards (`layout="feature"`), as one block.
+ *
+ * The pile is CSS. Each card's place in the list is sticky, a step lower than the one before, and
+ * every row of the list is as tall as the tallest card, so the card arriving hides the one under it
+ * entirely and leaves only its edge. The reference measured the cards with a script and wrote the
+ * tallest height onto each; a grid's equal rows say the same thing before any script runs.
+ *
+ * The covered card draws back and darkens on a scroll timeline: each card's place names a view
+ * timeline, and the card before it runs its drawing back down that timeline — so a card recedes as
+ * the *next* one crosses it, which is the reference's own measure (the overlap of the next card
+ * over this one) said as a range. The names are per card and set here, inline, because a timeline
+ * a sibling reads has to be named uniquely and declared in scope on the list; the stylesheet does
+ * the rest. See sticky-cards-impl.css for the ranges and the fallbacks.
+ *
+ * The cards are records, drawn into Card and CardBody: Card for the fill and the corner, CardBody
+ * for the words at the card's inset, and the picture beside them. A record rather than a Card the
+ * page composes, because the pile needs to know each card's place — its step, its timeline — and
+ * a list of markets or steps is what a content system hands over. The one thing a record cannot
+ * carry is a player; `media` is how the page puts one in a card's picture slot.
+ *
+ * Nothing is hidden from assistive technology. The pile is how the list looks, not what it holds:
+ * every card is in the list, in order, at every scroll position.
+ *
+ * `'use client'` for the arrival, and for `useId`, which names the region by its heading and keeps
+ * the timeline names of two piles on one page apart.
+ */
+export declare function StickyCards({ ground, layout, title, description, cards, media, }: StickyCardsProps): import("react").JSX.Element;

package/dist/components/blocks/sticky-cards/StickyCards.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import './StickyCards.css';
+import './sticky-cards-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { CardBody } from '../../core/card-body/CardBody.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { stickyCardsDefaults, stickyCardsParts } from './StickyCards.types.js';
+/**
+ * How many edges the pile shows at most — the reference design's four.
+ *
+ * Only the last four cards step down by space.pile.peek; every card before them takes the first
+ * card's place, so in a long set the earliest are covered whole rather than adding a fifth, sixth
+ * and seventh strip until the pile is taller than the card on top of it.
+ */
+const MOST_EDGES = 4;
+/** A card's step down the pile: 0 for the first of the last four and everything before it. */
+const depthOf = (at, count) => Math.max(0, at - Math.max(0, count - MOST_EDGES));
+/** Nothing a `media` callback can return that would draw something. */
+const drawn = (node) => node !== undefined && node !== null && node !== false && node !== '';
+/**
+ * A heading over a pile of cards that builds as the page scrolls — the reference design's
+ * StickyMarketCards (`layout="compact"`), StickyMarketCardsLottie (the `media` callback) and
+ * StickyStackedCards (`layout="feature"`), as one block.
+ *
+ * The pile is CSS. Each card's place in the list is sticky, a step lower than the one before, and
+ * every row of the list is as tall as the tallest card, so the card arriving hides the one under it
+ * entirely and leaves only its edge. The reference measured the cards with a script and wrote the
+ * tallest height onto each; a grid's equal rows say the same thing before any script runs.
+ *
+ * The covered card draws back and darkens on a scroll timeline: each card's place names a view
+ * timeline, and the card before it runs its drawing back down that timeline — so a card recedes as
+ * the *next* one crosses it, which is the reference's own measure (the overlap of the next card
+ * over this one) said as a range. The names are per card and set here, inline, because a timeline
+ * a sibling reads has to be named uniquely and declared in scope on the list; the stylesheet does
+ * the rest. See sticky-cards-impl.css for the ranges and the fallbacks.
+ *
+ * The cards are records, drawn into Card and CardBody: Card for the fill and the corner, CardBody
+ * for the words at the card's inset, and the picture beside them. A record rather than a Card the
+ * page composes, because the pile needs to know each card's place — its step, its timeline — and
+ * a list of markets or steps is what a content system hands over. The one thing a record cannot
+ * carry is a player; `media` is how the page puts one in a card's picture slot.
+ *
+ * Nothing is hidden from assistive technology. The pile is how the list looks, not what it holds:
+ * every card is in the list, in order, at every scroll position.
+ *
+ * `'use client'` for the arrival, and for `useId`, which names the region by its heading and keeps
+ * the timeline names of two piles on one page apart.
+ */
+export function StickyCards({ ground = stickyCardsDefaults.ground, layout = stickyCardsDefaults.layout, title, description, cards, media, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // The preview's bare view and a content system that has not loaded both hand over nothing; the
+    // heading alone is the honest drawing of an empty set.
+    const set = Array.isArray(cards) ? cards : [];
+    /*
+      Whether the tallest card fits the window below the bar, where the pile pins it. One that does
+      not would be covered before its foot was ever on screen — words a reader cannot reach — and a
+      translation is what makes a card that tall: German runs a third longer than the English the
+      pile was drawn for. The stylesheet pins nothing while this says so, and every card shows in full.
+  
+      Measured rather than guessed, because only the browser knows how tall the words came out. Every
+      row is the tallest card's height, so the list's first item is the measure. Starts false, so the
+      server's HTML and the first render agree and a reader with no script still gets the pile.
+    */
+    const list = useRef(null);
+    const [tall, setTall] = useState(false);
+    /*
+      The heading's height and the gap under it, once measured: the heading pins above the pile and
+      each card stops this much lower, so the cards gather under it rather than over it. Undefined
+      until then, and the heading does not pin without it — on a server render, or with no script, the
+      cards would otherwise come to rest on top of the words.
+    */
+    const [head, setHead] = useState(undefined);
+    /*
+      How far below the heading the card on top reaches — the gap and one card's height. The heading
+      carries it as a margin, so it is held only while that much of the list is still to come, and
+      lets go at the moment the top card does: the two then scroll up as one, rather than the heading
+      staying behind for the cards to scroll up over it. The edges peeking under the top card do not
+      count: they close up into it before it moves.
+    */
+    const [tail, setTail] = useState(undefined);
+    useEffect(() => {
+        const element = list.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const measure = () => {
+            const item = element.firstElementChild;
+            if (item === null)
+                return;
+            const style = getComputedStyle(element);
+            const px = (name) => Number.parseFloat(style.getPropertyValue(name)) || 0;
+            const header = element.parentElement?.querySelector(`:scope > .${stickyCardsParts.header}`);
+            const under = header === null || header === undefined
+                ? 0
+                : header.offsetHeight + (Number.parseFloat(getComputedStyle(element.parentElement).rowGap) || 0);
+            setHead(under);
+            const gap = Number.parseFloat(getComputedStyle(element.parentElement).rowGap) || 0;
+            setTail(gap + item.offsetHeight);
+            // The pinned top, the heading pinned above it, and the four edges a pile can show.
+            const top = px('--size-bar-height') + px('--space-inset-page') + under + 4 * px('--space-pile-peek');
+            setTall(item.getBoundingClientRect().height + top > window.innerHeight);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        window.addEventListener('resize', measure);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, []);
+    // A dashed ident for each card's timeline. `useId` returns `:r1:`-style ids, which are not valid
+    // in an ident, so only the letters and digits are kept.
+    const scope = `--dds-stickycards-${titleId.replace(/[^a-zA-Z0-9]/g, '')}`;
+    const nameAt = (at) => `${scope}-${at}`;
+    /*
+      What each card's picture slot holds, worked out once for the whole pile. A pile is one set, so
+      it takes one arrangement: the words-only arrangement — title beside sentence, in the middle of
+      the card — only when no card in it has a picture. A pile where some do keeps every card's words
+      stacked at the top, so a card without a picture reads as one of the set rather than a different
+      kind of card.
+    */
+    const slots = set.map((card, at) => {
+        const player = media?.(card, at);
+        const hasPlayer = drawn(player);
+        const image = hasPlayer ? undefined : card.image;
+        const hasImage = image !== undefined && given(image.src);
+        return { player, hasPlayer, image, hasImage };
+    });
+    const pictured = slots.some((slot) => slot.hasPlayer || slot.hasImage);
+    return (_jsx("section", { className: stickyCardsParts.root, "data-ground": ground, "data-layout": layout, "data-pile": pictured ? 'pictured' : 'words', "data-head-pinned": head === undefined ? undefined : 'true', 
+        // On the section, where the heading and the list under it both read it.
+        style: tail === undefined ? undefined : { '--dds-stickycards-tail': `${tail}px` }, "aria-labelledby": titleId, children: _jsxs("div", { className: stickyCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: stickyCardsParts.header, children: [_jsx("h2", { className: stickyCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: stickyCardsParts.description, ...arriving(1), children: description })) : null] }), _jsx("ul", { ref: list, className: stickyCardsParts.list, "data-tall": tall || undefined, role: "list", style: set.length > 0
+                        ? {
+                            '--dds-stickycards-scope': set.map((_, at) => nameAt(at)).join(', '),
+                            ...(head === undefined ? {} : { '--dds-stickycards-head': `${head}px` }),
+                        }
+                        : undefined, children: set.map((card, at) => {
+                        const { player, hasPlayer, image, hasImage } = slots[at];
+                        const depth = depthOf(at, set.length);
+                        const next = at + 1 < set.length ? depthOf(at + 1, set.length) : depth;
+                        return (_jsxs("li", { className: stickyCardsParts.item, "data-media": hasPlayer ? 'node' : hasImage ? 'image' : 'none', style: {
+                                '--dds-stickycards-depth': depth,
+                                '--dds-stickycards-next-depth': next,
+                                '--dds-stickycards-own': nameAt(at),
+                                ...(at + 1 < set.length ? { '--dds-stickycards-next': nameAt(at + 1) } : {}),
+                            }, children: [_jsxs(Card, { variant: card.variant ?? 'accent-strong', children: [layout === 'compact' && card.background && given(card.background.src) ? (_jsx("span", { className: stickyCardsParts.backdrop, children: _jsx("img", { src: card.background.src, alt: card.background.alt, width: card.background.width, height: card.background.height, loading: "lazy", decoding: "async" }) })) : null, _jsxs("div", { className: stickyCardsParts.body, children: [_jsx(CardBody, { title: card.title, description: card.description }), hasPlayer || hasImage ? (_jsx("div", { className: stickyCardsParts.media, children: hasPlayer ? (player) : (_jsx("img", { className: stickyCardsParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) })) : null] })] }), _jsx("span", { className: stickyCardsParts.scrim })] }, `${card.title}-${at}`));
+                    }) })] }) }));
+}

package/dist/components/blocks/sticky-cards/StickyCards.types.d.ts

@@ -0,0 +1,43 @@
+import type { StickyCardsItem } from '../../sticky-cards-data.js';
+export interface StickyCardsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The reference design's sticky stacked cards sit on it
+     * `subtle` — A quiet step off the page — the reference design's slate band, which its market cards sit on. Painted as the band's tint laid over the page's own ground; the light and dark cards are raised a step so their edges do not sink into it, FeatureCards' answer
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading turns white; a dark card on it is told apart by its edge in the pile more than by its fill, so alternate the cards
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `compact` — The default — the reference design's StickyMarketCards and their animation sibling. Cards held to the heading's measure, at least size.sticky-cards.compact-min tall, the title at the card's own step: a photograph behind the card where it has a `background`, and a landscape container beside the words from the fold — under them on a phone — for its `image` or the page's player. With neither, the title beside its sentence. Any number of cards, three or more; past four, the earliest share an edge so no more than four ever show
+     * `feature` — The reference design's StickyStackedCards — about three large cards, each the width of the page and at least size.sticky-cards.feature-min tall, the title at the h3 step, its words beside a picture that runs to the card's edges and fills its half from the fold, under them on a phone. Give every card an `image` or a `media`: a card here without one is words beside an empty half
+     */
+    layout?: 'compact' | 'feature';
+    /** Always. What the set is, in the fewest words — "What we offer", "Start trading in minutes". It names the section as a region, so a screen reader can jump to it and past it. */
+    title: string;
+    /** A line saying what the cards have in common, when the title alone does not. */
+    description?: string;
+    /** Always. The cards, in the order the reader meets them — the first is the first one covered, the last ends the pile on top. Each has a title, a sentence, a fill (`variant`), and where it has them an `image` — the card's container in `compact`, its half in `feature` — and in `compact` a `background` photograph under the card's wash. Every card is drawn the height of the tallest, so the pile covers cleanly: keep the descriptions about the same length. An empty list draws the heading alone. A picture on every card or on none: a pile is one set, and it takes one arrangement — words beside the picture, or, where no card has one, each title beside its sentence. A card left without a picture in a pile of pictured cards keeps its words stacked at the top like the rest, beside an empty half. */
+    cards: StickyCardsItem[];
+    /** A card shows something the page plays itself — a Lottie animation, a video — in the place its picture would take, the reference design's StickyMarketCardsLottie. Given each card and its place in the list, return the player for that card, or nothing to fall back to the card's `image`. The block ships no player of its own and imports none: the page mounts its own. The slot is the picture's place — beside the words from the fold, under them on a phone — and the player should fill it: landscape in `compact`, the whole half in `feature`. */
+    media?: (card: StickyCardsItem, index: number) => import('react').ReactNode;
+}
+export type StickyCardsProps = StickyCardsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const stickyCardsParts: {
+    readonly root: "dds-stickycards";
+    readonly inner: "dds-stickycards__inner";
+    readonly header: "dds-stickycards__header";
+    readonly title: "dds-stickycards__title";
+    readonly description: "dds-stickycards__description";
+    readonly list: "dds-stickycards__list";
+    readonly item: "dds-stickycards__item";
+    readonly backdrop: "dds-stickycards__backdrop";
+    readonly body: "dds-stickycards__body";
+    readonly media: "dds-stickycards__media";
+    readonly image: "dds-stickycards__image";
+    readonly scrim: "dds-stickycards__scrim";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const stickyCardsDefaults: {
+    readonly ground: "page";
+    readonly layout: "compact";
+};

package/dist/components/blocks/sticky-cards/StickyCards.types.js

@@ -0,0 +1,18 @@
+// GENERATED from sticky-cards.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const stickyCardsParts = {
+    root: 'dds-stickycards',
+    inner: 'dds-stickycards__inner',
+    header: 'dds-stickycards__header',
+    title: 'dds-stickycards__title',
+    description: 'dds-stickycards__description',
+    list: 'dds-stickycards__list',
+    item: 'dds-stickycards__item',
+    backdrop: 'dds-stickycards__backdrop',
+    body: 'dds-stickycards__body',
+    media: 'dds-stickycards__media',
+    image: 'dds-stickycards__image',
+    scrim: 'dds-stickycards__scrim',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const stickyCardsDefaults = { ground: 'page', layout: 'compact' };