@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/.llm/tokens.md

@@ -17,6 +17,7 @@ one value at every width.
 - `--color-bg-band-subtle` — A recessed band across the page, e.g. a section of steps or features set apart from the ones around it. gray.50 in light, white at six in dark. For a fill inside a control — a secondary button, a badge — use color.bg.subtle.
 - `--color-bg-brand` — Primary action surface, e.g. sign-up button, hero CTA, promotional banner. The same coral in light and dark; pair with color.fg.on-brand for text.
 - `--color-bg-brand-active` — Pressed state for color.bg.brand. One step further along the ramp than the hover, in the same direction, so a press reads as more of what the hover began.
+- `--color-bg-brand-deep` — The brand's darkest red, the same in both themes — a shade in a pattern drawn in the brand's reds, e.g. the deepest pool of Background's mesh. Not a ground for words: color.bg.brand-subtle is the tint that turns with the theme.
 - `--color-bg-brand-hover` — Hover state for color.bg.brand.
 - `--color-bg-brand-strong` — A dark surface, for a band breaking a long page or a card carrying more weight than its neighbours, e.g. a feature band, the footer. gray.950 in light and dark alike, so the band is the same wherever it is drawn. Pair with color.fg.on-brand-strong for text.
 - `--color-bg-brand-subtle` — A brand ground quiet enough to read dark ink on. The solid coral takes white at 3.39:1 and is waived for a word; this pairs with color.fg.brand well past the bar, so a mark can be brand-coloured without spending the waiver.
@@ -33,6 +34,7 @@ one value at every width.
 - `--color-bg-page` — The website's ground. A section that needs separating from it takes color.bg.subtle, color.bg.brand-strong or color.bg.brand, rather than the page carrying a tint of its own.
 - `--color-bg-readonly` — A field whose value is fixed but still worth reading. Lighter than the disabled ground and at full contrast, which is the distinction: readonly is legible and settled, disabled recedes because it is not actionable.
 - `--color-bg-selected` — The active or current item in a set of choices, e.g. selected nav item, current tab, highlighted row. Not for recessive areas — use color.bg.subtle.
+- `--color-bg-store-badge` — The ground of an app store's download badge: the black the stores' own badge artwork is drawn on, the same in both themes, so a badge chip and the artwork in it read as one badge.
 - `--color-bg-strong` — Inverted neutral fill for an action that has to outrank everything around it — near-black in light and pure white in dark, the highest contrast the page can carry. Not a section ground: a band takes bg.subtle, bg.brand-strong or bg.brand. Pair with color.fg.on-strong.
 - `--color-bg-strong-on-brand` — The solid fill of a control on color.bg.brand, e.g. the primary action on the coral band. Near-black in both modes, because the band does not change — unlike color.bg.strong, which turns white in dark.
 - `--color-bg-subtle` — A recessive fill inside a control or a small area, e.g. a secondary button, a neutral badge. For a band across the page use color.bg.band-subtle; for selected items, color.bg.selected.
@@ -125,6 +127,7 @@ one value at every width.
 - `--space-inset-sm` — Default padding inside controls, e.g. form inputs, dropdowns, sign-up fields.
 - `--space-inset-xl` **adapts** — Padding inside a card or a panel — the step most cards want, between the tight lg and the page's own gutter.
 - `--space-inset-xs` — Padding inside compact controls, e.g. buttons, nav items, form chips.
+- `--space-pile-peek` — How much of each covered card shows above the next in a StickyCards pile. Each card stops this much lower than the one under it, so the covered cards read as a stack of edges.
 - `--space-section-compact` **adapts** — The air above and below a section of supporting content, or one closely related to the section before it. Where the default step would read as a break rather than a step.
 - `--space-section-default` **adapts** — The air above and below a section, and the step most take. Adjacent sections each contribute their own; nothing adds a gap between them on top of it.
 
@@ -142,14 +145,21 @@ one value at every width.
 - `--size-control-lg` — Height of a large control, for a hero or a conversion band. Twice space.control.lg, on the same reasoning as the default step.
 - `--size-control-md` — Height of a default-size control, the same measure product gives its own default. Twice space.control.md, so on a pill the corner radius and the side padding are one measure and a label starts where the curve stops.
 - `--size-control-sm` — Height of a small control — a picker in a navigation bar, a field in a filter row. Half of it is space.control.sm and a quarter is radius.control.sm, the ratio every step of this ramp holds. Desktop only: below what a finger reliably hits.
