@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/core/navbar-switcher/NavbarSwitcher.css

@@ -24,7 +24,7 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-label-sm-letter-spacing);
   line-height: var(--font-label-sm-line-height);
-  min-block-size: var(--size-control-lg);
+  min-block-size: var(--size-control-md);
   outline-width: var(--border-width-none);
   padding-inline: var(--space-inset-md);
 }
@@ -33,7 +33,7 @@
   align-items: center;
   display: inline-flex;
   flex-shrink: 0;
-  block-size: var(--icon-size-xs);
+  block-size: var(--icon-control-md);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__chevron {
@@ -87,7 +87,8 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation="floating"] .dds-navbarswitcher__surface {
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-translucent);
+  background-image: linear-gradient(var(--color-bg-surface-translucent-tint), var(--color-bg-surface-translucent-tint));
   border-radius: var(--radius-container);
   box-shadow: var(--elevation-surface-floating);
   inline-size: var(--size-switcher-panel-width);
@@ -108,10 +109,10 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher[data-tone="inverse"] .dds-navbarswitcher__trigger: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-navbarswitcher[data-tone="inverse"] .dds-navbarswitcher__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 

package/dist/components/core/navbar-switcher/NavbarSwitcher.d.ts

@@ -1,5 +1,6 @@
 import './NavbarSwitcher.css';
 import './navbar-switcher-impl.css';
