@deriv-com/dds-marketing 0.2.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-item/AccordionItem.css

@@ -44,6 +44,11 @@
   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;
 }
@@ -68,10 +73,6 @@
   transition-timing-function: var(--motion-easing-enter);
 }
 
-:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__marker {
-  color: var(--color-fg-muted);
-}
-
 :where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:hover:where(:not(:disabled)) {
   color: var(--color-fg-muted);
 }
@@ -93,6 +94,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-accordionitem,
-  :where([data-dds-context="marketing"]) .dds-accordionitem * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-accordionitem * { transition: none !important; }
 }
 

package/dist/components/core/bottom-sheet/BottomSheet.css

@@ -173,6 +173,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-bottomsheet,
-  :where([data-dds-context="marketing"]) .dds-bottomsheet * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-bottomsheet * { transition: none !important; }
 }
 

package/dist/components/core/button/Button.css

@@ -10,8 +10,10 @@
   cursor: pointer;
   display: inline-flex;
   flex-direction: row;
+  font-family: inherit;
   justify-content: center;
   outline-style: solid;
+  padding-block: 0;
   position: relative;
   text-decoration-line: none;
   white-space: nowrap;
@@ -31,11 +33,6 @@
   flex: none;
 }
 
-:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inherit"] {
-  border-color: currentcolor;
-  color: inherit;
-}
-
 :where([data-dds-context="marketing"]) .dds-button:focus-visible {
   outline-color: var(--color-border-focus);
   outline-width: var(--border-width-focus);
@@ -102,26 +99,21 @@
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="primary"] {
   background-color: var(--color-bg-brand);
-  color: var(--color-fg-on-solid);
+  color: var(--color-fg-on-brand);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"] {
-  border-color: var(--color-border-strong);
   color: var(--color-fg-default);
 }
 
-:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:hover {
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:hover:where(:not(:disabled)) {
   background-image: linear-gradient(var(--color-bg-hover-inverse), var(--color-bg-hover-inverse));
 }
 
-:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"]:hover {
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"]:hover:where(:not(:disabled)) {
   background-color: var(--color-bg-brand-hover);
 }
 
-:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"]:hover {
-  background-color: var(--color-bg-hover);
-}
-
 :where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:active {
   background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
 }
@@ -130,12 +122,67 @@
   background-color: var(--color-bg-brand-active);
 }
 
-:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"]:active {
-  background-color: var(--color-bg-active);
+:where([data-dds-context="marketing"]) .dds-button[data-tone="brand"]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-tone="inverse"]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"][data-tone="brand"] {
+  background-color: var(--color-bg-strong-on-brand);
+  color: var(--color-fg-on-strong-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"] {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"] {
+  background-color: var(--color-bg-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"] {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"][data-tone="brand"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-on-brand-strong), var(--color-bg-hover-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-on-brand-strong), var(--color-bg-hover-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-on-brand-strong), var(--color-bg-hover-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"][data-tone="brand"]:active {
+  background-image: linear-gradient(var(--color-bg-active-on-brand-strong), var(--color-bg-active-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"]:active {
+  background-image: linear-gradient(var(--color-bg-active-on-brand-strong), var(--color-bg-active-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"]:active {
+  background-image: linear-gradient(var(--color-bg-active), var(--color-bg-active));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"]:active {
+  background-image: linear-gradient(var(--color-bg-active-on-brand-strong), var(--color-bg-active-on-brand-strong));
 }
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-button,
-  :where([data-dds-context="marketing"]) .dds-button * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-button * { transition: none !important; }
 }
 

package/dist/components/core/button/Button.d.ts

@@ -8,18 +8,20 @@ export type { ButtonProps };
  * generated from the same anatomy, and a class retyped slightly differently
  * renders a part bare with its rule sitting unused.
  *
- * An anchor, not a button, and that is the whole shape of this component. It
- * navigates a visitor to the next step of a funnel, so the element has to be the
- * one the browser already knows how to navigate with: cmd-click and middle-click
- * open a new tab, the status bar shows the destination on hover, and assistive
- * tech announces a link rather than a control that fires something in place.
- * `href` is required in the generated type for the same reason — an anchor
- * without one is not focusable and is announced as plain text, so the control
- * simply disappears for anyone not using a mouse.
+ * Which element it renders is decided by `href` and nothing else, the shape CardButton
+ * and ButtonIcon already take. A CTA that goes to a page and one that sends a newsletter
+ * form are the same press with different destinations, and the element is what tells a
+ * browser which: an `<a>` gives cmd-click, a destination in the status bar and a copyable
+ * link, and a `<button>` answers Space and does what the page says.
  *
- * There is no `loading` and no `disabled`, unlike product's Button. Neither has
- * an honest anchor form: the browser owns the pending state and shows it in the
- * chrome, and `aria-disabled` on a link still follows the link when pressed, so
- * a disabled prop here would style a control that keeps working.
+ * It is typed against `AnchorHTMLAttributes`, the branch a marketing CTA takes in the
+ * ordinary case, and that is what puts `target` and `rel` in reach. ButtonIcon records the
+ * same trade: the generator takes one interface, so the `<button>`'s own `form`, `name` and
+ * `value` are what it gives up, and `type` survives as a string so a submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, unlike product's Button. Neither has an honest
+ * anchor form: the browser owns a link's pending state and shows it in the chrome, and
+ * `aria-disabled` on a link still follows the link when pressed. A prop that meant one
+ * thing on one branch and nothing on the other would be worse than its absence.
  */
 export declare function Button({ variant, size, tone, href, showIcon, children, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/core/button/Button.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRightRegularIcon } from '@deriv-com/quill-icons-web';
 import './Button.css';
 import './button-impl.css';
@@ -9,20 +9,49 @@ import { buttonDefaults, buttonParts } from './Button.types.js';
  * generated from the same anatomy, and a class retyped slightly differently
  * renders a part bare with its rule sitting unused.
  *
- * An anchor, not a button, and that is the whole shape of this component. It
- * navigates a visitor to the next step of a funnel, so the element has to be the
- * one the browser already knows how to navigate with: cmd-click and middle-click
- * open a new tab, the status bar shows the destination on hover, and assistive
- * tech announces a link rather than a control that fires something in place.
- * `href` is required in the generated type for the same reason — an anchor
- * without one is not focusable and is announced as plain text, so the control
- * simply disappears for anyone not using a mouse.
+ * Which element it renders is decided by `href` and nothing else, the shape CardButton
+ * and ButtonIcon already take. A CTA that goes to a page and one that sends a newsletter
+ * form are the same press with different destinations, and the element is what tells a
+ * browser which: an `<a>` gives cmd-click, a destination in the status bar and a copyable
+ * link, and a `<button>` answers Space and does what the page says.
  *
- * There is no `loading` and no `disabled`, unlike product's Button. Neither has
- * an honest anchor form: the browser owns the pending state and shows it in the
- * chrome, and `aria-disabled` on a link still follows the link when pressed, so
- * a disabled prop here would style a control that keeps working.
+ * It is typed against `AnchorHTMLAttributes`, the branch a marketing CTA takes in the
+ * ordinary case, and that is what puts `target` and `rel` in reach. ButtonIcon records the
+ * same trade: the generator takes one interface, so the `<button>`'s own `form`, `name` and
+ * `value` are what it gives up, and `type` survives as a string so a submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, unlike product's Button. Neither has an honest
+ * anchor form: the browser owns a link's pending state and shows it in the chrome, and
+ * `aria-disabled` on a link still follows the link when pressed. A prop that meant one
+ * thing on one branch and nothing on the other would be worse than its absence.
  */
 export function Button({ variant = buttonDefaults.variant, size = buttonDefaults.size, tone = buttonDefaults.tone, href, showIcon = buttonDefaults.showIcon, children, ...rest }) {
-    return (_jsxs("a", { className: buttonParts.root, href: href, "data-variant": variant, "data-tone": tone, "data-size": size, ...rest, children: [_jsx("span", { className: buttonParts.label, children: children }), showIcon ? (_jsx(ArrowRightRegularIcon, { className: buttonParts.icon, "aria-hidden": "true" })) : null] }));
+    /*
+      What both branches carry. Spread after `rest` so none of it can be written over from
+      the call site: the class is how the generated stylesheet finds the root.
+    */
+    const shared = {
+        className: buttonParts.root,
+        'data-variant': variant,
+        'data-tone': tone,
+        'data-size': size,
+    };
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: buttonParts.label, children: children }), showIcon ? (_jsx(ArrowRightRegularIcon, { className: buttonParts.icon, "aria-hidden": "true" })) : null] }));
+    if (href !== undefined) {
+        // No cast: `rest` is already the anchor's own attribute set, so `target` and `rel`
+        // arrive typed and land on the element that understands them.
+        return (_jsx("a", { ...rest, ...shared, href: href, children: content }));
+    }
+    return (
+    /*
+      A button, not a submit. The element's own default is `submit`, so a CTA dropped into
+      a newsletter form beside its real submit would send it. Above the spread rather than
+      below it, so a consumer who does want this to submit the form still wins — ButtonIcon
+      takes the same order for the same reason.
+
+      The cast is on this branch because the props are the anchor's: an `<a>`'s `type` is
+      the destination's MIME type and so is a plain string, which a `<button>`'s own `type`
+      will not accept. Runtime is unaffected.
+    */
+    _jsx("button", { type: "button", ...rest, ...shared, children: content }));
 }