@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/AGENTS.md

@@ -0,0 +1,189 @@
+<!-- GENERATED from components/**/*.contract.json and rules/*.rule.json. Do not edit. -->
+
+# @deriv-com/dds-marketing for agents
+
+Read this first. It is the cheap read: everything below is the whole of what you need to
+place a component correctly, and the files it points at are opened only when you need them.
+
+## Three things, or nothing renders
+
+```tsx
+import '@deriv-com/dds-marketing/fonts.css'            // the faces the tokens name, self-hosted
+import '@deriv-com/dds-marketing/marketing.css'            // once, at the root of the app
+```
+```html
+<div data-dds-context="marketing">  <!-- around everything this package renders -->
+```
+
+Without the second import every component renders unstyled: the stylesheet carries the
+tokens they bind to. Component CSS travels with each component, so nothing else is imported.
+
+Without the attribute every component renders unstyled too, and this one is easy to miss
+because the tokens do not need it — they are published to `:root` as well. Component rules
+are published only inside the scope, and they have to be: every class is `dds-<name>` with
+no package in it, so Product and Marketing both emit `.dds-button`. An app installing both
+would otherwise have one package painting the other, with bundler order picking the winner.
+Put it on whatever wraps this package — the app root, or the section, if the two live on one
+page. It costs nothing in specificity: the scope is a `:where()`, so your own overrides beat
+the components exactly as they did before.
+
+Without the first, text silently falls back to the system typeface — the tokens name Inter
+and Red Hat Mono but cannot carry the files. An app that already self-hosts the fonts
+(next/font, Fontsource) skips `fonts.css` and sets `--font-family-sans` /
+`--font-family-mono` instead; the README covers that path.
+
+Dark is `data-theme="dark"` on any ancestor, usually `<html>`. Both themes live in that one
+stylesheet — there is no second import and no provider. The two attributes are independent:
+the theme can sit above the scope, on the same element as it, or below it.
+
+```html
+<html data-theme="dark">
+  <body><div data-dds-context="marketing"> <!-- dark, from here down --></div></body>
+```
+
+## Server Components
+
+Every module that needs the browser carries `"use client"`, so importing from this package
+in an App Router application works without a wrapper. Components that hold no state — `Badge`,
+`Divider`, `Card` — have no directive and render on the server.
+
+What that leaves you: a Server Component still cannot pass a function across the boundary, so
+a component you give `onChange` or `onClick` to goes in a file of your own that says
+`"use client"`. That is React's rule rather than this package's, and the error names your file.
+
+## Rules that span components
+
+- **A component is written along the reading axis, not along the page's left and right**
+- **A navigation bar holds at most two buttons: one primary, and one secondary beside it**
+- **A section that paints a ground sets the ink to go with it**
+- **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone**
+- **Anything a pointer has to hit is at least 24px in both directions**
+- **At most one primary button per view**
+- **Destructive actions require a confirmation step**
+- **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side**
+- **Never nest one interactive element inside another**
+- **On a phone a section's actions stack and each fills the width, including when there is only one**
+- **Match the glyph weight to the icon size** *(guidance)*
+- **Solid weight means selected** *(guidance)*
+
+Reasons and the cases each one turns on: `.llm/rules.md`.
+
+## What is here
+
+One line each — the case the component was written for. Where two look alike, the
+component documents say which to reach for and why, and that is what they are for.
+
+Grouped by where each sits in the system, because that is the first thing that rules a
+component in or out: a view has no use for another area’s components, and the frame a
+screen is built in is not something to reach for while building a control.
+
+### Core — domain-neutral building blocks
+
+- **Accordion** — Questions a reader asks near a decision
+- **AccordionItem** — One row inside an Accordion
+- **Badge** — One of a set is the one the page wants read first
+- **BottomSheet** — A task needs the screen's full width and the reader's undivided attention
+- **Breadcrumb** — The page sits inside a section hierarchy, and the levels above it are places the visitor can navigate to
+- **BreadcrumbItem** — Rendering one level of a Breadcrumb
+- **Button** — The call to action on a marketing page
+- **ButtonIcon** — One press with no room for words
+- **Card** — Content that is read as one thing
+- **CardBody** — Words, a picture, or both inside a Card
+- **CardButton** — The whole card is the target rather than a link buried in it
+- **Checkbox** — A choice the user makes now and confirms later
+- **Divider** — Two groups inside one container that nothing else is separating
+- **DropdownMenu** — A set of destinations too long for the navigation bar and too short to be a page of its own
+- **FilterChip** — An index is long enough to be worth cutting down and its categories are few enough to show in full
+- **Footer** — A marketing page needs its closing band
+- **FooterGroup** — A set of a footer's destinations belong under one word
+- **Icon** — A glyph stands beside words to speed recognition
+- **Link** — A term inside running copy has a page of its own
+- **MenuItem** — A row in a menu of destinations
+- **Navbar** — A marketing page needs its top-level navigation
+- **NavbarItem** — A section of the site, in a Navbar
+- **NavbarMenu** — A section of the site has enough inside it that naming the section is not enough
+- **NavbarMenuGroup** — A section's panel holds more destinations than a reader takes in at once, and they fall into sets
+- **NavbarPanel** — Navbar is collapsing and its destinations have to go somewhere
+- **NavbarSwitcher** — A bar needs a language or region switcher
+- **NavbarSwitcherOption** — A NavbarSwitcher needs its choices
+- **Option** — An answer inside a control that opens a list
+- **Pagination** — An index or archive has been split across pages and the reader needs to move through it
+- **PaginationDots** — Showing where the reader is in a short sequence they move through
+- **RemovableChip** — An index shows the narrowings currently applied above its results, and each has to come off on its own without clearing the rest
+- **SearchInput** — A help centre, a knowledge base, or documentation
+- **SegmentedControl** — Two to four alternatives that exclude one another, where the whole set is worth showing at once and the reader decides by weighing them side by side rather than recalling which exist
+- **SegmentedControlItem** — One option in a SegmentedControl
+- **Select** — A form asks for one answer out of a set the visitor recognises
+- **SelectChip** — A row narrows an index by one value out of a set, and has to keep showing which value that is
+- **Spinner** — The reader has just submitted something
+- **StatusDot** — Marking something the page is pointing at
+- **SubdomainNavbar** — A subdomain needs its top-level navigation
+- **Tab** — One of a small set of comparable versions of the same offer
+- **Table** — Data with a uniform structure, where the same fields exist on every row and a reader compares one row against another down a column
+- **TableBody** — The data itself
+- **TableCell** — A value in a data row
+- **TableHead** — Naming the columns
+- **TableHeaderCell** — Naming a column
+- **TableRow** — A record, with one cell per column
+- **TabList** — Two or three versions of one offer differ in a way a reader wants to compare
+- **TextArea** — A contact form asks what the reader actually wants
+- **TextInput** — A page asks for an email
+- **Tooltip** — Naming a control whose icon or abbreviation cannot say what it does
+- **Typography** — A heading, a paragraph, or a caption on a marketing page
+
+### Layout — arrange other components, decide no appearance of their own
+
+- **AspectRatio** — A picture whose proportions have to match the ones beside it
+- **Grid** — Several things of the same kind are read across and down, and a cell has to line up with the cell above it
+- **Row** — Two or more things are read across rather than down, and the space between them is the same all the way along
+- **Scroller** — A set is longer than the space and its order is worth keeping
+- **Stack** — Two or more things are read down the page in order and the space between them is the same the whole way down
+
+### Blocks — the sections a page is built from, and the rhythm between them
+
+- **CtaBanner** — A short, high-contrast promotion with one clear action
+- **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
+- **FaqAccordion** — The questions a reader asks before acting
+- **FeatureBullets** — A page has to list what a product or a plan includes, and the list is the argument
+- **FeatureCards** — Three or four things a product does, each a heading and a sentence, read side by side and compared at a glance
+- **FeatureScroll** — A page has three or more things of the same kind to explain, each with a picture worth a screen
+- **FeatureSplit** — A page needs one more point about something it has already introduced, with a picture to carry it
+- **LandingHero** — A main landing page needs its opening band
+- **LogoColumns** — Showing the partners, integrations or payment methods behind a claim
+- **LogoRows** — Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow
+- **PageHeader** — A company, legal or support page needs its opening band
+- **ProductHero** — A product or a market page needs its opening band
+- **TestimonialRow** — Five to ten short, rated reviews collected by a review service, where seeing several at once is the point and the overall score is worth stating
+- **TestimonialSlider** — Two to five real quotes from partners or customers, each a few sentences, read one at a time
+
+## Components that need mounting
+
+These do not work from the import alone. Each has a Behaviour section in its own document
+saying what to mount and where.
+
+- **NavbarPanel** — useNavbarPanel
+- **Table** — useTableSort
+- **Tooltip** — useTooltip, useTooltipDefaults, TooltipAnchor
+
+## Reading order
+
+1. This file.
+2. `.llm/rules.md` before writing anything — 1,500 tokens, and it is where the constraints
+   that no single component can state live.
+3. `.llm/digest/<name>.md` for every component you are using — **all of it, not the part
+   you were looking for**. Around 1,400 tokens each: what it is for, what to reach for
+   instead, what it must never do, every prop with the case it is for, the combinations
+   the type refuses, and what may go inside it. Reading it whole is the point. Searching
+   finds only what you already know to name, and the facts most often got wrong here are
+   the ones nobody knew to look for.
+4. `.llm/tokens.md` only if you are writing CSS of your own. It is the token vocabulary,
+   and it opens by saying the thing that matters: write the variable, never the value.
+5. `.llm/components/<name>.md` once you are working on one component and want the
+   reasoning: the parts it renders, its states, the argument behind each decision, and
+   snippets that compile. Around 5,900 tokens each, so reach for it by the component
+   rather than by the screen.
+6. `.llm/index.md` when the one-line list above is not enough to choose — the same
+   question, with every component's full guidance and what to use instead.
+
+Props carry their own guidance in the types as well, so an editor or a language server
+shows the case for a prop and its values without opening a file.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Deriv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,17 +1,22 @@
-# @deriv/dds-marketing
+# @deriv-com/dds-marketing
 
 Components and design tokens from the Deriv Design System, for marketing sites — landing
 pages, pricing, sign-up.
 
-> **This package has no components yet.** Its tokens are real and its stylesheet is
-> complete; the component surface is still being authored. Until it lands, installing this
-> gets you the marketing token layer and an empty barrel. Product apps want
-> [`@deriv/dds-product`](https://www.npmjs.com/package/@deriv/dds-product).
+**Working with an AI agent?** Point it at [`AGENTS.md`](./AGENTS.md) in this package. It is
+the short version of everything below and says which of the `.llm/` documents to open.
+
+It has two kinds of component: **core** components — Button, Navbar, Card, Link, the form
+controls and the rest — and **blocks**, the bands a page is built from: `LandingHero`,
+`ProductHero` and `PageHeader` to open a page, and `FeatureSplit`, `FeatureBullets` and
+`FeatureScroll` for the sections under it. `AGENTS.md` lists every one of them with a line
+on when to reach for it. Product apps want
+[`@deriv-com/dds-product`](https://www.npmjs.com/package/@deriv-com/dds-product).
 
 ## Install
 
 ```bash
-npm install @deriv/dds-marketing
+npm install @deriv-com/dds-marketing
 ```
 
 React 19 and the Quill icon set are peer dependencies, so install them alongside it if
@@ -27,30 +32,93 @@ Import the stylesheet once, at the root of your app. It defines every token this
 components bind to — without it they render unstyled.
 
 ```tsx
-import '@deriv/dds-marketing/marketing.css'
+import '@deriv-com/dds-marketing/marketing.css'
 ```
 
+Then put `data-dds-context="marketing"` on whatever wraps the components — the app root, or
+the section, if marketing and product live on one page. Component rules are published only
+inside that scope, because both packages emit classes like `.dds-button` and one would
+otherwise paint the other. Without it the components render unstyled too.
+
 Then import components by name:
 
 ```tsx
-import { Button } from '@deriv/dds-marketing'
+import { Button, LandingHero } from '@deriv-com/dds-marketing'
+
+export function Home() {
+  return (
+    <div data-dds-context="marketing">
+      <LandingHero
+        title="Trade smarter with Deriv"
+        description="Access 250+ markets with tight spreads and powerful tools."
+        actions={<Button href="/signup">Get started free</Button>}
+      />
+    </div>
+  )
+}
 ```
 
 Each component brings its own stylesheet with it, so nothing else needs importing.
 
-## Light and dark
+## Fonts
+
+The system is designed for [Inter](https://rsms.me/inter/) (all text) and
+[Red Hat Mono](https://github.com/RedHatOfficial/RedHatFont) (code).
+`marketing.css` names them but cannot carry them — if nothing loads the fonts, every role
+silently falls back to the system typeface, and any weight the page is missing gets faked
+by the browser. Pick one of the two paths:
+
+**Let the package supply them.** One import next to `marketing.css`:
+
+```tsx
+import '@deriv-com/dds-marketing/fonts.css'
+import '@deriv-com/dds-marketing/marketing.css'
+```
+
+This self-hosts both faces from the package (variable-weight WOFF2, subset per script,
+~260 KB total across all scripts — a page only downloads the subsets its text uses). Both
+fonts are under the SIL Open Font License; the licenses ship in `dist/fonts/`.
+
+**Load them yourself.** If your app already hosts the fonts — `next/font`, Fontsource, or
+your own `@font-face` — skip `fonts.css` and point the two family variables at what you
+loaded:
+
+```css
+:root {
+  --font-family-sans: var(--your-inter-variable), system-ui, sans-serif;
+  --font-family-mono: var(--your-mono-variable), ui-monospace, monospace;
+}
+```
+
+Every type role reads its family from these two variables, so this redirects the whole
+system at once. Load weights 400–700 for Inter (a variable font covers this in one file);
+a missing weight does not fall back visibly — the browser synthesises a faux bold instead.
+
+## Light and dark, and a viewport axis
 
 `marketing.css` defines both themes. Dark is selected by `data-theme="dark"` on any
 ancestor — usually `<html>`:
 
 ```html
 <html data-theme="dark">
+  <body>
+    <div data-dds-context="marketing">  <!-- dark, from here down -->
 ```
 
-Marketing also carries a mobile viewport axis: seven roles take different values below
+The theme attribute and the context attribute are independent, and the theme may sit above
+the scope, on the same element, or below it. There is no provider and no second import.
+
+Marketing does carry a mobile viewport axis: seven roles take different values below
 768px, applied automatically and overridable with `data-dds-viewport="mobile"` or
 `"desktop"` when a page renders a device frame inside a wider window.
 
+## Documentation
+
+- [`AGENTS.md`](./AGENTS.md) — the front door: setup, the rules that span components, and
+  what this package currently has.
+- `.llm/rules.md` — the constraints no single component can state.
+- `.llm/tokens.md` — the token vocabulary, including the mobile viewport axis above.
+
 ## Versioning
 
 Pre-1.0. Minor versions may contain breaking changes while the component surface settles;

package/dist/components/banner-data.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The messages a CtaBannerSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` is: a block whose content is a list is
+ * one whose consumer builds a value before passing it, and building it without the type means
+ * writing the shape out twice.
+ *
+ * A record rather than a component per slide, by decision on 2026-10-01. A slide was CtaBannerSlide,
+ * a child that took its actions as elements; it existed only so a slide could carry a Button, and it
+ * was a second component to learn for what is one block. As data, the set can come from a CMS, and
+ * the slider draws the buttons itself — the primary as Button variant="inverse", the second as the
+ * white-tinted secondary, both at tone="brand" — so no slide can put a coral button on the coral
+ * ground. What it costs is the slot: an action is a label and a href, not a Button the page composed.
+ */
+/** A way onward from a slide: the words on the button and where it goes. */
+export interface CtaBannerAction {
+    /** What the button says, as a verb — 'Open account', 'Try TradersView'. */
+    label: string;
+    /** Where it goes. A slide's action is always a link; a banner that runs code on press is not a banner. */
+    href: string;
+}
+/** One message in a CtaBannerSlider: the headline, the line under it, and what it asks for. */
+export interface CtaBannerSlide {
+    /**
+     * The message, in a few words. Short enough to take in as the slide arrives; drawn as a heading
+     * at font.h1, so a reader moving by heading finds the message in view.
+     */
+    title: string;
+    /** A line saying why the action is worth taking. A sentence, not a paragraph. */
+    description?: string;
+    /** The action the message asks for, drawn as Button variant="inverse" tone="brand" — near-black in both themes. */
+    primaryAction?: CtaBannerAction;
+    /**
+     * A second, lesser action, drawn as the white-tinted secondary, Button tone="brand". Drawn only beside a
+     * primary: a slide with one action makes it the primary, the rule Navbar holds its pair to.
+     */
+    secondaryAction?: CtaBannerAction;
+}