+import '../navbar/navbar-material.css';
 import { type NavbarSwitcherProps } from './NavbarSwitcher.types.js';
 export type { NavbarSwitcherProps };
 /**

package/dist/components/core/navbar-switcher/NavbarSwitcher.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronDownRegularIcon, ChevronLeftRegularIcon, ChevronRightRegularIcon, } from '@deriv-com/quill-icons-web';
 import './NavbarSwitcher.css';
 import './navbar-switcher-impl.css';
+import '../navbar/navbar-material.css';
 import { useHoverOpen } from '../../hover-open.js';
 import { Icon } from '../icon/Icon.js';
 import { navbarSwitcherDefaults, navbarSwitcherParts, } from './NavbarSwitcher.types.js';
@@ -78,7 +79,7 @@ export function NavbarSwitcher({ presentation = navbarSwitcherDefaults.presentat
             document.removeEventListener('pointerdown', onPointerDown);
         };
     }, [expanded, inPanel, setOpen, hover]);
-    return (_jsxs("div", { ...rest, ref: rootRef, className: navbarSwitcherParts.root, "data-presentation": presentation, "data-tone": tone, onPointerEnter: hover.onPointerEnter, onPointerLeave: hover.onPointerLeave, children: [_jsxs("button", { ref: triggerRef, type: "button", className: navbarSwitcherParts.trigger, "aria-label": menuLabel, "aria-expanded": expanded, "data-expanded": String(expanded), onClick: () => {
+    return (_jsxs("div", { ...rest, ref: rootRef, className: navbarSwitcherParts.root, "data-presentation": presentation, "data-tone": tone, "data-dds-pinned-surface": inPanel && expanded ? 'open' : undefined, onPointerEnter: hover.onPointerEnter, onPointerLeave: hover.onPointerLeave, children: [_jsxs("button", { ref: triggerRef, type: "button", className: navbarSwitcherParts.trigger, "aria-label": menuLabel, "aria-expanded": expanded, "data-expanded": String(expanded), onClick: () => {
                     // The press owns the state from here, or a set the pointer had opened and the reader
                     // then pressed shut would close a second time when the pointer left.
                     hover.release();

package/dist/components/core/option/Option.css

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

package/dist/components/core/pagination/Pagination.css

@@ -11,7 +11,6 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__list {
-  transition-property: gap;
   align-items: center;
   display: flex;
   min-inline-size: 0;
@@ -32,34 +31,6 @@
   line-height: var(--font-label-sm-line-height);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot {
-  transition-property: color, min-inline-size, outline-color, outline-width;
-  align-items: center;
-  appearance: none;
-  background-color: transparent;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  outline-style: solid;
-  border-radius: var(--radius-pill);
-  border-width: var(--border-width-none);
-  color: var(--color-bg-track);
-  min-block-size: var(--size-target-min);
-  outline-width: var(--border-width-none);
-  transition-duration: var(--motion-duration-fast);
-  transition-timing-function: var(--motion-easing-standard);
-}
-
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot-mark {
-  background-color: currentcolor;
-  display: block;
-  flex: none;
-  block-size: var(--size-dot-diameter);
-  border-radius: var(--radius-pill);
-  inline-size: var(--size-dot-diameter);
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step {
   transition-property: background-color, opacity, outline-color, outline-width;
   align-items: center;
@@ -125,10 +96,6 @@
   background-color: var(--color-bg-hover);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:hover:where(:not(:disabled)) {
-  color: var(--color-bg-track-hover);
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:hover:where(:not(:disabled)) {
   background-color: var(--color-bg-hover);
 }
@@ -141,10 +108,6 @@
   background-color: var(--color-bg-active);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:active {
-  color: var(--color-bg-track-active);
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:active {
   background-color: var(--color-bg-active);
 }
@@ -158,11 +121,6 @@
   outline-width: var(--border-width-focus);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:focus-visible {
-  outline-color: var(--color-border-focus);
-  outline-width: var(--border-width-focus);
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:focus-visible {
   outline-color: var(--color-border-focus);
   outline-width: var(--border-width-focus);
@@ -173,10 +131,6 @@
   outline-width: var(--border-width-focus);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot[data-current="true"] {
-  color: var(--color-bg-strong);
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page[data-current="true"] {
   background-color: var(--color-bg-strong);
   color: var(--color-fg-on-strong);
@@ -186,38 +140,10 @@
   opacity: var(--opacity-disabled);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination[data-show-steps="false"] .dds-pagination__dot {
-  min-inline-size: var(--size-target-min);
-}
-
-:where([data-dds-context="marketing"]) .dds-pagination[data-show-steps="true"] .dds-pagination__dot {
-  min-inline-size: var(--size-dot-diameter);
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination[data-variant="compact"] {
   gap: var(--space-gap-sm);
 }
 
-:where([data-dds-context="marketing"]) .dds-pagination[data-variant="count"] {
-  gap: var(--space-gap-sm);
-}
-
-:where([data-dds-context="marketing"]) .dds-pagination[data-variant="none"] {
-  gap: var(--space-gap-xs);
-}
-
-:where([data-dds-context="marketing"]) .dds-pagination[data-variant="dots"][data-show-steps="false"] .dds-pagination__list {
-  gap: var(--space-gap-none);
-}
-
-:where([data-dds-context="marketing"]) .dds-pagination[data-variant="dots"][data-show-steps="true"] .dds-pagination__list {
-  gap: var(--space-gap-xs);
-}
-
-:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:disabled {
-  cursor: not-allowed;
-}
-
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step:disabled {
   cursor: not-allowed;
 }
@@ -232,6 +158,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-pagination,
-  :where([data-dds-context="marketing"]) .dds-pagination * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-pagination * { transition: none !important; }
 }
 

package/dist/components/core/pagination/Pagination.d.ts

@@ -17,14 +17,14 @@ export type { PaginationProps };
  * company with product's. There the steps are ButtonIcons and the numbered pages are
  * Buttons; this package's ButtonIcon has no disabled state and says so in its own source,
  * being a family of links, and a step at the end of the set has to be disabled rather than
- * removed. Its Button is an anchor with a required href and has no quiet form, so a row of
+ * removed. Its Button was an anchor with a required href when this was built, and it has no quiet
+ * form, so a row of
  * page numbers built from it would be a row of calls to action. Both are correct decisions
  * for what those components are, and neither leaves anything to borrow.
  *
  * What a press is depends on the variant, and on `pageHref`. Given it, every route to a
  * page is an anchor — the numbered targets and both steps — which is what gives a visitor
  * cmd-click, a destination in the status bar and a link a crawler can follow. Without it
- * they are buttons reporting through `onPageChange`. The marks under `dots` are always
- * buttons: a slide has no address.
+ * they are buttons reporting through `onPageChange`.
  */
-export declare function Pagination({ variant, showSteps, page, totalPages, onPageChange, pageHref, totalItems, pageSize, siblingCount, label, previousLabel, nextLabel, morePagesLabel, ...rest }: PaginationProps): import("react").JSX.Element;
+export declare function Pagination({ variant, page, totalPages, onPageChange, pageHref, siblingCount, label, previousLabel, nextLabel, morePagesLabel, ...rest }: PaginationProps): import("react").JSX.Element;

