@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/feature-scroll/FeatureScroll.types.d.ts

@@ -0,0 +1,40 @@
+import type { FeatureScrollStep } from '../../scroll-data.js';
+export interface FeatureScrollOwnProps {
+    /**
+     * `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 words are read first, which is the order a reader’s eye takes a two-up row in
+     * `start` — The pictures lead, for a section following one that put its own the other way — two scrolls facing the same way read as one very long column
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. What the set is a set of, in the fewest words that say it — 'All your markets in one place'. It is the only thing a reader sees before committing to several screens of scrolling, so it has to say what is coming */
+    title: string;
+    /** Always. The stops, in the order a reader meets them. Three at least — the section is built on each one having a screen, and a pair is worth one screen with both on it.
+  
+  Every stop is the same shape, which is what makes the set a set: a name, a line, a picture, and a way onward where there is one. */
+    steps: FeatureScrollStep[];
+}
+export type FeatureScrollProps = FeatureScrollOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureScrollParts: {
+    readonly root: "dds-featurescroll";
+    readonly inner: "dds-featurescroll__inner";
+    readonly heading: "dds-featurescroll__heading";
+    readonly steps: "dds-featurescroll__steps";
+    readonly step: "dds-featurescroll__step";
+    readonly content: "dds-featurescroll__content";
+    readonly title: "dds-featurescroll__title";
+    readonly description: "dds-featurescroll__description";
+    readonly link: "dds-featurescroll__link";
+    readonly media: "dds-featurescroll__media";
+    readonly picture: "dds-featurescroll__picture";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureScrollDefaults: {
+    readonly ground: "page";
+    readonly mediaPosition: "end";
+};

package/dist/components/blocks/feature-scroll/FeatureScroll.types.js

@@ -0,0 +1,17 @@
+// GENERATED from feature-scroll.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureScrollParts = {
+    root: 'dds-featurescroll',
+    inner: 'dds-featurescroll__inner',
+    heading: 'dds-featurescroll__heading',
+    steps: 'dds-featurescroll__steps',
+    step: 'dds-featurescroll__step',
+    content: 'dds-featurescroll__content',
+    title: 'dds-featurescroll__title',
+    description: 'dds-featurescroll__description',
+    link: 'dds-featurescroll__link',
+    media: 'dds-featurescroll__media',
+    picture: 'dds-featurescroll__picture',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureScrollDefaults = { ground: 'page', mediaPosition: 'end' };

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

@@ -0,0 +1,292 @@
+/*
+ * 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.
+ *
+ * Every query here is `@container` rather than `@media`. The section declares `container-type`,
+ * so the set folds on the band's own width — which is what the rest of this package does, and
+ * what makes the workbench's viewport control mean something: it resizes the stage rather than
+ * the browser, and a section asking the window would hold its desktop layout at every setting.
+ *
+ * `48rem` longhand throughout because `var()` is not permitted in a container query condition,
+ * and it is the width the rest of this package folds at.
+ */
+
+/*
+ * One column below the fold, and the picture between the name and the line about 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 with the `data-media-position` attribute so it carries the weight of the generated rules
+ * keyed on it — `.dds-featurescroll[data-media-position="end"] .dds-featurescroll__content` and its
+ * kin, a class, an attribute and a class — and wins over anything at that weight by loading later.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-featurescroll[data-media-position]
+    .dds-featurescroll__step {
+    flex-direction: column;
+  }
+
+  /*
+   * The text column stops being a box so the picture can sit inside its order.
+   *
+   * A phone has one column, and the picture is what tells a reader which of six stops they have
+   * reached — put after the words it arrives once they have already decided whether to read them.
+   * The name, the picture, then the line and the way onward is the reference design's own order,
+   * and the only other way to get it is a second copy of the markup for the second layout.
+   *
+   * `display: contents` takes the box out and leaves its children to the row above, so the four
+   * parts become four flex items and `order` can interleave them. The children keep their own
+   * styling; what is lost is anything the box itself drew, which here is one `row-gap` that is
+   * `space.gap.none` at every width anyway.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__content {
+    display: contents;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__title {
+    order: 1;
+  }
+
+  /*
+   * The band hugs its picture and the picture runs the column.
+   *
+   * There is one column below the fold, nothing to pin against, and no band to be the height of —
+   * so the air the band holds the picture off its edges by would be a hole in the stack, where the
+   * gap between the parts already does that job.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    order: 2;
+    padding-block: 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__picture {
+    inline-size: 100%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__description {
+    order: 3;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__link {
+    order: 4;
+  }
+
+  /*
+   * The steps between the parts come off the parts and onto the stack.
+   *
+   * At full width the column carries them on each part's own `margin-block-end`, because
+   * title-to-description and description-to-what-follows are two different roles. Below the fold
+   * there is a fifth thing in the order — the picture — and a margin belonging to the title would
+   * land under the picture instead of over it. So the row's own gap governs here, and the margins
+   * that would add to it are cleared.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__title,
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__description {
+    margin-block-end: 0;
+  }
+}
+
+/*
+ * A screen each at full width, the picture pinned for the length of it, and the set closed up.
+ *
+ * The height is the whole idea rather than a decoration on it: a reader arrives at one stop at a
+ * time and scrolls on to the next, which is what a set too long to compare needs and what a grid
+ * of six cards cannot give. `100cqh` rather than `100svh` for the reason LandingHero gives — with
+ * no ancestor declaring size containment the two are the same number, and the container unit is
+ * what lets a frame standing in for a window say otherwise. The section's own `container-type` is
+ * `inline-size`, which answers no question about height, so the unit passes straight through it.
+ *
+ * `position: sticky` and nothing else. The reference design measures scroll position in React,
+ * keeps an active index and crossfades between a stack of absolutely-placed pictures; the dissolve
+ * is what that buys and three listeners on a marketing page is what it costs. The browser already
+ * knows where the box is.
+ *
+ * It pins at `size.bar-height`, which is what a collapsed navigation bar takes — so the picture
+ * comes to rest just under the bar rather than behind it. On a page with no bar the offset is a
+ * margin, which is what a picture at the very top of the window wants anyway.
+ *
+ * The square is capped at the band it has to fit inside: the bar's height above it and the same
+ * again below, so a short window compacts the picture instead of running it past the fold. Both
+ * axes take the same cap because the shape is the point — capping the height alone would clamp a
+ * square into a letterbox, and the picture inside is cropped to fill whatever it is given.
+ *
+ * The gap between stops goes to nothing here. Below the fold they are ordinary blocks and want air
+ * between them, which is the gap the contract binds; at full width a picture is released at the
+ * moment the next arrives, and a gap there opens a stretch of scrolling with no picture pinned at
+ * all — which reads as the section having ended and started again.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__heading {
+    /* `margin-inline: auto` as well as the alignment, because the heading is held to
+       `size.measure.heading` — centred text inside a box still pinned to the start edge is a
+       heading that looks centred only while it is short enough not to reach the cap. */
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  /*
+   * Two columns, and every picture in one of them.
+   *
+   * The rows are named rather than numbered so the contract can place the two halves: `structure`
+   * may hold a keyword and may not hold a 2, on the argument that a ratio between siblings is a
+   * layout decision — and the names say which half is which where a number would only say where.
+   *
+   * The row count arrives as a custom property because `grid-row: 1 / -1` cannot reach the end of
+   * an implicit grid: with no explicit rows, `-1` is the end of the explicit one, which is the
+   * first row. Stated, the pictures span every row and land on top of one another.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__steps {
+    display: grid;
+    grid-template-columns: [words] 1fr [picture] 1fr;
+    grid-template-rows: repeat(var(--dds-featurescroll-stops, 1), auto);
+    row-gap: 0;
+  }
+
+  /*
+   * A stop gives up its box, so the grid can place what is inside it.
+   *
+   * This is what lets one tree serve both layouts. A picture inside its own stop can only be
+   * pinned within it — released a screen later, arriving from below, travelling rather than
+   * changing. Placed by the grid instead, every picture is in one column across every row, so
+   * they overlap and one can be exchanged for another in the same square.
+   *
+   * The stop stays in the markup and keeps its four parts together; what it gives up is a box
+   * nothing needed at this width.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__step {
+    display: contents;
+  }
+
+  /*
+   * Nothing arrives on its own up here, whatever it was marked.
+   *
+   * Below the fold the words and then the picture come up as a reader reaches them, because there
+   * is nothing else moving in a column of stacked blocks. Above it the picture is pinned beside
+   * the words and exchanged as each title is passed — that is the section's motion, and a stop
+   * sliding in under it would be two arrivals for one thing.
+   *
+   * There is a harder reason for the picture. It sits inside a `position: sticky` band, and a
+   * transform on it is a transform the pinning has to survive. `none` rather than a zero value, so
+   * no transform exists at all.
+   *
+   * The attribute stays on both elements and is simply not read here, which is what keeps the
+   * component free of a width it cannot measure: the fold is a container query, and no observer
+   * can see one.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll [data-revealed] [data-reveal-at] {
+    opacity: 1;
+    translate: none;
+  }
+
+  /*
+   * The words take a screen each, which is the rhythm the whole section is built on: a reader
+   * arrives at one stop at a time and scrolls on to the next. Centred in it so they sit level with
+   * the picture rather than at the head of a screen-tall row.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__content {
+    justify-content: center;
+    min-block-size: 100cqh;
+  }
+
+  /*
+   * Every band pinned at one line, and all of them stacked.
+   *
+   * `grid-row` spans the whole set, so the containing block a sticky box measures its room against
+   * is the entire list rather than one stop — which is what keeps a picture pinned from the first
+   * stop to the last instead of being released at each boundary.
+   *
+   * `align-self: start` because the band is a screen tall and its area is the whole list; stretched
+   * it would be as tall as the section and there would be nothing to pin.
+   *
+   * `100cqh` rather than `100svh` for the reason LandingHero gives: with no ancestor declaring size
+   * containment the two are the same number, and the container unit is what lets a frame standing
+   * in for a window say otherwise.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    align-self: start;
+    block-size: calc(100cqh - var(--size-bar-height));
+    grid-row: 1 / -1;
+    inset-block-start: var(--size-bar-height);
+    opacity: 0;
+    position: sticky;
+  }
+
+  /*
+   * And one of them is shown.
+   *
+   * The only thing the component's own listener writes. Which stop's picture belongs to the words
+   * a reader has reached is a question about where each title has got to, and no query asks it —
+   * everything else here, the pinning and the dissolve, is this stylesheet's.
+   *
+   * The duration and the curve are bound on the part, so the generated sheet writes the
+   * reduced-motion block that turns this into a cut.
+   */
+  :where([data-dds-context="marketing"])
+    .dds-featurescroll
+    .dds-featurescroll__media[data-showing="true"] {
+    opacity: 1;
+    /*
+     * On top, and that is what makes this a dissolve rather than a dip.
+     *
+     * The arriving picture fades in over whatever is beneath it, so at every moment of the change
+     * the square is covered by something opaque. Fading both at once instead leaves them near half
+     * way together, the section's own ground shows through the pair, and the square brightens and
+     * darkens — a pulse, from nothing but two opacities crossing.
+     *
+     * It has to be the shown one rather than the later one in the document, because a reader
+     * scrolls back as well as forward. Going up, the arriving picture is earlier in the markup and
+     * would fade in underneath the one it is replacing: invisible until that one left, which is a
+     * cut with a pause in front of it.
+     *
+     * A bare integer, which is the one kind of value this system keeps out of its tokens: a
+     * stacking order inside a component is not a decision any brand or mode has an opinion about.
+     */
+    z-index: 1;
+    /* No wait on the way in. The pair of delays is the whole mechanism — see the rule below. */
+    transition-delay: 0s;
+  }
+
+  /*
+   * The one leaving holds until it has been covered, then goes.
+   *
+   * This is the other half of the dissolve. The arriving picture takes the whole duration to reach
+   * full opacity, and for all of it the one underneath stays exactly as it was — so there is never
+   * a frame where the square is anything less than a complete picture. Only once it is hidden
+   * behind the new one does it drop, which costs nothing to look at because nobody can see it.
+   *
+   * The delay is the arriving picture's own duration, read from the same role, so the two cannot
+   * drift apart into a gap or an overlap.
+   *
+   * There is no scale here any more. It read as a pulse, which is what it was: a square this large
+   * carries a change of picture on its own, and a sixth of a second of zoom on top of it is the
+   * section drawing attention to its own machinery.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    transition-delay: var(--motion-duration-media-hover);
+    /* Named here rather than in the contract because `staticCss` takes keywords, and this is the
+       one property the pair of rules is about. The duration and the curve stay bound there, which
+       is what the generated reduced-motion block is written from — so a reader who asked for less
+       still gets a cut. */
+    transition-property: opacity;
+  }
+
+  /*
+   * The largest square the band can hold.
+   *
+   * Both bounds in one measure, because a square capped on one axis alone is not a square: giving
+   * it a `max-block-size` clamps the height and leaves the width, and the browser hands back a
+   * flattened picture. `min()` picks whichever runs out first — the half it sits in, or the band's
+   * own inner height, which is the band less the air it holds the picture off its edges by.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__picture {
+    inline-size: min(
+      100%,
+      calc(100cqh - var(--size-bar-height) - var(--space-gap-lg) * 2)
+    );
+  }
+}

package/dist/components/blocks/feature-split/FeatureSplit.css

@@ -0,0 +1,95 @@
+/* GENERATED from featuresplit.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featuresplit {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__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-featuresplit .dds-featuresplit__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-featuresplit .dds-featuresplit__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__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-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__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);
+  margin-block-end: var(--space-heading-description-actions);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__link {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__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-featuresplit[data-media-position="end"] .dds-featuresplit__split {
+  flex-direction: row;
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-media-position="start"] .dds-featuresplit__split {
+  flex-direction: row-reverse;
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[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/feature-split/FeatureSplit.d.ts

@@ -0,0 +1,30 @@
+import './FeatureSplit.css';
+import './feature-split-impl.css';
+import '../block-reveal.css';
+import { type FeatureSplitProps } from './FeatureSplit.types.js';
+export type { FeatureSplitProps };
+/**
+ * A section putting one claim, a line explaining it and a way onward beside a single picture.
+ *
+ * The plainest block this package has, and that is what it is for: a page that has said what
+ * something is needs somewhere to say one more thing about it without opening a list, a grid or a
+ * set of cards.
+ *
+ * A split rather than a stack, because the picture is the other half of the argument — the same
+ * words over a full-width photograph read as a caption, and beside it they read as a claim with
+ * evidence.
+ *
+ * The steps inside the column are carried by each part's own `margin-block-end` rather than by a
+ * gap on the column, because title-to-description and description-to-what-follows are two
+ * different roles that a single gap could only ever be one of. `content` binds `space.gap.none`
+ * to say the absence is deliberate rather than forgotten.
+ *
+ * The source template carried `showDescription` and `showLink` beside the values themselves. Both
+ * are gone: absence is the switch, which is the rule Footer set and `given` exists for. A flag
+ * saying whether to draw a value the caller already decided not to pass is two ways to say one
+ * thing, and they disagree the first time somebody sets only one of them.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name.
+ */
+export declare function FeatureSplit({ ground, mediaPosition, title, description, link, media, }: FeatureSplitProps): import("react").JSX.Element;

