@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/image-banner/ImageBanner.d.ts

@@ -0,0 +1,32 @@
+import './ImageBanner.css';
+import './image-banner-impl.css';
+import '../block-reveal.css';
+import { type ImageBannerProps } from './ImageBanner.types.js';
+export type { ImageBannerProps };
+/**
+ * A dark card in the middle of a page, pairing a headline and a line under it with a photograph.
+ *
+ * The reference site's ImageBanner, and two of its layouts are `variant`: the photograph beside the
+ * words (split) or behind them (cover), each with one action. The reference's third, a collage
+ * beside a row of checked features with no action, is not offered: a set of features is a list a
+ * page composes, and FeatureBullets is that.
+ *
+ * The reference wrote each layout twice, `-left` and `-right`. Here that is `mediaPosition`, start
+ * and end, which is the axis FeatureSplit already names and the one a mirrored page reads without
+ * translating. The reference also ranged the words to the far edge on its right-hand layouts; they
+ * start here on either side, because a heading beside its content starts with it.
+ *
+ * The card is dark on every ground, which is what the block is for. `ground` paints the band around
+ * it the way every block's does, and on the dark band the card steps up to the strong card fill so
+ * it still reads as a card.
+ *
+ *
+ * The photograph is the page's. It is not hidden from assistive technology the way FeatureSplit's
+ * is: the reference asks for alt text where the photograph means something, so the page says
+ * whether it does, with an empty alt where it does not.
+ *
+ * It arrives the way every block does — the headline, the line, then the action, and
+ * the photograph after them. A cover photograph is the card's ground rather than a part of what it
+ * says, so it is there from the start and only the words arrive over it.
+ */
+export declare function ImageBanner({ ground, variant, mediaPosition, parallax, title, headingLevel, description, action, media, }: ImageBannerProps): import("react").JSX.Element;

package/dist/components/blocks/image-banner/ImageBanner.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './ImageBanner.css';
+import './image-banner-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { imageBannerDefaults, imageBannerParts } from './ImageBanner.types.js';
+/**
+ * A dark card in the middle of a page, pairing a headline and a line under it with a photograph.
+ *
+ * The reference site's ImageBanner, and two of its layouts are `variant`: the photograph beside the
+ * words (split) or behind them (cover), each with one action. The reference's third, a collage
+ * beside a row of checked features with no action, is not offered: a set of features is a list a
+ * page composes, and FeatureBullets is that.
+ *
+ * The reference wrote each layout twice, `-left` and `-right`. Here that is `mediaPosition`, start
+ * and end, which is the axis FeatureSplit already names and the one a mirrored page reads without
+ * translating. The reference also ranged the words to the far edge on its right-hand layouts; they
+ * start here on either side, because a heading beside its content starts with it.
+ *
+ * The card is dark on every ground, which is what the block is for. `ground` paints the band around
+ * it the way every block's does, and on the dark band the card steps up to the strong card fill so
+ * it still reads as a card.
+ *
+ *
+ * The photograph is the page's. It is not hidden from assistive technology the way FeatureSplit's
+ * is: the reference asks for alt text where the photograph means something, so the page says
+ * whether it does, with an empty alt where it does not.
+ *
+ * It arrives the way every block does — the headline, the line, then the action, and
+ * the photograph after them. A cover photograph is the card's ground rather than a part of what it
+ * says, so it is there from the start and only the words arrive over it.
+ */
+export function ImageBanner({ ground = imageBannerDefaults.ground, variant = imageBannerDefaults.variant, mediaPosition = imageBannerDefaults.mediaPosition, parallax = imageBannerDefaults.parallax, title, headingLevel = imageBannerDefaults.headingLevel, description, action, media, }) {
+    const titleId = useId();
+    const Title = headingLevel;
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
+}

