@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/download-banner/DownloadBanner.css

@@ -0,0 +1,228 @@
+/* GENERATED from downloadbanner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner {
+  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-downloadbanner .dds-downloadbanner__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-downloadbanner .dds-downloadbanner__card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  border-radius: var(--radius-container);
+  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-downloadbanner .dds-downloadbanner__lead {
+  align-items: center;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr-tile {
+  display: none;
+  flex-shrink: 0;
+  background-color: var(--color-bg-surface-card-light-raised);
+  border-radius: var(--radius-container-item);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr {
+  display: block;
+  object-fit: cover;
+  block-size: var(--size-download-banner-qr);
+  border-radius: var(--radius-subtle);
+  inline-size: var(--size-download-banner-qr);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr-label {
+  display: none;
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__eyebrow {
+  margin: 0;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h3-family);
+  font-size: var(--font-h3-size);
+  font-weight: var(--font-h3-weight);
+  letter-spacing: var(--font-h3-letter-spacing);
+  line-height: var(--font-h3-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__description {
+  margin: 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);
+  margin-block-start: var(--space-heading-title-description-compact);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__disclaimer {
+  margin-block: 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);
+  margin-block-start: var(--space-heading-title-description-compact);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge {
+  display: flex;
+  min-inline-size: 0;
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link {
+  transition-property: outline-color, outline-width, translate;
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  max-inline-size: 100%;
+  outline-style: solid;
+  background-color: var(--color-bg-store-badge);
+  block-size: var(--size-control-lg);
+  border-radius: var(--radius-subtle);
+  inline-size: var(--size-download-banner-badge);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-gap-xs);
+  padding-inline: var(--space-inset-sm);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__mark {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  max-block-size: var(--size-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__media {
+  display: flex;
+  justify-content: center;
+  overflow: clip;
+  border-start-end-radius: var(--radius-container);
+  border-start-start-radius: var(--radius-container);
+  inline-size: var(--size-download-banner-media);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link:hover {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="page"] .dds-downloadbanner__card {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="page"] .dds-downloadbanner__disclaimer {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__card {
+  background-color: var(--color-bg-surface-card-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__disclaimer {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[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-downloadbanner[data-ground="subtle"] .dds-downloadbanner__card {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="subtle"] .dds-downloadbanner__disclaimer {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__badge-link:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-downloadbanner,
+  :where([data-dds-context="marketing"]) .dds-downloadbanner * { transition: none !important; }
+}
+

package/dist/components/blocks/download-banner/DownloadBanner.d.ts

@@ -0,0 +1,28 @@
+import './DownloadBanner.css';
+import './download-banner-impl.css';
+import '../block-reveal.css';
+import { type DownloadBannerProps } from './DownloadBanner.types.js';
+export type { DownloadBannerProps };
+/**
+ * A card promoting the app's downloads — the reference site's DownloadBanner.
+ *
+ * A heading and the stores' badges, and from the fold a QR code beside the heading with a line
+ * telling the reader to scan it. On a phone the code and its line are not drawn: the reader is
+ * already holding the device the code would open on, so the heading stands alone over the badges,
+ * two to a row. The reference swapped in a second heading there; this keeps the one, so the region
+ * is named the same at every width.
+ *
+ * The badges are records rather than elements: a platform and a link. The component picks the
+ * artwork from the platform, so a page cannot hand over a redrawn or outdated store badge, and names
+ * each link by the words its artwork carries unless the record gives a label of its own.
+ *
+ * Two ways to draw the card. The standard card takes the ground's fill. The featured card is for a
+ * page promoting an app: the brand's coral, with a Background pattern drawn inside it as a layer
+ * under its content — the aurora unless the page names the mesh — laid out as a split, the app's
+ * name, the heading and the badges with the code beside them on one side and the app's own image on
+ * the other, rising out of the card. Its words are white, and the pattern answers the pointer.
+ *
+ * It arrives the way every block does: the code, then the words, then the badges. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export declare function DownloadBanner({ ground, variant, pattern, eyebrow, media, title, description, badges, qr, disclaimer, }: DownloadBannerProps): import("react").JSX.Element;

package/dist/components/blocks/download-banner/DownloadBanner.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { AndroidApkFillColoredIcon, AppleAppStoreFillColoredIcon, AppleDmgFillColoredIcon, AppleMacAppStoreFillColoredIcon, GooglePlayFillColoredIcon, HuaweiAppGalleryFillColoredIcon, LinuxFillColoredIcon, WebBrowserFillColoredIcon, WindowsExeFillColoredIcon, WindowsStoreFillColoredIcon, } from '@deriv-com/quill-icons-web';
+import './DownloadBanner.css';
+import './download-banner-impl.css';
+import '../block-reveal.css';
+import { Background } from '../../core/background/Background.js';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { downloadBannerDefaults, downloadBannerParts } from './DownloadBanner.types.js';
+/**
+ * Each platform's artwork, and the words that artwork carries.
+ *
+ * The artwork is the store's own badge from Quill's app-store set, never redrawn here: a store's
+ * badge is a trademark with rules about how it is shown, and the set is where those rules were
+ * already kept. The filled, coloured form, because it carries its own black ground — the outline
+ * form is dark ink with no ground, which vanishes on the dark band and in dark mode.
+ *
+ * The words are what the artwork says, so the name a screen reader hears and the name a speech-input
+ * user says are the ones on the badge.
+ */
+const BADGES = {
+    'app-store': { Mark: AppleAppStoreFillColoredIcon, name: 'Download on the App Store' },
+    'google-play': { Mark: GooglePlayFillColoredIcon, name: 'Get it on Google Play' },
+    'app-gallery': { Mark: HuaweiAppGalleryFillColoredIcon, name: 'Explore it on AppGallery' },
+    'android-apk': { Mark: AndroidApkFillColoredIcon, name: 'Direct download APK file' },
+    'mac-app-store': { Mark: AppleMacAppStoreFillColoredIcon, name: 'Download on the Mac App Store' },
+    'macos-dmg': { Mark: AppleDmgFillColoredIcon, name: 'Download for macOS .dmg' },
+    'windows-store': { Mark: WindowsStoreFillColoredIcon, name: 'Download app for Windows' },
+    'windows-exe': { Mark: WindowsExeFillColoredIcon, name: 'Download for Windows .exe' },
+    linux: { Mark: LinuxFillColoredIcon, name: 'Installation on Linux. Download' },
+    web: { Mark: WebBrowserFillColoredIcon, name: 'Use it on your web browser' },
+};
+/**
+ * A card promoting the app's downloads — the reference site's DownloadBanner.
+ *
+ * A heading and the stores' badges, and from the fold a QR code beside the heading with a line
+ * telling the reader to scan it. On a phone the code and its line are not drawn: the reader is
+ * already holding the device the code would open on, so the heading stands alone over the badges,
+ * two to a row. The reference swapped in a second heading there; this keeps the one, so the region
+ * is named the same at every width.
+ *
+ * The badges are records rather than elements: a platform and a link. The component picks the
+ * artwork from the platform, so a page cannot hand over a redrawn or outdated store badge, and names
+ * each link by the words its artwork carries unless the record gives a label of its own.
+ *
+ * Two ways to draw the card. The standard card takes the ground's fill. The featured card is for a
+ * page promoting an app: the brand's coral, with a Background pattern drawn inside it as a layer
+ * under its content — the aurora unless the page names the mesh — laid out as a split, the app's
+ * name, the heading and the badges with the code beside them on one side and the app's own image on
+ * the other, rising out of the card. Its words are white, and the pattern answers the pointer.
+ *
+ * It arrives the way every block does: the code, then the words, then the badges. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export function DownloadBanner({ ground = downloadBannerDefaults.ground, variant = downloadBannerDefaults.variant, pattern, eyebrow, media, title, description, badges, qr, disclaimer, }) {
+    const titleId = useId();
+    /* The code is the standard card's: the featured card promotes the app with its image instead. */
+    const code = variant === 'standard' ? qr : undefined;
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: downloadBannerParts.root, "data-ground": ground, "data-variant": variant, "aria-labelledby": titleId, children: _jsx("div", { className: downloadBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: downloadBannerParts.card, children: [variant === 'featured' ? (_jsx(Background, { tone: "brand", pattern: pattern ?? 'aurora', children: null })) : null, _jsxs("div", { className: downloadBannerParts.lead, children: [code ? (_jsx("div", { className: downloadBannerParts['qr-tile'], ...arriving(0), children: _jsx("img", { className: downloadBannerParts.qr, src: code.src, alt: code.alt }) })) : null, _jsxs("div", { className: downloadBannerParts.text, ...arriving(1), children: [code ? _jsx("p", { className: downloadBannerParts['qr-label'], children: code.label }) : null, variant === 'featured' && given(eyebrow) ? (_jsx("p", { className: downloadBannerParts.eyebrow, children: eyebrow })) : null, _jsx("h2", { className: downloadBannerParts.title, id: titleId, children: title }), given(description) ? _jsx("p", { className: downloadBannerParts.description, children: description }) : null, given(disclaimer) ? _jsx("p", { className: downloadBannerParts.disclaimer, children: disclaimer }) : null] })] }), badges.length > 0 ? (_jsx("ul", { className: downloadBannerParts.badges, ...arriving(2), children: badges.map(({ platform, href, label }, at) => {
+                            /* A platform this has no artwork for draws nothing rather than a blank link: the
+                               type rules it out, and a record from a feed or an editor is not typed. */
+                            const badge = BADGES[platform];
+                            if (badge === undefined)
+                                return null;
+                            const { Mark, name } = badge;
+                            return (
+                            /* Keyed by place as well as platform: a page may list one platform twice — two
+                               builds of the same desktop app — and a key repeated is a badge React confuses
+                               with the other. */
+                            _jsx("li", { className: downloadBannerParts.badge, children: _jsx("a", { className: downloadBannerParts['badge-link'], href: href, "aria-label": given(label) ? label : name, children: _jsx(Mark, { className: downloadBannerParts.mark, width: undefined, height: undefined, "aria-hidden": "true", focusable: "false" }) }) }, `${platform}-${at}`));
+                        }) })) : null, variant === 'featured' && media !== undefined && media !== null ? (_jsx("div", { className: downloadBannerParts.media, ...arriving(3), children: media })) : null] }) }) }));
+}