package/dist/components/banner-data.js

@@ -0,0 +1,15 @@
+/**
+ * The messages a CtaBannerSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` is: a block whose content is a list is
+ * one whose consumer builds a value before passing it, and building it without the type means
+ * writing the shape out twice.
+ *
+ * A record rather than a component per slide, by decision on 2026-10-01. A slide was CtaBannerSlide,
+ * a child that took its actions as elements; it existed only so a slide could carry a Button, and it
+ * was a second component to learn for what is one block. As data, the set can come from a CMS, and
+ * the slider draws the buttons itself — the primary as Button variant="inverse", the second as the
+ * white-tinted secondary, both at tone="brand" — so no slide can put a coral button on the coral
+ * ground. What it costs is the slot: an action is a label and a href, not a Button the page composed.
+ */
+export {};

package/dist/components/blocks/block-reveal.css

@@ -0,0 +1,90 @@
+/*
+ * The arrival every block shares, defined once.
+ *
+ * A section's parts wait a short way below where they land and come up in reading order as a
+ * reader reaches the block. It is the only motion these blocks have in common, and a copy per
+ * block is how six sections come to disagree about what arriving looks like — one tuned, five not,
+ * and nothing to say which is the house answer. So the movement is stated here and each block's
+ * own stylesheet says which of its parts make it.
+ *
+ * Imported by each block's component, which is what puts it in the bundle once however many
+ * blocks a page uses.
+ *
+ * `data-revealed` goes on the box that is watched — see `use-reveal.ts`, which explains why
+ * neither trigger CSS can offer on its own is enough. `data-reveal-at` marks each part inside it
+ * that arrives, and the same number is set as `--dds-reveal-at` for the arithmetic: an attribute
+ * is what CSS can select on, and a custom property is what it can multiply. Two spellings of one
+ * index, each doing the job the other cannot.
+ *
+ * The waiting state is `[data-revealed="false"]` rather than the absence of a value, so a block
+ * rendered before any script has run — or where none ever will — is visible rather than hidden.
+ * Content behind a script is the one failure this could have that is worse than no motion.
+ *
+ * Every value is a token, and three of them are the set this system already had for the job:
+ * `motion.duration.reveal` is described as "content appearing on scroll, section reveals, feature
+ * items fading in", `motion.easing.reveal` is its curve, and `motion.translate.reveal` is the
+ * distance. `opacity.hidden` is what a part waits at and `motion.duration.stagger` is the step
+ * between one part and the next.
+ *
+ * The duration was `motion.duration.dramatic` for a while, which is the role for an editorial hero
+ * entrance — right while the opening bands were on a timer and wrong once every block arrived on a
+ * reader reaching it. Two roles were named for these two triggers and the work had drifted onto
+ * the wrong one.
+ */
+/*
+ * Waiting is instant; only arriving is animated.
+ *
+ * A transition is decided by the state a thing is moving *to*, so declaring it on both states
+ * animates the way in and the way out alike — and the way out is not a thing anybody should see.
+ * A block is marked as waiting once, in a layout effect, before the browser has painted; if that
+ * ever lands a frame late the block has already been drawn, and an animated hide turns one dropped
+ * frame into three-quarters of a second of the section fading away in front of a reader. That is
+ * exactly what it looked like.
+ *
+ * `transition: none` here rather than nothing, because the arrived rule below is what carries the
+ * timings and a part moving back to waiting must not inherit them.
+ *
+ * Both spellings on every rule: a part is usually inside the box that is watched, and sometimes it
+ * is that box. FeatureScroll's heading is the case — the section watches the heading itself, and
+ * wrapping it in something whose only job was to be a container would put a box in the markup to
+ * satisfy a stylesheet.
+ */
+:where([data-dds-context="marketing"]) [data-revealed='false'] [data-reveal-at],
+:where([data-dds-context="marketing"]) [data-revealed='false'][data-reveal-at] {
+  opacity: var(--opacity-hidden);
+  transition: none;
+  translate: var(--motion-translate-reveal);
+}
+
+/*
+ * Each part a step behind the one before it.
+ *
+ * On the way in only. The delay is declared on the arrived state, which is the state a part is
+ * transitioning *to* — so a block that is somehow put back to waiting drops without a queue.
+ *
+ * A block arrives as one thing that happens to be made of parts, which is what the step size is
+ * for: at a tenth of a second, five parts trail the first by less than half a second, well inside
+ * the movement's own duration. A longer step would be the section assembling itself while a reader
+ * waits for the sentence they came to read.
+ */
+:where([data-dds-context="marketing"]) [data-revealed='true'] [data-reveal-at],
+:where([data-dds-context="marketing"]) [data-revealed='true'][data-reveal-at] {
+  transition-delay: calc(var(--dds-reveal-at, 0) * var(--motion-duration-stagger));
+  transition-duration: var(--motion-duration-reveal);
+  transition-property: opacity, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+/*
+ * A reader who asked for less movement gets none of it.
+ *
+ * The hook declines to hide anything under this preference, so the parts are never in the waiting
+ * state to begin with. This is the second half of the same answer: if a part is somehow marked as
+ * waiting, it still arrives without travelling and without queueing behind its neighbours.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) [data-revealed] [data-reveal-at],
+  :where([data-dds-context="marketing"]) [data-revealed][data-reveal-at] {
+    transition: none;
+  }
+}

package/dist/components/blocks/cta-banner/CtaBanner.css

@@ -0,0 +1,66 @@
+/* GENERATED from ctabanner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-ctabanner {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  position: relative;
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-ctabanner .dds-ctabanner__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-ctabanner .dds-ctabanner__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-ctabanner .dds-ctabanner__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+

package/dist/components/blocks/cta-banner/CtaBanner.d.ts

@@ -0,0 +1,22 @@
+import './CtaBanner.css';
+import './cta-banner-impl.css';
+import '../block-reveal.css';
+import { type CtaBannerProps } from './CtaBanner.types.js';
+export type { CtaBannerProps };
+/**
+ * A full-bleed coral band carrying one promotion and the action it asks for.
+ *
+ * The reference site's CoralBanner in its single form, named for what it is for. The ground is
+ * color.bg.brand and the ink color.fg.on-brand, both the same in light and dark, so the banner is
+ * the same coral whatever theme the reader is in. Nothing moves: two or three promotions to rotate
+ * between are CtaBannerSlider, which is this band with a slider in it — the same column, the same
+ * headline and line, so a page can carry either and read the same.
+ *
+ * The region is named by its headline, the way PageHeader's is, so a reader can jump to the band
+ * and past it. `'use client'` only for `useId`, which ties the region to its headline — the same
+ * reason PageHeader carries it.
+ *
+ * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
+ * brings the headline, the line and the actions up a step apart once the band is in view.
+ */
+export declare function CtaBanner({ title, headingLevel, description, actions, }: CtaBannerProps): import("react").JSX.Element;

package/dist/components/blocks/cta-banner/CtaBanner.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './CtaBanner.css';
+import './cta-banner-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
+/**
+ * A full-bleed coral band carrying one promotion and the action it asks for.
+ *
+ * The reference site's CoralBanner in its single form, named for what it is for. The ground is
+ * color.bg.brand and the ink color.fg.on-brand, both the same in light and dark, so the banner is
+ * the same coral whatever theme the reader is in. Nothing moves: two or three promotions to rotate
+ * between are CtaBannerSlider, which is this band with a slider in it — the same column, the same
+ * headline and line, so a page can carry either and read the same.
+ *
+ * The region is named by its headline, the way PageHeader's is, so a reader can jump to the band
+ * and past it. `'use client'` only for `useId`, which ties the region to its headline — the same
+ * reason PageHeader carries it.
+ *
+ * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
+ * brings the headline, the line and the actions up a step apart once the band is in view.
+ */
+export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h3' ? 'h3' : 'h2';
+    return (_jsx("section", { className: ctaBannerParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) }) }));
+}

