@deriv-com/dds-marketing 0.2.0 → 1.0.1

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

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

@@ -1,30 +1,25 @@
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
 export interface ButtonOwnProps {
-    /**
-     * `primary` — The step the page was built to produce. Carries the brand fill, which is what makes it findable at a glance and what makes it meaningless once there are two — a section offering two brand fills has said nothing about either.
-     * `secondary` — A real destination that is not the one being pushed — compare plans, read the docs, talk to sales. An outline rather than a quiet fill: this package has color.bg.hover for the wash but no hover partner for color.bg.subtle, so a filled secondary would get lighter on hover instead of darker. The outline keeps the shape, the inset and the target size, and gives up only the fill.
-     * `inverse` — A section that paints its own ground — a brand-coloured hero, a photo band, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral edge is the wrong ink, so the only thing that reads is a solid at the far end of the neutral ramp: pure black in light, pure white in dark. It outranks everything near it, which is what makes it right there and wrong anywhere else.
-     */
-    variant?: 'primary' | 'secondary' | 'inverse';
     /**
      * `sm` — A dense band where the button is one control among several — a filter row, a utility bar, an action beside body copy. size.control.sm tall against space.control.sm on the sides, half of it as at every step. The label holds at font.label.sm, md's own 14px: the label ramp has no step below it, so what separates these two is the box. Desktop only — at thirty-two it is below what a finger reliably hits.
      * `md` — The default, and everything that is not a hero — navigation bars, pricing rows, feature sections, footer bands. size.control.md tall against space.control.md on the sides, which is half of it, and font.label.sm — the 14px step, so the label matches product's default button rather than running a size above it.
      * `lg` — A hero, or a full-width conversion band that is the only control in view. size.control.lg tall against space.control.lg on the sides, again half the height, so the label starts where the pill's curve stops. font.label.md at 16px, product's own large-button measure. One per page, usually: a page of lg CTAs has no hero.
      */
     size?: 'sm' | 'md' | 'lg';
-    /**
-     * `default` — The page's own ground, which sets the ink this component was drawn against — every button on a white page
-     * `inherit` — A section that painted its own ground and set its own ink: a dark hero, a brand band, a photo. The button stops naming a colour and takes the one around it, so the edge and the label are whatever the band decided was legible on itself
-     */
-    tone?: 'default' | 'inherit';
-    /** Always. The destination is the component — an anchor without an href is not a link, is not reachable by keyboard, and is announced as plain text, so there is no default that could stand in for one. It takes no default and is not optional for exactly that reason. */
-    href: string;
+    /** The press goes somewhere with a URL of its own — the ordinary case for a call to action on a marketing page. It makes this an anchor rather than a button, which is what gives a visitor cmd-click, a visible destination and a copyable link. `target` and `rel` are not props: the component is typed against AnchorHTMLAttributes, so they are already in reach and land on the anchor. */
+    href?: string;
     /** Where the destination continues a sequence rather than being simply somewhere else to go — the hero CTA that starts a signup, the button at the foot of a step. Named for the part it renders rather than for the mark inside it: which glyph that is belongs to the component, the way showClose and showTitle name their parts elsewhere. Today it is a forward arrow, and it slides on hover. */
     showIcon?: boolean;
     /** Allowed: text */
     children: ReactNode;
 }