package/dist/components/core/pagination/Pagination.js

@@ -19,16 +19,6 @@ import { paginationDefaults, paginationParts } from './Pagination.types.js';
  * step draws at the wrong size while every gate still passes.
  */
 const GLYPH_SIZE = 'xs';
-/**
- * The most marks the dots variant will draw.
- *
- * Twice the set size the variant asks for, so nothing anyone should be using it on comes
- * near it. It is a guard rather than a design threshold: the marks are decoration, and one
- * target per page meant a total wired straight from a result count built that many
- * controls and took the page with it. Past this the marks give way to the readout in
- * words, which is a degrade a reader can see — an empty row is not one.
- */
-const DOT_LIMIT = 20;
 /**
  * The most pages a break will offer in one menu.
  *
@@ -135,30 +125,11 @@ function measurements(root, list) {
     };
 }
 /**
- * What the readout says, which depends on how much the consumer knows.
- *
- * A range against a total is the better sentence and the one the count variant exists for,
- * but it needs both halves: `pageSize` to know how wide a page is, and `totalItems` to know
- * what it is a fraction of. Given one without the other it falls back to counting pages
- * rather than guessing — a total this component invented would be indistinguishable, to the
- * reader, from one the consumer supplied.
- *
- * The upper bound is clamped to the total because the last page is rarely full: 24 pages of
- * 10 across 235 items ends at 235, and a readout claiming 240 of 235 is arithmetic the
- * reader can see is wrong.
+ * What the readout says under compact: a bare position, and the terseness is the point rather
+ * than a saving — the variant is chosen for a place with no width.
  */
