@deriv-com/dds-marketing 0.2.0 → 1.0.1

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

@@ -0,0 +1,79 @@
+/* GENERATED from pageheader.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-pageheader {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__inner {
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+  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-pageheader .dds-pageheader__content {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-hero-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__eyebrow {
+  margin-block: 0;
+  font-family: var(--font-eyebrow-lg-family);
+  font-size: var(--font-eyebrow-lg-size);
+  font-weight: var(--font-eyebrow-lg-weight);
+  letter-spacing: var(--font-eyebrow-lg-letter-spacing);
+  line-height: var(--font-eyebrow-lg-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-hero-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+

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

@@ -0,0 +1,34 @@
+import './PageHeader.css';
+import './page-header-impl.css';
+import '../block-reveal.css';
+import { type PageHeaderProps } from './PageHeader.types.js';
+export type { PageHeaderProps };
+/**
+ * The band that opens a company or a legal page.
+ *
+ * The third of three opening bands, and the only one that is not a hero. Which band a page opens
+ * with follows from where the page sits rather than from a prop: a landing page takes LandingHero
+ * and a product page ProductHero. Separate components rather than one with a switch, so a page
+ * cannot be given a tier it is not.
+ *
+ * Capped rather than a screen tall, which is the whole difference. A reader arrives at Contact or
+ * Terms for the content, so the band names the page and gets out of the way — `size.band.compact`
+ * is the floor it takes, and the page begins immediately under it.
+ *
+ * No photograph and no visual slot, which is a decision rather than an omission: there is nothing
+ * to show on a page of terms, and a slot for one is a slot somebody eventually fills. What the band
+ * paints instead is a faint rule grid over its own ground, drawn in the stylesheet out of a border
+ * role — enough to say the band is deliberate rather than a gap.
+ *
+ * Which also means it has no scrim and needs none. The other two darken a photograph so a title
+ * reads over it; here the ground is the component's own and its contrast is already known.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block, because eyebrow-to-title and title-to-description are two different roles
+ * that agree at full width and part company on a phone.
+ *
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a band that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to.
+ */
+export declare function PageHeader({ eyebrow, title, headingLevel, description, actions, }: PageHeaderProps): import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './PageHeader.css';
+import './page-header-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { pageHeaderDefaults, pageHeaderParts } from './PageHeader.types.js';
+/**
+ * The band that opens a company or a legal page.
+ *
+ * The third of three opening bands, and the only one that is not a hero. Which band a page opens
+ * with follows from where the page sits rather than from a prop: a landing page takes LandingHero
+ * and a product page ProductHero. Separate components rather than one with a switch, so a page
+ * cannot be given a tier it is not.
+ *
+ * Capped rather than a screen tall, which is the whole difference. A reader arrives at Contact or
+ * Terms for the content, so the band names the page and gets out of the way — `size.band.compact`
+ * is the floor it takes, and the page begins immediately under it.
+ *
+ * No photograph and no visual slot, which is a decision rather than an omission: there is nothing
+ * to show on a page of terms, and a slot for one is a slot somebody eventually fills. What the band
+ * paints instead is a faint rule grid over its own ground, drawn in the stylesheet out of a border
+ * role — enough to say the band is deliberate rather than a gap.
+ *
+ * Which also means it has no scrim and needs none. The other two darken a photograph so a title
+ * reads over it; here the ground is the component's own and its contrast is already known.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block, because eyebrow-to-title and title-to-description are two different roles
+ * that agree at full width and part company on a phone.
+ *
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a band that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to.
+ */
+export function PageHeader({ eyebrow, title, headingLevel = pageHeaderDefaults.headingLevel, description, actions, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h2' ? 'h2' : 'h1';
+    return (_jsx("section", { className: pageHeaderParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: pageHeaderParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: pageHeaderParts.content, children: [_jsxs("div", { className: pageHeaderParts.text, children: [given(eyebrow) ? (_jsx("p", { className: pageHeaderParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: pageHeaderParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: pageHeaderParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: pageHeaderParts.actions, ...arriving(3), children: actions })) : null] }) }) }));
+}

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface PageHeaderOwnProps {
+    /** A word or two placing the page before its title names it — a product family, a market, a campaign */
+    eyebrow?: string;
+    /** Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name */
+    title: string;
+    /**
+     * `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+     * `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+     */
+    headingLevel?: 'h1' | 'h2';
+    /** The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone */
+    description?: string;
+    /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
+    actions?: ReactNode;
+}
+export type PageHeaderProps = PageHeaderOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const pageHeaderParts: {
+    readonly root: "dds-pageheader";
+    readonly inner: "dds-pageheader__inner";
+    readonly content: "dds-pageheader__content";
+    readonly text: "dds-pageheader__text";
+    readonly eyebrow: "dds-pageheader__eyebrow";
+    readonly title: "dds-pageheader__title";
+    readonly description: "dds-pageheader__description";
+    readonly actions: "dds-pageheader__actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const pageHeaderDefaults: {
+    readonly headingLevel: "h1";
+};

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

