@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/core/background/shader.js

@@ -0,0 +1,307 @@
+'use client';
+/**
+ * What every pattern's shader is given. Positions are in the band's own terms: `uv` runs 0 to 1 left
+ * to right and top to bottom, `px` is the same point in CSS pixels, and the pointer is in `uv`.
+ */
+const PRELUDE = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+uniform vec2 u_size;      // the band, in CSS pixels
+uniform float u_scale;    // device pixels to the CSS pixel, as drawn
+uniform float u_time;     // seconds of motion so far
+uniform vec2 u_pointer;   // where the light is, eased after the pointer, in uv
+uniform float u_hover;    // 0 to 1, how present the pointer is, eased
+uniform float u_strength; // how strongly the pattern is painted on this ground
+uniform float u_grain;    // how much grain is laid over it
+uniform float u_pitch;    // a length the pattern repeats at, in CSS pixels, where it has one
+uniform float u_hairline; // a hairline's width, in CSS pixels
+uniform float u_shade;    // how far a pattern's deepest ink is held back, where it has one
+uniform vec3 u_ink0;      // the ground
+uniform vec3 u_ink1;
+uniform vec3 u_ink2;
+uniform vec3 u_ink3;
+uniform vec3 u_ink4;
+uniform vec3 u_ink5;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+// Value noise with a quintic fade, smooth to the second derivative so no crease shows in a fold.
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
+}
+
+// Four octaves, each turned against the last, so the layers never line up into a grid. A fifth
+// added detail too fine to see under the grain, at a fifth more of the cost.
+float fbm(vec2 p) {
+  float sum = 0.0;
+  float amp = 0.5;
+  mat2 turn = mat2(0.8, 0.6, -0.6, 0.8);
+  for (int k = 0; k < 4; k++) {
+    sum += amp * noise(p);
+    p = turn * p * 2.03 + 17.1;
+    amp *= 0.5;
+  }
+  return sum;
+}
+
+// A grain that changes every frame, and the dither that keeps a long gradient from banding.
+vec3 grain(vec3 colour, vec2 frag) {
+  float n = hash(frag + fract(u_time * 7.13) * 91.7) - 0.5;
+  return colour + n * u_grain;
+}
+`;
+const VERTEX = `
+attribute vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
+`;
+/** A computed colour as linear-ish RGB from 0 to 1. Accepts rgb(), rgba() and color(srgb …). */
+function channels(value) {
+    const numbers = value.match(/-?[\d.]+/g)?.map(Number) ?? [];
+    if (value.startsWith('color('))
+        return [numbers[0] ?? 0, numbers[1] ?? 0, numbers[2] ?? 0];
+    return [(numbers[0] ?? 0) / 255, (numbers[1] ?? 0) / 255, (numbers[2] ?? 0) / 255];
+}
+/** A custom property's colour, as the browser resolves it on this element. */
+function ink(element, property) {
+    const before = element.style.color;
+    element.style.color = `var(${property})`;
+    const resolved = getComputedStyle(element).color;
+    element.style.color = before;
+    return channels(resolved);
+}
+function numberOf(element, property, fallback) {
+    const parsed = Number.parseFloat(getComputedStyle(element).getPropertyValue(property));
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function milliseconds(value, fallback) {
+    const amount = Number.parseFloat(value);
+    if (!Number.isFinite(amount))
+        return fallback;
+    return /ms$/i.test(value.trim()) ? amount : amount * 1000;
+}
+function compile(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (shader === null)
+        return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        // A pattern that does not compile falls back to the stylesheet; say why, once, for whoever is
+        // writing the shader.
+        console.warn('Background shader:', gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+export function shader(root, canvas, options) {
+    const nothing = { destroy: () => { } };
+    const gl = canvas.getContext('webgl', { alpha: false, antialias: false, premultipliedAlpha: false, powerPreference: 'low-power' });
+    if (gl === null)
+        return nothing;
+    const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
+    const fragment = compile(gl, gl.FRAGMENT_SHADER, PRELUDE + options.fragment);
+    if (vertex === null || fragment === null)
+        return nothing;
+    const program = gl.createProgram();
+    if (program === null)
+        return nothing;
+    gl.attachShader(program, vertex);
+    gl.attachShader(program, fragment);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+        return nothing;
+    gl.useProgram(program);
+    // One triangle larger than the screen: every pixel of the band, one draw.
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const position = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    const at = (name) => gl.getUniformLocation(program, name);
+    const u = {
+        size: at('u_size'),
+        scale: at('u_scale'),
+        time: at('u_time'),
+        pointer: at('u_pointer'),
+        hover: at('u_hover'),
+        strength: at('u_strength'),
+        grain: at('u_grain'),
+        pitch: at('u_pitch'),
+        hairline: at('u_hairline'),
+        shade: at('u_shade'),
+        inks: [0, 1, 2, 3, 4, 5].map((k) => at(`u_ink${k}`)),
+    };
+    const still = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const moving = options.animated && !still;
+    const answering = options.interactive && !still;
+    /** Everything read from the stylesheet: the inks, the strengths, the measures, the timing. */
+    let follow = 500;
+    const read = () => {
+        options.inks.forEach((property, k) => {
+            const location = u.inks[k];
+            if (location !== undefined)
+                gl.uniform3fv(location, ink(root, property));
+        });
+        gl.uniform1f(u.strength, numberOf(root, '--dds-background-gl-strength', 1));
+        gl.uniform1f(u.grain, numberOf(root, '--dds-background-gl-grain', 0.04));
+        gl.uniform1f(u.pitch, numberOf(root, '--dds-background-gl-pitch', 96));
+        gl.uniform1f(u.hairline, numberOf(root, '--dds-background-gl-hairline', 1));
+        // Read off the mesh's own element, which is where the stylesheet keeps it per tone.
+        const mesh = root.querySelector('.dds-background__mesh') ?? root;
+        gl.uniform1f(u.shade, numberOf(mesh, '--dds-background-mesh-shade', 1));
+        gl.uniform1f(u.shade, numberOf(root, '--dds-background-mesh-shade', 1));
+        follow = milliseconds(getComputedStyle(root).getPropertyValue('--motion-duration-trail'), 500);
+    };
+    let width = 0;
+    let height = 0;
+    const resize = () => {
+        const box = root.getBoundingClientRect();
+        width = Math.max(1, box.width);
+        height = Math.max(1, box.height);
+        const density = Math.min(window.devicePixelRatio || 1, options.density);
+        canvas.width = Math.round(width * density);
+        canvas.height = Math.round(height * density);
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.uniform2f(u.size, width, height);
+        gl.uniform1f(u.scale, density);
+    };
+    // Where the light is and where it is going. It rests a little above the middle of the band's foot.
+    const rest = { x: 0.5, y: 0.85 };
+    const light = { ...rest, hover: 0 };
+    const target = { ...rest, hover: 0 };
+    let time = 0;
+    let last = 0;
+    let frame = 0;
+    let visible = true;
+    let drawn = false;
+    let lost = false;
+    let skip = false;
+    const draw = (now) => {
+        frame = 0;
+        if (lost)
+            return;
+        const step = last === 0 ? 0 : Math.min(0.1, (now - last) / 1000);
+        last = now;
+        // At rest it moves only if asked to; under the pointer it moves either way — a band asked to
+        // hold still flows while somebody is over it, and stops where it is when they leave.
+        const flowing = moving || (answering && target.hover > 0);
+        if (flowing)
+            time = (time + step) % 3600;
+        // Ease the light after its target: most of the gap closed within the trail duration.
+        const ease = step === 0 ? 1 : 1 - Math.exp((-step * 1000 * 3) / follow);
+        light.x += (target.x - light.x) * ease;
+        light.y += (target.y - light.y) * ease;
+        light.hover += (target.hover - light.hover) * ease;
+        const settling = Math.abs(target.x - light.x) + Math.abs(target.y - light.y) + Math.abs(target.hover - light.hover) > 0.001;
+        gl.uniform1f(u.time, time);
+        gl.uniform2f(u.pointer, light.x, light.y);
+        gl.uniform1f(u.hover, light.hover);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        if (!drawn) {
+            drawn = true;
+            root.dataset['shaded'] = 'true';
+        }
+        // Keep going while there is something to show: the pattern moving, or the light still arriving.
+        if (visible && (flowing || settling))
+            schedule(settling);
+    };
+    // At rest, every other frame; while the light is arriving, every frame.
+    const schedule = (urgent) => {
+        if (frame !== 0)
+            return;
+        frame = requestAnimationFrame((now) => {
+            skip = !skip;
+            if (!urgent && skip) {
+                frame = 0;
+                schedule(false);
+                return;
+            }
+            draw(now);
+        });
+    };
+    read();
+    resize();
+    schedule(true);
+    const sizes = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => {
+        resize();
+        schedule(true);
+    });
+    sizes?.observe(root);
+    const sight = typeof IntersectionObserver === 'undefined'
+        ? null
+        : new IntersectionObserver(([entry]) => {
+            visible = entry?.isIntersecting ?? true;
+            last = 0;
+            if (visible)
+                schedule(true);
+        });
+    sight?.observe(root);
+    // A tone or a theme that changes under the band changes its inks.
+    const restyle = new MutationObserver(() => {
+        read();
+        schedule(true);
+    });
+    restyle.observe(root, { attributes: true, attributeFilter: ['data-tone'] });
+    const themed = root.closest('[data-theme]');
+    if (themed !== null)
+        restyle.observe(themed, { attributes: true, attributeFilter: ['data-theme'] });
+    const host = options.host ?? root;
+    const move = (event) => {
+        if (event.pointerType === 'touch')
+            return;
+        const box = root.getBoundingClientRect();
+        target.x = (event.clientX - box.left) / box.width;
+        target.y = (event.clientY - box.top) / box.height;
+        target.hover = 1;
+        schedule(true);
+    };
+    const leave = () => {
+        target.x = rest.x;
+        target.y = rest.y;
+        target.hover = 0;
+        schedule(true);
+    };
+    if (answering) {
+        host.addEventListener('pointermove', move, { passive: true });
+        host.addEventListener('pointerleave', leave, { passive: true });
+    }
+    const onLost = (event) => {
+        event.preventDefault();
+        lost = true;
+        delete root.dataset['shaded'];
+    };
+    canvas.addEventListener('webglcontextlost', onLost);
+    return {
+        destroy: () => {
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+            sizes?.disconnect();
+            sight?.disconnect();
+            restyle.disconnect();
+            host.removeEventListener('pointermove', move);
+            host.removeEventListener('pointerleave', leave);
+            canvas.removeEventListener('webglcontextlost', onLost);
+            delete root.dataset['shaded'];
+            gl.deleteProgram(program);
+            gl.deleteShader(vertex);
+            gl.deleteShader(fragment);
+            gl.deleteBuffer(buffer);
+        },
+    };
+}

package/dist/components/core/background/use-halftone.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+/**
+ * A halftone mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ *
+ * Shared by Background and by the blocks that can stand on the same pattern, so there is one
+ * painter and one set of rules about when it draws. Returns the two refs to place; `enabled` false
+ * mounts nothing, which is a block without the option asked for.
+ */
+export declare function useHalftone<Band extends HTMLElement>(enabled: boolean, interactive: boolean, 
+/** Whether the glow drifts on its own while nothing is happening. */
+animated: boolean, 
+/** Anything whose change should re-read the tokens — a tone that changes the ink. */
+key?: string, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent?: boolean): [RefObject<Band | null>, RefObject<HTMLCanvasElement | null>];

package/dist/components/core/background/use-halftone.js

@@ -0,0 +1,27 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { halftone } from './halftone.js';
+/**
+ * A halftone mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ *
+ * Shared by Background and by the blocks that can stand on the same pattern, so there is one
+ * painter and one set of rules about when it draws. Returns the two refs to place; `enabled` false
+ * mounts nothing, which is a block without the option asked for.
+ */
+export function useHalftone(enabled, interactive, 
+/** Whether the glow drifts on its own while nothing is happening. */
+animated, 
+/** Anything whose change should re-read the tokens — a tone that changes the ink. */
+key, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent = false) {
+    const band = useRef(null);
+    const canvas = useRef(null);
+    useEffect(() => {
+        if (!enabled || band.current === null || canvas.current === null)
+            return undefined;
+        const host = onParent ? (band.current.parentElement ?? undefined) : undefined;
+        return halftone(band.current, canvas.current, { interactive, animated, host }).destroy;
+    }, [enabled, interactive, animated, key, onParent]);
+    return [band, canvas];
+}

package/dist/components/core/background/use-offscreen.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+/**
+ * Whether a band is off screen, written onto it as `data-offscreen` so the stylesheet can pause
+ * the motion it runs at rest. A pattern the stylesheet animates repaints the band each frame, and
+ * nobody sees a band move that is not on screen; the halftone pauses itself the same way.
+ *
+ * `enabled` false observes nothing — a pattern that does not move at rest, or the halftone, whose
+ * painter has its own observer.
+ */
+export declare function useOffscreen(band: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/components/core/background/use-offscreen.js

@@ -0,0 +1,30 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Whether a band is off screen, written onto it as `data-offscreen` so the stylesheet can pause
+ * the motion it runs at rest. A pattern the stylesheet animates repaints the band each frame, and
+ * nobody sees a band move that is not on screen; the halftone pauses itself the same way.
+ *
+ * `enabled` false observes nothing — a pattern that does not move at rest, or the halftone, whose
+ * painter has its own observer.
+ */
+export function useOffscreen(band, enabled) {
+    useEffect(() => {
+        const root = band.current;
+        if (!enabled || root === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const sight = new IntersectionObserver(([entry]) => {
+            if (entry === undefined)
+                return;
+            if (entry.isIntersecting)
+                delete root.dataset['offscreen'];
+            else
+                root.dataset['offscreen'] = 'true';
+        });
+        sight.observe(root);
+        return () => {
+            sight.disconnect();
+            delete root.dataset['offscreen'];
+        };
+    }, [band, enabled]);
+}

package/dist/components/core/background/use-shader.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+import { type ShadedPattern } from './patterns.js';
+/**
+ * A shaded pattern mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ * `pattern` undefined mounts nothing — the halftone, which has its own painter.
+ */
+export declare function useShader<Band extends HTMLElement>(band: RefObject<Band | null>, pattern: ShadedPattern | undefined, interactive: boolean, animated: boolean, 
+/** Anything whose change should re-read the inks — a tone. */
+key?: string, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent?: boolean): RefObject<HTMLCanvasElement | null>;

package/dist/components/core/background/use-shader.js

@@ -0,0 +1,25 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { SHADERS } from './patterns.js';
+import { shader } from './shader.js';
+/** The inks every shaded pattern reads, ground first; the stylesheet sets them per pattern and tone. */
+const INKS = [0, 1, 2, 3, 4, 5].map((k) => `--dds-background-gl-ink${k}`);
+/**
+ * A shaded pattern mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ * `pattern` undefined mounts nothing — the halftone, which has its own painter.
+ */
+export function useShader(band, pattern, interactive, animated, 
+/** Anything whose change should re-read the inks — a tone. */
+key, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent = false) {
+    const canvas = useRef(null);
+    useEffect(() => {
+        if (pattern === undefined || band.current === null || canvas.current === null)
+            return undefined;
+        const host = onParent ? (band.current.parentElement ?? undefined) : undefined;
+        const { fragment, density } = SHADERS[pattern];
+        return shader(band.current, canvas.current, { fragment, density, inks: INKS, interactive, animated, host }).destroy;
+    }, [band, pattern, interactive, animated, key, onParent]);
+    return canvas;
+}

package/dist/components/core/background/use-spotlight.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+/**
+ * The pointer's light on a pattern the stylesheet paints: where the pointer is, written onto the
+ * band as two custom properties the stylesheet centres its light on — a brighter copy of the grid
+ * or the rings, the aurora's trailing pool — the same place as a lean from the middle, which the
+ * mesh's pools follow, and whether it is over the band.
+ *
+ * Events only record the pointer; the position is written once a frame, so a fast mouse costs one
+ * style write a frame rather than one per event. Nothing runs while the pointer is elsewhere. A
+ * touch has no hover to follow, so it lights nothing, and `enabled` false listens for nothing.
+ */
+export declare function useSpotlight(band: RefObject<HTMLElement | null>, enabled: boolean, 
+/** Listen on the band's parent: a Background used as a layer under a block's content. */
+onParent?: boolean): void;

package/dist/components/core/background/use-spotlight.js

@@ -0,0 +1,73 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * The pointer's light on a pattern the stylesheet paints: where the pointer is, written onto the
+ * band as two custom properties the stylesheet centres its light on — a brighter copy of the grid
+ * or the rings, the aurora's trailing pool — the same place as a lean from the middle, which the
+ * mesh's pools follow, and whether it is over the band.
+ *
+ * Events only record the pointer; the position is written once a frame, so a fast mouse costs one
+ * style write a frame rather than one per event. Nothing runs while the pointer is elsewhere. A
+ * touch has no hover to follow, so it lights nothing, and `enabled` false listens for nothing.
+ */
+export function useSpotlight(band, enabled, 
+/** Listen on the band's parent: a Background used as a layer under a block's content. */
+onParent = false) {
+    useEffect(() => {
+        const root = band.current;
+        if (!enabled || root === null)
+            return undefined;
+        // A layer takes no pointer events and the content covers it, so the pointer is listened for on
+        // the band around it. The layer fills that band, so positions measured against it agree.
+        const host = onParent ? (root.parentElement ?? root) : root;
+        let frame = 0;
+        let clientX = 0;
+        let clientY = 0;
+        const write = () => {
+            frame = 0;
+            const box = root.getBoundingClientRect();
+            root.style.setProperty('--dds-background-spot-x', `${clientX - box.left}px`);
+            root.style.setProperty('--dds-background-spot-y', `${clientY - box.top}px`);
+            // And as a lean, -1 to 1 each way from the band's middle, for the mesh's pools to follow by
+            // their depth: CSS cannot divide one length by another to get there itself.
+            root.style.setProperty('--dds-background-lean-x', String(((clientX - box.left) / box.width) * 2 - 1));
+            root.style.setProperty('--dds-background-lean-y', String(((clientY - box.top) / box.height) * 2 - 1));
+        };
+        const move = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            clientX = event.clientX;
+            clientY = event.clientY;
+            if (root.dataset['spotlit'] !== 'true') {
+                // Arriving: place the light under the pointer before lighting it, and let the browser
+                // take that position in — reading the aurora pool's computed transform does — so what
+                // fades in is already where the pointer is, rather than easing over from where it last
+                // was. Unlit, the pool does not trail, so the move is instant.
+                if (frame !== 0)
+                    cancelAnimationFrame(frame);
+                frame = 0;
+                write();
+                void getComputedStyle(root, '::after').transform;
+                root.dataset['spotlit'] = 'true';
+                return;
+            }
+            if (frame === 0)
+                frame = requestAnimationFrame(write);
+        };
+        const leave = () => {
+            delete root.dataset['spotlit'];
+            // The mesh's pools ease back to where they rest.
+            root.style.removeProperty('--dds-background-lean-x');
+            root.style.removeProperty('--dds-background-lean-y');
+        };
+        host.addEventListener('pointermove', move, { passive: true });
+        host.addEventListener('pointerleave', leave, { passive: true });
+        return () => {
+            host.removeEventListener('pointermove', move);
+            host.removeEventListener('pointerleave', leave);
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+            delete root.dataset['spotlit'];
+        };
+    }, [band, enabled, onParent]);
+}

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.css

@@ -0,0 +1,40 @@
+/* GENERATED from illustrationcard.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard {
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  text-align: start;
+  background-color: var(--color-bg-surface-glass);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-surface);
+  border-width: var(--border-width-hairline);
+  color: var(--color-fg-default);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-block-size: 0;
+  user-select: none;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="landscape"] {
+  aspect-ratio: var(--aspect-landscape);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="square"] {
+  aspect-ratio: var(--aspect-square);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="upright"] {
+  aspect-ratio: var(--aspect-upright);
+}
+