package/dist/components/blocks/feature-split/FeatureSplit.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './FeatureSplit.css';
+import './feature-split-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { featureSplitDefaults, featureSplitParts, } from './FeatureSplit.types.js';
+/**
+ * A section putting one claim, a line explaining it and a way onward beside a single picture.
+ *
+ * The plainest block this package has, and that is what it is for: a page that has said what
+ * something is needs somewhere to say one more thing about it without opening a list, a grid or a
+ * set of cards.
+ *
+ * A split rather than a stack, because the picture is the other half of the argument — the same
+ * words over a full-width photograph read as a caption, and beside it they read as a claim with
+ * evidence.
+ *
+ * The steps inside the column are carried by each part's own `margin-block-end` rather than by a
+ * gap on the column, because title-to-description and description-to-what-follows are two
+ * different roles that a single gap could only ever be one of. `content` binds `space.gap.none`
+ * to say the absence is deliberate rather than forgotten.
+ *
+ * The source template carried `showDescription` and `showLink` beside the values themselves. Both
+ * are gone: absence is the switch, which is the rule Footer set and `given` exists for. A flag
+ * saying whether to draw a value the caller already decided not to pass is two ways to say one
+ * thing, and they disagree the first time somebody sets only one of them.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name.
+ */
+export function FeatureSplit({ ground = featureSplitDefaults.ground, mediaPosition = featureSplitDefaults.mediaPosition, title, description, link, media, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureSplitParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureSplitParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureSplitParts.split, children: [_jsxs("div", { className: featureSplitParts.content, children: [_jsx("h2", { className: featureSplitParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: featureSplitParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureSplitParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureSplitParts.media, ...arriving(3), "aria-hidden": "true", children: media })] }) }) }));
+}