package/dist/components/blocks/cta-banner/CtaBanner.types.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface CtaBannerOwnProps {
+    /** Always — the message, in a few words. Short enough to take in at a glance; a line break goes where the words pause, not where the box runs out. */
+    title: string;
+    /**
+     * `h2` — The default: a banner is a section of the page, under the page's own h1
+     * `h3` — A banner nested inside a section that already carries the h2 it belongs to
+     */
+    headingLevel?: 'h2' | 'h3';
+    /** A line saying why the action is worth taking — what the reader gets, or how little it costs them. */
+    description?: string;
+    /** The one action the message asks for, or two at most. The coral is the banner's ground, so the primary is Button variant="inverse" tone="brand" — a primary Button is coral on coral, and the tone keeps it near-black in both themes — and a second is Button variant="secondary" tone="brand" — a white tint with a white label, fixed in both themes like the band. */
+    actions?: ReactNode;
+}
+export type CtaBannerProps = CtaBannerOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const ctaBannerParts: {
+    readonly root: "dds-ctabanner";
+    readonly inner: "dds-ctabanner__inner";
+    readonly content: "dds-ctabanner__content";
+    readonly text: "dds-ctabanner__text";
+    readonly title: "dds-ctabanner__title";
+    readonly description: "dds-ctabanner__description";
+    readonly actions: "dds-ctabanner__actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const ctaBannerDefaults: {
+    readonly headingLevel: "h2";
+};

package/dist/components/blocks/cta-banner/CtaBanner.types.js

@@ -0,0 +1,13 @@
+// GENERATED from cta-banner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const ctaBannerParts = {
+    root: 'dds-ctabanner',
+    inner: 'dds-ctabanner__inner',
+    content: 'dds-ctabanner__content',
+    text: 'dds-ctabanner__text',
+    title: 'dds-ctabanner__title',
+    description: 'dds-ctabanner__description',
+    actions: 'dds-ctabanner__actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const ctaBannerDefaults = { headingLevel: 'h2' };