@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/tiers/tiers-impl.css

@@ -0,0 +1,185 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ *
+ * The section has no motion of its own beyond the arrival every block shares, which block-reveal.css
+ * states once and turns off under reduced motion. Nothing here animates.
+ */
+
+/*
+ * The header and the way on start on a phone and are centred once the band is wide enough.
+ *
+ * PageHeader's rule and FeatureCards' copy of it: centred text starts every line at a different
+ * edge, which costs little across a wide measure and a great deal across a narrow one. The header
+ * and the line under it are capped narrower than the column, so `margin-inline: auto` is what
+ * centres those boxes rather than their words inside a box left at the start edge.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__footer {
+    justify-content: center;
+  }
+}
+
+/*
+ * One column on a phone, two from the fold, and at full width one row holding every tier.
+ *
+ * `minmax(0, 1fr)` rather than `1fr`, so a long unbroken word in a benefit shrinks to the column
+ * instead of pushing the row past the page. At full width the row is as many columns as there are
+ * tiers — two, three, or four, the most this draws — read from the markup with `:has()`, the way
+ * FeatureCards counts its cards, so the ladder is always one row and the track through the medals
+ * always has every medal on it. Where `:has()` is not supported every count takes four columns: a
+ * shorter ladder leaves the end of the row empty, and still reads.
+ */
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list:has(> :nth-child(3):last-child) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list:has(> :nth-child(2):last-child) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/*
+ * A tier starts at the edge on a phone and is centred from the fold.
+ *
+ * On a phone the medal, the name and the card all start where the heading above them starts, and
+ * the name and its stage share a line — the reference design's narrow arrangement, which keeps a
+ * column of four tiers from running to four screens. From the fold each tier is a column of its
+ * own, centred under its medal, with the stage under the name.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier {
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row {
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__heading {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+
+/*
+ * From the fold, the tiers in a row share their rows: the medals on one line, the names on the
+ * next, the cards level, and the qualifications under them starting on one line.
+ *
+ * Each tier spans four of the list's rows and lays its parts on them as a subgrid, so the card row
+ * is as tall as the tallest card in it and every card stretches to it. Growing the card to fill the
+ * tier instead made the entry tier's card — the one with no qualification under it — the tallest in
+ * the row, by exactly the qualification it does not have. The tier keeps its own gap between its
+ * parts; the list's gutter is still what separates one row of tiers from the next.
+ *
+ * Where subgrid is not supported the tier stays a column: the cards end ragged, and still read.
+ */
+@container (min-width: 48rem) {
+  @supports (grid-template-rows: subgrid) {
+    :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier {
+      display: grid;
+      grid-row: span 4;
+      grid-template-rows: subgrid;
+    }
+  }
+}
+
+/*
+ * The track through the medals, at full width only.
+ *
+ * Each tier draws its own two halves, either side of its medal, and the row they sit in reaches
+ * half a gutter past the tier at each end — so one tier's outgoing half meets the next one's
+ * incoming half in the middle of the gutter, and the rule reads as one line through every medal
+ * rather than a dash under each. Below this width the tiers are stacked or in two columns, and a
+ * line would join a medal to nothing.
+ *
+ * The first tier's incoming half and the last one's outgoing half are kept for their width and not
+ * drawn: kept, so every medal sits in the middle of its tier; not drawn, so the track starts at the
+ * first medal and stops at the last rather than running to the edges of the page.
+ *
+ * `64rem` longhand for the reason the fold is.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row {
+    margin-inline: calc(var(--space-grid-gutter) / -2);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row > :is(.dds-tiers__line-start, .dds-tiers__line-end) {
+    display: block;
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier:first-child .dds-tiers__line-start,
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier:last-child .dds-tiers__line-end {
+    visibility: hidden;
+  }
+}
+
+/*
+ * The benefit card on the painted grounds — FeatureCards' and ComparisonCards' rules for the same
+ * card, and their reasons.
+ *
+ * Card's surface is the recessed grey made for the page. On the grey band that is the band's own
+ * grey and the card vanishes, so it takes the raised fill, color.bg.surface-card-raised. On the
+ * dark band its fill and ink are made for a light page — dark words on near-black — so it turns
+ * round to the inverse surface and white ink, the values Card's own inverse uses. The block knows
+ * its ground and the card does not, so the answer is here rather than in Card.
+ */
+:where([data-dds-context="marketing"])
+  .dds-tiers[data-ground="subtle"]
+  .dds-tiers__tier
+  > .dds-card[data-variant="surface"] {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-tiers[data-ground="strong"]
+  .dds-tiers__tier
+  > .dds-card[data-variant="surface"] {
+  background-color: var(--color-bg-surface-inverse);
+  color: var(--color-fg-on-brand-strong);
+}
+
+/*
+ * Stacked — one to a row on a phone, two to a row before the full width — the tiers are held further
+ * apart than a tier's own parts: the grid's gutter alone left one tier's qualification about as close
+ * to the next tier's medal as to its own card, and the ladder ran together. space.gap.2xl between
+ * rungs; from 64rem they stand in one row and the gutter is the gap between columns again.
+ *
+ * `63.9375rem` is the last width below the full-width fold.
+ */
+@container (max-width: 63.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+    row-gap: var(--space-gap-2xl);
+  }
+}

