@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.d.ts

@@ -0,0 +1,49 @@
+import type { TestimonialSliderQuote } from '../../testimonial-slider-data.js';
+export interface TestimonialSliderOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The card is the recessed gray that sets it off
+     * `subtle` — The grey band, the reference design's ground for this section. The card turns white on it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. Whose words these are, in a few — "What our partners say", "What our customers say". */
+    title: string;
+    /** Always. The quotes, in the order they rotate — two to five, each a few sentences, each with the name of who said it. An empty list draws nothing; one quote is drawn still, with no dots. */
+    quotes: TestimonialSliderQuote[];
+    /** A decorative picture, laid over the card's top start corner — a photograph, a product screen, any small piece of art, usually a PNG — as a path or a URL. It is drawn as it is, with rounded corners and no frame, so a transparent ground shows the card through it. Drawn square and cropped to fill its square, so a picture whose subject sits in its middle crops best. It runs up behind the card's top edge, so the edge cuts straight across it, set in from the side, stays put while the quotes rotate, and drifts down by motion.distance.drift as the section passes through the view. The one shown on a phone, where it moves to the top end corner above the quote and drifts half as far, so more of it shows. Decorative: it takes an empty alt and is hidden from assistive technology. */
+    imageStart?: string;
+    /** A decorative picture at the card's bottom end corner, the pair to imageStart: drawn the same way behind the card's bottom edge, and drifting up as the other drifts down, so the two read as depth. Drawn from the fold only: a phone has room for one, and it is the opening one. Decorative, as imageStart is. */
+    imageEnd?: string;
+    /** 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 dots are announced by. Its own name rather than the section's, so a screen reader moving into the dots hears what they are. Translate it with the page. */
+    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 TestimonialSliderProps = TestimonialSliderOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const testimonialSliderParts: {
+    readonly root: "dds-testimonialslider";
+    readonly inner: "dds-testimonialslider__inner";
+    readonly title: "dds-testimonialslider__title";
+    readonly carousel: "dds-testimonialslider__carousel";
+    readonly track: "dds-testimonialslider__track";
+    readonly item: "dds-testimonialslider__item";
+    readonly 'image-start': "dds-testimonialslider__image-start";
+    readonly 'image-end': "dds-testimonialslider__image-end";
+    readonly image: "dds-testimonialslider__image";
+    readonly quote: "dds-testimonialslider__quote";
+    readonly author: "dds-testimonialslider__author";
+    readonly avatar: "dds-testimonialslider__avatar";
+    readonly name: "dds-testimonialslider__name";
+    readonly detail: "dds-testimonialslider__detail";
+    readonly controls: "dds-testimonialslider__controls";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const testimonialSliderDefaults: {
+    readonly ground: "page";
+    readonly autoplay: false;
+    readonly controlsLabel: "Testimonials";
+    readonly slideLabel: "Slide";
+};

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.js

@@ -0,0 +1,21 @@
+// GENERATED from testimonial-slider.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const testimonialSliderParts = {
+    root: 'dds-testimonialslider',
+    inner: 'dds-testimonialslider__inner',
+    title: 'dds-testimonialslider__title',
+    carousel: 'dds-testimonialslider__carousel',
+    track: 'dds-testimonialslider__track',
+    item: 'dds-testimonialslider__item',
+    'image-start': 'dds-testimonialslider__image-start',
+    'image-end': 'dds-testimonialslider__image-end',
+    image: 'dds-testimonialslider__image',
+    quote: 'dds-testimonialslider__quote',
+    author: 'dds-testimonialslider__author',
+    avatar: 'dds-testimonialslider__avatar',
+    name: 'dds-testimonialslider__name',
+    detail: 'dds-testimonialslider__detail',
+    controls: 'dds-testimonialslider__controls',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const testimonialSliderDefaults = { ground: 'page', autoplay: false, controlsLabel: 'Testimonials', slideLabel: 'Slide' };

package/dist/components/blocks/testimonial-slider/testimonial-slider-impl.css

@@ -0,0 +1,202 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * One cell for every quote, so a change of quote is a change in place.
+ *
+ * CtaBannerSlider's arrangement: the section takes the height of its longest quote whichever is
+ * showing, and nothing under it moves. The quote 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. The fade borrows the track's timing through `inherit`, so the
+ * fade and the dots move on one beat.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+  grid-area: 1 / 1;
+  transition-property: opacity, visibility;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item[aria-hidden='true'] {
+  opacity: var(--opacity-hidden);
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+    transition-property: none;
+  }
+}
+
+/* The track owns horizontal gestures and leaves vertical ones to the page — see CtaBannerSlider. */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+  touch-action: pan-y;
+}
+
+/*
+ * The card is ranged to the start on a phone and centred from the fold, as the reference design sets it.
+ *
+ * The heading, the quote and the person under it centre together. `margin-inline: auto` on the
+ * heading and the quote centres their measured boxes rather than their words inside a box left at
+ * the start edge.
+ */
+@container (min-width: 48rem) {
+  /* The heading centres with the card, the way every other block's heading does from the fold. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__title {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+    align-items: center;
+    padding-inline: var(--space-inset-4xl);
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__quote {
+    margin-inline: auto;
+  }
+
+  /* And the dots follow the quote: at the start edge on a phone, under the centre once it centres. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__controls {
+    justify-content: center;
+  }
+}
+
+/*
+ * How far the pictures drift, and so how far each is tucked behind its edge to keep its corners
+ * hidden while it does. Half of motion.distance.drift on a phone, where the one picture is set
+ * above the quote and every pixel tucked away is a pixel of it not shown; the whole of it from the
+ * fold, where the card is wide enough for the movement to read.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider {
+  --dds-testimonialslider-drift: calc(var(--motion-distance-drift) * 0.5);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+    --dds-testimonialslider-drift: var(--motion-distance-drift);
+  }
+}
+
+/*
+ * The corner pictures, tucked behind the card's own edges.
+ *
+ * The opening one runs up behind the card's top edge and the closing one down behind its bottom
+ * edge, each set in from its side by the card's inset — so the pair runs from edge to edge of the
+ * card diagonally, as though passing behind it. Each is tucked by its own corner radius and the
+ * whole of its drift, so the corners on that side are behind the edge at every point of the
+ * scroll: the card's edge is a straight cut across the picture, and only the corners facing the
+ * quote show rounded. Their
+ * offsets are here rather than in bindings because a contract has no vocabulary for one: a
+ * position is a fact about this card's corners, which no other component shares.
+ *
+ * On a phone only the opening one is drawn, at full size, in the top end corner above the quote — the quote starts at the other edge, so the picture takes the side the words leave
+ * empty; from the fold both are, at full size, in opposite corners.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+  inline-size: var(--size-testimonial-art);
+  inset-block-start: calc(-1 * (var(--radius-container-item) + var(--dds-testimonialslider-drift)));
+  inset-inline-end: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+  inset-block-end: calc(-1 * (var(--radius-container-item) + var(--dds-testimonialslider-drift)));
+  inset-inline-end: var(--space-inset-xl);
+}
+
+/*
+ * Room is made on the card for whichever is drawn, so a picture never sits over the words, and
+ * `:has()` asks the track whether one is there, so a card with none keeps its own padding.
+ *
+ * Above the quote on a phone: as much of the picture as ever comes out from behind the top edge —
+ * its size less its corner, the drift and the tuck cancelling — and two insets between it and
+ * the words.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track:has(> .dds-testimonialslider__image-start) .dds-testimonialslider__item {
+  padding-block-start: calc(var(--size-testimonial-art) - var(--radius-container-item) + 2 * var(--space-inset-lg));
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+    inline-size: var(--size-testimonial-art);
+    inset-block-start: calc(-1 * (var(--radius-container-item) + var(--dds-testimonialslider-drift)));
+    inset-inline-end: auto;
+    inset-inline-start: var(--space-inset-xl);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+    display: block;
+  }
+
+  /* At the sides from the fold: each picture, with an inset either side of it. Tall enough to hold
+     a picture and its insets, so neither runs off the top or the bottom of a short card. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track:is(:has(> .dds-testimonialslider__image-start), :has(> .dds-testimonialslider__image-end)) .dds-testimonialslider__item {
+    justify-content: center;
+    min-block-size: calc(var(--size-testimonial-art) + 2 * var(--space-inset-3xl));
+    padding-block-start: var(--space-inset-3xl);
+    padding-inline: calc(var(--size-testimonial-art) + 2 * var(--space-inset-xl));
+  }
+}
+
+/*
+ * They drift against the scroll while the section passes through the view — half of
+ * motion.distance.drift on a phone, all of it from the fold: the opening one down and the closing one up, each from where it rests, so the two mirror
+ * each other at every point of the scroll and keep the same distance from their own edges.
+ *
+ * Scroll-driven, LandingHero's way: a view timeline measures the card against the viewport, so it
+ * moves as the reader scrolls and back again as they scroll back, and there is no timer and no
+ * script. A browser with no scroll timeline draws both still, which is the whole of the fallback.
+ */
+@keyframes dds-testimonialslider-drift-down {
+  from {
+    translate: none;
+  }
+  to {
+    translate: 0 var(--dds-testimonialslider-drift);
+  }
+}
+
+@keyframes dds-testimonialslider-drift-up {
+  from {
+    translate: none;
+  }
+  to {
+    translate: 0 calc(-1 * var(--dds-testimonialslider-drift));
+  }
+}
+
+@supports (animation-timeline: view()) {
+  /* One timeline for the pair, the card's own pass through the view. Each picture measuring its own
+     would put the higher one further along at every point of the scroll, and the two would drift
+     by different distances.
+
+     It measures against the nearest scroll container, which is why the section and the track clip
+     with `overflow: clip` rather than `hidden`: `hidden` makes a box a scroll container even when
+     it never scrolls, and the timeline would then measure the card against a box that does not
+     move — the pictures would sit still at one point of the drift however far the page scrolled. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+    view-timeline: --dds-testimonialslider-card block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+    animation: dds-testimonialslider-drift-down linear both;
+    animation-range: cover;
+    animation-timeline: --dds-testimonialslider-card;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+    animation: dds-testimonialslider-drift-up linear both;
+    animation-range: cover;
+    animation-timeline: --dds-testimonialslider-card;
+  }
+}
+
+/* A reader who asked for less movement gets none of it: the pictures hold still in their corners. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start,
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * 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 declare function useReveal<T extends HTMLElement>(): [
+    ref: (held: T | null) => void,
+    revealed: boolean
+];
+/**
+ * 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 declare function arriving(at: number): {
+    'data-reveal-at': number;
+    style: {
+        [key: string]: string | number;
+    };
+};

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