@deriv-com/dds-marketing 1.0.2 → 1.1.0

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

@@ -63,7 +63,7 @@ const FOCUSABLE = [
  * disagree eventually, and the consumer is the one that has to win.
  */
 export function BottomSheet(props) {
-    const { open = bottomSheetDefaults.open, height = bottomSheetDefaults.height, title, showTitle = bottomSheetDefaults.showTitle, description, back, action, showClose = bottomSheetDefaults.showClose, showHandle = bottomSheetDefaults.showHandle, onOpenChange, children, id, ...rest } = props;
+    const { open = bottomSheetDefaults.open, height = bottomSheetDefaults.height, title, closeLabel, showTitle = bottomSheetDefaults.showTitle, description, back, action, showClose = bottomSheetDefaults.showClose, showHandle = bottomSheetDefaults.showHandle, onOpenChange, children, id, ...rest } = props;
     const fallbackId = useId();
     const rootId = id ?? fallbackId;
     const titleId = `${rootId}-title`;
@@ -335,7 +335,7 @@ export function BottomSheet(props) {
         /* The compact step. A sheet's exit sits on the row that names it, beside a title at the
            smallest heading step — at the default size the button stood taller than the words it
            sat next to and read as the loudest thing in the header. */
-        size: "sm", label: `Close ${title}`, 
+        size: "sm", label: closeLabel ?? `Close ${title}`, 
         /* The bare glyph, not wrapped in an Icon. Which step belongs in a button of this size is
            ButtonIcon's own rule and it applies it by cloning — an Icon around it puts `dds-icon`
            on the svg at Icon's own default instead, which is a step and a half larger and beats

package/dist/components/core/bottom-sheet/BottomSheet.types.d.ts

@@ -26,10 +26,12 @@ export interface BottomSheetOwnProps {
   
   The second argument is which of the four ways out the reader took, for a page that treats an abandoned task differently from a finished one. It is only ever called with false today — a sheet is opened by whatever opens it, never by itself — and the boolean is first anyway, so the shape does not have to change if that ever stops being true. */
     onOpenChange: (open: boolean, reason: 'close-button' | 'scrim' | 'escape' | 'drag') => void;
+    /** The accessible name of the close button. Without it the button is named "Close" and the title; pass it to translate that with the page. */
+    closeLabel?: string;
     /** Allowed: any content */
     children: ReactNode;
 }
-export type BottomSheetProps = BottomSheetOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'open' | 'height' | 'title' | 'showTitle' | 'description' | 'showClose' | 'back' | 'action' | 'showHandle' | 'onOpenChange'> & ({
+export type BottomSheetProps = BottomSheetOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'open' | 'height' | 'title' | 'showTitle' | 'description' | 'showClose' | 'back' | 'action' | 'showHandle' | 'onOpenChange' | 'closeLabel'> & ({
     showHandle?: boolean;
     showClose?: false;
 } | {

package/dist/components/core/breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,5 @@
 import './Breadcrumb.css';
+import './breadcrumb-impl.css';
 import { type BreadcrumbProps } from './Breadcrumb.types.js';
 export type { BreadcrumbProps };
 /**

package/dist/components/core/breadcrumb/Breadcrumb.js

@@ -3,6 +3,7 @@ import { Children, Fragment } from 'react';
 import { ChevronRightRegularIcon } from '@deriv-com/quill-icons-web';
 import { Icon } from '../icon/Icon.js';
 import './Breadcrumb.css';
+import './breadcrumb-impl.css';
 import { breadcrumbDefaults, breadcrumbParts } from './Breadcrumb.types.js';
 /**
  * A `<nav>` holding an ordered list of the levels above the current page.

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

@@ -0,0 +1,11 @@
+/*
+ * What the contract cannot hold: a reading direction.
+ *
+ * The separator points from one level to the next. A right-to-left trail runs leftward, so the
+ * chevron is mirrored to point the way the trail reads — drawn as it ships, it pointed back at the
+ * level before it. The contract binds parts in states, and the direction a line is set in is
+ * neither.
+ */
+:where([data-dds-context="marketing"]) .dds-breadcrumb .dds-breadcrumb__separator .dds-icon:dir(rtl) {
+  scale: -1 1;
+}

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

@@ -34,13 +34,26 @@
   translate: var(--space-gap-xs);
 }
 
+/**
+ * A right-to-left line reads leftward, so the arrow points left and the nudge goes left: the mark
+ * still moves on in the direction of reading, by the same gap.
+ */
+:where([data-dds-context="marketing"]) .dds-button .dds-button__icon:dir(rtl) {
+  scale: -1 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon:dir(rtl) {
+  translate: calc(-1 * var(--space-gap-xs));
+}
+
 /**
  * A reader who asked for less motion gets none, rather than the same distance travelled
  * instantly. The generated sheet already drops the transition under this query, which on its
  * own would leave the four-pixel jump — the movement, minus the part that made it legible.
  */
 @media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon {
+  :where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon,
+  :where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon:dir(rtl) {
     translate: 0;
   }
 }

package/dist/components/core/illustration-card/IllustrationCard.js

@@ -78,5 +78,5 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
                 cancelAnimationFrame(queued);
         };
     }, []);
-    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, inert: true, children: children }) }));
+    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, "data-theme": "dark", role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, inert: true, children: children }) }));
 }