-- `--size-dot-current` — How wide the current mark in a row of dots stretches, against size.dot.diameter for the rest — a pill three dots long, so where the reader is reads by shape.
+- `--size-data-table-search` — The widest a DataTable's search runs beside its result count, from the fold. Room for a market's name and a symbol with the magnifier and the clear button either side; on a phone it takes the row.
+- `--size-dot-current` — How long the current mark in a set of dots stretches along the set, against size.dot.diameter for the rest — a pill three dots long, so where the reader is reads by shape. Wide in a row, tall in Stats' column standing on end.
 - `--size-dot-diameter` — The mark standing in for one page of a short sequence, or for a status beside a name. Eight: small enough that a row of ten reads as a row rather than as ten controls, and large enough to find at arm's length.
+- `--size-download-banner-badge` — The width every store badge on a DownloadBanner takes, so badges whose artwork differs in shape line up as one set.
+- `--size-download-banner-media` — The width of the app's image on a featured DownloadBanner — a phone held out beside the words rather than a slab across the card. The same width as size.grid.track-lg, for a different thing.
+- `--size-download-banner-qr` — The side of the QR code on a DownloadBanner, a square. Large enough to scan from a phone held at arm's length off a desktop screen, small enough to sit beside a heading.
+- `--size-feature-cards-carousel-card` — The width of a card on a FeatureCardsCarousel, from the fold, held to the column. Narrow enough that the row shows the next card's edge, which says there is more.
+- `--size-feature-stack-media` — The widest the picture a FeatureStack ends on runs, centred. Wider than the words above it, so the picture is the section's weight; narrower than the page, so it stays an illustration rather than a band.
 - `--size-grid-track-lg` — For a cell holding a picture as well as words, or a pricing plan with a list under it. Three fit the page's measure and four do not, which is what makes this the floor for a grid meant to read as three across.
 - `--size-grid-track-md` — The default track floor, for a feature card: a heading and a line or two beneath it. Four of these fit the page's measure, so a grid asking for three has room to spare and drops to two on a tablet rather than at the first sign of pressure.
 - `--size-grid-track-sm` — The narrowest a grid track goes before the grid drops a column. For a cell holding a logo, an icon and a word, or one short claim — six of them clear the page's measure with the page gutter still on both sides.
 - `--size-halftone-dot` — The widest a halftone dot grows, at the brightest point of the glow. Six against size.halftone.pitch's twenty, so even the largest dots stand well apart and the pattern reads as a fine screen of light rather than a field of discs.
 - `--size-halftone-pitch` — How far apart a halftone background's dots sit, centre to centre. A pitch rather than a gap, as size.rule-grid.pitch is: how often a decorative mark recurs. Twenty, against a six-pixel dot: a fine screen that reads as a tone across a band.
 - `--size-heading-group-max` — How wide an eyebrow, a title and a description may run as a block. Independent or centred groups take this; one that has to sit on the grid takes eight columns instead, which is a span rather than a measure.
+- `--size-image-banner-card` — The least height an ImageBanner's split and cover cards take, so the photograph has room to show beside or behind the words — the reference design's card. The same depth as size.band.compact, for a different thing: a card in the page rather than the band that opens it.
 - `--size-logo-columns-height` — How much of a LogoColumns wall shows at once, from the fold. Tall enough that a column reads as running on past both edges; half of it on a phone.
 - `--size-logo-rows-tile` — The width of a tile on a LogoRows, from the fold; three quarters of it on a phone. Wide enough for a wordmark, narrow enough that a row shows several at once.
 - `--size-measure-description` — How wide a supporting description runs. Wider than a title because it is read rather than taken in, and narrower than long-form because it sits under something.
@@ -161,6 +171,7 @@ one value at every width.
 - `--size-menu-panel-max` — The widest a section's menu panel gets. Narrower than the page's own measure on purpose: a panel is scanned across with a pointer already on it, and one as wide as the page leaves its last column a long way from the name that opened it.
 - `--size-menu-panel-min` — The shortest a section's menu panel gets, whatever it holds. A bar's sections rarely have the same number of destinations, and panels that each took their own height would change size as the reader moved along the row.
 - `--size-menu-max` — The tallest a menu's surface gets before its commands scroll. Product's measure, and counted in rows: five whole and part of a sixth at either size. Neither lands on a row boundary — a ceiling cutting clean at the last full row looks like the whole set.
+- `--size-mesh-blur` — How far a mesh background blurs its pools into one another. Enough that no pool keeps an edge, so the reds read as one liquid rather than shapes.
 - `--size-review-card-min` — The shortest a TestimonialRow card gets. A floor, not a height: a one-line review keeps a card's shape, and a longer one still grows it.
 - `--size-rings-pitch` — How far apart the rings on a band sit, counted out from the middle of its foot. A pitch, as size.rule-grid.pitch is; tighter than the grid's, because rings spaced that wide read as a target rather than a ripple.
 - `--size-rings-spotlight` — How far the pointer's light reaches on the rings: the radius within which they brighten around the pointer and fade to the resting rings. The rule grid's reach, so the two answer the pointer alike.