package/dist/components/blocks/feature-split/FeatureSplit.types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+export interface FeatureSplitOwnProps {
+    /**
+     * `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 claim 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. The one claim the section makes, in the fewest words that say it */
+    title: string;
+    /** The lines under the title that say what the claim above means, for a reader not convinced by the claim alone. Two sentences is the normal length here and what the section is sized around — one is usually the title restated, and the column is wide enough to carry more than that. */
+    description?: string;
+    /** The section has somewhere to send a reader who wants more than it says — the page this one is a summary of. "Learn more" is this site's wording for it, and using the same three words everywhere is what lets a reader stop reading them: a link that renames itself per section is a link somebody has to read before they know it is the way onward. */
+    link?: ReactNode;
+    /** Always. The picture that sits beside the claim — a screenshot, a photograph, an illustration. The section is a split and the picture is one half of it: without one the claim runs to a measure it was never sized for. */
+    media: ReactNode;
+}
+export type FeatureSplitProps = FeatureSplitOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureSplitParts: {
+    readonly root: "dds-featuresplit";
+    readonly inner: "dds-featuresplit__inner";
+    readonly split: "dds-featuresplit__split";
+    readonly content: "dds-featuresplit__content";
+    readonly title: "dds-featuresplit__title";
+    readonly description: "dds-featuresplit__description";
+    readonly link: "dds-featuresplit__link";
+    readonly media: "dds-featuresplit__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureSplitDefaults: {
+    readonly ground: "page";
+    readonly mediaPosition: "end";
+};