package/dist/components/core/illustration-card/illustration-card-impl.css

@@ -16,6 +16,26 @@
   backdrop-filter: blur(var(--size-backdrop-blur));
 }
 
+/*
+ * Standing on its own, the glass is laid over the dark page rather than over whatever page it is on.
+ *
+ * The pane is dark in both themes — see `data-theme` in IllustrationCard.tsx — and the dark glass is
+ * a faint white, which is only the charcoal pane it is meant to be over the dark page's near-black.
+ * Over a light page the same glass came out near-white, behind the dark theme's white ink. So the
+ * dark page's ground goes under it, and the card is the same charcoal on every page.
+ *
+ * Not in a scene, where the glass is there to show the photograph through it.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-surface-glass), var(--color-bg-surface-glass));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationcard {
+  background-color: var(--color-bg-surface-glass);
+  background-image: none;
+}
+
 /*
  * What the pane holds keeps its own size: nothing in it shrinks to make room, because a shrunk item
  * in a flex column overlaps the next one. Where the UI is taller than the pane, IllustrationCard

package/dist/components/core/illustration-scene/IllustrationScene.css

@@ -18,16 +18,13 @@
   background-color: var(--color-bg-surface);
 }
 
-:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="center"] {
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="bottom"] {
+  align-items: end;
   justify-items: center;
 }
 
-:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="end"] {
-  justify-items: end;
-}
-
-:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="start"] {
-  justify-items: start;
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="center"] {
+  justify-items: center;
 }
 
 :where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="landscape"] {

package/dist/components/core/illustration-scene/IllustrationScene.types.d.ts

@@ -8,10 +8,9 @@ export interface IllustrationSceneOwnProps {
     ratio?: 'landscape' | 'square' | 'upright';
     /**
      * `center` — The default: the card in the middle of the frame. For a photograph whose subject frames the middle — a person looking down at what the card shows
-     * `start` — The card towards the start edge, for a photograph whose subject is at the end
-     * `end` — The card towards the end edge, for a photograph whose subject is at the start
+     * `bottom` — The card centred along the foot of the frame, held off it by the card's own inset — for a photograph whose subject fills the top: a face, a person reaching up, a skyline
      */
-    placement?: 'center' | 'start' | 'end';
+    placement?: 'center' | 'bottom';
     /** Always. The photograph the scene is set in */
     src: string;
     /** Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not */

package/dist/components/core/illustration-scene/illustration-scene-impl.css

@@ -24,13 +24,19 @@
  * The card's share of the frame, per shape: a little under half of a wide frame, a little over half
  * of a square one, most of a tall one. Proportions of the frame rather than measures — a scene is
  * drawn at whatever width its column gives it, and the composition has to hold at all of them.