@@ -176,9 +187,13 @@ one value at every width.
 - `--size-spinner-lg` — Spinner diameter at size lg. For a section holding space for content that has not arrived — an embed, a demo, a band of live figures. Its job there is to be visible from where the reader is looking, which is the whole section rather than one control in it.
 - `--size-spinner-md` — Spinner diameter at size md. The default: large enough to be the one thing happening in a form or a card, small enough that it does not become the card's subject.
 - `--size-spinner-sm` — Spinner diameter at size sm. Sixteen, which is the size of the body copy it sits beside — an indicator in a line of text reads as part of the line rather than as something dropped into it.
+- `--size-sticky-cards-compact-max` — The widest a StickyCards pile of text-first cards runs, centred under its heading — the heading group's own measure, so pile and heading share a column.
+- `--size-sticky-cards-compact-min` — The shortest a text-first StickyCards card is drawn. A card a title and a sentence tall is a strip, and a pile of strips reads as a list rather than as cards laid over each other.
+- `--size-sticky-cards-feature-min` — The least height a StickyCards feature card takes — a chapter of the page rather than a tile, tall enough for its picture to be the card's half.
 - `--size-switcher-panel-width` — The width of a switcher's floating panel. Stated because the panel is out of flow and would otherwise shrink to the trigger it hangs from, wrapping every choice and running the set down the page.
 - `--size-target-min` — The smallest a thing a pointer has to hit may be. Bind it as a minimum on any control whose size would otherwise come from its contents — a pressable card is as big as its words, and one holding a single short line is smaller than a fingertip.
 - `--size-testimonial-art` — The decorative pictures in a TestimonialSlider's corners, as squares. Large enough to read as pictures, small enough to leave the card the quote's.
+- `--size-tiers-medal` — The medal over each tier's name in a Tiers section, as a square. Large enough to read as a medal rather than an icon beside the words, small enough that four across leave the cards under them the row.
 - `--size-tooltip-max` — The widest a tooltip gets before its text wraps. Short enough that the eye finds the start of the next line without hunting for it, which is the whole job of a measure — and a tooltip that needs more than two lines is a tooltip carrying something that belongs on the page.
 
 ## radius
@@ -253,6 +268,12 @@ one value at every width.
   - `--font-field-label-md-line-height`
   - `--font-field-label-md-size`
   - `--font-field-label-md-weight`
+- `font.figure-lg` — A figure with the row to itself — the one in place on Stats' wheel on a phone. Larger than font.figure, which shares a row with the figures beside it: alone, the number is the one thing the band is showing. The same size at every width, because it is only drawn on a phone.
+  - `--font-figure-lg-family`
+  - `--font-figure-lg-letter-spacing`
+  - `--font-figure-lg-line-height`
+  - `--font-figure-lg-size`
+  - `--font-figure-lg-weight`
 - `font.figure` — A number read as a fact rather than as a heading. It takes a heading's size, because a figure has to hold a row on its own, and semibold rather than extrabold: the weight a title needs makes a number look like a claim.
   - `--font-figure-family`
   - `--font-figure-letter-spacing`
@@ -361,6 +382,7 @@ one value at every width.
 - `--motion-duration-drift` — One way of a slow drift that runs while something is on screen — an aurora wandering along a band's foot and back. Ten seconds, so the movement is felt rather than watched.
 - `--motion-duration-dwell` — How long a rotating message holds before the next one moves in, e.g. a CTA banner's slides. Long enough to read a headline and a line under it; the reference site's 2000 moved before a reader reached the button.
 - `--motion-duration-fast` — Direct user actions that should feel instant, e.g. hover, press, toggle.
+- `--motion-duration-hold` — How long one of a turning set of figures holds in place before the next turns in — Stats' wheel on a phone. A second, where motion.duration.dwell holds a slide for five: a number and its label are read at a glance, and a wheel that stood still longer would read as stuck.
 - `--motion-duration-instant` — A change the reader has already moved past — a tooltip leaving once the pointer is elsewhere. Not a short duration but no duration: animating a dismissal keeps a thing on screen after the reason for it has gone.
 - `--motion-duration-media-hover` — How long art takes to settle inside a frame that holds still. Longer than duration.normal, which suits a card that lifts and is over; a picture that zooms is still on screen when it stops and the eye follows it the whole way.
 - `--motion-duration-normal` — UI elements entering or leaving, e.g. dropdowns, tooltips, tab switches, card hover.
@@ -370,7 +392,9 @@ one value at every width.
 - `--motion-duration-slow` — Large UI transitions, e.g. accordions expanding, page transitions, interactive demos.
 - `--motion-duration-spinner` — One full rotation of a spinner. Fast enough to read as working, slow enough that the stroke does not blur into a solid ring.
 - `--motion-duration-stagger` — The step between one part of a section arriving and the next. A gap rather than a length: five parts at this step trail the first by less than half a second, so a block still arrives as one thing rather than assembling itself while a reader waits.
