@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/core/illustration-card/IllustrationCard.d.ts

@@ -0,0 +1,22 @@
+import './IllustrationCard.css';
+import './illustration-card-impl.css';
+import { type IllustrationCardProps } from './IllustrationCard.types.js';
+export type { IllustrationCardProps };
+/**
+ * A pane of glass holding a picture of the product, in one of three shapes.
+ *
+ * The shape and the surface are this component's and nobody else's — that is the whole reason it
+ * exists. Every picture of this kind across a site is four by three, square or three by four, and is
+ * the same glass, because those are the two things each page would otherwise decide for itself and
+ * decide differently. What the pane shows is the page's.
+ *
+ * Everything inside is illustrative. The pane is one image to assistive technology, described by
+ * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
+ * product, and none of them can be focused, pressed or typed into.
+ *
+ * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
+ * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
+ * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
+ * size and at no other time.
+ */
+export declare function IllustrationCard({ ratio, label, children, ...rest }: IllustrationCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import './IllustrationCard.css';
+import './illustration-card-impl.css';
+import { illustrationCardDefaults, illustrationCardParts, } from './IllustrationCard.types.js';
+/**
+ * A pane of glass holding a picture of the product, in one of three shapes.
+ *
+ * The shape and the surface are this component's and nobody else's — that is the whole reason it
+ * exists. Every picture of this kind across a site is four by three, square or three by four, and is
+ * the same glass, because those are the two things each page would otherwise decide for itself and
+ * decide differently. What the pane shows is the page's.
+ *
+ * Everything inside is illustrative. The pane is one image to assistive technology, described by
+ * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
+ * product, and none of them can be focused, pressed or typed into.
+ *
+ * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
+ * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
+ * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
+ * size and at no other time.
+ */
+export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label, children, ...rest }) {
+    const pane = useRef(null);
+    const content = useRef(null);
+    useLayoutEffect(() => {
+        const root = pane.current;
+        const inner = content.current;
+        if (root === null || inner === null || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const fit = () => {
+            const style = getComputedStyle(root);
+            const across = root.clientWidth - Number.parseFloat(style.paddingInlineStart) - Number.parseFloat(style.paddingInlineEnd);
+            const down = root.clientHeight - Number.parseFloat(style.paddingBlockStart) - Number.parseFloat(style.paddingBlockEnd);
+            if (across <= 0 || down <= 0)
+                return;
+            // Laid out unscaled at the pane's own width, to see how much room the UI wants there — down,
+            // and across, since a line that cannot wrap (a large figure) overflows sideways.
+            inner.style.transform = '';
+            inner.style.inlineSize = `${across}px`;
+            const tall = inner.scrollHeight;
+            const wide = inner.scrollWidth;
+            const scale = Math.min(1, down / tall, across / wide);
+            if (scale >= 1) {
+                inner.style.inlineSize = '';
+                return;
+            }
+            // Scaled, the UI is narrower than the pane too; laying it out wider by the same factor gives
+            // the width back, so the picture fills the pane across as well as down. Wider, it can only
+            // wrap less and so be shorter, which keeps it inside the pane.
+            inner.style.inlineSize = `${across / scale}px`;
+            inner.style.transformOrigin = style.direction === 'rtl' ? 'top right' : 'top left';
+            inner.style.transform = `scale(${scale})`;
+        };
+        // Fitted again only when something can have changed: the pane's size, the size of what it
+        // holds, or the typeface arriving — before it does, the UI is measured in a fallback face of a
+        // different size. Batched to one fit a frame; scaling is a transform and does not resize what
+        // is observed, so a fit does not set off another.
+        let queued = 0;
+        const refit = () => {
+            if (queued !== 0)
+                return;
+            queued = requestAnimationFrame(() => {
+                queued = 0;
+                fit();
+            });
+        };
+        const watch = new ResizeObserver(refit);
+        watch.observe(root);
+        for (const child of Array.from(inner.children))
+            watch.observe(child);
+        void document.fonts?.ready.then(refit);
+        fit();
+        return () => {
+            watch.disconnect();
+            if (queued !== 0)
+                cancelAnimationFrame(queued);
+        };
+    }, []);
+    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/IllustrationCard.types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IllustrationCardOwnProps {
+    /**
+     * `landscape` — Four by three, and the default. For a panel beside words in a wide section
+     * `square` — One by one. For a grid of panels, or a column no wider than it is tall
+     * `upright` — Three by four. For a phone, or a narrow column beside a tall run of words
+     */
+    ratio?: 'landscape' | 'square' | 'upright';
+    /** Always. What the picture shows, in a sentence — "Trade ticket: buy Gold to rise over 5 minutes, staking 10 USD". The pane is one image to assistive technology and this is its whole description; nothing inside it is read out on its own */
+    label: string;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type IllustrationCardProps = IllustrationCardOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationCardParts: {
+    readonly root: "dds-illustrationcard";
+    readonly content: "dds-illustrationcard__content";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationCardDefaults: {
+    readonly ratio: "landscape";
+};

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

@@ -0,0 +1,8 @@
+// GENERATED from illustration-card.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationCardParts = {
+    root: 'dds-illustrationcard',
+    content: 'dds-illustrationcard__content',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationCardDefaults = { ratio: 'landscape' };

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

@@ -0,0 +1,47 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The glass: whatever is behind the pane, blurred. The fill is bound in the contract —
+ * color.bg.surface-glass — and the blur is here because `blur()` is a function no binding can
+ * name, the same division navbar-material.css makes. size.backdrop-blur is enough that what is
+ * behind stops reading as detail, so the UI on the pane stays legible.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard {
+  -webkit-backdrop-filter: blur(var(--size-backdrop-blur));
+  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
+ * scales the whole of it down to fit, as a picture would be; until that has run — on a server
+ * render — whatever does not fit is clipped at the pane's edge.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > * {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,41 @@
+/* GENERATED from illustrationscene.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene {
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  isolation: isolate;
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--radius-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationscene__image {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+  background-color: var(--color-bg-surface);
+}
+
+: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="center"] {
+  justify-items: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="landscape"] {
+  aspect-ratio: var(--aspect-landscape);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="square"] {
+  aspect-ratio: var(--aspect-square);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="upright"] {
+  aspect-ratio: var(--aspect-upright);
+}
+

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

@@ -0,0 +1,14 @@
+import './IllustrationScene.css';
+import './illustration-scene-impl.css';
+import { type IllustrationSceneProps } from './IllustrationScene.types.js';
+export type { IllustrationSceneProps };
+/**
+ * A photograph with an IllustrationCard laid over it, in one of three shapes.
+ *
+ * The scene owns how the two meet — the shape, the card's share of the frame, where it sits — so
+ * every picture of the product in use is composed the same way across a site. The photograph is
+ * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export declare function IllustrationScene({ ratio, placement, src, alt, children, ...rest }: IllustrationSceneProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IllustrationScene.css';
+import './illustration-scene-impl.css';
+import { illustrationSceneDefaults, illustrationSceneParts, } from './IllustrationScene.types.js';
+/**
+ * A photograph with an IllustrationCard laid over it, in one of three shapes.
+ *
+ * The scene owns how the two meet — the shape, the card's share of the frame, where it sits — so
+ * every picture of the product in use is composed the same way across a site. The photograph is
+ * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export function IllustrationScene({ ratio = illustrationSceneDefaults.ratio, placement = illustrationSceneDefaults.placement, src, alt = illustrationSceneDefaults.alt, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: illustrationSceneParts.root, "data-ratio": ratio, "data-placement": placement, children: [_jsx("img", { className: illustrationSceneParts.image, src: src, alt: alt }), children] }));
+}

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

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IllustrationSceneOwnProps {
+    /**
+     * `landscape` — Four by three. A scene beside words in a wide section; the card takes a little under half the width
+     * `square` — One by one, and the default — the shape most such scenes are drawn in. The card takes a little over half the width
+     * `upright` — Three by four. A scene on a phone or in a narrow column; the card takes most of the width
+     */
+    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
+     * `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' | '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 */
+    alt?: string;
+    /** Allowed: IllustrationCard */
+    children: ReactNode;
+}
+export type IllustrationSceneProps = IllustrationSceneOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'placement' | 'src' | 'alt'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationSceneParts: {
+    readonly root: "dds-illustrationscene";
+    readonly image: "dds-illustrationscene__image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationSceneDefaults: {
+    readonly ratio: "square";
+    readonly placement: "center";
+    readonly alt: "";
+};

package/dist/components/core/illustration-scene/IllustrationScene.types.js

@@ -0,0 +1,8 @@
+// GENERATED from illustration-scene.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationSceneParts = {
+    root: 'dds-illustrationscene',
+    image: 'dds-illustrationscene__image',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationSceneDefaults = { ratio: 'square', placement: 'center', alt: '' };

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

@@ -0,0 +1,46 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The photograph fills the frame behind everything; the card sits in the frame's one grid cell
+ * over it. Both share the cell, so the card is placed by the grid's own alignment — centred, or
+ * to one edge — and the photograph is laid underneath by coming first.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene > * {
+  grid-area: 1 / 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationscene__image {
+  align-self: stretch;
+  justify-self: stretch;
+  display: block;
+}
+
+/*
+ * 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 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%;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio='upright'] > .dds-illustrationcard {
+  inline-size: 78%;
+}

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;