package/dist/components/blocks/download-banner/DownloadBanner.types.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { DownloadBannerBadge, DownloadBannerQr } from '../../download-banner-data.js';
+export interface DownloadBannerOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The card is the recessed gray that sets it off — the reference design's light-2
+     * `subtle` — The grey band, with the card white on it — the reference design's light. 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, with the card at color.bg.surface-card-strong and white words on it — the reference design's dark. For a download section a reader should arrive at; the badges are black and keep their own edge on it
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** The featured card only: the app itself — a screenshot of it in a phone, the page's own image. It stands at the card's end, rising out of the card's top edge and resting on its bottom one, so the card reads as the app being held out to the reader. On a phone it sits under the badges. */
+    media?: ReactNode;
+    /** The featured card only: the app's name, or what kind of app it is, small above the heading — "Deriv GO", "Mobile app". */
+    eyebrow?: string;
+    /** Always. Where the app can be had, in a few words — "Trade on the go", "Available on". The section's heading at every width: under the scan line beside the code from the fold, and alone over the badges on a phone. */
+    title: string;
+    /** A line under the heading saying what the app gives a reader — "Trade on the go with the same account, markets and tools." One sentence. */
+    description?: string;
+    /** Always. The stores and downloads the app is in, in the order a reader should meet them — mobile stores first, then desktop, then the web. Each names its `platform`, which picks the store's own artwork, and the `href` that reaches the product in it. An empty list draws no badges. */
+    badges: DownloadBannerBadge[];
+    /** A QR code reaching the same app the badges do, so a reader at a desktop can take it to their phone. The page's image, with the words it is read as and the line telling the reader to scan it. Drawn from the fold and never on a phone, where the reader is already holding the device it would open on, and only on the standard card: the featured card promotes an app with its image, and the badges are its one way in. Leave it out and the heading stands alone at every width. */
+    qr?: DownloadBannerQr;
+    /** One line of small print under the heading — which versions the desktop app runs on, or where the app is not offered. */
+    disclaimer?: string;
+}
+export type DownloadBannerProps = DownloadBannerOwnProps & ({
+    variant?: 'standard' | 'featured';
+    pattern?: undefined;
+} | {
+    variant: Exclude<'standard' | 'featured', 'standard'>;
+    pattern?: 'aurora' | 'mesh';
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const downloadBannerParts: {
+    readonly root: "dds-downloadbanner";
+    readonly inner: "dds-downloadbanner__inner";
+    readonly card: "dds-downloadbanner__card";
+    readonly lead: "dds-downloadbanner__lead";
+    readonly 'qr-tile': "dds-downloadbanner__qr-tile";
+    readonly qr: "dds-downloadbanner__qr";
+    readonly text: "dds-downloadbanner__text";
+    readonly 'qr-label': "dds-downloadbanner__qr-label";
+    readonly eyebrow: "dds-downloadbanner__eyebrow";
+    readonly title: "dds-downloadbanner__title";
+    readonly description: "dds-downloadbanner__description";
+    readonly disclaimer: "dds-downloadbanner__disclaimer";
+    readonly badges: "dds-downloadbanner__badges";
+    readonly badge: "dds-downloadbanner__badge";
+    readonly 'badge-link': "dds-downloadbanner__badge-link";
+    readonly mark: "dds-downloadbanner__mark";
+    readonly media: "dds-downloadbanner__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const downloadBannerDefaults: {
+    readonly ground: "page";
+    readonly variant: "standard";
+};

package/dist/components/blocks/download-banner/DownloadBanner.types.js

@@ -0,0 +1,23 @@
+// GENERATED from download-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const downloadBannerParts = {
+    root: 'dds-downloadbanner',
+    inner: 'dds-downloadbanner__inner',
+    card: 'dds-downloadbanner__card',
+    lead: 'dds-downloadbanner__lead',
+    'qr-tile': 'dds-downloadbanner__qr-tile',
+    qr: 'dds-downloadbanner__qr',
+    text: 'dds-downloadbanner__text',
+    'qr-label': 'dds-downloadbanner__qr-label',
+    eyebrow: 'dds-downloadbanner__eyebrow',
+    title: 'dds-downloadbanner__title',
+    description: 'dds-downloadbanner__description',
+    disclaimer: 'dds-downloadbanner__disclaimer',
+    badges: 'dds-downloadbanner__badges',
+    badge: 'dds-downloadbanner__badge',
+    'badge-link': 'dds-downloadbanner__badge-link',
+    mark: 'dds-downloadbanner__mark',
+    media: 'dds-downloadbanner__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const downloadBannerDefaults = { ground: 'page', variant: 'standard' };

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

@@ -0,0 +1,216 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * Two badges to a row on a phone, each chip filling its column, so every badge is the same size
+ * there as it is from the fold. `minmax(0, 1fr)` rather than `1fr`, so a column narrower than the
+ * artwork narrows the artwork — it keeps its proportions inside the chip — instead of pushing the
+ * grid past the card.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link {
+  inline-size: 100%;
+}
+
+/*
+ * The code and its line from the fold, and the badges a row that wraps.
+ *
+ * On a phone the generated sheet draws neither the code nor the line telling the reader to scan
+ * it — the reference design's swap, and its reason: a code is for a reader on a device other than
+ * the one it opens on, and on a phone the reader is holding that device. The heading stays, so the
+ * region keeps one name at every width. The badges there are two to a row, each filling its
+ * column, the reference's phone grid.
+ *
+ * From the fold there is room for the code beside the words, and the badges sit in a row that
+ * wraps, each chip size.download-banner.badge wide — one width for every store, whatever the shape
+ * of its artwork.
+ *
+ * `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-downloadbanner .dds-downloadbanner__qr-tile,
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__qr-label {
+    display: block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badge-link {
+    inline-size: var(--size-download-banner-badge);
+  }
+}
+
+/*
+ * From 64rem the heading and the badges side by side.
+ *
+ * The reference's desktop card: the code and its words at the start, the badges ranged to the end
+ * and wrapping there when there are more than the row holds. The words keep their own width and the
+ * badges take what is left, so a long set wraps under itself rather than pushing the heading into a
+ * column a word wide. `end` rather than right, so a mirrored page ranges them the other way.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__card {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__lead {
+    flex: 0 1 auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner .dds-downloadbanner__badges {
+    flex: 1 1 0;
+    justify-content: flex-end;
+  }
+}
+
+/*
+ * The featured card: the brand's coral, with its pattern inside it.
+ *
+ * color.bg.brand, the same in both themes, with the pattern on Background's brand tone — the mesh
+ * there is the design system's own front page. Every word on it is white, color.fg.on-brand, the
+ * line under the heading and the small print included: the quieter white the dark band uses is too
+ * faint on the coral, as CtaBanner found. The badges keep their own black, which reads on the coral.
+ * The featured card draws no QR code: it promotes the app with the app's own image, and the badges
+ * are its one way in.
+ *
+ * The pattern is held inside the card's own corners by its own layer, rounded as the card is, rather
+ * than by the card clipping everything it holds — the app's image rises out of the card's top edge,
+ * and a card that clipped would cut it off. The pattern stacks under the words.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+  isolation: isolate;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card > .dds-background {
+  border-radius: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] :is(.dds-downloadbanner__description, .dds-downloadbanner__disclaimer) {
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] :is(.dds-downloadbanner__lead, .dds-downloadbanner__badges) {
+  position: relative;
+  z-index: 1;
+}
+
+
+/*
+ * The featured card's layout: a page promoting an app.
+ *
+ * A grid rather than the standard card's row. On a phone it stacks — the app's name, the heading
+ * and the line, the badges, and the app's image under them, resting on the card's foot.
+ *
+ * The lead is opened out (`display: contents`) so the words are placed on the card's grid
+ * themselves, beside the app's image from the fold.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card {
+  align-items: center;
+  display: grid;
+  grid-template-areas:
+    'text'
+    'badges'
+    'media';
+  grid-template-columns: minmax(0, 1fr);
+  justify-content: normal;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__lead {
+  display: contents;
+}
+
+/* Opened out, the lead stacks nothing above the pattern any more, so its words are
+   lifted over the pattern themselves — and the app's image with them. */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] :is(.dds-downloadbanner__text, .dds-downloadbanner__media) {
+  position: relative;
+  z-index: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__text {
+  grid-area: text;
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__badges {
+  grid-area: badges;
+}
+
+/*
+ * The app's image rests on the card's foot: it reaches down through the card's own padding to the
+ * bottom edge, so the phone stands on the card rather than floating in it. The image is the page's,
+ * at its own proportions, never wider than its column.
+ */
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media {
+  align-self: end;
+  grid-area: media;
+  justify-self: center;
+  max-inline-size: 100%;
+  margin-block-end: calc(-1 * var(--space-inset-card));
+}
+
+:where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media > * {
+  block-size: auto;
+  inline-size: 100%;
+}
+
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media > *) {
+  display: block;
+}
+
+
+/*
+ * At full width, the split: the words over the badges on one side, the app on the other at its own
+ * width (size.download-banner.media, a phone held out rather than a slab). The app rises out of the
+ * card's top edge by the step a heading keeps from its content, so the card reads as the app being
+ * held out to the reader.
+ *
+ * At 64rem rather than the fold. Between the two the words column is narrow, its heading wraps and
+ * its badges stack, so the words stand taller than the app: the app, resting on the card's foot,
+ * then sat well below the top edge with coral above it and never rose. Stacked, as on a phone, until
+ * there is room for the split to look like one.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__card {
+    grid-template-areas:
+      'text media'
+      'badges media';
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  /* The badges start under the words, where the standard card ranges them to the end. The app is
+     taller than the words, and its two rows share what it adds; the words sit at the foot of theirs
+     and the badges at the head of theirs, so the two stay together in the middle of the card. */
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__text {
+    align-self: end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__badges {
+    align-self: start;
+    justify-content: flex-start;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-downloadbanner[data-variant='featured'] .dds-downloadbanner__media {
+    margin-block-start: calc(-1 * (var(--space-inset-card) + var(--space-heading-content)));
+  }
+}

package/dist/components/blocks/faq-accordion/FaqAccordion.css

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

package/dist/components/blocks/faq-accordion/faq-accordion-impl.css

@@ -23,11 +23,11 @@
 /*
  * The questions turn round on the dark band.
  *
- * AccordionItem draws its question in color.fg.default, its chevron and its hover in color.fg.muted,
+ * AccordionItem draws its question in color.fg.default, its chevron in color.fg.muted,
  * its rules in color.border.subtle and its focus ring in color.border.focus — every one of them made
  * for a light page, and every one dark on near-black. It has no tone to answer with, so the block,
- * which knows its ground, gives it the dark band's fixed roles: white questions, a chevron and a
- * hover at fg.muted-inverse, rules at the band's veil, the band's own focus ring. The answers need
+ * which knows its ground, gives it the dark band's fixed roles: white questions, a chevron at
+ * fg.muted-inverse, rules at the band's veil, the band's own focus ring. The answers need
  * nothing: they take the section's ink, which is already white.
  */
 :where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem {
@@ -38,10 +38,6 @@
   color: var(--color-fg-on-brand-strong);
 }
 
-:where([data-dds-context="marketing"])
-  .dds-faqaccordion[data-ground="strong"]
-  .dds-accordionitem
-  .dds-accordionitem__trigger:hover:where(:not(:disabled)),
 :where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem .dds-accordionitem__marker {
   color: var(--color-fg-muted-inverse);
 }