+- `--motion-duration-ticker` — How long a running row takes to carry one item past — Awards' row on a phone, multiplied by the number of awards for one whole loop. The reference site's pace: thirty-two seconds for eight awards, slow enough to read an award as it goes by.
 - `--motion-duration-trail` — How long something takes to catch up with a pointer it trails — a background's glow following the pointer across a band. Half a second, so the light drifts after the hand rather than sticking to it: a trail is felt, a cursor is tracked.
+- `--motion-duration-turn` — One turn of a wheel of figures: the one in place rising away as the next rises into it. The reference site's 700 — long enough that the eye follows the number in rather than seeing it swap.
 - `--motion-easing-enter` — UI elements arriving on screen — decelerates into place, e.g. dropdown opening, tooltip appearing.
 - `--motion-easing-exit` — UI elements leaving the screen — accelerates away, e.g. menu closing, notification dismissing.
 - `--motion-easing-media-hover` — Art moving inside a frame that holds still. Symmetric, unlike easing.standard: a hover runs forward on enter and backward on leave, so a one-way curve that settles hard reads as a snap going one way and a drift the other.
@@ -382,6 +406,7 @@ one value at every width.
 - `--motion-scale-enter` — What a component scales from when something reveals it — a tooltip appearing. Needs a transform origin on the edge nearest its anchor, or it grows out of its own middle. The counterpart to scale.hover, which is a response rather than an entrance.
 - `--motion-scale-hover` — How much a control grows under the cursor on hover. Deliberately small — a control that grows past the pointer fires its own mouse-out.
 - `--motion-scale-media-hover` — How much art grows inside a frame that holds still — an editorial card's picture under the cursor. Twice motion.scale.hover, which stays smaller because a control can outrun its own pointer and a framed picture cannot.
+- `--motion-scale-pile-covered` — How far a card in a StickyCards pile draws back once the next card has slid over it, from its top edge, so the pile reads as depth. Not motion.scale.enter, which is for something arriving.
 - `--motion-translate-enter` — Where a surface waits before something reveals it: level on the inline axis, its own full height down the block one. A share of the element rather than of the page, so a sheet travels exactly its own height whatever that turns out to be.
 - `--motion-translate-hover` — How far a pressable surface rises under the cursor. A fixed distance rather than a share of the element, so a tall card and a short one lift by the same amount and a row of them stays level. Small enough that nothing it sits beside looks disturbed.
 - `--motion-translate-reveal` — How far a section waits below where it lands, before the scroll brings it up. A fixed distance rather than a share of the block, so a hero a screen tall and a split half that arrive by the same movement. Pairs with motion.easing.reveal.

package/AGENTS.md

@@ -143,20 +143,36 @@ screen is built in is not something to reach for while building a control.
 
 ### Blocks — the sections a page is built from, and the rhythm between them
 
+- **Awards** — Building credibility with the industry awards a company has won
+- **ComparisonCards** — Two or three products, accounts or plans that answer the same few questions differently
+- **ComparisonTable** — Comparing two or three options
 - **CtaBanner** — A short, high-contrast promotion with one clear action
 - **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
+- **DataTable** — Trading instruments and their specifications
+- **DownloadBanner** — Promoting an app across the stores and platforms it ships on
 - **FaqAccordion** — The questions a reader asks before acting
 - **FeatureBullets** — A page has to list what a product or a plan includes, and the list is the argument
-- **FeatureCards** — Three or four things a product does, each a heading and a sentence, read side by side and compared at a glance
+- **FeatureCards** — Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance
+- **FeatureCardsCarousel** — A "what you get" band of five or six authored cards, each a benefit with a line and a picture, too many for one row of a grid, where one card in focus with a peek of the next is the point
 - **FeatureScroll** — A page has three or more things of the same kind to explain, each with a picture worth a screen
 - **FeatureSplit** — A page needs one more point about something it has already introduced, with a picture to carry it
+- **FeatureStack** — A statement with a picture that carries it
+- **ImageBanner** — Driving a single mid-page or end-of-page action with a photograph to carry it
 - **LandingHero** — A main landing page needs its opening band
 - **LogoColumns** — Showing the partners, integrations or payment methods behind a claim
 - **LogoRows** — Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow
 - **PageHeader** — A company, legal or support page needs its opening band
 - **ProductHero** — A product or a market page needs its opening band