- * Held off the frame's edges by space.inset.card, so a card placed to one side never touches it.
+ * Held off the frame's edges by space.inset.card, so it never touches them.
  */
 :where([data-dds-context="marketing"]) .dds-illustrationscene > .dds-illustrationcard {
   inline-size: 46%;
   margin-inline: var(--space-inset-card);
 }
 
+/* At the foot, the same inset below the card as either side of it. Only there: under a centred card
+   a margin would lift it off the middle by half the inset. */
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='bottom'] > .dds-illustrationcard {
+  margin-block-end: var(--space-inset-card);
+}
+
 :where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio='square'] > .dds-illustrationcard {
   inline-size: 58%;
 }

package/dist/components/core/link/Link.js

@@ -123,9 +123,13 @@ export function Link({ variant = linkDefaults.variant, tone = linkDefaults.tone,
                   same distance measured along the diagonal rather than four pixels twice.
                 */
                 style: {
+                    /*
+                      The two axes apart, so the stylesheet can turn the inline one round in a
+                      right-to-left line — where the arrow is mirrored and travels the other way.
+                    */
                     ...(external
-                        ? { '--dds-link-arrow-travel': '18% -18%' }
-                        : { '--dds-link-arrow-travel': '25% 0' }),
+                        ? { '--dds-link-arrow-travel-x': '18%', '--dds-link-arrow-travel-y': '-18%' }
+                        : { '--dds-link-arrow-travel-x': '25%', '--dds-link-arrow-travel-y': '0%' }),
                     /*
                       A list link's mark rests displaced and at zero, and the pointer
                       brings it to where it belongs — the arrival and the nudge are the
@@ -135,7 +139,7 @@ export function Link({ variant = linkDefaults.variant, tone = linkDefaults.tone,
                       them.
                     */
                     ...(revealOnHover
-                        ? { '--dds-link-arrow-rest-travel': '-60% 0', '--dds-link-arrow-rest': '0' }
+                        ? { '--dds-link-arrow-rest-travel-x': '-60%', '--dds-link-arrow-rest': '0' }
                         : {}),
                 }, children: _jsx(Icon, { size: "xs", children: trailing }) }))] }));
 }

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

