@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/logo-columns/LogoColumns.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: clip;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__inner {

package/dist/components/blocks/logo-rows/LogoRows.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: clip;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__inner {

package/dist/components/blocks/page-header/PageHeader.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: hidden;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);
   color: var(--color-fg-on-brand-strong);

package/dist/components/blocks/page-header/PageHeader.js

@@ -36,9 +36,9 @@ import { pageHeaderDefaults, pageHeaderParts } from './PageHeader.types.js';
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export function PageHeader({ eyebrow, title, headingLevel = pageHeaderDefaults.headingLevel, description, actions, background, }) {
+export function PageHeader({ eyebrow, title, headingLevel = pageHeaderDefaults.headingLevel, description, actions, background = pageHeaderDefaults.background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h2' ? 'h2' : 'h1';
-    return (_jsxs("section", { className: pageHeaderParts.root, "data-background": background, "aria-labelledby": titleId, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, _jsx("div", { className: pageHeaderParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: pageHeaderParts.content, children: [_jsxs("div", { className: pageHeaderParts.text, children: [given(eyebrow) ? (_jsx("p", { className: pageHeaderParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: pageHeaderParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: pageHeaderParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: pageHeaderParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+    return (_jsxs("section", { className: pageHeaderParts.root, "data-background": background, "aria-labelledby": titleId, children: [_jsx(Background, { tone: "dark", pattern: background, children: null }), _jsx("div", { className: pageHeaderParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: pageHeaderParts.content, children: [_jsxs("div", { className: pageHeaderParts.text, children: [given(eyebrow) ? (_jsx("p", { className: pageHeaderParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: pageHeaderParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: pageHeaderParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: pageHeaderParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/page-header/PageHeader.types.d.ts

@@ -14,9 +14,10 @@ export interface PageHeaderOwnProps {
     /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
     actions?: ReactNode;
     /**
-     * `halftone` — A halftone drawn behind the band's content: coral dots blending to white at the glow's heart, on the band's own dark ground, following the pointer over the band. Drawn by Background, placed as a layer under the content, so the band's own layout is untouched. It replaces the rule grid rather than joining it: two patterns on one band are texture fighting texture.
+     * `grid` — The default: the band's rule grid, lit — hairlines a pitch apart rising from a soft bloom at the band's foot, a brighter point where two lines cross and a short dash of light running along every few, brightening around the pointer. Drawn by Background as a layer under the content; before its shader has drawn, and where it cannot, the same rules painted by the stylesheet, so the band is never bare.
+     * `halftone` — A halftone drawn behind the band's content: coral dots blending to white at the glow's heart, on the band's own dark ground, following the pointer over the band. Drawn by Background, placed as a layer under the content, so the band's own layout is untouched. It replaces the grid rather than joining it: two patterns on one band are texture fighting texture.
      */
-    background?: 'halftone';
+    background?: 'grid' | 'halftone';
 }
 export type PageHeaderProps = PageHeaderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -33,4 +34,5 @@ export declare const pageHeaderParts: {
 /** Generated so defaults cannot drift from the contract. */
 export declare const pageHeaderDefaults: {
     readonly headingLevel: "h1";
+    readonly background: "grid";
 };

package/dist/components/blocks/page-header/PageHeader.types.js

@@ -11,4 +11,4 @@ export const pageHeaderParts = {
     actions: 'dds-pageheader__actions',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const pageHeaderDefaults = { headingLevel: 'h1' };
+export const pageHeaderDefaults = { headingLevel: 'h1', background: 'grid' };

package/dist/components/blocks/page-header/page-header-impl.css

@@ -176,9 +176,11 @@
 }
 
 /*
- * With the halftone the rule grid steps aside. Two patterns on one band are texture fighting
- * texture, and the halftone is the one that was asked for.
+ * With a pattern drawn the painted rule grid steps aside — which is always, now the lit grid is the
+ * band's default. The lit grid paints the same rules itself until its shader has drawn, and two
+ * patterns on one band are texture fighting texture. The rules above stay for a band rendered
+ * without the attribute, so it is never bare.
  */
-:where([data-dds-context="marketing"]) .dds-pageheader[data-background='halftone'] {
+:where([data-dds-context="marketing"]) .dds-pageheader[data-background] {
   background-image: none;
 }

package/dist/components/blocks/product-hero/ProductHero.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: hidden;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);
   color: var(--color-fg-on-brand-strong);
@@ -78,9 +79,13 @@
 
 :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
   min-inline-size: 0;
-  overflow: hidden;
+  overflow: clip;
   position: relative;
-  aspect-ratio: var(--aspect-square);
-  border-radius: var(--radius-none);
+  border-start-end-radius: var(--radius-container);
+  border-start-start-radius: var(--radius-container);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__image {
+  display: block;
 }
 

package/dist/components/blocks/product-hero/ProductHero.d.ts

@@ -32,4 +32,4 @@ export type { ProductHeroProps };
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export declare function ProductHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: ProductHeroProps): import("react").JSX.Element;
+export declare function ProductHero({ eyebrow, title, headingLevel, description, actions, image, media, backgroundImage, }: ProductHeroProps): import("react").JSX.Element;

package/dist/components/blocks/product-hero/ProductHero.js

@@ -36,7 +36,7 @@ import { productHeroDefaults, productHeroParts, } from './ProductHero.types.js';
  * region landmark once it has a name, and a band that announced itself as an unnamed section is one
  * more thing a screen reader user walks through rather than a place they can skip to.
  */
-export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults.headingLevel, description, actions, image, media, backgroundImage, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h2' ? 'h2' : 'h1';
@@ -44,5 +44,8 @@ export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults
         /* The one inline style here, and it is a value rather than a decision: which photograph,
            supplied by the page. How it is drawn — the cover fit and the position —
            is in the stylesheet, where it can be reasoned about. */
-        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: _jsx("div", { className: productHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: productHeroParts.content, children: [_jsxs("div", { className: productHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: productHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: productHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: productHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: productHeroParts.actions, ...arriving(3), children: actions })) : null, media ? (_jsx("div", { className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: _jsx("div", { className: productHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: productHeroParts.content, children: [_jsxs("div", { className: productHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: productHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: productHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: productHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: productHeroParts.actions, ...arriving(3), children: actions })) : null, image ? (
+                    // The picture at its own shape: drawn here so the band can size it, and read for its
+                    // `alt`, which the page leaves empty where the claim already names it.
+                    _jsx("div", { className: productHeroParts.media, ...arriving(4), children: _jsx("img", { className: productHeroParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, decoding: "async" }) })) : media ? (_jsx("div", { className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
 }

package/dist/components/blocks/product-hero/ProductHero.types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { BlockImage } from '../../block-image-data.js';
 export interface ProductHeroOwnProps {
     /** A word or two placing the page before its title names it — a product family, a market, a campaign */
     eyebrow?: string;
@@ -13,7 +14,9 @@ export interface ProductHeroOwnProps {
     description?: string;
     /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
     actions?: ReactNode;
-    /** The product itself, under the claim and the actions — in the column, capped to the measure, and whole */
+    /** The product itself, under the claim and the actions, drawn at the picture's own proportions — a square screenshot stays square, a tall phone stays tall — and only held to the screen's limit: no taller than aspect.portrait of the column on a phone, no taller than half the band from the fold. Never cropped. Give its width and height so the band reserves its shape before it loads. `alt` empty when the claim already names what it shows. */
+    image?: BlockImage;
+    /** A product picture in a shape the page fixes on purpose — an AspectRatio box, which keeps its ratio across the column. Prefer `image`, which keeps the picture's own shape and adapts to it. */
     media?: ReactNode;
     /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
     backgroundImage?: string;
@@ -30,6 +33,7 @@ export declare const productHeroParts: {
     readonly description: "dds-producthero__description";
     readonly actions: "dds-producthero__actions";
     readonly media: "dds-producthero__media";
+    readonly image: "dds-producthero__image";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const productHeroDefaults: {

package/dist/components/blocks/product-hero/ProductHero.types.js

@@ -10,6 +10,7 @@ export const productHeroParts = {
     description: 'dds-producthero__description',
     actions: 'dds-producthero__actions',
     media: 'dds-producthero__media',
+    image: 'dds-producthero__image',
 };
 /** Generated so defaults cannot drift from the contract. */
 export const productHeroDefaults = { headingLevel: 'h1' };

package/dist/components/blocks/product-hero/product-hero-impl.css

@@ -86,7 +86,7 @@
  * picture in something: `object-fit` does nothing on a `<div>`, so a rule aimed at the slot's
  * immediate child was silently a no-op whenever that child was a ratio box.
  */
-:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > * {
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > :not(.dds-producthero__image) {
   inline-size: 100%;
 }
 
@@ -173,10 +173,39 @@
   padding-block-end: 0;
 }
 
+/*
+ * The picture keeps its own shape; the screen only decides how tall it may grow.
+ *
+ * Given `image`, the frame wraps the picture rather than a box the band chose — as wide as the
+ * picture's shape allows, up to the column, centred — so a square screenshot is drawn square and a
+ * tall phone tall, whatever shape the band's own example is. The tallest it may be is aspect.portrait
+ * of the column on a phone, said as the factor 1.25, and half the band from the fold. A picture past
+ * that is drawn smaller, keeping its shape; nothing crops it. FeatureStack's rule, for the same
+ * reason.
+ *
+ * Given `media`, an AspectRatio box, the page fixed the shape on purpose: the box has no width of its
+ * own to wrap, so the frame takes the column's width and the box its shape across it.
+ */
+/* Set on the frame rather than the band: a container query styles what is inside the container,
+   never the container itself, so the band could not take the fold's value. */
 :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+  --dds-producthero-tallest: calc((100cqi - 2 * var(--space-inset-page)) * 1.25);
+  inline-size: fit-content;
+  margin-inline: auto;
+  max-inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media:not(:has(> .dds-producthero__image)) {
   inline-size: 100%;
 }
 
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__image {
+  block-size: auto;
+  inline-size: auto;
+  max-block-size: var(--dds-producthero-tallest);
+  max-inline-size: 100%;
+}
+
 /*
  * Below the fold the whole column sits at the foot, rather than the picture alone.
  *
@@ -256,6 +285,16 @@
     max-inline-size: min(80%, 50cqh);
   }
 
+  /* Given `image`, the cap is on the height — half the band — and the width follows the picture's
+     own shape, up to most of the column. */
+  :where([data-dds-context="marketing"]) .dds-producthero:has(.dds-producthero__image) .dds-producthero__media {
+    max-inline-size: 80%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+    --dds-producthero-tallest: 50cqh;
+  }
+
   /*
    * The claim starts below where a navigation bar would be.
    *
@@ -275,20 +314,12 @@
    * does not make it taller. Without the second half of this the cap clipped the picture instead
    * of resizing it.
    */
-  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > * {
-    block-size: 100%;
-    inline-size: auto;
-    margin-inline: auto;
-    max-inline-size: 100%;
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > :not(.dds-producthero__image) {
+    inline-size: 100%;
   }
 }
 
-:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media img {
-  block-size: 100%;
-  display: block;
-  inline-size: 100%;
-  object-fit: cover;
-}
+
 
 /*
  * The band rounds off as it leaves.

package/dist/components/blocks/resource-banner/ResourceBanner.css

@@ -0,0 +1,106 @@
+/* GENERATED from resourcebanner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__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);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__panel {
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  min-inline-size: 0;
+  border-radius: var(--radius-surface);
+  color: var(--color-fg-on-brand-strong);
+  column-gap: var(--space-heading-content);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__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-resourcebanner .dds-resourcebanner__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block: 0;
+  min-inline-size: 0;
+  padding-inline-start: 0;
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__item {
+  display: flex;
+  position: relative;
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="page"] .dds-resourcebanner__panel {
+  background-color: var(--color-bg-surface-card-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="strong"] .dds-resourcebanner__panel {
+  background-color: var(--color-bg-surface-card-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-resourcebanner[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-resourcebanner[data-ground="subtle"] .dds-resourcebanner__panel {
+  background-color: var(--color-bg-surface-card-strong-raised);
+}
+

package/dist/components/blocks/resource-banner/ResourceBanner.d.ts

@@ -0,0 +1,32 @@
+import './ResourceBanner.css';
+import './resource-banner-impl.css';
+import '../block-reveal.css';
+import { type ResourceBannerProps } from './ResourceBanner.types.js';
+export type { ResourceBannerProps };
+/**
+ * A dark panel pointing readers at related guides, policies and reference pages — the block that
+ * ends an informational section with "here's where to read more".
+ *
+ * The reference site's ResourceBanner, named the same: a heading and a line on one side, a stack
+ * of links on the other, in a rounded dark card. The panel carries its own ink, so `ground`
+ * changes only what is around it.
+ *
+ * The links are records rather than nodes, for the reason TestimonialRow's reviews are: a resource
+ * is a name and a destination, and every one is drawn the same way. That is what lets the block
+ * say the two things a link has to say about itself in the same words on every row — that it
+ * leaves the site, or that it saves a file. Each is a standalone Link in the panel's own ink, so
+ * the focus ring and the hover are Link's and the marks are Link's: its arrow for a page here, its
+ * up-right arrow for a page elsewhere. A download is marked with a file before its words instead,
+ * because an arrow pointing onward promises a page.
+ *
+ * Link's marks are decoration and announced as nothing, so an external link and a download end
+ * their accessible name with words that are heard and never drawn — `externalLabel` and
+ * `downloadLabel`, translated with the page. Appended rather than put in an `aria-label`, so the
+ * name still starts with the words a reader sees and a voice user can say them.
+ *
+ * `<ul>` at every width, so one link and four are one layout, and a screen reader announces how
+ * many there are before reading the first.
+ *
+ * `'use client'` for `useId`, which names the region by its heading, and for the arrival.
+ */
+export declare function ResourceBanner({ ground, title, headingLevel, description, links, externalLabel, downloadLabel, }: ResourceBannerProps): import("react").JSX.Element;

package/dist/components/blocks/resource-banner/ResourceBanner.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { FileArrowDownSolidIcon } from '@deriv-com/quill-icons-web';
+import './ResourceBanner.css';
+import './resource-banner-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import { Link } from '../../core/link/Link.js';
+import { resourceBannerDefaults, resourceBannerParts, } from './ResourceBanner.types.js';
+/**
+ * A dark panel pointing readers at related guides, policies and reference pages — the block that
+ * ends an informational section with "here's where to read more".
+ *
+ * The reference site's ResourceBanner, named the same: a heading and a line on one side, a stack
+ * of links on the other, in a rounded dark card. The panel carries its own ink, so `ground`
+ * changes only what is around it.
+ *
+ * The links are records rather than nodes, for the reason TestimonialRow's reviews are: a resource
+ * is a name and a destination, and every one is drawn the same way. That is what lets the block
+ * say the two things a link has to say about itself in the same words on every row — that it
+ * leaves the site, or that it saves a file. Each is a standalone Link in the panel's own ink, so
+ * the focus ring and the hover are Link's and the marks are Link's: its arrow for a page here, its
+ * up-right arrow for a page elsewhere. A download is marked with a file before its words instead,
+ * because an arrow pointing onward promises a page.
+ *
+ * Link's marks are decoration and announced as nothing, so an external link and a download end
+ * their accessible name with words that are heard and never drawn — `externalLabel` and
+ * `downloadLabel`, translated with the page. Appended rather than put in an `aria-label`, so the
+ * name still starts with the words a reader sees and a voice user can say them.
+ *
+ * `<ul>` at every width, so one link and four are one layout, and a screen reader announces how
+ * many there are before reading the first.
+ *
+ * `'use client'` for `useId`, which names the region by its heading, and for the arrival.
+ */
+export function ResourceBanner({ ground = resourceBannerDefaults.ground, title, headingLevel = resourceBannerDefaults.headingLevel, description, links, externalLabel = resourceBannerDefaults.externalLabel, downloadLabel = resourceBannerDefaults.downloadLabel, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel;
+    return (_jsx("section", { className: resourceBannerParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsx("div", { className: resourceBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: resourceBannerParts.panel, children: [_jsxs("div", { className: resourceBannerParts.content, children: [_jsx(Title, { className: resourceBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: resourceBannerParts.description, ...arriving(1), children: description })) : null] }), _jsx("ul", { className: resourceBannerParts.list, children: links
+                            .filter((link) => given(link.label) && given(link.href))
+                            .map((link, at) => (
+                        /* Keyed by where it goes and what it is called. Two rows the same in both are
+                           one resource listed twice, which is not a key collision worth tolerating.
+        
+                           The rows arrive after the heading and its line, in the order they are read. */
+                        _jsx("li", { className: resourceBannerParts.item, ...arriving(2 + at), children: _jsxs(Link, { href: link.href, tone: "inherit", external: link.external === true, download: link.download === true ? true : undefined, showIcon: link.download === true ? false : undefined, iconLeading: link.download === true ? _jsx(FileArrowDownSolidIcon, {}) : undefined, children: [link.label, link.external === true ? ' ' : null, link.external === true ? _jsx("span", { style: visuallyHidden, children: externalLabel }) : null, link.download === true ? ' ' : null, link.download === true ? _jsx("span", { style: visuallyHidden, children: downloadLabel }) : null] }) }, `${link.href}\u0000${link.label}`))) })] }) }) }));
+}

package/dist/components/blocks/resource-banner/ResourceBanner.types.d.ts

@@ -0,0 +1,44 @@
+import type { ResourceBannerLink } from '../../resource-banner-data.js';
+export interface ResourceBannerOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it
+     * `subtle` — The reference design's arrangement: the dark panel on the light grey band. The one to reach for when the section ends a run of white ones and wants to read as its close. 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. The panel is a step lighter than it, so it still reads as a panel — but a dark panel on a dark band is a quiet one, and this is for a page whose sections around it are already dark
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the links are for, in a few words — "Learn more about staying safe", "Read more about trading risks". */
+    title: string;
+    /**
+     * `h2` — The default: the block is a section of the page, under the page's own h1
+     * `h3` — The block closes a section that already carries the h2 it belongs to
+     * `h4` — The block closes a subsection under an h3, on a long legal or help page whose outline runs that deep
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4';
+    /** One sentence introducing the links — what the reader will find there, or why it is worth reading. */
+    description?: string;
+    /** Always. The resources, in the order they are read — one to four, each named for what is there: the guide, the policy, the page. Mark one `external` when it leaves the site, so it opens in a new tab and says so, and `download` when it is a file rather than a page. A row with no label or no href is dropped rather than drawn. */
+    links: ResourceBannerLink[];
+    /** What an external link's accessible name ends with, so a reader who cannot see the up-right mark is told before their tab changes. Never drawn — the mark says it to everyone else. Translate it with the page. */
+    externalLabel?: string;
+    /** What a download's accessible name ends with, so a reader who cannot see the file mark knows the link saves something rather than opening a page. Never drawn. Translate it with the page, and name the format in the link's own label when it matters — "Risk disclosure (PDF)". */
+    downloadLabel?: string;
+}
+export type ResourceBannerProps = ResourceBannerOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const resourceBannerParts: {
+    readonly root: "dds-resourcebanner";
+    readonly inner: "dds-resourcebanner__inner";
+    readonly panel: "dds-resourcebanner__panel";
+    readonly content: "dds-resourcebanner__content";
+    readonly title: "dds-resourcebanner__title";
+    readonly description: "dds-resourcebanner__description";
+    readonly list: "dds-resourcebanner__list";
+    readonly item: "dds-resourcebanner__item";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const resourceBannerDefaults: {
+    readonly ground: "page";
+    readonly headingLevel: "h2";
+    readonly externalLabel: "(opens in a new tab)";
+    readonly downloadLabel: "(downloads a file)";
+};

package/dist/components/blocks/resource-banner/ResourceBanner.types.js

@@ -0,0 +1,14 @@
+// GENERATED from resource-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const resourceBannerParts = {
+    root: 'dds-resourcebanner',
+    inner: 'dds-resourcebanner__inner',
+    panel: 'dds-resourcebanner__panel',
+    content: 'dds-resourcebanner__content',
+    title: 'dds-resourcebanner__title',
+    description: 'dds-resourcebanner__description',
+    list: 'dds-resourcebanner__list',
+    item: 'dds-resourcebanner__item',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const resourceBannerDefaults = { ground: 'page', headingLevel: 'h2', externalLabel: '(opens in a new tab)', downloadLabel: '(downloads a file)' };

package/dist/components/blocks/resource-banner/resource-banner-impl.css

@@ -0,0 +1,69 @@
+/*
+ * 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.
+ *
+ * Nothing here moves. The arrival is block-reveal.css's, which says what happens under reduced
+ * motion for every block at once; this sheet adds no transition or animation of its own.
+ */
+
+/*
+ * One column on a phone: the words, then the links under them.
+ *
+ * The track is written as `minmax(0, 1fr)` rather than `1fr` so a long link label wraps inside the
+ * column instead of widening it — a bare `1fr` has a minimum of its content, and an unbroken URL
+ * as a label would push the panel past the page's edge.
+ *
+ * The column counts are here rather than in the contract because a track list is not a token and
+ * not a keyword the contract's static CSS accepts.
+ */
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__panel {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/*
+ * Two equal columns from the fold, and the links centred in theirs.
+ *
+ * The reference centres the stack beside the words from this width. It centres each link on its
+ * own, which leaves a set of different lengths with a different start edge per row — a column the
+ * eye cannot run down. So it is the list that is centred, held to the width of its longest row,
+ * and the rows inside it share one start edge: the same place on the panel, read as a list.
+ *
+ * `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-resourcebanner .dds-resourcebanner__panel {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__list {
+    justify-self: center;
+  }
+}
+
+/*
+ * At full width the words take two shares to the links' one.
+ *
+ * The reference's own proportion. The words are read and the links are picked from, so the words
+ * get the room; a stack of short labels in half the panel is a column of air with a list in it.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__panel {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  }
+}
+
+/*
+ * The link fills its row's height and wraps inside its width.
+ *
+ * The row is held to size.target.min and is a flex container, so the link stretches to it and is
+ * never a smaller target than the rule allows, even where its line is shorter. And a flex item's
+ * minimum is its content: without `min-inline-size: 0` a long label would overflow the narrow
+ * phone column rather than breaking onto a second line.
+ */
+:where([data-dds-context="marketing"]) .dds-resourcebanner .dds-resourcebanner__item > .dds-link {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}