+- **ResourceBanner** — Pointing readers at related guides, policies, or reference pages at the end of an informational section
+- **SceneScroll** — Two states of one thing a page wants felt rather than listed
+- **Stats** — Three to five headline numbers that prove scale or credibility
+- **Steps** — A page explains a get-started or onboarding flow
+- **StickyCards** — A set of markets, products or benefits a page wants read one at a time as the reader scrolls
+- **TeamGrid** — A leadership team, an advisory board or a regional management list on an about page
 - **TestimonialRow** — Five to ten short, rated reviews collected by a review service, where seeing several at once is the point and the overall score is worth stating
 - **TestimonialSlider** — Two to five real quotes from partners or customers, each a few sentences, read one at a time
+- **TextScroll** — A mission or vision statement, on an About or Who we are page
+- **Tiers** — A partner, affiliate or introducing-broker programme explains its tiers and what each one earns
 
 ## Components that need mounting
 

package/dist/components/awards-data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The awards a Awards lists.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `logo-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 award, because an award is two lines of words — what it was
+ * for and who gave it — and nothing in it is an element a page composes. The laurels either side are
+ * the section's, the same for every award, and not something an award chooses.
+ */
+/** One award in a Awards: what it was for, and who gave it when. */
+export interface Award {
+    /**
+     * What the award was for, in the issuer's own words — "Best Trading Experience - Global". Ten
+     * words at most: it is set between two laurels, at a badge's width, and wraps to three lines past
+     * that.
+     */
+    title: string;
+    /**
+     * Who gave it, and the year — "UF Awards 2025". Short, under the title; the year is what tells a
+     * reader the claim is current.
+     */
+    issuer: string;
+}

package/dist/components/awards-data.js

@@ -0,0 +1,11 @@
+/**
+ * The awards a Awards lists.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `logo-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 award, because an award is two lines of words — what it was
+ * for and who gave it — and nothing in it is an element a page composes. The laurels either side are
+ * the section's, the same for every award, and not something an award chooses.
+ */
+export {};

package/dist/components/block-image-data.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A picture a block draws itself, at the picture's own shape.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value
+ * and hands it over. A record rather than a node, because the block has to draw the `<img>` to
+ * size it — a picture keeps its own proportions and the block only limits how tall it grows, which
+ * it cannot do to an element it was handed already wrapped in something else.
+ */
+/** One picture: where it is, what it shows, and its size, so the block can hold its shape. */
+export interface BlockImage {
+    /** Where the picture is. Use one at least as wide as the column it fills, twice that for sharp screens. */
+    src: string;
+    /**
+     * What a screen reader hears for it: an empty string when the words around it already say what it
+     * shows, a description when it carries something they do not.
+     */
+    alt: string;
+    /**
+     * The picture's own width and height, in pixels. Optional, but give them: with them the block
+     * reserves the picture's shape before it loads, so nothing below it moves when it arrives.
+     */
+    width?: number;
+    height?: number;
+}

package/dist/components/block-image-data.js

@@ -0,0 +1,9 @@
+/**
+ * A picture a block draws itself, at the picture's own shape.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value
+ * and hands it over. A record rather than a node, because the block has to draw the `<img>` to
+ * size it — a picture keeps its own proportions and the block only limits how tall it grows, which
+ * it cannot do to an element it was handed already wrapped in something else.
+ */
+export {};

package/dist/components/blocks/awards/Awards.css

@@ -0,0 +1,134 @@
+/* GENERATED from awards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-awards {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  outline-style: solid;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+  outline-width: var(--border-width-none);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__award {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xs);
+  max-inline-size: var(--size-grid-track-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__laurel {
+  display: block;
+  flex: none;
+  inline-size: var(--icon-size-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__copy {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  text-align: center;
+  row-gap: var(--space-heading-title-description-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__name {
+  margin: 0;
+  text-wrap: balance;
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__issuer {
+  margin: 0;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__list:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="page"] .dds-awards__laurel {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="strong"] .dds-awards__laurel {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="subtle"] .dds-awards__laurel {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-awards[data-ground="strong"] .dds-awards__list:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+

package/dist/components/blocks/awards/Awards.d.ts

@@ -0,0 +1,24 @@
+import './Awards.css';
+import './awards-impl.css';
+import '../block-reveal.css';
+import { type AwardsProps } from './Awards.types.js';
+export type { AwardsProps };
+/**
+ * A heading over the awards a company has won, each between two laurels — the reference design's
+ * FeatureAwards.
+ *
+ * One list, two shapes, and the stylesheet chooses between them on the section's width. From the
+ * fold it wraps into centred rows of five at most; on a phone it is one row across the band that
+ * runs on its own, the reference's marquee, holding still while the reader hovers, focuses or presses
+ * on it. The running row is the awards drawn twice, the second set hidden from assistive technology,
+ * so its loop has no seam and a screen reader counts each award once. A reader who asked for less
+ * motion gets the row still, to swipe.
+ *
+ * The awards are records rather than children, `Award` from `awards-data`: an award is
+ * two lines of words, and the laurels around them are the section's, the same for every award.
+ *
+ * It arrives the way every block does: the heading, then each award a step behind the one before,
+ * in reading order. `'use client'` for that, for `useId`, which names the region and the row by the
+ * heading, and for the measurement that gives the row its tab stop.
+ */
+export declare function Awards({ ground, title, awards }: AwardsProps): import("react").JSX.Element | null;

