@deriv-com/dds-marketing 1.1.2 → 1.2.0

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

@@ -383,3 +383,57 @@
     padding-block: var(--space-section-compact);
   }
 }
+
+/*
+ * `shade`: a shade behind the words, for a bright photograph.
+ *
+ * The photograph is shown as it is, and a bright one — the daylight sky the brand's heroes ask for —
+ * leaves the description and the actions below AA. Darkening the whole photograph fixes the number
+ * and loses the day. So the shade is drawn from the words themselves: a box of color.bg.overlay under
+ * the text and another under the actions, each reaching space.inset.2xl past the words and blurred by
+ * space.inset.xl, so it is full strength under every word and fades to clear in the margin round them.
+ * It follows the words wherever they sit — at the start on a phone, centred from the fold — and leaves
+ * the rest of the photograph its light.
+ *
+ * The two boxes meet rather than overlap: the text's runs down across the step to the actions, the
+ * actions' starts at their top edge. Overlapping, the two layers of shade doubled into a darker band
+ * between the words and the buttons; meeting, their blurred edges add back up to the one strength.
+ * A blur rather than a gradient because a gradient fills a box to its edge, and the edge then shows.
+ *
+ * Under the words, inside their own stacking context, so it can never be drawn over a word or a
+ * button.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] :is(.dds-producthero__text, .dds-producthero__actions) {
+  isolation: isolate;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] :is(.dds-producthero__text, .dds-producthero__actions)::before {
+  background-color: var(--color-bg-overlay);
+  content: '';
+  filter: blur(var(--space-inset-xl));
+  inset: calc(-1 * var(--space-inset-2xl));
+  pointer-events: none;
+  position: absolute;
+  z-index: -1;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] .dds-producthero__text:has(+ .dds-producthero__actions)::before {
+  inset-block-end: calc(-1 * var(--space-heading-description-actions));
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero[data-shade] .dds-producthero__actions::before {
+  inset-block-start: 0;
+}
+
+/*
+ * From the fold, where the words are centred, the text's box is the band's whole width while its
+ * balanced lines take much less of it, so a shade the box's width was a veil across the band. It is
+ * held to size.heading-group.max — the width a centred title and its line may run as a block — and
+ * the margin round that, centred with the words.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero[data-shade] .dds-producthero__text::before {
+    inset-inline: max(calc(-1 * var(--space-inset-2xl)), calc(50% - var(--size-heading-group-max) / 2 - var(--space-inset-2xl)));
+  }
+}

package/dist/components/blocks/resource-banner/ResourceBanner.css

@@ -91,7 +91,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="strong"] .dds-resourcebanner__panel {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-resourcebanner[data-ground="subtle"] {

package/dist/components/blocks/scene-scroll/SceneScroll.css

@@ -68,7 +68,7 @@
   max-inline-size: var(--size-measure-description);
 }
 
-:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
   display: flex;
   position: relative;
   padding-block-end: var(--space-section-default);

package/dist/components/blocks/scene-scroll/SceneScroll.d.ts

@@ -24,13 +24,14 @@ export type { SceneScrollProps };
  * translate and keep in step. The second scene's title sits one level under it, as the second half
  * of the section the first one names.
  *
- * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
- * colour running black to white with the scroll: a colour that changes with the photograph has to
- * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
- * any photograph at every frame, a pale one included.
+ * The words sit straight on the photographs, as the reference's do, with nothing laid between: each
+ * scene names its ink — near-black over a daylight photograph, white over a night one — and the
+ * scene carries it as `data-ink`, so the stylesheet sets it. Each scene's words fade as a whole, so
+ * the two inks are never drawn over each other; what the reference ran as one colour interpolating
+ * with the scroll is here two sets of words, each in its own ink, one giving way to the other.
  *
  * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
  * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
  * make it — on these words it would fight the scrub. The change-over is this block's entrance.
  */