package/dist/components/blocks/feature-split/FeatureSplit.types.js

@@ -0,0 +1,14 @@
+// GENERATED from feature-split.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureSplitParts = {
+    root: 'dds-featuresplit',
+    inner: 'dds-featuresplit__inner',
+    split: 'dds-featuresplit__split',
+    content: 'dds-featuresplit__content',
+    title: 'dds-featuresplit__title',
+    description: 'dds-featuresplit__description',
+    link: 'dds-featuresplit__link',
+    media: 'dds-featuresplit__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureSplitDefaults = { ground: 'page', mediaPosition: 'end' };

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

@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the column sit on each part's own `margin-block-end`, because title-to-
+ * description and description-to-what-follows are two different roles. The cost is a trailing
+ * margin: with both the description and the link absent, the title is the last child and its step
+ * is measured against nothing.
+ *
+ * `:last-child` is the condition itself rather than a prop standing in for it — two parts can
+ * follow the title, and asking the DOM which is last is the question with one answer.
+ */
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__title:last-child,
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__description:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * One column below the fold, and the claim 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-featuresplit[data-media-position="end"] .dds-featuresplit__split` — a class, an attribute
+ * and a class — and a plainer selector here would lose to it however late it is loaded. That is
+ * the fault FeatureBullets shipped with for an afternoon: 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-featuresplit[data-media-position]
+    .dds-featuresplit__split {
+    flex-direction: column;
+  }
+}
+
+/*
+ * At full width the claim 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-featuresplit .dds-featuresplit__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__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-featuresplit .dds-featuresplit__media > *,
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}