package/dist/components/blocks/awards/Awards.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import './Awards.css';
+import './awards-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { awardsDefaults, awardsParts, } from './Awards.types.js';
+/**
+ * Where an award comes in the arrival, capped so a long list does not keep a reader waiting.
+ *
+ * The heading takes the first step. The awards follow one step apart up to the fifth — a row's
+ * worth from the fold — and the rest arrive with it: block-reveal.css keeps a block's trail inside
+ * its own movement, and seventeen awards a step apart would trail the heading by most of a second.
+ */
+const FIRST_AWARD = 1;
+const LAST_STEP = FIRST_AWARD + 4;
+/**
+ * The reference design's laurel, the vector its Stats section draws, in one colour.
+ *
+ * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
+ * branch is this one mirrored, by the stylesheet, so one drawing serves both sides and a right-to-left
+ * page can swap which side is mirrored without a second picture. The reference laid it at a fifth of
+ * its strength; here it takes the band's quieter ink instead, a colour role rather than an alpha, so
+ * it follows the ground the way every other quiet thing in the package does.
+ */
+const LAUREL_PATHS = [
+    'M20.8655 76.0151C21.3631 78.5487 22.4577 80.4673 23.4245 81.7447C23.7945 82.2337 24.145 82.6275 24.4343 82.9245C24.5003 81.0424 24.5392 77.0209 23.854 73.543C23.3836 71.2282 22.6189 69.4263 21.9723 68.1997C21.7486 67.7754 21.539 67.42 21.3608 67.1361C21.2158 67.6487 21.042 68.3446 20.8935 69.1718C20.5634 71.0111 20.3623 73.4782 20.8655 76.0151Z',
+    'M9.19518 69.4464C8.5612 69.2311 8.01354 69.0792 7.6041 68.9776C7.77674 69.5261 8.03563 70.2542 8.40971 71.0711C9.16156 72.713 10.3603 74.6729 12.1472 76.0342C13.9141 77.3864 15.8077 77.7752 17.2669 77.8239C17.9963 77.8483 18.6126 77.7873 19.0419 77.7209C18.3715 76.5307 16.6347 73.8279 14.0892 71.9349C12.4167 70.7081 10.6015 69.924 9.19518 69.4464Z',
+    'M14.1789 62.4853C14.1095 65.0056 14.7018 67.1343 15.3106 68.6265C15.5268 69.1563 15.7445 69.6045 15.9342 69.9597C16.0737 69.4242 16.2473 68.7196 16.4239 67.9038C16.8294 66.0308 17.2467 63.5892 17.309 61.2688C17.3584 58.9612 17.0322 57.019 16.6942 55.65C16.5809 55.1908 16.4663 54.7965 16.3643 54.4749C16.1414 54.8952 15.8702 55.4487 15.5956 56.1107C14.9268 57.7233 14.2444 59.9642 14.1789 62.4853Z',
+    'M6.16644 56.5363L5.92729 56.2113C4.18123 53.9739 2.10237 52.4221 0.99942 51.685C1.0448 52.2219 1.13195 52.9558 1.29599 53.7969C1.6458 55.5904 2.33816 57.834 3.68889 59.699C5.02796 61.5534 6.66938 62.5331 7.97363 63.0496C8.56984 63.2857 9.09434 63.4244 9.48448 63.5049C9.08235 62.1271 8.06278 59.1136 6.16644 56.5363Z',
+    'M12.9202 41.9556C12.9103 41.468 12.8857 41.0438 12.8578 40.6964C12.5852 41.0139 12.2554 41.4254 11.9043 41.9234C10.9787 43.2365 9.91222 45.1415 9.34811 47.5086L9.21888 48.0509C8.78948 50.2094 8.89878 52.2002 9.13088 53.6853C9.21855 54.2463 9.32345 54.7333 9.42253 55.1275C10.2101 53.5777 11.6117 50.5783 12.3444 47.5177C12.8519 45.3454 12.9491 43.3817 12.9202 41.9556Z',
+    'M4.26838 40.1575C3.16507 37.3338 1.55966 35.0449 0.658674 33.8839C0.595099 34.3962 0.53299 35.0674 0.509766 35.8425C0.454879 37.6743 0.618233 40.0556 1.46849 42.2871C2.30759 44.5064 3.60611 45.9871 4.68907 46.9107C5.12959 47.2864 5.53393 47.5694 5.85602 47.7717C5.82536 47.3041 5.77132 46.6715 5.67501 45.9295C5.46619 44.3205 5.06044 42.211 4.27156 40.1569L4.26838 40.1575Z',
+    'M12.6632 27.4606C11.6314 28.3597 10.3804 29.7129 9.40352 31.5834L9.20135 32.004C8.19489 34.0975 7.83678 36.2499 7.73379 37.8807C7.69736 38.4576 7.693 38.9667 7.70264 39.3814C7.98105 39.0479 8.31846 38.6306 8.68777 38.1462C9.68653 36.8365 10.9078 35.0512 11.829 33.1204C12.7356 31.1936 13.238 29.3215 13.5154 27.9233C13.6157 27.4178 13.6864 26.9753 13.7361 26.6158C13.4324 26.8302 13.0648 27.1106 12.6632 27.4606Z',
+    'M7.15889 23.0454L7.23043 22.5253C7.54518 19.6881 7.36017 17.0948 7.19664 15.6517C6.9244 16.0575 6.59747 16.5777 6.25738 17.1905C5.37216 18.7855 4.41002 20.986 4.07631 23.4177C3.74032 25.8399 4.108 27.8499 4.55657 29.25C4.7215 29.7648 4.89717 30.1965 5.05235 30.5349C5.64762 29.1157 6.71893 26.2445 7.15889 23.0454Z',
+    'M20.7056 14.8951C19.4372 15.269 17.7724 15.9875 16.1554 17.3693L16.021 17.4932C14.3576 18.9542 13.2217 20.7665 12.5041 22.2202C12.2403 22.7546 12.0346 23.2374 11.8812 23.6318C12.2297 23.4596 12.6507 23.2423 13.1195 22.9822C14.4495 22.2442 16.1506 21.1686 17.6705 19.808C19.177 18.446 20.3493 16.9414 21.1512 15.7693C21.4549 15.3255 21.7047 14.9307 21.8987 14.6109C21.5673 14.6707 21.1626 14.7604 20.7056 14.8951Z',
+    'M15.246 9.89451L15.3989 9.48769C16.3817 6.71545 16.8681 4.08928 17.0948 2.56556C16.7641 2.88544 16.3703 3.28963 15.9481 3.76978C14.7583 5.12276 13.3571 7.06214 12.4902 9.40367C11.6163 11.7394 11.483 13.8564 11.5665 15.3854C11.595 15.9081 11.6489 16.3613 11.7069 16.7298C11.9415 16.3768 12.2271 15.9318 12.5414 15.4103C13.3841 14.0121 14.4266 12.0747 15.246 9.89451Z',
+    'M24.236 2.86551C22.4046 4.24716 21.0854 6.09763 20.225 7.6144C19.8673 8.24502 19.5916 8.81333 19.3933 9.25894C19.765 9.11933 20.2233 8.93634 20.7396 8.70812C22.1292 8.09394 23.9267 7.15785 25.5896 5.86671C27.2408 4.56435 28.6049 3.04428 29.5633 1.84034C29.9762 1.32163 30.3123 0.863542 30.5622 0.509562C30.206 0.526204 29.7564 0.567871 29.2396 0.659382C27.8788 0.900297 26.0564 1.48555 24.236 2.86551Z',
+];
+/** One laurel branch. Decoration: hidden from assistive technology and never focusable. */
+function Laurel({ side }) {
+    return (_jsx("svg", { className: awardsParts.laurel, "data-side": side, viewBox: "0 0 32 84", fill: "none", "aria-hidden": "true", focusable: "false", children: LAUREL_PATHS.map((d) => (_jsx("path", { d: d, fill: "currentColor", stroke: "currentColor" }, d))) }));
+}
+/**
+ * Whether the list is wider than the room it has — the phone's row, and only while it runs on past
+ * the band's edge.
+ *
+ * Scroller writes its tab stop unconditionally, because it cannot see what it was given. This can:
+ * the list is one of two shapes, and only one of them scrolls. A tab stop on rows that show every
+ * award is a stop that does nothing, so the list carries one while it overflows and drops it when a
+ * wider band wraps it. Measured rather than read off a breakpoint, because a phone's row of two
+ * short awards fits and does not scroll either.
+ *
+ * `false` until it has measured — a list rendered on the server has no width to ask about — and
+ * left there by a renderer with no ResizeObserver, which is the test environment rather than a
+ * browser anyone reads in.
+ */
+function useOverflowing(list) {
+    const [overflowing, setOverflowing] = useState(false);
+    useEffect(() => {
+        const element = list.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return;
+        // Scrolled past its box, or — while the phone's row runs — drawn wider than the band it runs
+        // across: the running row is not a scroller, so it never scrolls, but it is still a row that
+        // goes past the edge, and its tab stop is how a keyboard holds it still.
+        const measure = () => {
+            const band = element.closest('section');
+            setOverflowing(element.scrollWidth > element.clientWidth ||
+                (band !== null && element.getBoundingClientRect().width > band.getBoundingClientRect().width + 1));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [list]);
+    return overflowing;
+}
+/** One award's badge: the award's words between its two laurels. */
+function Badge({ award }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Laurel, { side: "leading" }), _jsxs("div", { className: awardsParts.copy, children: [_jsx("p", { className: awardsParts.name, children: award.title }), _jsx("p", { className: awardsParts.issuer, children: award.issuer })] }), _jsx(Laurel, { side: "trailing" })] }));
+}
+/**
+ * A heading over the awards a company has won, each between two laurels — the reference design's
+ * FeatureAwards.
+ *
+ * One list, two shapes, and the stylesheet chooses between them on the section's width. From the
+ * fold it wraps into centred rows of five at most; on a phone it is one row across the band that
+ * runs on its own, the reference's marquee, holding still while the reader hovers, focuses or presses
+ * on it. The running row is the awards drawn twice, the second set hidden from assistive technology,
+ * so its loop has no seam and a screen reader counts each award once. A reader who asked for less
+ * motion gets the row still, to swipe.
+ *
+ * The awards are records rather than children, `Award` from `awards-data`: an award is
+ * two lines of words, and the laurels around them are the section's, the same for every award.
+ *
+ * It arrives the way every block does: the heading, then each award a step behind the one before,
+ * in reading order. `'use client'` for that, for `useId`, which names the region and the row by the
+ * heading, and for the measurement that gives the row its tab stop.
+ */
+export function Awards({ ground = awardsDefaults.ground, title, awards }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const list = useRef(null);
+    const overflowing = useOverflowing(list);
+    // Nothing to show is nothing drawn: a heading over no awards is a claim with nothing behind it.
+    if (awards.length === 0)
+        return null;
+    return (_jsx("section", { className: awardsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: awardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsx("div", { className: awardsParts.header, children: _jsx("h2", { className: awardsParts.title, id: titleId, ...arriving(0), children: title }) }), _jsxs("ul", { className: awardsParts.list, ref: list, role: "list", tabIndex: overflowing ? 0 : undefined, "aria-labelledby": overflowing ? titleId : undefined, 
+                    // How many awards there are, which the phone's running row times its loop by.
+                    style: { '--dds-awards-count': awards.length }, children: [awards.map((award, at) => (
+                        // An award's place is its identity: the list is the page's, and nothing here reorders it.
+                        _jsx("li", { className: awardsParts.award, ...arriving(Math.min(FIRST_AWARD + at, LAST_STEP)), children: _jsx(Badge, { award: award }) }, at))), awards.map((award, at) => (_jsx("li", { className: awardsParts.award, "data-copy": "", "aria-hidden": "true", ...arriving(Math.min(FIRST_AWARD + at, LAST_STEP)), children: _jsx(Badge, { award: award }) }, `copy-${at}`)))] })] }) }));
+}