-export declare function SceneScroll({ first, second, link, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;
+export declare function SceneScroll({ first, second, action, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;

package/dist/components/blocks/scene-scroll/SceneScroll.js

@@ -29,26 +29,27 @@ const under = { h1: 'h2', h2: 'h3' };
  * translate and keep in step. The second scene's title sits one level under it, as the second half
  * of the section the first one names.
  *
- * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
- * colour running black to white with the scroll: a colour that changes with the photograph has to
- * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
- * any photograph at every frame, a pale one included.
+ * The words sit straight on the photographs, as the reference's do, with nothing laid between: each
+ * scene names its ink — near-black over a daylight photograph, white over a night one — and the
+ * scene carries it as `data-ink`, so the stylesheet sets it. Each scene's words fade as a whole, so
+ * the two inks are never drawn over each other; what the reference ran as one colour interpolating
+ * with the scroll is here two sets of words, each in its own ink, one giving way to the other.
  *
  * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
  * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
  * make it — on these words it would fight the scrub. The change-over is this block's entrance.
  */
-export function SceneScroll({ first, second, link, headingLevel = sceneScrollDefaults.headingLevel, }) {
+export function SceneScroll({ first, second, action, headingLevel = sceneScrollDefaults.headingLevel, }) {
     const titleId = useId();
     // Both scenes are required, but a record from a feed or an editor is not typed: one that never
     // arrived draws nothing rather than taking the page down, and a section with half its change-over
     // missing is not the section, so neither scene is drawn alone.
     if (!first || !second)
         return null;
-    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), link ? _jsx("div", { className: sceneScrollParts.link, children: link }) : null] }) }));
+    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), action ? _jsx("div", { className: sceneScrollParts.action, children: action }) : null] }) }));
 }
 function Scene({ which, scene, level, titleId, eager = false }) {
     const Title = level;
     const { image } = scene;
-    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
+    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, "data-ink": scene.ink ?? 'light', children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
 }

package/dist/components/blocks/scene-scroll/SceneScroll.types.d.ts