-function readout(variant, current, last, totalItems, pageSize) {
-    // Compact is a bare position, and the terseness is the point rather than a saving: the
-    // variant is chosen for a place with no width. It is also what keeps the two readouts
-    // from being the same sentence, count falling back to counting pages when it has no total.
-    if (variant === 'compact')
-        return `${String(current)} / ${String(last)}`;
-    if (totalItems === undefined || pageSize === undefined) {
-        return `Page ${String(current)} of ${String(last)}`;
-    }
-    const from = (current - 1) * pageSize + 1;
-    const to = Math.min(current * pageSize, totalItems);
-    return `${String(from)}–${String(to)} of ${String(totalItems)}`;
+function readout(current, last) {
+    return `${String(current)} / ${String(last)}`;
 }
 /**
  * A `<nav>` holding the ways through a set that has been divided into pages.
@@ -175,17 +146,17 @@ function readout(variant, current, last, totalItems, pageSize) {
  * company with product's. There the steps are ButtonIcons and the numbered pages are
  * Buttons; this package's ButtonIcon has no disabled state and says so in its own source,
  * being a family of links, and a step at the end of the set has to be disabled rather than
- * removed. Its Button is an anchor with a required href and has no quiet form, so a row of
+ * removed. Its Button was an anchor with a required href when this was built, and it has no quiet
+ * form, so a row of
  * page numbers built from it would be a row of calls to action. Both are correct decisions
  * for what those components are, and neither leaves anything to borrow.
  *
  * What a press is depends on the variant, and on `pageHref`. Given it, every route to a
  * page is an anchor — the numbered targets and both steps — which is what gives a visitor
  * cmd-click, a destination in the status bar and a link a crawler can follow. Without it
- * they are buttons reporting through `onPageChange`. The marks under `dots` are always
- * buttons: a slide has no address.
+ * they are buttons reporting through `onPageChange`.
  */
-export function Pagination({ variant = paginationDefaults.variant, showSteps = paginationDefaults.showSteps, page = paginationDefaults.page, totalPages = paginationDefaults.totalPages, onPageChange, pageHref, totalItems, pageSize, siblingCount = paginationDefaults.siblingCount, label = paginationDefaults.label, previousLabel = paginationDefaults.previousLabel, nextLabel = paginationDefaults.nextLabel, morePagesLabel = paginationDefaults.morePagesLabel, ...rest }) {
+export function Pagination({ variant = paginationDefaults.variant, page = paginationDefaults.page, totalPages = paginationDefaults.totalPages, onPageChange, pageHref, siblingCount = paginationDefaults.siblingCount, label = paginationDefaults.label, previousLabel = paginationDefaults.previousLabel, nextLabel = paginationDefaults.nextLabel, morePagesLabel = paginationDefaults.morePagesLabel, ...rest }) {
     // Clamped rather than trusted. A page beyond the set is what a consumer holds for the
     // moment between a filter narrowing the results and their own state catching up, and a
     // row that renders nothing during it reads as the component breaking rather than as the
@@ -200,17 +171,6 @@ export function Pagination({ variant = paginationDefaults.variant, showSteps = p
     const siblings = whole(siblingCount, 0);
     const atStart = current <= 1;
     const atEnd = current >= last;
-    /*
-      Whether the steps are drawn, which is showSteps under dots and true everywhere else.
-  
-      Inert outside dots rather than obeyed, in the way this component's other
-      variant-specific props already are. What makes dots the exception is that its middle is
-      the only one holding targets of its own — every position is a mark and every mark is a
-      button — so the row still works when the steps go. Under count and compact the steps are
-      the whole of what there is to press, and under pages the numbers reach the two ends and
-      the window between them, with stepping the way to anything else.
-    */
-    const steps = variant === 'dots' ? showSteps : true;
     const rootRef = useRef(null);
     const listRef = useRef(null);
     /**
@@ -262,7 +222,7 @@ export function Pagination({ variant = paginationDefaults.variant, showSteps = p
             // width forbids and the consumer decides the rest. Where even none of them fits there
             // is nothing left to give up that would not cost the reader the page they are on or an
             // end of the set, so the list scrolls — which is the point at which the column wanted
-            // count or compact rather than numbers.
+            // compact rather than numbers.
             const afford = Math.max(0, measured.holds - 5);
             if (afford < shown) {
                 foldedAt.current = measured.room;
@@ -339,7 +299,7 @@ export function Pagination({ variant = paginationDefaults.variant, showSteps = p
         }
         return (_jsx("button", { className: paginationParts.step, type: "button", "aria-label": name, disabled: disabled, onClick: go(to), children: mark }));
     };
-    return (_jsxs("nav", { ref: rootRef, className: paginationParts.root, "aria-label": label, "data-variant": variant, "data-show-steps": showSteps, ...rest, children: [steps && stepControl(current - 1, previousLabel, atStart, _jsx(ChevronLeftRegularIcon, {})), variant === 'pages' && (_jsx("div", { className: paginationParts.list, ref: listRef, children: row.map((slot, index) => {
+    return (_jsxs("nav", { ref: rootRef, className: paginationParts.root, "aria-label": label, "data-variant": variant, ...rest, children: [stepControl(current - 1, previousLabel, atStart, _jsx(ChevronLeftRegularIcon, {})), variant === 'pages' && (_jsx("div", { className: paginationParts.list, ref: listRef, children: row.map((slot, index) => {
                     if (slot === 'gap') {
                         const stands = row[index - 1];
                         /*
@@ -402,5 +362,5 @@ export function Pagination({ variant = paginationDefaults.variant, showSteps = p
                         return (_jsx("a", { className: paginationParts.page, href: pageHref(slot), "aria-current": isCurrent ? 'page' : undefined, "data-current": isCurrent ? 'true' : undefined, onClick: go(slot), children: slot }, slot));
                     }
                     return (_jsx("button", { className: paginationParts.page, type: "button", "aria-current": isCurrent ? 'page' : undefined, "data-current": isCurrent ? 'true' : undefined, onClick: go(slot), children: slot }, slot));
-                }) })), variant === 'dots' && (_jsx("div", { className: paginationParts.list, ref: listRef, children: last <= DOT_LIMIT ? (Array.from({ length: last }, (_, index) => index + 1).map((to) => (_jsx("button", { className: paginationParts.dot, type: "button", "aria-label": `Page ${String(to)}`, "aria-current": to === current ? 'page' : undefined, "data-current": to === current ? 'true' : undefined, onClick: go(to), children: _jsx("span", { className: paginationParts['dot-mark'] }) }, to)))) : (_jsx("span", { className: paginationParts.summary, children: readout('count', current, last, totalItems, pageSize) })) })), (variant === 'count' || variant === 'compact') && (_jsx("span", { className: paginationParts.summary, children: readout(variant, current, last, totalItems, pageSize) })), steps && stepControl(current + 1, nextLabel, atEnd, _jsx(ChevronRightRegularIcon, {}))] }));
+                }) })), variant === 'compact' && (_jsx("span", { className: paginationParts.summary, children: readout(current, last) })), stepControl(current + 1, nextLabel, atEnd, _jsx(ChevronRightRegularIcon, {}))] }));
 }

package/dist/components/core/pagination/Pagination.types.d.ts

@@ -2,26 +2,17 @@ import type { HTMLAttributes } from 'react';
 export interface PaginationOwnProps {
     /**
      * `pages` — An index or archive whose pages have addresses of their own — a blog listing, a news archive, a resource library. The only variant offering a numbered target, so the only one on which reaching page fourteen costs a single press rather than thirteen, and the only one a crawler can follow past page one. It draws Buttons, which in this package are anchors, so it needs pageHref and the pages it points at have to exist as URLs. A page too far out to be drawn is still not a walk: the break between two runs of numbers presses, and offers the pages it stands for
-     * `count` — A long set where the reader's real question is how much is left rather than which page they are on — "page 3" says nothing until you know whether there are four pages or four hundred. Pass totalItems so the readout can answer it. The steps take pageHref where the pages have addresses and fall back to onPageChange where they do not
-     * `compact` — A place with no room for a row of numbers — a card footer, a sidebar, a column at a phone's width. Position and the two steps, and nothing else. Like count, its steps are anchors given pageHref and buttons without it
-     * `none` — The two steps and nothing between them, for a place where position is either obvious or beside the point — a lightbox moving through images, a set of two. It is the least this component can be, and choosing it is a claim that the reader does not need to know where they are, which on a page with an address per position is a claim worth making deliberately
-     * `dots` — A carousel of cards, a testimonial slider, a walkthrough — a short visual sequence where the reader cares where they are rather than what that position is called. The marks are always buttons and the press is always the page's to handle, a slide having no address to link to; pageHref is ignored here rather than obeyed. The case it was built for is a set the reader swipes: pass showSteps={false} there and the row is marks alone, which is also the only variant still offering a target once the steps are gone. Keep the set under about ten — a dot carries no number, so beyond a handful the reader is counting marks too small and too many to count
+     * `compact` — A place with no room for a row of numbers — a card footer, a sidebar, a column at a phone's width. Position and the two steps, and nothing else. Like pages, its steps are anchors given pageHref and buttons without it
      */
-    variant?: 'pages' | 'count' | 'compact' | 'none' | 'dots';
-    /** Whether the two step controls are drawn, under the dots variant. True wherever this component is the way through the set, which is nearly all of them. False for a set the reader moves through some other way and this only reports — a carousel they swipe, a gallery with its own arrows — where a second pair underneath competes with the first. Dropping them also buys the width that lets a long row of marks fit a phone */
-    showSteps?: boolean;
+    variant?: 'pages' | 'compact';
     /** Always — it is which page is on screen, counting from one, and the component renders around it rather than holding it. The consumer owns this because the results do: the page number and the rows beneath it are one fact, and a control keeping its own copy is how the two come to disagree. The default is the first page, which is where a set with nothing said about it starts */
     page?: number;
     /** How many pages the set has been divided into. It decides where the row ends, when the ellipsis appears, and when next goes disabled. The default of one is the honest answer for a set nothing has been said about, and it is also the case the component should not be used in at all — a single page has nothing to move between */
     totalPages?: number;
-    /** What the page does when the reader asks for another one, counting from one. Required wherever the route to a page is a press rather than a destination: the dots variant always, and the steps under any variant given no pageHref. Under pages it is the pageHref that carries the reader, so this is the reporting half rather than the moving one — useful for telling analytics, and unnecessary if nothing is listening. One of this and pageHref is needed; a component given neither draws a row nothing can move. */
+    /** What the page does when the reader asks for another one, counting from one. Required wherever the route to a page is a press rather than a destination: the numbered targets and the steps under any variant given no pageHref. Under pages it is the pageHref that carries the reader, so this is the reporting half rather than the moving one — useful for telling analytics, and unnecessary if nothing is listening. One of this and pageHref is needed; a component given neither draws a row nothing can move. */
     onPageChange?: (page: number) => void;
-    /** The address of a page, given the page number. Passing it makes every route to a page an anchor: the numbered targets, and both steps. Required under the pages variant, which draws Buttons — and a Button in this package is an anchor with a destination, never a press the page handles. Pass it under compact or count too wherever the pages have real URLs, because an anchor is what gives a visitor cmd-click, a destination in the status bar, and a link a search engine can follow to page two. One of this and onPageChange is needed; a component given neither draws a row nothing can move. */
+    /** The address of a page, given the page number. Passing it makes every route to a page an anchor: the numbered targets, and both steps. Required under the pages variant, which draws Buttons — and a Button in this package is an anchor with a destination, never a press the page handles. Pass it under compact too wherever the pages have real URLs, because an anchor is what gives a visitor cmd-click, a destination in the status bar, and a link a search engine can follow to page two. One of this and onPageChange is needed; a component given neither draws a row nothing can move. */
     pageHref?: (page: number) => string;
-    /** How many results there are altogether, where that is known. It is what turns the count variant's readout from a position into a measure — "1–10 of 240" rather than "page 1 of 24" — which is the fact that tells a reader whether to keep stepping or narrow their filter instead */
-    totalItems?: number;
-    /** How many items each page holds, which is what lets the count variant work out the range on screen from the page number alone. Pass it alongside totalItems; on its own it has nothing to be a fraction of. It reports the size in force and does not offer to change it — a control for that is the consumer's to place, beside this one */
-    pageSize?: number;
     /** How many numbered pages sit around the current one before the row breaks, under the pages variant. Around rather than either side: the window is split, with the odd one going forward, since the page the reader has not read is the one they most likely want. One is the current page and the one after it, a row of six; two is mirrored. The most it will show rather than a promise, since the row drops what the container cannot hold */
     siblingCount?: number;
     /** Always, and the default is almost always right. It names the landmark rather than the content — a screen reader user listing what is on a page hears this, and a nav with no name is one they cannot tell from the page's other navigation. Set it where a page carries two of these, so the two are distinguishable by what they page through */
@@ -33,14 +24,12 @@ export interface PaginationOwnProps {
     /** The accessible name for the break between two runs of numbered pages — the control that opens a menu of the pages that break stands for. A glyph announces nothing, which is the position previousLabel and nextLabel are in, and this is passed the same way the two steps' names are, as the control's own accessible name. It names the menu as well as the control, so a reader who has opened it hears which menu they are in */
     morePagesLabel?: string;
 }
-export type PaginationProps = PaginationOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'variant' | 'showSteps' | 'page' | 'totalPages' | 'onPageChange' | 'pageHref' | 'totalItems' | 'pageSize' | 'siblingCount' | 'label' | 'previousLabel' | 'nextLabel' | 'morePagesLabel'>;
+export type PaginationProps = PaginationOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'variant' | 'page' | 'totalPages' | 'onPageChange' | 'pageHref' | 'siblingCount' | 'label' | 'previousLabel' | 'nextLabel' | 'morePagesLabel'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const paginationParts: {
     readonly root: "dds-pagination";
     readonly list: "dds-pagination__list";
     readonly summary: "dds-pagination__summary";
-    readonly dot: "dds-pagination__dot";
-    readonly 'dot-mark': "dds-pagination__dot-mark";
     readonly step: "dds-pagination__step";
     readonly page: "dds-pagination__page";
     readonly break: "dds-pagination__break";
@@ -48,7 +37,6 @@ export declare const paginationParts: {
 /** Generated so defaults cannot drift from the contract. */
 export declare const paginationDefaults: {
     readonly variant: "pages";
-    readonly showSteps: true;
     readonly page: 1;
     readonly totalPages: 1;
     readonly siblingCount: 1;

package/dist/components/core/pagination/Pagination.types.js

@@ -4,11 +4,9 @@ export const paginationParts = {
     root: 'dds-pagination',
     list: 'dds-pagination__list',
     summary: 'dds-pagination__summary',
-    dot: 'dds-pagination__dot',
-    'dot-mark': 'dds-pagination__dot-mark',
     step: 'dds-pagination__step',
     page: 'dds-pagination__page',
     break: 'dds-pagination__break',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const paginationDefaults = { variant: 'pages', showSteps: true, page: 1, totalPages: 1, siblingCount: 1, label: 'Pagination', previousLabel: 'Previous page', nextLabel: 'Next page', morePagesLabel: 'More pages' };
+export const paginationDefaults = { variant: 'pages', page: 1, totalPages: 1, siblingCount: 1, label: 'Pagination', previousLabel: 'Previous page', nextLabel: 'Next page', morePagesLabel: 'More pages' };

package/dist/components/core/pagination-dots/PaginationDots.css

@@ -0,0 +1,60 @@
+/* GENERATED from paginationdots.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-paginationdots {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-paginationdots .dds-paginationdots__dot {
+  transition-property: outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  outline-style: solid;
+  padding: 0;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-none);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-dot-diameter);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-paginationdots .dds-paginationdots__mark {
+  transition-property: inline-size, opacity;
+  background-color: currentcolor;
+  display: block;
+  flex: none;
+  block-size: var(--size-dot-diameter);
+  border-radius: var(--radius-pill);
+  inline-size: var(--size-dot-diameter);
+  opacity: var(--opacity-dot-rest);
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-shift);
+}
+
+:where([data-dds-context="marketing"]) .dds-paginationdots .dds-paginationdots__dot:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-paginationdots .dds-paginationdots__mark[data-current="true"] {
+  inline-size: var(--size-dot-current);
+  opacity: var(--opacity-dot-current);
+}
+
+:where([data-dds-context="marketing"]) .dds-paginationdots[data-variant="accent"] .dds-paginationdots__dot {
+  color: var(--color-fg-brand-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-paginationdots,
+  :where([data-dds-context="marketing"]) .dds-paginationdots * { transition: none !important; }
+}
+

package/dist/components/core/pagination-dots/PaginationDots.d.ts

@@ -0,0 +1,25 @@
+import './PaginationDots.css';
+import { type PaginationDotsProps } from './PaginationDots.types.js';
+export type { PaginationDotsProps };
+/**
+ * A row of marks, one per position in a short sequence, every one a button that moves there — and,
+ * under `autoplay`, a row that moves on its own.
+ *
+ * Split out of Pagination, where it was a variant. A set of results and a slider's slides are
+ * different questions — how far does this run, against where am I — and the one variant that
+ * answered the second was the one that needed none of Pagination's other props. Steps are not
+ * here: whatever holds the row puts previous and next beside it, where its own layout wants them.
+ *
+ * Drawn in the ground's own ink. The marks are currentcolor, the rest at opacity.dot-rest and the
+ * current one solid and stretched to size.dot.current, so one row reads on any band without
+ * naming a colour.
+ *
+ * Nothing about position is held here: `page` is the consumer's, because the slide in view is
+ * theirs too, and the two are one fact. Autoplay therefore moves nothing itself — every
+ * motion.duration.dwell it reports the next position through onPageChange and waits for `page` to
+ * come back. A reader who presses a mark stops it for good. It holds while `paused` says so — the
+ * holder's hover, focus, or its own stop — and never moves for a reader who asked for less motion.
+ * There is no pause control, by decision: a press is the way to stop it, and the contract says what
+ * that does and does not give WCAG 2.2.2.
+ */
+export declare function PaginationDots({ variant, page, totalPages, onPageChange, autoplay, paused, label, itemLabel, }: PaginationDotsProps): import("react").JSX.Element;

package/dist/components/core/pagination-dots/PaginationDots.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import './PaginationDots.css';
+import { paginationDotsDefaults, paginationDotsParts, } from './PaginationDots.types.js';
+/**
+ * The most marks the row will draw.
+ *
+ * A guard rather than a design threshold — the row is for a handful, and its guidance says so.
+ * What it guards against is a total wired straight from a result count: five thousand of them
+ * built five thousand buttons and took the page with it. Past this the marks give way to the
+ * position written as numbers, which a reader can see, where an empty row would read as broken.
+ */
+const DOT_LIMIT = 20;
+/**
+ * A CSS time as milliseconds, the unit read rather than assumed: the same token arrives as `5000ms`
+ * from a dev server and `5s` once a minifier has been over it. Null for anything else, so the row
+ * holds still rather than inventing a timing.
+ */
+function milliseconds(value) {
+    const time = value.trim();
+    const amount = Number.parseFloat(time);
+    if (!Number.isFinite(amount))
+        return null;
+    if (/ms$/i.test(time))
+        return amount;
+    if (/s$/i.test(time))
+        return amount * 1000;
+    return null;
+}
+/**
+ * Whether the reader has asked for less motion, kept current if they change it. Until it has been
+ * read — on the server, before the first effect — the answer is yes, the safe one: a row that
+ * starts still and then moves is better than one that moves for a frame for a reader who said not to.
+ */
+function usePrefersLessMotion() {
+    const [less, setLess] = useState(true);
+    useEffect(() => {
+        if (typeof window.matchMedia !== 'function')
+            return;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setLess(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return less;
+}
+/**
+ * A row of marks, one per position in a short sequence, every one a button that moves there — and,
+ * under `autoplay`, a row that moves on its own.
+ *
+ * Split out of Pagination, where it was a variant. A set of results and a slider's slides are
+ * different questions — how far does this run, against where am I — and the one variant that
+ * answered the second was the one that needed none of Pagination's other props. Steps are not
+ * here: whatever holds the row puts previous and next beside it, where its own layout wants them.
+ *
+ * Drawn in the ground's own ink. The marks are currentcolor, the rest at opacity.dot-rest and the
+ * current one solid and stretched to size.dot.current, so one row reads on any band without
+ * naming a colour.
+ *
+ * Nothing about position is held here: `page` is the consumer's, because the slide in view is
+ * theirs too, and the two are one fact. Autoplay therefore moves nothing itself — every
+ * motion.duration.dwell it reports the next position through onPageChange and waits for `page` to
+ * come back. A reader who presses a mark stops it for good. It holds while `paused` says so — the
+ * holder's hover, focus, or its own stop — and never moves for a reader who asked for less motion.
+ * There is no pause control, by decision: a press is the way to stop it, and the contract says what
+ * that does and does not give WCAG 2.2.2.
+ */
+export function PaginationDots({ variant = paginationDotsDefaults.variant, page = paginationDotsDefaults.page, totalPages = paginationDotsDefaults.totalPages, onPageChange, autoplay = paginationDotsDefaults.autoplay, paused = paginationDotsDefaults.paused, label = paginationDotsDefaults.label, itemLabel = paginationDotsDefaults.itemLabel, }) {
+    const count = Math.max(0, Math.floor(totalPages));
+    const current = Math.min(Math.max(1, Math.floor(page)), Math.max(1, count));
+    const root = useRef(null);
+    const lessMotion = usePrefersLessMotion();
+    /*
+      Stopped for good once the reader presses a mark. A reader who chose a position has said where
+      they want to be, and moving them on from it five seconds later would take that back — the WAI
+      carousel pattern's rule, and the way this row offers a reader a stop without a control for it.
+    */
+    const [stopped, setStopped] = useState(false);
+    const running = autoplay && !stopped && !paused && !lessMotion && count > 1 && onPageChange !== undefined;
+    // Read through a ref so a new handler on every render does not re-arm the timer.
+    const report = useRef(onPageChange);
+    report.current = onPageChange;
+    useEffect(() => {
+        if (!running || root.current === null)
+            return;
+        const dwell = milliseconds(getComputedStyle(root.current).getPropertyValue('--motion-duration-dwell'));
+        if (dwell === null)
+            return;
+        const timer = window.setTimeout(() => report.current?.((current % count) + 1), dwell);
+        return () => window.clearTimeout(timer);
+    }, [running, current, count]);
+    if (count > DOT_LIMIT) {
+        return (_jsx("div", { className: paginationDotsParts.root, "data-variant": variant, role: "group", "aria-label": label, ref: root, children: _jsx("span", { role: "status", children: `${String(current)} / ${String(count)}` }) }));
+    }
+    return (_jsx("div", { className: paginationDotsParts.root, "data-variant": variant, role: "group", "aria-label": label, ref: root, children: Array.from({ length: count }, (_, index) => index + 1).map((at) => {
+            const here = at === current;
+            return (_jsx("button", { type: "button", className: paginationDotsParts.dot, "aria-label": `${itemLabel} ${String(at)}`, "aria-current": here ? 'true' : undefined, onClick: () => {
+                    setStopped(true);
+                    onPageChange?.(at);
+                }, children: _jsx("span", { className: paginationDotsParts.mark, "data-current": here ? 'true' : undefined }) }, at));
+        }) }));
+}