-export type ButtonProps = ButtonOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'variant' | 'size' | 'tone' | 'href' | 'showIcon'>;
+export type ButtonProps = ButtonOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'variant' | 'size' | 'tone' | 'href' | 'showIcon'> & ({
+    variant?: 'primary' | 'secondary' | 'inverse';
+    tone?: Exclude<'default' | 'inverse' | 'brand', 'brand'>;
+} | {
+    variant: Exclude<'primary' | 'secondary' | 'inverse', 'primary'>;
+    tone?: 'default' | 'inverse' | 'brand';
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const buttonParts: {
     readonly root: "dds-button";

package/dist/components/core/button/button-impl.css

@@ -44,3 +44,28 @@
     translate: 0;
   }
 }
+
+/**
+ * The label travels with the fill.
+ *
+ * The generated list names what the button's own states move — the fills and the focus ring — and
+ * the label's colour is not one of them: no state changes it. The tone does. A navigation bar
+ * re-tones its buttons when it gathers on scroll, and the fill eased to the new ground while the
+ * label jumped to the new ink on the first frame, so a secondary on a dark hero spent the whole
+ * change as dark words on a still-dark fill. Naming `color` and `border-color` here carries both
+ * across the same step as the fill.
+ *
+ * Written out in full rather than appended to, because a property list cannot be added to — this
+ * replaces the generated one, and has to keep everything that one names.
+ */
+:where([data-dds-context="marketing"]) .dds-button {
+  transition-property: background-color, background-image, border-color, color, outline-color, outline-width;
+}
+
+/* And none of it for a reader who asked for less motion — restated, because the rule above comes
+   after the generated sheet's own reduced-motion guard and would otherwise be the one that wins. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-button {
+    transition-property: none;
+  }
+}

package/dist/components/core/button-icon/ButtonIcon.css

@@ -72,11 +72,10 @@
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[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-buttonicon[data-variant="secondary"] {
-  border-color: var(--color-border-strong);
   color: var(--color-fg-default);
 }
 
@@ -92,10 +91,6 @@
   background-color: var(--color-bg-brand-hover);
 }
 
-:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"]:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover);
-}
-
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"]:active {
   background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
 }
@@ -108,28 +103,49 @@
   background-color: var(--color-bg-brand-active);
 }
 
-:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"]:active {
-  background-color: var(--color-bg-active);
-}
-
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-tone="inverse"]:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"] {
-  color: var(--color-fg-on-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="default"] {
+  background-color: var(--color-bg-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[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-buttonicon[data-variant="plain"][data-tone="inverse"]:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[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-buttonicon[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-buttonicon[data-variant="plain"][data-tone="inverse"]:active {
-  background-color: var(--color-bg-active-inverse);
+  background-color: var(--color-bg-active-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[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-buttonicon[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-buttonicon,
-  :where([data-dds-context="marketing"]) .dds-buttonicon * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-buttonicon * { transition: none !important; }
 }
 

package/dist/components/core/button-icon/ButtonIcon.d.ts

@@ -5,8 +5,8 @@ export type { ButtonIconProps };
  * One press carried by a glyph alone.
  *
  * Which element it renders is decided by `href` and nothing else, which is CardButton's
- * shape rather than Button's. Button could not take it: its job is defined as moving a
- * visitor along a funnel, so it is an anchor always. A glyph-alone control has no such
+ * shape rather than Button's. Button has since taken the same shape; when this was written its job was
+ * defined as moving a visitor along a funnel, so it was an anchor always. A glyph-alone control has no such
  * single job — a footer's social row goes somewhere and a promotional bar's dismiss does
  * not, and both are one press with one mark. An `<a>` gives cmd-click, a destination in
  * the status bar and a copyable link; a `<button>` answers Space and does what the page

package/dist/components/core/button-icon/ButtonIcon.js

@@ -6,8 +6,8 @@ import { buttonIconDefaults, buttonIconParts } from './ButtonIcon.types.js';
  * One press carried by a glyph alone.
  *
  * Which element it renders is decided by `href` and nothing else, which is CardButton's
- * shape rather than Button's. Button could not take it: its job is defined as moving a
- * visitor along a funnel, so it is an anchor always. A glyph-alone control has no such
+ * shape rather than Button's. Button has since taken the same shape; when this was written its job was
+ * defined as moving a visitor along a funnel, so it was an anchor always. A glyph-alone control has no such
  * single job — a footer's social row goes somewhere and a promotional bar's dismiss does
  * not, and both are one press with one mark. An `<a>` gives cmd-click, a destination in
  * the status bar and a copyable link; a `<button>` answers Space and does what the page