@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/cta-banner-slider/cta-banner-slider-impl.css

@@ -0,0 +1,73 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * One cell for every slide, so a change of message is a change in place.
+ *
+ * Stacked rather than laid out in a row: the band takes the height of its tallest slide whichever is
+ * showing, and nothing under it moves when the messages change. The slide in view is drawn; the
+ * others wait in the same cell at opacity.hidden, and `visibility` takes them out of hit-testing as
+ * well as sight, beside the `inert` the component gives them for focus.
+ *
+ * The fade borrows the track's own timing — motion.duration.slow and motion.easing.shift, bound in
+ * the contract — through `inherit`, because transition timings do not inherit on their own, and one
+ * binding on the track keeps the fade and the dots on a single beat. `visibility` is in the list
+ * so a slide fading out stays drawn until its opacity reaches zero, then drops out of reach.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+  grid-area: 1 / 1;
+  transition-property: opacity, visibility;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide[aria-hidden='true'] {
+  opacity: var(--opacity-hidden);
+  visibility: hidden;
+}
+
+/* A slide changes without fading for a reader who asked for less motion. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+    transition-property: none;
+  }
+}
+
+/*
+ * The track owns horizontal gestures and leaves vertical ones to the page.
+ *
+ * Without it a touch browser claims the pan for itself, sends pointercancel rather than pointerup,
+ * and the swipe never reaches the slider. pan-y keeps the page scrolling under a vertical finger.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__track {
+  touch-action: pan-y;
+}
+
+/*
+ * Starts on a phone, centred once the band is wide enough to hold a line.
+ *
+ * PageHeader's rule and its reason: centred text starts every line at a different edge, which costs
+ * little across a wide measure and a great deal across a narrow one. CtaBanner centres at the same
+ * width, so the two bands still read the same.
+ *
+ * The text and the line under it are capped narrower than the slide, so `margin-inline: auto` is
+ * what centres those boxes rather than their words inside a box left at the start edge. The dots
+ * follow, so the mark of where the reader is sits under the message it counts.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__slide {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__text,
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__actions,
+  :where([data-dds-context="marketing"]) .dds-ctabannerslider .dds-ctabannerslider__controls {
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,54 @@
+/* GENERATED from faqaccordion.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__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-faqaccordion .dds-faqaccordion__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);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__list {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[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);
+}
+

package/dist/components/blocks/faq-accordion/FaqAccordion.d.ts

@@ -0,0 +1,20 @@
+import './FaqAccordion.css';
+import './faq-accordion-impl.css';
+import '../block-reveal.css';
+import { type FaqAccordionProps } from './FaqAccordion.types.js';
+export type { FaqAccordionProps };
+/**
+ * A heading over a set of questions — the reference site's FaqAccordion.
+ *
+ * The rows are the page's AccordionItems, handed in as children, rather than question-and-answer
+ * records. An answer is often more than a string — a link to the fees page, a short list — and a
+ * row already holds whatever it is given, so a record here would be a smaller AccordionItem that
+ * could hold less. This draws the heading and the column and puts the rows in an Accordion, which
+ * is what keeps one open and rules between them: the reference's single-open set and its
+ * between-rows dividers are both Accordion's already, so neither is restated here.
+ *
+ * The heading is an `h2`, and the questions are `h3`, Accordion's default, so the outline reads
+ * section then question. It arrives the way every block does — the heading, then the set.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export declare function FaqAccordion({ ground, title, children }: FaqAccordionProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './FaqAccordion.css';
+import './faq-accordion-impl.css';
+import '../block-reveal.css';
+import { Accordion } from '../../core/accordion/Accordion.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { faqAccordionDefaults, faqAccordionParts } from './FaqAccordion.types.js';
+/**
+ * A heading over a set of questions — the reference site's FaqAccordion.
+ *
+ * The rows are the page's AccordionItems, handed in as children, rather than question-and-answer
+ * records. An answer is often more than a string — a link to the fees page, a short list — and a
+ * row already holds whatever it is given, so a record here would be a smaller AccordionItem that
+ * could hold less. This draws the heading and the column and puts the rows in an Accordion, which
+ * is what keeps one open and rules between them: the reference's single-open set and its
+ * between-rows dividers are both Accordion's already, so neither is restated here.
+ *
+ * The heading is an `h2`, and the questions are `h3`, Accordion's default, so the outline reads
+ * section then question. It arrives the way every block does — the heading, then the set.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export function FaqAccordion({ ground = faqAccordionDefaults.ground, title, children }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: faqAccordionParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: faqAccordionParts.inner, ref: band, "data-revealed": revealed, children: [_jsx("h2", { className: faqAccordionParts.title, id: titleId, ...arriving(0), children: title }), _jsx("div", { className: faqAccordionParts.list, ...arriving(1), children: _jsx(Accordion, { children: children }) })] }) }));
+}

package/dist/components/blocks/faq-accordion/FaqAccordion.types.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface FaqAccordionOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. 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. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The questions turn round with it: white headings, a muted chevron and rules in the band's own veil, fixed like the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the questions are about, in the fewest words — "Frequently asked questions", "Withdrawals". */
+    title: string;
+    /** Allowed: AccordionItem */
+    children: ReactNode;
+}
+export type FaqAccordionProps = FaqAccordionOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const faqAccordionParts: {
+    readonly root: "dds-faqaccordion";
+    readonly inner: "dds-faqaccordion__inner";
+    readonly title: "dds-faqaccordion__title";
+    readonly list: "dds-faqaccordion__list";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const faqAccordionDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/faq-accordion/FaqAccordion.types.js

@@ -0,0 +1,10 @@
+// GENERATED from faq-accordion.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const faqAccordionParts = {
+    root: 'dds-faqaccordion',
+    inner: 'dds-faqaccordion__inner',
+    title: 'dds-faqaccordion__title',
+    list: 'dds-faqaccordion__list',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const faqAccordionDefaults = { ground: 'page' };

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

@@ -0,0 +1,54 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The heading starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * PageHeader's rule and FeatureCards', at the same width, so the sections on one page agree about
+ * where a heading sits. The heading is capped at the heading measure, so `margin-inline: auto` is
+ * what centres the box rather than its words inside a box left at the start edge. The questions
+ * stay at the start edge: a row is read from its start, and a centred question would put the chevron at
+ * a different distance from every one of them.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__title {
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/*
+ * 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,
+ * 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
+ * nothing: they take the section's ink, which is already white.
+ */
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem .dds-accordionitem__trigger {
+  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);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-faqaccordion[data-ground="strong"]
+  .dds-accordionitem
+  .dds-accordionitem__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}

package/dist/components/blocks/feature-bullets/FeatureBullets.css

@@ -0,0 +1,139 @@
+/* GENERATED from featurebullets.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurebullets {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__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-featurebullets .dds-featurebullets__split {
+  align-items: stretch;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__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);
+  margin-block-end: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__item {
+  align-items: flex-start;
+  border-block-start-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  border-width: var(--border-width-default);
+  column-gap: var(--space-gap-md);
+  padding-block: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__mark {
+  align-items: center;
+  display: flex;
+  flex: 0;
+  justify-content: center;
+  block-size: var(--icon-size-md);
+  inline-size: var(--icon-size-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media {
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-container);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-media-position="end"] .dds-featurebullets__split {
+  flex-direction: row;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-media-position="start"] .dds-featurebullets__split {
+  flex-direction: row-reverse;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__text {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="page"] .dds-featurebullets__item {
+  border-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="page"] .dds-featurebullets__mark {
+  color: var(--color-fg-brand-accent);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="strong"] .dds-featurebullets__item {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="strong"] .dds-featurebullets__mark {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[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-featurebullets[data-ground="subtle"] .dds-featurebullets__item {
+  border-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="subtle"] .dds-featurebullets__mark {
+  color: var(--color-fg-brand);
+}
+

package/dist/components/blocks/feature-bullets/FeatureBullets.d.ts

@@ -0,0 +1,31 @@
+import './FeatureBullets.css';
+import './feature-bullets-impl.css';
+import '../block-reveal.css';
+import { type FeatureBulletsProps } from './FeatureBullets.types.js';
+export type { FeatureBulletsProps };
+/**
+ * A section pairing a claim and a ruled list of inclusions with one supporting picture.
+ *
+ * The list is the argument. Each line is one thing a reader gets, marked as included, and the
+ * column is meant to be counted rather than read — which is why the lines are strings rather than
+ * nodes. A line free to bring its own mark is a list that has stopped being one.
+ *
+ * The mark is the component's own and the only thing here the page does not supply. It is what
+ * separates a list of inclusions from a list: the same six strings with a bullet are a summary,
+ * with a check they are a promise. Drawn from the package's glyph set the way FooterGroup draws
+ * its chevron, and hidden from assistive technology — what it says is what the title says once,
+ * and announcing it per line is six repetitions of one fact.
+ *
+ * `<ul>` rather than a stack of divs, because a screen reader announces how many items there are
+ * before reading the first, and the count is most of what a reader takes from this section.
+ *
+ * Each row is ruled above rather than below. That is Accordion's arrangement and it is right for
+ * the same reason: every rule then belongs to a row and sits over it, so the lines fall between
+ * the rows and none is left hanging under the last one. The first row's is suppressed in the
+ * stylesheet, which is the one thing a binding cannot say.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name, and an unnamed one is a thing a screen reader user walks
+ * through rather than a place they can skip.
+ */
+export declare function FeatureBullets({ ground, mediaPosition, title, bullets, media, }: FeatureBulletsProps): import("react").JSX.Element;

package/dist/components/blocks/feature-bullets/FeatureBullets.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CircleCheckSolidIcon } from '@deriv-com/quill-icons-web';
+import './FeatureBullets.css';
+import './feature-bullets-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureBulletsDefaults, featureBulletsParts, } from './FeatureBullets.types.js';
+/**
+ * A section pairing a claim and a ruled list of inclusions with one supporting picture.
+ *
+ * The list is the argument. Each line is one thing a reader gets, marked as included, and the
+ * column is meant to be counted rather than read — which is why the lines are strings rather than
+ * nodes. A line free to bring its own mark is a list that has stopped being one.
+ *
+ * The mark is the component's own and the only thing here the page does not supply. It is what
+ * separates a list of inclusions from a list: the same six strings with a bullet are a summary,
+ * with a check they are a promise. Drawn from the package's glyph set the way FooterGroup draws
+ * its chevron, and hidden from assistive technology — what it says is what the title says once,
+ * and announcing it per line is six repetitions of one fact.
+ *
+ * `<ul>` rather than a stack of divs, because a screen reader announces how many items there are
+ * before reading the first, and the count is most of what a reader takes from this section.
+ *
+ * Each row is ruled above rather than below. That is Accordion's arrangement and it is right for
+ * the same reason: every rule then belongs to a row and sits over it, so the lines fall between
+ * the rows and none is left hanging under the last one. The first row's is suppressed in the
+ * stylesheet, which is the one thing a binding cannot say.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name, and an unnamed one is a thing a screen reader user walks
+ * through rather than a place they can skip.
+ */
+export function FeatureBullets({ ground = featureBulletsDefaults.ground, mediaPosition = featureBulletsDefaults.mediaPosition, title, bullets, media, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureBulletsParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureBulletsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureBulletsParts.split, children: [_jsxs("div", { className: featureBulletsParts.content, children: [_jsx("h2", { className: featureBulletsParts.title, ...arriving(0), id: titleId, children: title }), _jsx("ul", { className: featureBulletsParts.list, children: bullets
+                                    .filter((bullet) => bullet.trim() !== '')
+                                    .map((bullet, at) => (
+                                /* Keyed by the line itself. An index would key a list by position, so removing a
+                                 line above would renumber every row under it and React would reconcile the
+                                 wrong ones — and these lines are the content, so two the same would be a
+                                 duplicate claim rather than a key collision worth tolerating.
+              
+                                 The position is still what decides when a row arrives, and that is a different
+                                 question with a different answer: the rows come up in the order they are read,
+                                 so the set counts itself down rather than landing all at once. Taken after the
+                                 blank lines are dropped, so a line somebody is still typing does not leave a
+                                 gap in the count.
+              
+                                 Two behind the claim, which the picture beside them takes — the two halves of
+                                 the split arrive first and the list follows them. */
+                                _jsxs("li", { className: featureBulletsParts.item, ...arriving(2 + at), children: [_jsx("span", { className: featureBulletsParts.mark, "aria-hidden": "true", children: _jsx(CircleCheckSolidIcon, {}) }), _jsx("span", { className: featureBulletsParts.text, children: bullet })] }, bullet))) })] }), _jsx("div", { className: featureBulletsParts.media, ...arriving(1), "aria-hidden": "true", children: media })] }) }) }));
+}