@@ -144,14 +144,28 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-link__icon-trailing .dds-icon {
-  translate: var(--dds-link-arrow-rest-travel, 0 0);
+  translate: calc(var(--dds-link-arrow-rest-travel-x, 0%) * var(--dds-link-arrow-sign, 1)) 0;
   transition-property: translate;
   transition-duration: var(--motion-duration-normal);
   transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-link:hover .dds-link__icon-trailing .dds-icon {
-  translate: var(--dds-link-arrow-travel, 0 0);
+  translate: calc(var(--dds-link-arrow-travel-x, 0%) * var(--dds-link-arrow-sign, 1)) var(--dds-link-arrow-travel-y, 0%);
+}
+
+/*
+ * A right-to-left line reads the other way, so the arrow points the other way: mirrored, and
+ * travelling along the line it now points down. Mirroring the glyph and not the box around it,
+ * because the box carries the gap to the words as padding on its inline start, and a mirrored box
+ * would draw the arrow against the words with the gap on its far side.
+ *
+ * The external arrow mirrors too — up and to the start of the line, which is where "out of this
+ * page" points in a script that reads leftward.
+ */
+:where([data-dds-context="marketing"]) .dds-link__icon-trailing .dds-icon:dir(rtl) {
+  --dds-link-arrow-sign: -1;
+  scale: -1 1;
 }
 
 /*
@@ -166,3 +180,16 @@
     translate: none;
   }
 }
+
+/*
+ * A link that inherits its ink draws its focus ring in that ink.
+ *
+ * `tone="inherit"` is the link a page puts on a ground of its own — a dark panel, the brand's
+ * band — where color.border.focus, the page's near-black in light mode, sat on a near-black panel
+ * at about 1.2:1 and the ring vanished: ResourceBanner's links in light mode, TeamGrid's on the dark
+ * band. The words already contrast with whatever they sit on, which is what `inherit` is for, so
+ * the ring takes the words' colour and reads wherever they do.
+ */
+:where([data-dds-context="marketing"]) .dds-link[data-tone="inherit"]:focus-visible {
+  outline-color: currentcolor;
+}

package/dist/components/core/navbar/Navbar.css

@@ -121,11 +121,11 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__cluster {
-  background-color: var(--color-bg-surface-translucent-on-brand-strong);
+  background-color: var(--color-bg-surface-translucent-tint-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__ground {
-  background-color: var(--color-bg-surface-translucent-on-brand-strong);
+  background-color: var(--color-bg-surface-translucent-tint-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__trigger:focus-visible {

package/dist/components/core/navbar/Navbar.types.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 export interface NavbarOwnProps {
     /**
      * `default` — The page begins on a light ground, which is most marketing pages. The bar paints in ink and the pill is paper
-     * `inverse` — The first section of the page paints its own dark ground and the bar stands on it — a dark hero, a photograph, a brand-coloured takeover. The bar's ink runs light, and the pill and the collapsed bar take the dark see-through material — a near-opaque black base, a white tint and a blur — so a light photograph behind cannot wash them out
+     * `inverse` — The first section of the page paints its own dark ground and the bar stands on it — a dark hero, a photograph, a brand-coloured takeover. The bar's ink runs light, and the pill and the collapsed bar take a frosted white glass — a faint white base, a white tint over it and a blur — so the dark ground or the photograph shows through it, lightened, rather than a black slab standing on it. Choose a photograph dark where the bar sits: the glass lightens what is behind it and does not darken it
      */
     tone?: 'default' | 'inverse';
     /** Always — it names the navigation landmark, and a page with an unnamed one tells a screen-reader user there is navigation here without saying which navigation. Name the set rather than the act: 'Main', not 'Main navigation' — the role already supplies the word, and a name carrying it is announced as 'main navigation navigation' */

package/dist/components/core/navbar-item/NavbarItem.d.ts

@@ -1,4 +1,5 @@
 import './NavbarItem.css';
+import './navbar-item-impl.css';
 import { type NavbarItemProps } from './NavbarItem.types.js';
 export type { NavbarItemProps };
 /**
@@ -19,4 +20,4 @@ export type { NavbarItemProps };
  * section you are in is one you can return to the top of, and a reader who lands
  * on it should hear which section that is rather than meet a dead stop.
  */
-export declare function NavbarItem({ current, tone, href, icon, external, children, ...rest }: NavbarItemProps): import("react").JSX.Element;
+export declare function NavbarItem({ current, tone, href, icon, external, externalLabel, children, ...rest }: NavbarItemProps): import("react").JSX.Element;

package/dist/components/core/navbar-item/NavbarItem.js

@@ -2,17 +2,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUpRightRegularIcon } from '@deriv-com/quill-icons-web';
 import './NavbarItem.css';
+import './navbar-item-impl.css';
 import { Icon } from '../icon/Icon.js';
 import { visuallyHidden } from '../../visually-hidden.js';
 import { navbarItemDefaults, navbarItemParts } from './NavbarItem.types.js';
-/**
- * What the words become when the destination leaves the site.
- *
- * Appended to the content rather than replacing it with an `aria-label`: a label
- * replaces the words a sighted reader is looking at, and somebody using both
- * hears one thing and sees another. This keeps them the same sentence.
- */
-const OPENS_ELSEWHERE = '(opens in a new tab)';
 /**
  * One place the site has, in the bar across the top of it.
  *
@@ -31,10 +24,10 @@ const OPENS_ELSEWHERE = '(opens in a new tab)';
  * section you are in is one you can return to the top of, and a reader who lands
  * on it should hear which section that is rather than meet a dead stop.
  */
-export function NavbarItem({ current = navbarItemDefaults.current, tone = navbarItemDefaults.tone, href, icon, external = navbarItemDefaults.external, children, ...rest }) {
+export function NavbarItem({ current = navbarItemDefaults.current, tone = navbarItemDefaults.tone, href, icon, external = navbarItemDefaults.external, externalLabel = navbarItemDefaults.externalLabel, children, ...rest }) {
     return (_jsxs("a", { ...rest, href: href, className: navbarItemParts.root, "data-current": String(current), "data-tone": tone, "aria-current": current ? 'page' : undefined, 
         // Both, or neither. `target` without `rel` hands the opened document a live
         // reference back to this one; `rel` without `target` guards a navigation
         // that never leaves.
-        target: external ? '_blank' : undefined, rel: external ? 'noreferrer' : undefined, children: [icon !== undefined && icon !== null && (_jsx("span", { className: navbarItemParts.icon, children: icon })), _jsx("span", { className: navbarItemParts.label, children: children }), external && (_jsxs(_Fragment, { children: [_jsx("span", { className: navbarItemParts.external, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: _jsx(ArrowUpRightRegularIcon, {}) }) }), _jsx("span", { style: visuallyHidden, children: ` ${OPENS_ELSEWHERE}` })] }))] }));
+        target: external ? '_blank' : undefined, rel: external ? 'noreferrer' : undefined, children: [icon !== undefined && icon !== null && (_jsx("span", { className: navbarItemParts.icon, children: icon })), _jsx("span", { className: navbarItemParts.label, children: children }), external && (_jsxs(_Fragment, { children: [_jsx("span", { className: navbarItemParts.external, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: _jsx(ArrowUpRightRegularIcon, {}) }) }), _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }))] }));
 }

package/dist/components/core/navbar-item/NavbarItem.types.d.ts

@@ -9,10 +9,12 @@ export interface NavbarItemOwnProps {
     href: string;
     /** The bar's sections are quicker to tell apart by a mark than by reading them, which is rare on a marketing site and usual in an application */
     icon?: ReactNode;
+    /** What a screen reader hears after an external destination's name, since the arrow that shows it to everyone else is hidden. Translate it with the page. */
+    externalLabel?: string;
     /** Allowed: text */
     children: ReactNode;
 }
-export type NavbarItemProps = NavbarItemOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'current' | 'tone' | 'href' | 'icon' | 'external'> & ({
+export type NavbarItemProps = NavbarItemOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'current' | 'tone' | 'href' | 'icon' | 'external' | 'externalLabel'> & ({
     current?: boolean;
     external?: false;
 } | {
@@ -31,4 +33,5 @@ export declare const navbarItemDefaults: {
     readonly current: false;
     readonly tone: "default";
     readonly external: false;
+    readonly externalLabel: "(opens in a new tab)";
 };

package/dist/components/core/navbar-item/NavbarItem.types.js

@@ -7,4 +7,4 @@ export const navbarItemParts = {
     external: 'dds-navbaritem__external',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const navbarItemDefaults = { current: false, tone: 'default', external: false };
+export const navbarItemDefaults = { current: false, tone: 'default', external: false, externalLabel: '(opens in a new tab)' };

package/dist/components/core/navbar-item/navbar-item-impl.css

@@ -0,0 +1,10 @@
+/*
+ * What the contract cannot hold: a reading direction.
+ *
+ * The external mark points out of the page along the line, up and to its end. In a right-to-left
+ * line the end is on the left, so the arrow is mirrored to point there; as it ships it pointed
+ * back into the words it qualifies.
+ */
+:where([data-dds-context="marketing"]) .dds-navbaritem .dds-navbaritem__external .dds-icon:dir(rtl) {
+  scale: -1 1;
+}

package/dist/components/core/navbar-menu/navbar-menu-impl.css

@@ -34,6 +34,15 @@
   translate: -50%;
 }
 
+/*
+ * Centred in a right-to-left line too. `inset-inline-start: 50%` is the right edge there, while a
+ * translate is physical and still pulled the panel leftward — so it opened a whole panel-width to
+ * the left of where it hangs. Half its width back towards the inline start, which is rightward.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__surface:dir(rtl) {
+  translate: 50%;
+}
+
 /*
  * Above the bar it hangs from, which a contract cannot hold: an integer with no unit.
  *

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

@@ -30,6 +30,15 @@
   z-index: var(--layer-popup);
 }
 
+/*
+ * Centred in a right-to-left line too. `inset-inline-start: 50%` is the right edge there, while a
+ * translate is physical and still pulled the panel leftward — so it opened a whole panel-width to
+ * the left of where it hangs. Half its width back towards the inline start, which is rightward.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='floating'] .dds-navbarswitcher__surface:dir(rtl) {
+  translate: 50%;
+}
+
 /*
  * And in the panel it is a page rather than a panel.
  *
@@ -177,3 +186,13 @@
   block-size: 100%;
   inline-size: auto;
 }
+
+/*
+ * In the panel, the chevron points to the page that opens beside it and the back mark to the one
+ * it came from — both along the line. Mirrored in a right-to-left line, where beside is leftward.
+ * The trigger's own chevron points down and is left alone.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__chevron .dds-icon:dir(rtl),
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__back .dds-icon:dir(rtl) {
+  scale: -1 1;
+}

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

@@ -362,5 +362,5 @@ export function Pagination({ variant = paginationDefaults.variant, page = pagina
                         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 === 'compact' && (_jsx("span", { className: paginationParts.summary, children: readout(current, last) })), stepControl(current + 1, nextLabel, atEnd, _jsx(ChevronRightRegularIcon, {}))] }));
+                }) })), variant === 'compact' && (_jsx("span", { className: paginationParts.summary, dir: "ltr", children: readout(current, last) })), stepControl(current + 1, nextLabel, atEnd, _jsx(ChevronRightRegularIcon, {}))] }));
 }

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

@@ -15,3 +15,12 @@
 :where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__list:has([aria-expanded='true']) {
   overflow: visible;
 }
+
+/*
+ * The step chevrons point along the row: previous towards its start, next towards its end. A
+ * right-to-left row puts previous on the right, so both are mirrored; as they ship, previous
+ * pointed outward and next pointed back across the pages.
+ */
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step .dds-icon:dir(rtl) {
+  scale: -1 1;
+}

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

@@ -22,4 +22,4 @@ export type { PaginationDotsProps };
  * 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;
+export declare function PaginationDots({ variant, page, totalPages, onPageChange, autoplay, paused, label, itemLabel, positionLabel, }: PaginationDotsProps): import("react").JSX.Element;

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

@@ -67,7 +67,7 @@ function usePrefersLessMotion() {
  * 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, }) {
+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, positionLabel, }) {
     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);
@@ -92,11 +92,11 @@ export function PaginationDots({ variant = paginationDotsDefaults.variant, page
         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: _jsx("span", { role: "status", dir: "ltr", 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: () => {
+            return (_jsx("button", { type: "button", className: paginationDotsParts.dot, "aria-label": positionLabel?.(at, count) ?? `${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));

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

@@ -16,8 +16,10 @@ export interface PaginationDotsOwnProps {
     paused?: boolean;
     /** The name the row is announced by, as a group. Name what the positions are: 'Slides', 'Steps'. Translate it with the page. */
     label?: string;
-    /** The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first is the reason a sentence template would be better, and the reason this is not yet one. */
+    /** The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first, or writes it in its own digits, passes positionLabel instead. */
     itemLabel?: string;
+    /** Each mark's accessible name as a sentence, given its position counting from one and how many there are — for a language whose order is not the word then the number, or whose digits are not these. Wins over itemLabel where both are given. */
+    positionLabel?: (position: number, count: number) => string;
 }
 export type PaginationDotsProps = PaginationDotsOwnProps;
 /** The class each part carries. Apply these — do not retype them. */

package/dist/components/core/segmented-control/SegmentedControl.css

@@ -5,6 +5,7 @@
   align-items: stretch;
   box-sizing: border-box;
   display: flex;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-track);
   border-radius: var(--radius-pill);
@@ -39,15 +40,15 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-size="lg"] {
-  block-size: var(--size-control-lg);
+  min-block-size: var(--size-control-lg);
 }
 
 :where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-size="md"] {
-  block-size: var(--size-control-md);
+  min-block-size: var(--size-control-md);
 }
 
 :where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-size="sm"] {
-  block-size: var(--size-control-sm);
+  min-block-size: var(--size-control-sm);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/components/core/segmented-control/SegmentedControl.js

@@ -148,8 +148,14 @@ label, value, onChange, children, ...rest }) {
             setPill(null);
             return;
         }
+        /*
+          Measured from the row's inline start, which is where the pill is anchored. offsetLeft is
+          physical, so in a right-to-left row it counted from the edge the pill was not standing
+          on, and every segment's pill landed one row-width minus a segment to the right of it.
+        */
+        const rtl = getComputedStyle(root).direction === "rtl";
         setPill({
-            x: box.offsetLeft,
+            x: rtl ? box.offsetLeft + box.offsetWidth - root.clientWidth : box.offsetLeft,
             y: box.offsetTop,
             w: box.offsetWidth,
             h: box.offsetHeight,
@@ -192,9 +198,17 @@ label, value, onChange, children, ...rest }) {
         // A closed row moves nothing. The reader still reaches it and still hears why.
         if (disabled)
             return;
-        const step = KEYS[event.key];
-        if (step === undefined)
+        const keyed = KEYS[event.key];
+        if (keyed === undefined)
             return;
+        /*
+          The horizontal arrows follow the row as it is drawn. In a right-to-left row the first
+          segment is on the right, so ArrowRight goes back towards it and ArrowLeft goes on.
+        */
+        const horizontal = event.key === "ArrowRight" || event.key === "ArrowLeft";
+        const step = horizontal && typeof keyed === "number" && getComputedStyle(event.currentTarget).direction === "rtl"
+            ? -keyed
+            : keyed;
         if (segments.length === 0)
             return;
         // Before anything moves: the arrows would otherwise scroll the page, and Home and

package/dist/components/core/segmented-control-item/SegmentedControlItem.css

@@ -13,8 +13,9 @@
   outline-style: solid;
   padding-block: 0;
   position: relative;
+  text-align: center;
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
   border-radius: var(--radius-pill);
   gap: var(--space-gap-xs);
   min-block-size: var(--size-target-min);

package/dist/components/core/select/Select.js

@@ -96,7 +96,7 @@ function words(node) {
  * reader tabbing out of a control has said they are done with it.
  */
 export function Select(props) {
-    const { size = selectDefaults.size, status = selectDefaults.status, fixed = selectDefaults.fixed, label, labelTooltip, placeholder, helperText, value, defaultValue, onChange, open, defaultOpen, onOpenChange, searchable = selectDefaults.searchable, emptyLabel, required = selectDefaults.required, requiredMark = selectDefaults.requiredMark, optional = selectDefaults.optional, statusMessage, children, id, ...rest } = props;
+    const { size = selectDefaults.size, status = selectDefaults.status, fixed = selectDefaults.fixed, label, labelTooltip, placeholder, helperText, value, defaultValue, onChange, open, defaultOpen, onOpenChange, searchable = selectDefaults.searchable, emptyLabel, required = selectDefaults.required, requiredMark = selectDefaults.requiredMark, optional = selectDefaults.optional, requiredLabel = selectDefaults.requiredLabel, optionalLabel = selectDefaults.optionalLabel, labelTooltipLabel, searchLabel, statusMessage, children, id, ...rest } = props;
     const fallbackId = useId();
     const rootId = id ?? fallbackId;
     const labelId = `${rootId}-label`;
@@ -473,7 +473,7 @@ export function Select(props) {
            being read for the child ids below and then applied to nothing, so `<Select id="country">`
            put "country" on no element at all and any anchor or `getElementById` naming it found
            nothing. */
-        id: rootId, "data-size": size, "data-status": status, "data-fixed": String(fixed), children: [_jsxs("div", { className: selectParts['label-row'], children: [_jsxs("span", { className: selectParts.label, id: labelId, children: [label, required ? (_jsx("span", { className: selectParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : 'required' })) : null, optional ? _jsx("span", { className: selectParts['optional-mark'], children: "optional" }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: selectParts['label-tooltip'], "aria-label": `About ${label}`, children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { className: selectParts.control, ref: box, children: [_jsxs("button", { ref: trigger, type: "button", className: selectParts.field, role: "combobox", "aria-labelledby": labelId, "aria-controls": listId, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-activedescendant": expanded && activeIndex !== -1 ? rowId(activeIndex) : undefined, "aria-invalid": status === 'error' || undefined, "aria-required": required || undefined, "aria-busy": checking || undefined, "aria-disabled": fixed || undefined, "aria-describedby": messageId, onClick: fixed ? undefined : () => (expanded ? setOpen(false) : openAt(onTheAnswer())), onKeyDown: fixed ? undefined : onKeyDown, ...rest, children: [_jsxs("span", { className: selectParts.answer, children: [taken?.props.leadingIcon, _jsx("span", { className: selectParts.value, "data-placeholder": taken === undefined || undefined, children: taken?.props.children ?? placeholder })] }), _jsx("span", { className: selectParts['trailing-icon'], "aria-hidden": "true", children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(ChevronDownRegularIcon, { style: expanded ? { rotate: '180deg' } : undefined }) }) })] }), expanded ? (_jsxs("div", { className: selectParts.popup, children: [searchable ? (
+        id: rootId, "data-size": size, "data-status": status, "data-fixed": String(fixed), children: [_jsxs("div", { className: selectParts['label-row'], children: [_jsxs("span", { className: selectParts.label, id: labelId, children: [label, required ? (_jsx("span", { className: selectParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : requiredLabel })) : null, optional ? _jsx("span", { className: selectParts['optional-mark'], children: optionalLabel }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: selectParts['label-tooltip'], "aria-label": labelTooltipLabel ?? `About ${label}`, children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { className: selectParts.control, ref: box, children: [_jsxs("button", { ref: trigger, type: "button", className: selectParts.field, role: "combobox", "aria-labelledby": labelId, "aria-controls": listId, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-activedescendant": expanded && activeIndex !== -1 ? rowId(activeIndex) : undefined, "aria-invalid": status === 'error' || undefined, "aria-required": required || undefined, "aria-busy": checking || undefined, "aria-disabled": fixed || undefined, "aria-describedby": messageId, onClick: fixed ? undefined : () => (expanded ? setOpen(false) : openAt(onTheAnswer())), onKeyDown: fixed ? undefined : onKeyDown, ...rest, children: [_jsxs("span", { className: selectParts.answer, children: [taken?.props.leadingIcon, _jsx("span", { className: selectParts.value, "data-placeholder": taken === undefined || undefined, children: taken?.props.children ?? placeholder })] }), _jsx("span", { className: selectParts['trailing-icon'], "aria-hidden": "true", children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(ChevronDownRegularIcon, { style: expanded ? { rotate: '180deg' } : undefined }) }) })] }), expanded ? (_jsxs("div", { className: selectParts.popup, children: [searchable ? (
                             /* The field the answers are narrowed with, above them rather than in the box — a
                                <ul> may hold options and little else, so this could not live in the list, and the
                                box below is a button, which nothing can be typed into. */
@@ -495,7 +495,7 @@ export function Select(props) {
                                        arrives at without being told what it is for. Clipped rather than drawn, which
                                        is SearchInput's own default — the placeholder below carries the words for an
                                        eye. */
-                                    label: `Search ${label}`, placeholder: `Search ${label}`, clearLabel: "Clear search", value: query, onChange: narrow, "aria-controls": listId, "aria-activedescendant": activeIndex === -1 ? undefined : rowId(activeIndex), onKeyDown: onSearchKeyDown }) })) : null, _jsx("ul", { className: selectParts.listbox, id: listId, role: "listbox", "aria-labelledby": labelId, children: visible.map((option, index) => cloneElement(option, {
+                                    label: searchLabel ?? `Search ${label}`, placeholder: searchLabel ?? `Search ${label}`, clearLabel: "Clear search", value: query, onChange: narrow, "aria-controls": listId, "aria-activedescendant": activeIndex === -1 ? undefined : rowId(activeIndex), onKeyDown: onSearchKeyDown }) })) : null, _jsx("ul", { className: selectParts.listbox, id: listId, role: "listbox", "aria-labelledby": labelId, children: visible.map((option, index) => cloneElement(option, {
                                     key: option.props.value ?? index,
                                     id: rowId(index),
                                     /* Marketing's Option is drawn at two steps where this control has three, so a