@@ -6,12 +6,12 @@ export interface SceneScrollOwnProps {
      * `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
      */
     headingLevel?: 'h2' | 'h1';
-    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give the photograph's width and height; `alt` empty unless it shows something the words do not. */
+    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give its `ink` — `dark` over a light photograph, `light` over a dark one — and the photograph's width and height; `alt` empty unless it shows something the words do not. */
     first: SceneScrollScene;
-    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. */
+    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. Its `ink` is its own, so a daylight first scene in dark words can change over to a night one in white. */
     second: SceneScrollScene;
-    /** A way on for the reader who wants more — "See trading hours", "Learn more". A standalone Link under the words, and it stays put through the change-over: it belongs to the section rather than to either scene, so it never fades while the reader is reaching for it. */
-    link?: ReactNode;
+    /** One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. It belongs to the section rather than to either scene, so it holds still through the change-over and never fades while the reader is reaching for it. A primary Button, or a standalone Link at its brand tone: either reads over both photographs, where a Link taking the ink around it would take the band's white over a light photograph. */
+    action?: ReactNode;
 }
 export type SceneScrollProps = SceneScrollOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -24,7 +24,7 @@ export declare const sceneScrollParts: {
     readonly content: "dds-scenescroll__content";
     readonly title: "dds-scenescroll__title";
     readonly description: "dds-scenescroll__description";
-    readonly link: "dds-scenescroll__link";
+    readonly action: "dds-scenescroll__action";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const sceneScrollDefaults: {

package/dist/components/blocks/scene-scroll/SceneScroll.types.js

@@ -9,7 +9,7 @@ export const sceneScrollParts = {
     content: 'dds-scenescroll__content',
     title: 'dds-scenescroll__title',
     description: 'dds-scenescroll__description',
-    link: 'dds-scenescroll__link',
+    action: 'dds-scenescroll__action',
 };
 /** Generated so defaults cannot drift from the contract. */
 export const sceneScrollDefaults = { headingLevel: 'h2' };

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

@@ -50,23 +50,19 @@
 }
 
 /*
- * The scrim, the same over the whole scene.
+ * The words sit straight on the photograph, in the ink the scene names.
  *
- * color.bg.overlay is ImageBanner cover's scrim, held here across the whole photograph rather than
- * fading to clear: the words are centred over the scene from the fold and run its width on a phone,
- * so there is no clear side to leave. White over it keeps AA over any photograph, a pale one
- * included — a white photograph comes out a mid grey, which white words clear comfortably — so the
- * words never depend on the photograph being dark, and neither scene's words change colour.
+ * No scrim: the photograph is shown as it was taken, and the words are drawn in whichever ink it
+ * leaves room for — color.fg.on-media-light, near-black in both modes, over a light photograph such
+ * as a daylight sky, and the section's own color.fg.on-brand-strong, white, over a dark one. The
+ * photograph does not change with the theme, so neither ink does. The block cannot see the
+ * photograph, so the scene says which, and the author answers for the contrast.
  *
- * A pseudo-element of the photograph's frame, so it dissolves in with the second photograph rather
- * than being laid over the first a second time.
+ * On the scene, so its title and its line take it together, and inherited through the scene even
+ * where the scroll lays the scenes out as `display: contents`.
  */
-:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media::after {
-  background-color: var(--color-bg-overlay);
-  content: '';
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-ink="dark"] {
+  color: var(--color-fg-on-media-light);
 }
 
 /*
@@ -81,10 +77,11 @@
  *
  * Below 62rem — the reference's 992px, the same bound FeatureCards takes from it — the words are at
  * the top of the stage and start at the edge, under the room a navigation bar takes: size.bar-height
- * and the section's own step over it, about the reference's 112. From 62rem they are centred in
- * the stage, across and down — a centred title wraps to ragged lines whose edge the eye loses on a
- * narrow screen, which is the section-title rule's reason too. The group and its line are capped
- * narrower than the column, so `margin-inline: auto` centres those boxes as well as their words.
+ * and the section's own step over it, about the reference's 112. From 62rem they are centred down
+ * the stage and still start at the edge, in a column capped at the heading group's measure: the
+ * reference design's later arrangement, which leaves the far side of the photograph to its subject
+ * rather than writing over the middle of it. On either side of the bound the words start, so the
+ * eye finds the same edge on every line and a photograph composed for one width holds at the other.
  *
  * Longhand because `var()` is not permitted in a container query condition; `61.9375rem` is the last
  * width below that bound. The section declares the container, and these are rules on what is inside
@@ -97,16 +94,26 @@
   }
 }
 
-@container (min-width: 62rem) {
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
-    align-items: center;
-    margin-inline: auto;
-    text-align: center;
-  }
 
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__description {
-    margin-inline: auto;
-  }
+/*
+ * The words keep to the page's content column.
+ *
+ * They start, from 62rem as below it, so on a wide window they would otherwise sit at the page's
+ * gutter while every section around them starts at the edge of size.content.max. The photograph
+ * still fills the band edge to edge; only the words and the action are inset, by the page's gutter or
+ * by however much the window is wider than the content column on each side, whichever is more —
+ * where the column starts in ImageBanner, FeatureCards and the rest.
+ *
+ * Named once on the section, because three boxes take it: each scene and the action in the plain
+ * fallback, and the stage, which carries the insets while the scroll drives the change-over.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll {
+  --dds-scenescroll-column-inset: max(var(--space-inset-page), calc((100% - var(--size-content-max)) / 2));
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene,
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
+  padding-inline: var(--dds-scenescroll-column-inset);
 }
 
 /*
@@ -129,7 +136,7 @@
  * The section names a view timeline, and three things run down it over `contain` — the stretch in
  * which the track covers the whole window, which is exactly the stretch the stage is pinned for:
  *
- *   the second photograph, and its scrim with it, dissolves in from 20% to 80%;
+ *   the second photograph dissolves in from 20% to 80%;
  *   the first scene's words fade out from 20% to 45%;
  *   the second scene's words fade in from 55% to 80%.
  *
@@ -200,39 +207,33 @@
 }
 
 /*
- * The link sits right under the words, whichever scene's words are showing.
+ * The action sits right under the words, whichever scene's words are showing.
  *
  * It belongs to the section rather than to a scene, so it does not fade with either. While the
  * scenes change over, both scenes' words are laid into one grid area of the stage — the scenes
  * themselves step out of the way (`display: contents`), so their photographs and their words become
- * the stage's own items — and that area is as tall as the taller of the two. The link is the row
+ * the stage's own items — and that area is as tall as the taller of the two. The action is the row
  * under it, at space.heading.description-actions, the step from words to what a reader can do: under
  * the text on every screen, and still while the text changes over it.
  *
- * Below 62rem the words and the link sit at the top of the stage, under the room a navigation bar
+ * Below 62rem the words and the action sit at the top of the stage, under the room a navigation bar
  * takes; from 62rem they are centred down the stage, the empty rows above and below sharing what is
- * left. The stage carries the section's insets here, since the scenes that held them are contents.
+ * left, and start at the edge with the words on both sides of the bound. The stage carries the section's insets here, since the scenes that held them are contents.
  *
- * In the plain fallback, where the scenes stack, the link is the stage's last row, under the second
+ * In the plain fallback, where the scenes stack, the action is the stage's last row, under the second
  * scene, on the band's own ground, with its own insets.
  */
-@container (min-width: 62rem) {
-  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
-    justify-content: center;
-  }
-}
-
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
       grid-template-areas:
         'words'
-        'link'
+        'action'
         '.';
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: auto auto 1fr;
       padding-block: calc(var(--size-bar-height) + var(--space-section-default)) var(--space-section-default);
-      padding-inline: var(--space-inset-page);
+      padding-inline: var(--dds-scenescroll-column-inset);
     }
 
     :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
@@ -249,8 +250,8 @@
       z-index: 1;
     }
 
-    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
-      grid-area: link;
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__action {
+      grid-area: action;
       margin-block-start: var(--space-heading-description-actions);
       padding: 0;
       z-index: 1;
@@ -265,7 +266,7 @@
         grid-template-areas:
           '.'
           'words'
-          'link'
+          'action'
           '.';
         grid-template-rows: 1fr auto auto 1fr;
         padding-block: var(--space-section-default);
@@ -273,3 +274,19 @@
     }
   }
 }
+
+/*
+ * From 62rem the words keep to half the stage.
+ *
+ * The words start at the edge and the photograph's subject is on the far side, but the heading
+ * group's measure alone is most of a laptop's width: a title in a few words ran three quarters of
+ * the way across and over the face it was meant to sit beside. Held to half the stage, or the
+ * heading group's measure where that is narrower, the title wraps in the words' own half and the
+ * other half is the subject's — the reference design's left column. Below 62rem the words run the
+ * width, at the top of a photograph whose subject is below them.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+    max-inline-size: min(var(--size-heading-group-max), 50%);
+  }
+}

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.css

@@ -0,0 +1,105 @@
+/* GENERATED from scenescrollword.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: block;
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+  justify-content: center;
+  min-inline-size: 0;
+  position: relative;
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__media {
+  overflow: clip;
+  position: absolute;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__image {
+  display: block;
+  object-fit: cover;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  position: relative;
+  max-inline-size: var(--size-heading-group-max);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__title {
+  margin-block: 0;
+  text-wrap: balance;
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__before {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word {
+  display: inline-grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__after {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__description {
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+  display: flex;
+  position: relative;
+  padding-block-end: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword[data-heading-level="h1"] .dds-scenescrollword__title {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword[data-heading-level="h2"] .dds-scenescrollword__title {
+  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);
+}
+

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.d.ts

@@ -0,0 +1,31 @@
+import './SceneScrollWord.css';
+import './scene-scroll-word-impl.css';
+import { type SceneScrollWordProps } from './SceneScrollWord.types.js';
+export type { SceneScrollWordProps };
+/**
+ * SceneScroll's change-over told as one claim with one word changed — "Trade all day", then
+ * "Trade all night": the reference design's inline day-and-night headline, made generic.
+ *
+ * The same track, pin and view timeline as SceneScroll, and nothing here runs a script. Each scene
+ * draws its whole heading — the shared words and its own word — so the outline, a screen reader and
+ * the stacked fallback all read "Trade all day" then "Trade all night". The stylesheet lays the
+ * second heading exactly over the first, keeps the second's shared words undrawn, and changes the
+ * words over alone.
+ *
+ * The changing word falls where the language puts it, so the shared words come as what is before it
+ * and what is after it, either or both, and nothing here adds a space: Japanese has none to add, and
+ * a language that has them writes them into the strings.
+ *
+ * Each word sits in a slot holding the other scene's word too, undrawn: the slot is as wide as the
+ * wider of the two, so both titles wrap alike and the second's word lands exactly where the first's
+ * was. That duplicate is the one thing kept from assistive technology, since the heading it belongs
+ * to is read in full.
+ *
+ * The words sit straight on the photographs in the ink each scene names, as SceneScroll's do. Where
+ * the two inks differ the shared words cross over with the word, so the claim changes colour as one
+ * piece; the section says so as `data-ink-change`.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival, for
+ * SceneScroll's reason: the change-over is this block's entrance.
+ */
+export declare function SceneScrollWord({ titleBefore, titleAfter, first, second, action, headingLevel, }: SceneScrollWordProps): import("react").JSX.Element | null;

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import './SceneScrollWord.css';
+import './scene-scroll-word-impl.css';
+import { given } from '../../given.js';
+import { sceneScrollWordDefaults, sceneScrollWordParts, } from './SceneScrollWord.types.js';
+/**
+ * The spaces an author wrote at either edge of the shared words, set apart from them.
+ *
+ * Written into the strings rather than added here, because a language without spaces between words
+ * has none to add — but drawn between the parts rather than inside them. An accessible name is put
+ * together from each element's text with its edges trimmed, so "Trade all " in a span beside "day"
+ * was announced "Trade allday"; as text between the two it is the space it was written as.
+ */
+function edge(text) {
+    const start = /^\s*/.exec(text)[0];
+    const end = /\s*$/.exec(text)[0];
+    return { start, end, words: text.slice(start.length, text.length - end.length) };
+}
+/** The level under the first scene's, for the second scene's title. */
+const under = { h1: 'h2', h2: 'h3' };
+/**
+ * SceneScroll's change-over told as one claim with one word changed — "Trade all day", then
+ * "Trade all night": the reference design's inline day-and-night headline, made generic.
+ *
+ * The same track, pin and view timeline as SceneScroll, and nothing here runs a script. Each scene
+ * draws its whole heading — the shared words and its own word — so the outline, a screen reader and
+ * the stacked fallback all read "Trade all day" then "Trade all night". The stylesheet lays the
+ * second heading exactly over the first, keeps the second's shared words undrawn, and changes the
+ * words over alone.
+ *
+ * The changing word falls where the language puts it, so the shared words come as what is before it
+ * and what is after it, either or both, and nothing here adds a space: Japanese has none to add, and
+ * a language that has them writes them into the strings.
+ *
+ * Each word sits in a slot holding the other scene's word too, undrawn: the slot is as wide as the
+ * wider of the two, so both titles wrap alike and the second's word lands exactly where the first's
+ * was. That duplicate is the one thing kept from assistive technology, since the heading it belongs
+ * to is read in full.
+ *
+ * The words sit straight on the photographs in the ink each scene names, as SceneScroll's do. Where
+ * the two inks differ the shared words cross over with the word, so the claim changes colour as one
+ * piece; the section says so as `data-ink-change`.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival, for
+ * SceneScroll's reason: the change-over is this block's entrance.
+ */
+export function SceneScrollWord({ titleBefore, titleAfter, first, second, action, headingLevel = sceneScrollWordDefaults.headingLevel, }) {
+    const titleId = useId();
+    // Both scenes are required, but a record from a feed or an editor is not typed: one that never
+    // arrived draws nothing rather than taking the page down, and a change-over missing a scene is not
+    // the section. Shared words missing on both sides still leave each scene a heading — its word —
+    // so that is drawn rather than the section vanishing over copy still being written.
+    if (!first || !second)
+        return null;
+    const before = given(titleBefore) ? titleBefore : undefined;
+    const after = given(titleAfter) ? titleAfter : undefined;
+    return (_jsx("section", { className: sceneScrollWordParts.root, "data-heading-level": headingLevel, "data-ink-change": (first.ink ?? 'light') === (second.ink ?? 'light') ? undefined : '', "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollWordParts.stage, children: [_jsx(Scene, { which: "first", scene: first, other: second.word, before: before, after: after, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, other: first.word, before: before, after: after, level: under[headingLevel] }), action ? _jsx("div", { className: sceneScrollWordParts.action, children: action }) : null] }) }));
+}
+function Scene({ which, scene, other, before, after, level, titleId, eager = false }) {
+    const Title = level;
+    const { image } = scene;
+    const lead = before !== undefined ? edge(before) : undefined;
+    const tail = after !== undefined ? edge(after) : undefined;
+    return (_jsxs("div", { className: sceneScrollWordParts.scene, "data-scene": which, "data-ink": scene.ink ?? 'light', children: [_jsx("div", { className: sceneScrollWordParts.media, children: image ? (_jsx("img", { className: sceneScrollWordParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollWordParts.content, children: [_jsxs(Title, { className: sceneScrollWordParts.title, id: titleId, children: [lead !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: sceneScrollWordParts.before, children: lead.words }), lead.end] })) : null, _jsxs("span", { className: sceneScrollWordParts.word, children: [_jsx("span", { "data-word": "own", children: scene.word }), _jsx("span", { "data-word": "other", "aria-hidden": "true", children: other })] }), tail !== undefined ? (_jsxs(_Fragment, { children: [tail.start, _jsx("span", { className: sceneScrollWordParts.after, children: tail.words })] })) : null] }), given(scene.description) ? _jsx("p", { className: sceneScrollWordParts.description, children: scene.description }) : null] })] }));
+}

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { SceneScrollWordScene } from '../../scene-scroll-data.js';
+export interface SceneScrollWordOwnProps {
+    /**
+     * `h2` — The default: the section sits under the page's own h1, and the scenes' titles are drawn at font.h2
+     * `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
+     */
+    headingLevel?: 'h2' | 'h1';
+    /** The words of the title that come before the changing word, the same in both scenes — "Trade all ", for "Trade all day" and "Trade all night". With the space that separates them from the word written in, where the language uses one: the block adds none. Give this, `titleAfter`, or both; a title with neither is SceneScroll's. */
+    titleBefore?: string;
+    /** The words of the title that come after the changing word, the same in both scenes — " handeln", for German "Den ganzen Tag handeln" and "Die ganze Nacht handeln"; "取引" for Japanese "一日中取引" and "夜通し取引", with no space. With the space written in where the language uses one: the block adds none. */
+    titleAfter?: string;
+    /** Always. The scene the section opens on: the word that completes the title, a line under it where the title needs one, and the photograph filling the band behind them. With the shared words around it, it names the section. Give its `ink` — `dark` over a light photograph, `light` over a dark one — and the photograph's width and height; `alt` empty unless it shows something the words do not. */
+    first: SceneScrollWordScene;
+    /** Always. The scene the section changes over to, in the same shape as the first. A word of about the same length as the first, so the words after it do not move as one replaces the other, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. Its `ink` is its own, so a daylight first scene in dark words can change over to a night one in white. */
+    second: SceneScrollWordScene;
+    /** One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. It belongs to the section rather than to either scene, so it holds still through the change-over and never fades while the reader is reaching for it. A primary Button, or a standalone Link at its brand tone: either reads over both photographs, where a Link taking the ink around it would take the band's white over a light photograph. */
+    action?: ReactNode;
+}
+export type SceneScrollWordProps = SceneScrollWordOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const sceneScrollWordParts: {
+    readonly root: "dds-scenescrollword";
+    readonly stage: "dds-scenescrollword__stage";
+    readonly scene: "dds-scenescrollword__scene";
+    readonly media: "dds-scenescrollword__media";
+    readonly image: "dds-scenescrollword__image";
+    readonly content: "dds-scenescrollword__content";
+    readonly title: "dds-scenescrollword__title";
+    readonly before: "dds-scenescrollword__before";
+    readonly word: "dds-scenescrollword__word";
+    readonly after: "dds-scenescrollword__after";
+    readonly description: "dds-scenescrollword__description";
+    readonly action: "dds-scenescrollword__action";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const sceneScrollWordDefaults: {
+    readonly headingLevel: "h2";
+};

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.types.js

@@ -0,0 +1,18 @@
+// GENERATED from scene-scroll-word.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const sceneScrollWordParts = {
+    root: 'dds-scenescrollword',
+    stage: 'dds-scenescrollword__stage',
+    scene: 'dds-scenescrollword__scene',
+    media: 'dds-scenescrollword__media',
+    image: 'dds-scenescrollword__image',
+    content: 'dds-scenescrollword__content',
+    title: 'dds-scenescrollword__title',
+    before: 'dds-scenescrollword__before',
+    word: 'dds-scenescrollword__word',
+    after: 'dds-scenescrollword__after',
+    description: 'dds-scenescrollword__description',
+    action: 'dds-scenescrollword__action',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const sceneScrollWordDefaults = { headingLevel: 'h2' };