package/dist/components/blocks/feature-bullets/FeatureBullets.types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+export interface FeatureBulletsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `end` — The default. The list is read first, which is the order the section argues in
+     * `start` — The second of two on a page, so the two do not read as one column with a picture stuck to one side
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. What the list is a list of, in the fewest words that say it */
+    title: string;
+    /** Always. One line per thing included, each short enough to take in at a glance. Strings rather than nodes, because every line is marked the same way and a line free to bring its own mark is a list that stops being one */
+    bullets: string[];
+    /** Always. The picture that sits beside the list — a screenshot, a photograph, an illustration. The section is a split and the picture is one half of it: without one the list runs to a measure it was never sized for, and what is left is a heading over a column with a gap beside it. */
+    media: ReactNode;
+}
+export type FeatureBulletsProps = FeatureBulletsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureBulletsParts: {
+    readonly root: "dds-featurebullets";
+    readonly inner: "dds-featurebullets__inner";
+    readonly split: "dds-featurebullets__split";
+    readonly content: "dds-featurebullets__content";
+    readonly title: "dds-featurebullets__title";
+    readonly list: "dds-featurebullets__list";
+    readonly item: "dds-featurebullets__item";
+    readonly mark: "dds-featurebullets__mark";
+    readonly text: "dds-featurebullets__text";
+    readonly media: "dds-featurebullets__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureBulletsDefaults: {
+    readonly ground: "page";
+    readonly mediaPosition: "end";
+};