package/dist/components/blocks/image-banner/ImageBanner.types.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+export interface ImageBannerOwnProps {
+    /**
+     * `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
+     * `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. On a phone the card runs the width of the screen and the photograph stacks with the words
+     * `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. For a photograph wide enough to be the band rather than half of it
+     */
+    variant?: 'split' | 'cover';
+    /**
+     * `end` — The default. The words lead and the photograph follows, which is the order the card argues in
+     * `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. The one thing the card says, in under eight words — "Join our global community". */
+    title: string;
+    /**
+     * `h2` — The default: the card is a section of the page, under the page's own h1
+     * `h3` — The card sits inside a section that already carries the h2 it belongs to
+     */
+    headingLevel?: 'h2' | 'h3';
+    /** The line under the headline saying what it means for the reader, in one or two sentences. */
+    description?: string;
+    /** The one thing the card asks for. The card is dark in both themes, so a Button here takes tone="inverse": the primary is the coral fill and it is the card's one primary. On a phone it fills the width of the card. */
+    action?: ReactNode;
+    /** Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration. */
+    media: ReactNode;
+    /** The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. For a careers or about page, where the photograph of the people is the point. Off by default: a card selling one action does not need its picture moving under the button. */
+    parallax?: boolean;
+}
+export type ImageBannerProps = ImageBannerOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const imageBannerParts: {
+    readonly root: "dds-imagebanner";
+    readonly inner: "dds-imagebanner__inner";
+    readonly card: "dds-imagebanner__card";
+    readonly content: "dds-imagebanner__content";
+    readonly title: "dds-imagebanner__title";
+    readonly description: "dds-imagebanner__description";
+    readonly action: "dds-imagebanner__action";
+    readonly media: "dds-imagebanner__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const imageBannerDefaults: {
+    readonly ground: "page";
+    readonly variant: "split";
+    readonly mediaPosition: "end";
+    readonly headingLevel: "h2";
+    readonly parallax: false;
+};

package/dist/components/blocks/image-banner/ImageBanner.types.js

@@ -0,0 +1,14 @@
+// GENERATED from image-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const imageBannerParts = {
+    root: 'dds-imagebanner',
+    inner: 'dds-imagebanner__inner',
+    card: 'dds-imagebanner__card',
+    content: 'dds-imagebanner__content',
+    title: 'dds-imagebanner__title',
+    description: 'dds-imagebanner__description',
+    action: 'dds-imagebanner__action',
+    media: 'dds-imagebanner__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: false };

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