@@ -0,0 +1,14 @@
+// GENERATED from page-header.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const pageHeaderParts = {
+    root: 'dds-pageheader',
+    inner: 'dds-pageheader__inner',
+    content: 'dds-pageheader__content',
+    text: 'dds-pageheader__text',
+    eyebrow: 'dds-pageheader__eyebrow',
+    title: 'dds-pageheader__title',
+    description: 'dds-pageheader__description',
+    actions: 'dds-pageheader__actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const pageHeaderDefaults = { headingLevel: 'h1' };

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

@@ -0,0 +1,176 @@
+/*
+ * 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.
+ */
+
+/*
+ * Capped, not a screen.
+ *
+ * `size.band.compact` is the floor, and it is the one thing that separates this tier from the two
+ * above it — both take `100cqh`. A page opened for its content wants its name and then the
+ * content, so the band is held to size.band.compact rather than a screen and the first sentence
+ * is on screen with it.
+ *
+ * `min-block-size` rather than `block-size`, so a long title or a third line of description grows
+ * the band instead of being clipped by it.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader {
+  align-items: center;
+  min-block-size: var(--size-band-compact);
+}
+
+/*
+ * The rule grid, drawn rather than fetched.
+ *
+ * The reference design paints this with an inline SVG carrying its own brand hex — a 3KB data URI
+ * with `#FF7E88` written into it, which is a colour decision hidden where no token can reach and
+ * no check can read. Two repeating gradients say the same thing out of `color.border.subtle-inverse`,
+ * the role this package already has for a hairline on a dark ground.
+ *
+ * `background-image` rather than a part of its own: it is a texture on the band's ground, not an
+ * element, and a part that rendered an empty div to carry a pattern would be markup standing in
+ * for a paint.
+ *
+ * The line is `border.width.hairline` and the step is `size.rule-grid.pitch`, a role added with this
+ * band. A pitch is not a gap — it is how far apart a decorative line recurs, not the space between
+ * two things a reader is comparing — so it earns a name of its own rather than borrowing one.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader {
+  background-image:
+    /*
+     * The fade, painted over the grid rather than into it.
+     *
+     * A background layer list paints first-listed on top, so this sits above both sets of rules
+     * and below everything the band holds — the heading is a child element and children paint
+     * above every background their box carries, so the fade reaches the grid and nothing else.
+     *
+     * It fades *from* the band's own ground, which is how a paint covers something without a mask:
+     * opaque at the top, where the rules are covered, and transparent at the foot, where they come
+     * through. `color.bg.brand-strong` is the same role the band paints beneath, so the fade and
+     * the ground are one colour and the grid is the only thing that changes.
+     *
+     * That way round because the band opens under a navigation bar and closes against the page:
+     * the rules gather towards the edge the content carries on over, so the grid reads as the
+     * ground the page is built on rather than as a lid over the heading.
+     *
+     * Masking the element instead would have faded the title with it — the grid is a background
+     * and the words are not, and a mask cannot tell them apart.
+     */
+    linear-gradient(to bottom, var(--color-bg-brand-strong), transparent),
+    /*
+     * `to right` is physical, and it is the one place in these blocks that is.
+     *
+     * A CSS gradient has no logical direction — there is no `to inline-end` — so a pattern that
+     * must mirror has to be written twice under a direction query. This one does not: the rules
+     * repeat on a fixed pitch and the whole field is centred, so the same pixels land in the same
+     * places whichever way the page is read. A grid of evenly spaced lines has no leading edge to
+     * get wrong.
+     *
+     * Said out loud because the next pattern here may not be periodic, and a reader who copies
+     * this line into one that is would mirror nothing. See the `written-along-the-reading-axis`
+     * rule.
+     */
+    repeating-linear-gradient(
+      to right,
+      var(--color-border-subtle-inverse) 0 var(--border-width-hairline),
+      transparent var(--border-width-hairline) var(--size-rule-grid-pitch)
+    ),
+    /*
+     * The horizontal rules run up from the foot, not down from the top.
+     *
+     * Drawn `to bottom` and centred, the last rule landed wherever the band's height left it — a
+     * line short of the edge on one page, a line past it on the next. `to top` starts the pattern at
+     * the bottom edge, so the first rule is the band's own lower edge and every other one is a
+     * whole pitch above it, whatever the title and description make the height. The fade covers
+     * the top, which is the only end that can now fall between two rules.
+     */
+    repeating-linear-gradient(
+      to top,
+      var(--color-border-subtle-inverse) 0 var(--border-width-hairline),
+      transparent var(--border-width-hairline) var(--size-rule-grid-pitch)
+    );
+  background-position: center;
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the text block sit on each part's own `margin-block-end`, because eyebrow-to-
+ * title and title-to-description are two roles that agree at full width and part company on a
+ * phone. The cost is a trailing margin: with `description` absent the title is the last child and
+ * its step is measured against nothing.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * Starts on a phone, centred once the band is wide enough to hold a line.
+ *
+ * The same rule the product tier follows, and the reference design applies it to both: centred
+ * text is read from a different starting edge on every line, which costs little across a wide
+ * measure and a great deal across a narrow one.
+ *
+ * `size.measure.hero-heading` caps the block at either width; `margin-inline: auto` is what centres
+ * that capped block rather than leaving it at the column's leading edge with its text centred
+ * inside it.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__text {
+    margin-inline: auto;
+  }
+
+  /*
+   * And the line under the title, which is held to a narrower measure than the block it sits in.
+   *
+   * `text` runs to a heading's measure and the description to a reading one, so the description's
+   * box is the narrower of the two and was sitting against the start edge of a centred block. Its
+   * words were centred within it, so what a reader saw was a centred title over a paragraph that
+   * had slipped left — the kind of misalignment that looks like a mistake in the copy rather than
+   * in a box nobody can see.
+   *
+   * Only where the block is centred. Below the fold everything ranges to the start and an auto margin
+   * would centre the one part that should not be.
+   */
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+    justify-content: center;
+  }
+}
+
+/*
+ * Two calls to action stack on a phone and stand side by side once there is room.
+ *
+ * The reference design makes each one full width at the narrow end — a button that hugs its label
+ * on a phone is a tap target sized by how long the word happens to be — and lets them hug once the
+ * band is wide enough to hold both on a line.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions > * {
+  inline-size: 100%;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions > * {
+    inline-size: auto;
+  }
+}

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

@@ -0,0 +1,86 @@
+/* GENERATED from producthero.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-producthero {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+  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-producthero .dds-producthero__content {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__eyebrow {
+  margin-block: 0;
+  font-family: var(--font-eyebrow-lg-family);
+  font-size: var(--font-eyebrow-lg-size);
+  font-weight: var(--font-eyebrow-lg-weight);
+  letter-spacing: var(--font-eyebrow-lg-letter-spacing);
+  line-height: var(--font-eyebrow-lg-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-hero-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-none);
+}
+

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

@@ -0,0 +1,35 @@
+import './ProductHero.css';
+import './product-hero-impl.css';
+import '../block-reveal.css';
+import { type ProductHeroProps } from './ProductHero.types.js';
+export type { ProductHeroProps };
+/**
+ * The band that opens a product or a market page.
+ *
+ * The product tier's band, and one of three. Which band a page opens with follows from where the
+ * page sits rather than from a prop: a landing page takes LandingHero and a legal page PageHeader.
+ * Separate components rather than one with a switch, so a page cannot be given a tier it is not.
+ *
+ * One column, centred, read down: what the page is about, what a reader can do about it, and then
+ * the thing itself. That last part is the whole difference from the tier above. LandingHero ranges
+ * its claim to the start and places a subject against the band's own edge, cropped by it; here the claim
+ * goes over the middle and the product sits under it, in the column, whole and capped to the same
+ * measure as the text. A product page is about one thing, and nothing should cut into it.
+ *
+ * Which is why `media` is a child of `content` here and a child of the band there. The same slot, in two
+ * places, because the two tiers answer different questions about what a visual is for.
+ *
+ * `root` spans the full width and `inner` holds the measure — the arrangement Footer uses, and for
+ * the same reason: a ground stopping at the measure would read as a wide card at the top of the
+ * page rather than as the page beginning. The ground is dark and the ink is set once on the root,
+ * inherited by everything inside it.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block, because eyebrow-to-title and title-to-description are two different roles
+ * that agree at full width and part company on a phone.
+ *
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a band that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to.
+ */
+export declare function ProductHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: ProductHeroProps): import("react").JSX.Element;

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './ProductHero.css';
+import './product-hero-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { productHeroDefaults, productHeroParts, } from './ProductHero.types.js';
+/**
+ * The band that opens a product or a market page.
+ *
+ * The product tier's band, and one of three. Which band a page opens with follows from where the
+ * page sits rather than from a prop: a landing page takes LandingHero and a legal page PageHeader.
+ * Separate components rather than one with a switch, so a page cannot be given a tier it is not.
+ *
+ * One column, centred, read down: what the page is about, what a reader can do about it, and then
+ * the thing itself. That last part is the whole difference from the tier above. LandingHero ranges
+ * its claim to the start and places a subject against the band's own edge, cropped by it; here the claim
+ * goes over the middle and the product sits under it, in the column, whole and capped to the same
+ * measure as the text. A product page is about one thing, and nothing should cut into it.
+ *
+ * Which is why `media` is a child of `content` here and a child of the band there. The same slot, in two
+ * places, because the two tiers answer different questions about what a visual is for.
+ *
+ * `root` spans the full width and `inner` holds the measure — the arrangement Footer uses, and for
+ * the same reason: a ground stopping at the measure would read as a wide card at the top of the
+ * page rather than as the page beginning. The ground is dark and the ink is set once on the root,
+ * inherited by everything inside it.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block, because eyebrow-to-title and title-to-description are two different roles
+ * that agree at full width and part company on a phone.
+ *
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a band that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to.
+ */
+export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h2' ? 'h2' : 'h1';
+    return (_jsx("section", { className: productHeroParts.root, "aria-labelledby": titleId, 
+        /* The one inline style here, and it is a value rather than a decision: which photograph,
+           supplied by the page. How it is drawn — the cover fit and the position —
+           is in the stylesheet, where it can be reasoned about. */
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: _jsx("div", { className: productHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: productHeroParts.content, children: [_jsxs("div", { className: productHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: productHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: productHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: productHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: productHeroParts.actions, ...arriving(3), children: actions })) : null, media ? (_jsx("div", { className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
+}

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+export interface ProductHeroOwnProps {
+    /** A word or two placing the page before its title names it — a product family, a market, a campaign */
+    eyebrow?: string;
+    /** Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name */
+    title: string;
+    /**
+     * `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+     * `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+     */
+    headingLevel?: 'h1' | 'h2';
+    /** The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone */
+    description?: string;
+    /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
+    actions?: ReactNode;
+    /** The product itself, under the claim and the actions — in the column, capped to the measure, and whole */
+    media?: ReactNode;
+    /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
+    backgroundImage?: string;
+}
+export type ProductHeroProps = ProductHeroOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const productHeroParts: {
+    readonly root: "dds-producthero";
+    readonly inner: "dds-producthero__inner";
+    readonly content: "dds-producthero__content";
+    readonly text: "dds-producthero__text";
+    readonly eyebrow: "dds-producthero__eyebrow";
+    readonly title: "dds-producthero__title";
+    readonly description: "dds-producthero__description";
+    readonly actions: "dds-producthero__actions";
+    readonly media: "dds-producthero__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const productHeroDefaults: {
+    readonly headingLevel: "h1";
+};

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

@@ -0,0 +1,15 @@
+// GENERATED from product-hero.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const productHeroParts = {
+    root: 'dds-producthero',
+    inner: 'dds-producthero__inner',
+    content: 'dds-producthero__content',
+    text: 'dds-producthero__text',
+    eyebrow: 'dds-producthero__eyebrow',
+    title: 'dds-producthero__title',
+    description: 'dds-producthero__description',
+    actions: 'dds-producthero__actions',
+    media: 'dds-producthero__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const productHeroDefaults = { headingLevel: 'h1' };