package/dist/components/blocks/feature-bullets/FeatureBullets.types.js

@@ -0,0 +1,16 @@
+// GENERATED from feature-bullets.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureBulletsParts = {
+    root: 'dds-featurebullets',
+    inner: 'dds-featurebullets__inner',
+    split: 'dds-featurebullets__split',
+    content: 'dds-featurebullets__content',
+    title: 'dds-featurebullets__title',
+    list: 'dds-featurebullets__list',
+    item: 'dds-featurebullets__item',
+    mark: 'dds-featurebullets__mark',
+    text: 'dds-featurebullets__text',
+    media: 'dds-featurebullets__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureBulletsDefaults = { ground: 'page', mediaPosition: 'end' };

package/dist/components/blocks/feature-bullets/feature-bullets-impl.css

@@ -0,0 +1,104 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The first row is not ruled off from what is above it, because nothing is.
+ *
+ * Every row carries a rule on its start edge, which is what puts a line between each pair and
+ * none under the last. The cost is one at the top of the set, where it reads as a lid rather
+ * than a separator — and the set is already bounded by the section's own step above it.
+ *
+ * `:first-child` is the condition itself. Nothing about a row knows it is first, and a prop
+ * standing in for the question would be the page answering something the DOM already has.
+ */
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__item:first-child {
+  border-block-start-width: 0;
+  padding-block-start: 0;
+}
+
+/*
+ * The mark sits on the first line of the text, not in the middle of the row.
+ *
+ * `align-items: flex-start` puts it at the row's top edge, which is right for a line that wraps
+ * and a pixel high for one that does not: a 24px glyph beside a 24px line-height sits a touch
+ * proud, because the glyph is a full square and the letters inside the line are not. Nudging it
+ * by the difference is what makes the two look aligned rather than measure aligned.
+ *
+ * A raw length, and the one in this file. It is an optical correction — the amount by which a
+ * circle looks high next to a lowercase x — and there is no role for that because it is a
+ * property of these two shapes at this size rather than a decision the system makes.
+ */
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__mark {
+  margin-block-start: 0.125rem;
+}
+
+/*
+ * One column below the fold, and the list leads it.
+ *
+ * The row direction is the contract's to say — it varies by a styling axis, which is what
+ * `structure[]` is for, and the generated sheet carries both values. What is left here is the
+ * fold, which a binding cannot express: `structure` has no width to attach a rule to.
+ *
+ * Written a class deeper than it looks so it wins. The generated rule is
+ * `.dds-featurebullets[data-media-position="end"] .dds-featurebullets__split` — a class, an
+ * attribute and a class — and a plainer selector here loses to it however late it is loaded.
+ * That is exactly what went wrong before this rule existed: the split stayed a column at every
+ * width, and a picture given `flex: 1 1 0` on the block axis collapsed to nothing.
+ *
+ * `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 (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-featurebullets[data-media-position]
+    .dds-featurebullets__split {
+    flex-direction: column;
+  }
+}
+
+/*
+ * At full width the list takes a measure and the picture takes the rest.
+ *
+ * The reference design writes 540px against its 1280, which is a number only right at one width.
+ * A share holds everywhere, and the picture growing into whatever is left is what keeps the
+ * square square without either half naming a height.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * Whatever the page put in the picture fills the square.
+ *
+ * The slot takes a node rather than a source, so what arrives is the page's element and this
+ * cannot know whether it carries dimensions. `cover` rather than `contain`, because the slot is a
+ * square the section decided on and a picture letterboxed inside it would show the ground through
+ * a corner the section rounded.
+ */
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media > * {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}