@@ -0,0 +1,281 @@
+/*
+ * 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`, as FeatureSplit's do,
+ * because title-to-description and description-to-what-follows are two roles. With nothing after
+ * the title or the line, that step is measured against nothing, so the last of them drops it.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__title:last-child,
+:where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__description:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * One column below the fold.
+ *
+ * The row direction is the contract's to say, and the generated sheet carries both values. What is
+ * left here is the fold, which `structure` has no width to attach to. Written an attribute deeper
+ * than the generated rule — `.dds-imagebanner[data-media-position="end"] .dds-imagebanner__card` —
+ * so it wins however the two sheets are ordered.
+ *
+ * The words lead, except on a split card whose photograph was asked to lead: the reference design
+ * puts that photograph above the words on a phone as well, which is the one place this block
+ * differs from FeatureSplit's words-first fold.
+ *
+ * `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-imagebanner[data-variant][data-media-position]
+    .dds-imagebanner__card {
+    flex-direction: column;
+  }
+
+  :where([data-dds-context="marketing"])
+    .dds-imagebanner[data-variant="split"][data-media-position="start"]
+    .dds-imagebanner__card {
+    flex-direction: column-reverse;
+  }
+
+  /*
+   * A split or cover card runs the width of a phone, as the reference design's does: the gutter
+   * goes, and so do the corners, which at the screen's edge would round into nothing.
+   */
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__inner {
+    padding-inline: 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__card {
+    border-radius: var(--radius-none);
+  }
+
+  /*
+   * The action fills the card's width on a phone, and the row is what does it: it becomes a column
+   * and stretches what it holds, so the Button is full width here and its own size from the fold.
+   * That is the package's rule for a section's actions, a single one included.
+   */
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__action {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__action > * {
+    inline-size: 100%;
+  }
+
+}
+
+/*
+ * The words take half the card at full width and the photograph the rest.
+ *
+ * Split is side by side from the fold. It stretches the photograph to the card's height and asks a
+ * height of the card, size.image-banner.card, so a short line beside a wide photograph is still a
+ * band rather than a strip; the landscape ratio the phone uses is let go, since the card now decides
+ * the photograph's shape.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__content {
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__card {
+    min-block-size: var(--size-image-banner-card);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant] .dds-imagebanner__media {
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media {
+    aspect-ratio: auto;
+  }
+
+  /*
+   * The cover card's words hold three fifths of it, on the side away from where the photograph
+   * shows clear — the reference design's measure.
+   */
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+    flex: 0 1 60%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant] .dds-imagebanner__action {
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+/*
+ * More room inside the card once it is a desktop's width, as the reference design gives it.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__content {
+    padding: var(--space-inset-2xl);
+  }
+}
+
+/*
+ * Whatever the page put in a split photograph fills it.
+ *
+ * The slot takes a node, so what arrives is the page's element — an AspectRatio box or an image —
+ * and this cannot know whether it carries dimensions. `cover`, because the half is a shape the card
+ * decided on and a photograph letterboxed in it would show the card through the gaps.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media > *,
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="split"] .dds-imagebanner__media img,
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media > *,
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-imagebanner .dds-imagebanner__media > *, [data-dds-context="marketing"] .dds-imagebanner .dds-imagebanner__media img) {
+  display: block;
+}
+
+
+/*
+ * The cover photograph is the card's ground: it fills the card behind the words, and the words are
+ * stacked over it. A stacking order is an integer, which is why it is here rather than bound.
+ *
+ * The card asks a height so the photograph has somewhere to show, size.image-banner.card at every
+ * width — the reference design's band.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__card {
+  min-block-size: var(--size-image-banner-card);
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media {
+  inset: 0;
+  position: absolute;
+  z-index: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+  z-index: 1;
+}
+
+/*
+ * The scrim over the cover photograph, darkest where the words are.
+ *
+ * color.bg.overlay held across the whole of the words' column — three fifths of the card, the
+ * content's share — so white body copy keeps AA over even a pale photograph; then
+ * color.bg.overlay-subtle, the role for an image overlay, and clear at the far side, so the
+ * photograph shows where nothing is written on it. Darkest only at the words' edge was not enough:
+ * over a light photograph the end of a line of copy sat at about 2:1.
+ * On a phone the words are at the top across the whole width, so the scrim runs down rather than
+ * across.
+ *
+ * A gradient takes a physical direction — there is no `to inline-end` — so the direction is a
+ * custom property set once per case: toward the photograph's side, and mirrored under `:dir(rtl)`,
+ * which is the package's rule for a pattern that must follow the reading direction. Set on the
+ * photograph rather than the section, because a container query styles what is inside the
+ * container and never the container itself.
+ *
+ * The words need no rule to change sides: the photograph is out of flow behind them, so the row
+ * `mediaPosition` sets holds the words alone, at the start or, reversed, at the end.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media::after {
+  background-image: linear-gradient(
+    var(--dds-imagebanner-scrim-toward, to bottom),
+    var(--color-bg-overlay),
+    var(--color-bg-overlay) 60%,
+    var(--color-bg-overlay-subtle) 80%,
+    transparent
+  );
+  content: '';
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"] .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to right;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"]:dir(rtl) .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"]:dir(rtl) .dds-imagebanner__media {
+    --dds-imagebanner-scrim-toward: to right;
+  }
+}
+
+/*
+ * `parallax`: the photograph drifts against the scroll as the card passes through the view — the
+ * reference design's ParallaxBanner, folded in here as an option on the split and cover cards.
+ *
+ * The photograph is drawn taller than its frame by the drift, half above and half below, so the
+ * movement never shows an edge at either end; the frame clips it. The image itself is the thing
+ * that moves, so the frame keeps its size and the card its layout.
+ *
+ * Scroll-driven, the way LogoColumns moves its wall: the frame names a view timeline and the image
+ * runs down it from half the drift above centre to half below, over the whole pass (`cover`), so as
+ * the page carries the card up the photograph falls behind a little and reads as further away.
+ * Linear, because the scroll is the easing. The card and the frame clip with `overflow: clip`, not
+ * `hidden`: `hidden` makes a box a scroll container, and a view timeline measured against one that
+ * never scrolls stands still.
+ *
+ * A browser with no scroll timeline, and a reader who asked for less motion, get the photograph
+ * still and centred, as with `parallax` off.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
+  block-size: calc(100% + var(--motion-distance-drift));
+  margin-block-start: calc(var(--motion-distance-drift) / -2);
+  object-position: center top;
+}
+
+@keyframes dds-imagebanner-drift {
+  from {
+    translate: 0 calc(var(--motion-distance-drift) / -2);
+  }
+  to {
+    translate: 0 calc(var(--motion-distance-drift) / 2);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__media {
+    view-timeline: --dds-imagebanner-frame block;
+  }
+
+  /* Only for a reader who has not asked for less motion — asked here, around the rule, rather than
+     undone after it: the drift's selector outweighs any plain reset, and a reset that loses to it
+     leaves the photograph moving for exactly the reader who asked it not to. */
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
+      animation: dds-imagebanner-drift linear both;
+      animation-range: cover;
+      animation-timeline: --dds-imagebanner-frame;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
+    animation: none;
+  }
+}