package/dist/components/blocks/use-rotation.d.ts

@@ -17,13 +17,23 @@ import { type FocusEvent, type MouseEvent, type PointerEvent } from 'react';
  * - `region`, spread on that element: the carousel's role description and the hold and stop
  *   handlers;
  * - `track`, spread on the element holding the items: the swipe and what is announced;
- * - `item(at)`, spread on each item: its group role, its "2 / 3" name and its inert state;
+ * - `item(at)`, spread on each item: its group role, its "2 of 3" name and its inert state;
  * - `dots`, spread on PaginationDots alongside the block's own label.
  *
  * Fewer than two items is a set with nothing to move to, drawn still rather than broken: every
  * attribute that says "carousel" is left off and the dots are the block's to omit.
  */
-export declare function useRotation(count: number, autoplay: boolean): {
+/**
+ * The words the set is announced in. Every one is the page's to translate: a role description is
+ * read out exactly as given, so one left in English is heard in English on a page in any language.
+ */
+export interface RotationWords {
+    roleDescription: string;
+    slideRoleDescription: string;
+    /** An item's name from its place, counting from one. */
+    positionLabel?: (position: number, count: number) => string;
+}
+export declare function useRotation(count: number, autoplay: boolean, words: RotationWords): {
     current: number;
     rotating: boolean;
     root: import("react").RefObject<HTMLElement | null>;

package/dist/components/blocks/use-rotation.js

@@ -9,31 +9,7 @@ const SWIPE_CLICK_MS = 300;
 function tokenOn(element, name) {
     return element === null ? '' : getComputedStyle(element).getPropertyValue(name);
 }
-/**
- * One block rotating between a few things in place — which one is in view, and every way a reader
- * moves it, holds it or stops it.
- *
- * Shared because two blocks rotate, CtaBannerSlider and TestimonialSlider, and a carousel is the
- * kind of thing that drifts: one stops on a press and the other does not, one swallows the click a swipe
- * ends in and the other follows the link. The rules are stated once here and each block spreads
- * what this hands back onto its own parts.
- *
- * The clock is not here. PaginationDots holds the timer and the reduced-motion stillness, and this
- * tells it when to wait — so there is one clock per block, and it is the one a reader can see.
- *
- * What it hands back:
- * - `root`, the ref for the block's own element, which the swipe threshold and the reading
- *   direction are read off;
- * - `region`, spread on that element: the carousel's role description and the hold and stop
- *   handlers;
- * - `track`, spread on the element holding the items: the swipe and what is announced;
- * - `item(at)`, spread on each item: its group role, its "2 / 3" name and its inert state;
- * - `dots`, spread on PaginationDots alongside the block's own label.
- *
- * Fewer than two items is a set with nothing to move to, drawn still rather than broken: every
- * attribute that says "carousel" is left off and the dots are the block's to omit.
- */
-export function useRotation(count, autoplay) {
+export function useRotation(count, autoplay, words) {
     const rotating = count > 1;
     const root = useRef(null);
     const [index, setIndex] = useState(0);
@@ -122,7 +98,7 @@ export function useRotation(count, autoplay) {
         rotating,
         root,
         region: {
-            'aria-roledescription': rotating ? 'carousel' : undefined,
+            'aria-roledescription': rotating ? words.roleDescription : undefined,
             onPointerEnter: (event) => {
                 if (event.pointerType === 'mouse')
                     setHeld(true);
@@ -159,8 +135,10 @@ export function useRotation(count, autoplay) {
             const away = rotating && at !== current;
             return {
                 role: rotating ? 'group' : undefined,
-                'aria-roledescription': rotating ? 'slide' : undefined,
-                'aria-label': rotating ? `${at + 1} / ${count}` : undefined,
+                'aria-roledescription': rotating ? words.slideRoleDescription : undefined,
+                'aria-label': rotating
+                    ? words.positionLabel?.(at + 1, count) ?? `${at + 1} of ${count}`
+                    : undefined,
                 'aria-hidden': away || undefined,
                 inert: away || undefined,
             };

package/dist/components/comparison-cards-data.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The cards a ComparisonCards sets side by side, and the rows each one repeats.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Card per option, because what a comparison is made of is structured — a
+ * name, a sentence, and the same few labels each answered with a value — and the block has to lay
+ * those rows out against the rows of the card beside it. A Card handed in whole is a box the block
+ * cannot see into, so its rows could never line up with anyone else's.
+ */
+/** One line of a comparison card: what is being compared, and this option's answer to it. */
+export interface ComparisonCardsRow {
+    /**
+     * What the row compares — "Leverage", "Cost per trade". Written on every card rather than once
+     * for the set: each card is read on its own, and a phone stacks them out of sight of each other.
+     */
+    label: string;
+    /** This option's answer, short enough to sit at the end of the row — "Up to 1:1000", "None". */
+    value: string;
+}
+/** A way on from one card to the page about that option, written as a standalone link. */
+export interface ComparisonCardsAction {
+    /** The words of the link — "Explore Futures", "Open a Spot account". */
+    label: string;
+    /** Where it goes, as a URL. */
+    href: string;
+}
+/** One option in a ComparisonCards: its name, a sentence, its rows, and the surface it is drawn on. */
+export interface ComparisonCardsCard {
+    /** The option's name — "Spot", "Futures", "Standard account". */
+    title: string;
+    /** What the option is, in a sentence or two, under its name. */
+    description?: string;
+    /**
+     * This is the option the page recommends. In the highlighted variant it is drawn coral, the one
+     * card set against the light ones; only the first card marked is. Ignored by the standard variant.
+     */
+    recommended?: boolean;
+    /**
+     * A word on a badge over the recommended card's top edge — "Most popular", "Recommended". Optional:
+     * the coral already says which card it is, and a badge is for a page that wants to say why. Drawn
+     * only on the recommended card, in the highlighted variant.
+     */
+    badge?: string;
+    /**
+     * The rows, in the order they are read. Keep the same labels in the same order on every card in
+     * the set, so a row lines up with its counterpart beside it.
+     */
+    rows: ComparisonCardsRow[];
+    /**
+     * A disclaimer that belongs to this option alone — a risk warning, a condition on a value — at
+     * the foot of its card. Never the section's: a note under the heading would read as true of every
+     * option.
+     */
+    footnote?: string;
+    /** A way on to the page about this option, at the foot of its card under any footnote. */
+    action?: ComparisonCardsAction;
+}

package/dist/components/comparison-cards-data.js

@@ -0,0 +1,12 @@
+/**
+ * The cards a ComparisonCards sets side by side, and the rows each one repeats.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a Card per option, because what a comparison is made of is structured — a
+ * name, a sentence, and the same few labels each answered with a value — and the block has to lay
+ * those rows out against the rows of the card beside it. A Card handed in whole is a box the block
+ * cannot see into, so its rows could never line up with anyone else's.
+ */
+export {};

package/dist/components/comparison-table-data.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The columns a ComparisonTable compares and the rows it compares them on.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per row, because a row of a comparison is a label and a few short
+ * values — nothing in it is an element a page composes — and the block has to draw every row against
+ * the same columns, which it cannot check inside rows it was handed whole.
+ */
+/**
+ * One column of a ComparisonTable: the key its values are filed under in every row, and the name
+ * written over it.
+ *
+ * The first column is the labels' own: its `label` names what the rows are — "Features", "Market" —
+ * and its `key` files nothing, since each row carries its label itself. The columns after it are the
+ * options being compared, two or three of them.
+ */
+export interface ComparisonTableColumn {
+    /** What this column's values are filed under in each row's `values`: "web", "desktop". */
+    key: string;
+    /** The name over the column, one short line: "Web terminal", "Desktop". */
+    label: string;
+}
+/**
+ * One cell's value. A string is one line; a list of strings is several, each its own line — a
+ * schedule's sessions, a platform's operating systems — and is announced as a list of that many.
+ */
+export type ComparisonTableValue = string | string[];
+/** One row of a ComparisonTable: what is being compared, and each option's answer to it. */
+export interface ComparisonTableRow {
+    /** What the row compares, in a few words: "Charts", "Expert Advisors". Drawn as the row's header. */
+    label: string;
+    /**
+     * Each option's answer, filed under its column's `key`. A column the row has no value for is an
+     * empty cell rather than a missing one, so the row keeps the table's shape.
+     */
+    values: Record<string, ComparisonTableValue | undefined>;
+}

package/dist/components/comparison-table-data.js

@@ -0,0 +1,11 @@
+/**
+ * The columns a ComparisonTable compares and the rows it compares them on.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per row, because a row of a comparison is a label and a few short
+ * values — nothing in it is an element a page composes — and the block has to draw every row against
+ * the same columns, which it cannot check inside rows it was handed whole.
+ */
+export {};

package/dist/components/core/accordion-item/AccordionItem.css

@@ -13,7 +13,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger {
-  transition-property: color, outline-color, outline-width;
+  transition-property: outline-color, outline-width;
   align-items: center;
   appearance: none;
   background: none;
@@ -73,10 +73,6 @@
   transition-timing-function: var(--motion-easing-enter);
 }
 
-:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:hover:where(:not(:disabled)) {
-  color: var(--color-fg-muted);
-}
-
 :where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:focus-visible {
   outline-color: var(--color-border-focus);
   outline-width: var(--border-width-focus);

package/dist/components/core/background/Background.css

@@ -10,6 +10,17 @@
   position: relative;
 }
 
+:where([data-dds-context="marketing"]) .dds-background .dds-background__mesh {
+  pointer-events: none;
+  position: absolute;
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool {
+  position: absolute;
+  background-color: var(--color-bg-brand-active);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
 :where([data-dds-context="marketing"]) .dds-background .dds-background__content {
   box-sizing: border-box;
   inline-size: 100%;
@@ -36,6 +47,10 @@
   color: var(--color-fg-on-brand);
 }
 
+:where([data-dds-context="marketing"]) .dds-background[data-tone="brand"] .dds-background__mesh {
+  background-color: var(--color-bg-brand);
+}
+
 :where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] {
   background-color: var(--color-bg-brand-strong);
 }
@@ -49,6 +64,10 @@
   color: var(--color-fg-on-brand-strong);
 }
 
+:where([data-dds-context="marketing"]) .dds-background[data-tone="dark"] .dds-background__mesh {
+  background-color: var(--color-bg-brand-strong);
+}
+
 :where([data-dds-context="marketing"]) .dds-background[data-tone="light"] {
   background-color: var(--color-bg-page);
 }
@@ -62,6 +81,10 @@
   color: var(--color-fg-default);
 }
 
+:where([data-dds-context="marketing"]) .dds-background[data-tone="light"] .dds-background__mesh {
+  background-color: var(--color-bg-page);
+}
+
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-background,
   :where([data-dds-context="marketing"]) .dds-background * { transition: none !important; }

package/dist/components/core/background/Background.d.ts

@@ -9,10 +9,16 @@ export type { BackgroundProps };
  * The flat colour is what shows before anything has drawn — on a server-rendered page, until
  * hydration — so the band is finished from the first paint and the pattern only ever adds to it.
  *
- * Four patterns. The halftone is drawn by script on a canvas, through `useHalftone`, which owns
- * every question of its cost: it draws only while something moves, pauses out of view and holds
- * the bitmap to twice the pixel density. The aurora, the grid and the rings are painted by the
- * stylesheet, with no canvas; `useSpotlight` only tells them where the pointer is.
+ * Five patterns, drawn two ways. The halftone is drawn by script on a 2D canvas, through
+ * `useHalftone`, which owns every question of its cost. The aurora, the mesh, the grid and the
+ * rings are fragment shaders on a WebGL canvas, through `useShader` — light with structure
+ * in it, and a grain over it — with the same rules: drawn only while something moves, paused out of
+ * view, held still for a reader who asked for less motion.
+ *
+ * Each shaded pattern has a stylesheet version as well, which is what shows before the shader has
+ * drawn and wherever WebGL cannot run: the root is marked `data-shaded` once the canvas has a frame,
+ * and the stylesheet's paint steps aside. `useSpotlight` and `useOffscreen` serve that version. The
+ * mesh's is the one that needs elements of its own — five pools, each moving on its own loops.
  *
  * With nothing to hold it is a layer: it fills its positioned parent behind that parent's own
  * content, and listens for the pointer on the parent, because the content covers it. That is how a

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

@@ -5,6 +5,7 @@ import './background-impl.css';
 import { backgroundDefaults, backgroundParts } from './Background.types.js';
 import { useHalftone } from './use-halftone.js';
 import { useOffscreen } from './use-offscreen.js';
+import { useShader } from './use-shader.js';
 import { useSpotlight } from './use-spotlight.js';
 /**
  * A ground a section or a block sits on, painted with a pattern.
@@ -13,10 +14,16 @@ import { useSpotlight } from './use-spotlight.js';
  * The flat colour is what shows before anything has drawn — on a server-rendered page, until
  * hydration — so the band is finished from the first paint and the pattern only ever adds to it.
  *
- * Four patterns. The halftone is drawn by script on a canvas, through `useHalftone`, which owns
- * every question of its cost: it draws only while something moves, pauses out of view and holds
- * the bitmap to twice the pixel density. The aurora, the grid and the rings are painted by the
- * stylesheet, with no canvas; `useSpotlight` only tells them where the pointer is.
+ * Five patterns, drawn two ways. The halftone is drawn by script on a 2D canvas, through
+ * `useHalftone`, which owns every question of its cost. The aurora, the mesh, the grid and the
+ * rings are fragment shaders on a WebGL canvas, through `useShader` — light with structure
+ * in it, and a grain over it — with the same rules: drawn only while something moves, paused out of
+ * view, held still for a reader who asked for less motion.
+ *
+ * Each shaded pattern has a stylesheet version as well, which is what shows before the shader has
+ * drawn and wherever WebGL cannot run: the root is marked `data-shaded` once the canvas has a frame,
+ * and the stylesheet's paint steps aside. `useSpotlight` and `useOffscreen` serve that version. The
+ * mesh's is the one that needs elements of its own — five pools, each moving on its own loops.
  *
  * With nothing to hold it is a layer: it fills its positioned parent behind that parent's own
  * content, and listens for the pointer on the parent, because the content covers it. That is how a
@@ -26,11 +33,13 @@ export function Background({ tone = backgroundDefaults.tone, pattern = backgroun
     // Nothing to hold: a layer under the parent's own content. See above.
     const layer = children === undefined || children === null || children === false;
     const [root, canvas] = useHalftone(pattern === 'halftone', interactive, animated, tone, layer);
-    // The patterns the stylesheet paints answer the pointer from where it is: the grid's lines and
-    // the rings brighten around it, and the aurora carries a pool of its light after it.
+    const shaded = useShader(root, pattern === 'halftone' ? undefined : pattern, interactive, animated, tone, layer);
+    // The stylesheet's versions of the patterns answer the pointer from where it is: the grid's lines and
+    // the rings brighten around it, the aurora carries a pool of its light after it, and the mesh's
+    // pools lean towards it.
     useSpotlight(root, pattern !== 'halftone' && interactive, layer);
     // The patterns the stylesheet moves at rest wait while the band is off screen; the halftone's
     // painter has its own observer.
     useOffscreen(root, pattern !== 'halftone' && animated);
-    return (_jsxs("div", { ...rest, ref: root, className: backgroundParts.root, "data-tone": tone, "data-pattern": pattern, "data-animated": animated ? undefined : 'false', "data-layer": layer || undefined, "aria-hidden": layer || undefined, children: [pattern === 'halftone' ? (_jsx("canvas", { ref: canvas, className: backgroundParts.canvas, "aria-hidden": "true" })) : null, layer ? null : _jsx("div", { className: backgroundParts.content, children: children })] }));
+    return (_jsxs("div", { ...rest, ref: root, className: backgroundParts.root, "data-tone": tone, "data-pattern": pattern, "data-animated": animated ? undefined : 'false', "data-layer": layer || undefined, "aria-hidden": layer || undefined, children: [_jsx("canvas", { ref: pattern === 'halftone' ? canvas : shaded, className: backgroundParts.canvas, "aria-hidden": "true" }, pattern), pattern === 'mesh' ? (_jsx("div", { className: backgroundParts.mesh, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((at) => (_jsx("span", { className: backgroundParts.pool }, at))) })) : null, layer ? null : _jsx("div", { className: backgroundParts.content, children: children })] }));
 }

package/dist/components/core/background/Background.types.d.ts

@@ -1,18 +1,19 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export interface BackgroundOwnProps {
     /**
-     * `dark` — The default, and the band the pattern was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. Reach for it for the band a page opens or closes on, where the glow gives the band a centre
+     * `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. Reach for it for the band a page opens or closes on, where the glow gives the band a centre
      * `light` — Coral dots on the page's own ground, for a light page that wants one moment of brand colour without a solid coral band. The glow reads as warmth rather than light, so keep it for a section that is not competing with a dark one nearby
-     * `brand` — White dots on the coral brand fill, for a call to action standing on it. The heading is white too, and the glow rises from the foot of the band towards it, so check the words read on the coral alone — the dots can only add to what is behind them
+     * `brand` — The default: the brand's own coral, the ground the mesh was made for and the one a call to action stands on. White dots on it for the halftone. The heading is white too, and the glow rises from the foot of the band towards it, so check the words read on the coral alone — the pattern can only add to what is behind them
      */
     tone?: 'dark' | 'light' | 'brand';
     /**
-     * `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it. The default, and the one that moves most
-     * `aurora` — Broad soft pools of the brand's colour rising from the band's foot and drifting slowly into one another — light as colour rather than as points. Drawn by the stylesheet: no canvas. At rest the pools wander, there and back, over motion.duration.drift; on an interactive band a smaller pool trails the pointer. Reach for it where the halftone would be too busy — an opening band with a picture or a product on it, where dots behind the picture fight it and a wash of colour does not
-     * `grid` — A fine rule grid of hairlines, fading in towards the band's foot — the grid PageHeader paints, offered for any band. Drawn by the stylesheet: no canvas. On an interactive band the lines brighten in a soft circle around the pointer and fade back when it leaves; at rest the rules rise slowly, a pitch over motion.duration.drift. Reach for it where the band should read as deliberate and quiet rather than lit
-     * `rings` — Hairline circles spreading out from the middle of the band's foot, fading in towards it, at size.rings.pitch. Drawn by the stylesheet: no canvas. On an interactive band the rings brighten in a soft circle around the pointer and fade back when it leaves; at rest the rings spread slowly outward, a pitch over motion.duration.drift. As quiet as the grid, but round: reach for it where the band should feel open and centred rather than ruled — a call to action, a closing band with one thing to say
+     * `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it, over a faint wash of their own ink. The glow's edge wanders from a plain ellipse as it drifts, so it reads as light on a surface rather than a spotlight. The default, and the one that moves most
+     * `aurora` — Curtains of light rising from the band's foot: sheets of the brand's colour swaying and folding, with a ragged crest and fine rays running up through them — light falling through folds rather than pools of colour. Drawn by a shader with a grain over it; before it has drawn, and where it cannot, soft pools of the same colour painted by the stylesheet. At rest the curtains sway over motion.duration.drift; on an interactive band the pointer bends them towards it and brightens them. Reach for it where the halftone would be too busy — an opening band with a picture or a product on it, where dots behind the picture fight it and a wash of light does not
+     * `mesh` — The whole band in the brand's reds, folded into one another like a liquid — the design system's own front page. A noise warped by a noise, so the colours run in ribbons and eddies with a sheen on their crests, turning slowly. Drawn by a shader with a grain over it; before it has drawn, and where it cannot, five blurred pools painted by the stylesheet. On an interactive band the pointer draws the field towards it, as a hand drawn through paint; with `animated` off it rests until the pointer is over the band and flows only while it is. Made for the coral ground, where it is the brand at its loudest; on the dark ground it is red smoke on near-black, on the light one a faint marbling. Reach for it for the one band a page is remembered by, and keep the words on it few and large
+     * `grid` — Hairlines a pitch apart, size.rule-grid.pitch, rising from a soft bloom at the band's foot — the grid PageHeader paints, offered for any band, now lit: a brighter point where two lines cross, and every few lines a short dash of light running along it. Drawn by a shader at up to twice the pixel density, so a hairline stays a hairline; before it has drawn, and where it cannot, the same rules painted by the stylesheet. At rest the rules rise slowly, a pitch over motion.duration.drift; on an interactive band the lines brighten around the pointer. Reach for it where the band should read as deliberate and quiet rather than lit
+     * `rings` — Hairline circles spreading out from the middle of the band's foot at size.rings.pitch, out of a soft bloom there, with arcs of light travelling round each ring at its own pace and direction. Drawn by a shader at up to twice the pixel density; before it has drawn, and where it cannot, the same rings painted by the stylesheet. At rest the rings spread slowly outward, a pitch over motion.duration.drift; on an interactive band they brighten around the pointer. As quiet as the grid, but round: reach for it where the band should feel open and centred rather than ruled — a call to action, a closing band with one thing to say
      */
-    pattern?: 'halftone' | 'aurora' | 'grid' | 'rings';
+    pattern?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
     /** On by default: every pattern moves slowly at rest, whether or not anybody is pointing at it — the halftone's glow and the aurora's pools drift along the band's foot, the grid's rules rise and the rings spread outward, each over motion.duration.drift. Turn it off for a band that should be still until somebody reaches for it — a band beside a video or an animation of its own, or one a page repeats further down — and the pattern rests where it is. What the pattern does under the pointer is `interactive`, which is set apart from this. */
     animated?: boolean;
     /** On by default: the pattern answers a pointer over the band. The halftone's glow follows it, gathers into a smaller pool and parts the dots it crosses, and a click sends a small ripple through them; the aurora sends a pool of its light after it; the grid's rules and the rings brighten around it. Turn it off for a band whose content is itself interactive enough that a moving ground would compete with it — a band of controls, a form — and the pattern ignores the pointer. Touch has no hover, so on a touch screen nothing follows a finger. Whether it moves at rest is `animated`, which is set apart from this. */
@@ -25,11 +26,13 @@ export type BackgroundProps = BackgroundOwnProps & Omit<HTMLAttributes<HTMLDivEl
 export declare const backgroundParts: {
     readonly root: "dds-background";
     readonly canvas: "dds-background__canvas";
+    readonly mesh: "dds-background__mesh";
+    readonly pool: "dds-background__pool";
     readonly content: "dds-background__content";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const backgroundDefaults: {
-    readonly tone: "dark";
+    readonly tone: "brand";
     readonly pattern: "halftone";
     readonly animated: true;
     readonly interactive: true;

package/dist/components/core/background/Background.types.js

@@ -3,7 +3,9 @@
 export const backgroundParts = {
     root: 'dds-background',
     canvas: 'dds-background__canvas',
+    mesh: 'dds-background__mesh',
+    pool: 'dds-background__pool',
     content: 'dds-background__content',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const backgroundDefaults = { tone: 'dark', pattern: 'halftone', animated: true, interactive: true };
+export const backgroundDefaults = { tone: 'brand', pattern: 'halftone', animated: true, interactive: true };