package/dist/components/blocks/awards/Awards.types.d.ts

@@ -0,0 +1,31 @@
+import type { Award } from '../../awards-data.js';
+export interface AwardsOwnProps {
+    /**
+     * `page` — The default, and the reference design's: the page's own white, with the laurels in color.fg.muted
+     * `subtle` — The grey band, for a section that needs setting apart from the one above it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the awards turn white and the laurels take color.fg.muted-inverse, the band's own quieter ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the badges are, in the fewest words that name them — "Our awards". */
+    title: string;
+    /** Always. The awards, in the order they are read — across each row from the fold, and along the one row on a phone. Newest first, usually: the year is what says a claim is current. Six or more, so the phone's row runs on past the band's edge. An empty list draws nothing. */
+    awards: Award[];
+}
+export type AwardsProps = AwardsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const awardsParts: {
+    readonly root: "dds-awards";
+    readonly inner: "dds-awards__inner";
+    readonly header: "dds-awards__header";
+    readonly title: "dds-awards__title";
+    readonly list: "dds-awards__list";
+    readonly award: "dds-awards__award";
+    readonly laurel: "dds-awards__laurel";
+    readonly copy: "dds-awards__copy";
+    readonly name: "dds-awards__name";
+    readonly issuer: "dds-awards__issuer";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const awardsDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/awards/Awards.types.js

@@ -0,0 +1,16 @@
+// GENERATED from awards.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const awardsParts = {
+    root: 'dds-awards',
+    inner: 'dds-awards__inner',
+    header: 'dds-awards__header',
+    title: 'dds-awards__title',
+    list: 'dds-awards__list',
+    award: 'dds-awards__award',
+    laurel: 'dds-awards__laurel',
+    copy: 'dds-awards__copy',
+    name: 'dds-awards__name',
+    issuer: 'dds-awards__issuer',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const awardsDefaults = { ground: 'page' };