package/dist/components/blocks/landing-hero/LandingHero.css

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

package/dist/components/blocks/landing-hero/LandingHero.d.ts

@@ -38,4 +38,4 @@ export type { LandingHeroProps };
  * title and the description; a photograph that carried meaning they do not would be a hero that
  * reads as empty to anyone who cannot see it, and the contract says so.
  */
-export declare function LandingHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: LandingHeroProps): import("react").JSX.Element;
+export declare function LandingHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, background, }: LandingHeroProps): import("react").JSX.Element;

package/dist/components/blocks/landing-hero/LandingHero.js

@@ -6,6 +6,7 @@ import './landing-hero-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
 import { landingHeroDefaults, landingHeroParts, } from './LandingHero.types.js';
 /**
  * The band that opens a marketing page.
@@ -42,13 +43,13 @@ import { landingHeroDefaults, landingHeroParts, } from './LandingHero.types.js';
  * title and the description; a photograph that carried meaning they do not would be a hero that
  * reads as empty to anyone who cannot see it, and the contract says so.
  */
-export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults.headingLevel, description, actions, media, backgroundImage, background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h2' ? 'h2' : 'h1';
-    return (_jsxs("section", { className: landingHeroParts.root, "aria-labelledby": titleId, 
+    return (_jsxs("section", { className: landingHeroParts.root, "data-background": background, "aria-labelledby": titleId, 
         /* The one inline style here, and it is a value rather than a decision: which photograph,
            supplied by the page. Everything about how it is drawn — the cover fit and the position — is in the stylesheet, where it can be reasoned about. A background shorthand
            would have reset those four properties every time the page passed an image. */
-        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/landing-hero/LandingHero.types.d.ts

@@ -15,10 +15,14 @@ export interface LandingHeroOwnProps {
     actions?: ReactNode;
     /** The band's visual — the subject standing beside the claim, cropped by the band's own inline edge rather than floating clear of it */
     media?: ReactNode;
-    /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
-    backgroundImage?: string;
 }
-export type LandingHeroProps = LandingHeroOwnProps;
+export type LandingHeroProps = LandingHeroOwnProps & ({
+    background?: 'halftone';
+    backgroundImage?: undefined;
+} | {
+    background?: undefined;
+    backgroundImage?: string;
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const landingHeroParts: {
     readonly root: "dds-landinghero";

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

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

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

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

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

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

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

@@ -31,4 +31,4 @@ export type { PageHeaderProps };
  * 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;
+export declare function PageHeader({ eyebrow, title, headingLevel, description, actions, background, }: PageHeaderProps): import("react").JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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