@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/subdomain-navbar/SubdomainNavbar.types.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+export interface SubdomainNavbarOwnProps {
+    /**
+     * `default` — The subdomain's chrome is light, which is the page's decision rather than this bar's
+     * `inverse` — The subdomain's chrome is dark, which is the usual case for a tool and is why nearly every page using this bar will pass it. It is not the default all the same: a default is what the component does when nobody says, and a bar that painted itself black unasked would be a component with an opinion about a page it has not seen. The bar paints `color.bg.strong`, its ink runs light, and the destinations and the far end are told the same so nothing in the row is dressed twice
+     */
+    tone?: 'default' | 'inverse';
+    /** Always — it names the navigation landmark, and a page with an unnamed one tells a screen-reader user there is navigation here without saying which navigation. Name the set rather than the act: 'Main', not 'Main navigation' — the role already supplies the word, and a name carrying it is announced as 'main navigation navigation' */
+    label: string;
+    /** Always — the trigger is an icon-only button and this is the only name it has, at the width where it is the only way through the site. Name what it reveals rather than its state: 'Menu', not 'Open menu', because aria-expanded already says which way it is and a name that also said so would contradict itself every other press */
+    menuLabel: string;
+    /** Always — it names the panel's close button, which is the only visible way out of a surface covering the whole page. 'Close' is enough; the panel it closes is the only thing open */
+    closeLabel: string;
+    /** Effectively always on a real site — the mark, and usually an anchor to the home page wrapped around it. It is drawn twice: in the bar, and again in the panel's header, where it is the only thing left saying whose site this is */
+    brand?: ReactNode;
+    /** The bar's trailing end has something in it — a language switcher, a theme switcher, what the subdomain wants pressed, or some combination. All three sit together at the far end, which is the whole of the trailing group: this bar has no second home for what a reader sets, because it has no pill for them to live in the way the marketing bar does.
+  
+  A switcher with a set of choices is a NavbarSwitcher, which the panel turns into a page of its own when the bar collapses. A switcher that draws a mark and no words is a DropdownMenu given a ButtonIcon as its `trigger` — DropdownMenu keeps the menu, the keys and the `aria-expanded`, and the ButtonIcon is what is drawn. A theme toggle that flips rather than opens is a ButtonIcon on its own. Both take `variant="plain"`, which gives up the edge so they sit beside the action without competing with it, and both are told the bar's tone. */
+    utilities?: ReactNode;
+    /** The page is holding whether the panel is open, because something else depends on it — a route change that should close it, a surface of its own that must not open at the same time. Passing it makes the bar controlled: it shows what it is told and reports presses through onMenuOpenChange.
+  
+  Leave it off and the bar holds its own answer, which is the ordinary case: a narrow-width navigation panel is opened and closed by the reader and by nothing else */
+    menuOpen?: boolean;
+    /** Whenever menuOpen is — together they are how a page holds the panel. It is called with the state being moved to, by the trigger, by the close button and by Escape, so a page listening to it hears every way the panel can change */
+    onMenuOpenChange?: (open: boolean) => void;
+    /** Allowed: NavbarItem, NavbarMenu */
+    children: ReactNode;
+}
+export type SubdomainNavbarProps = SubdomainNavbarOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const subdomainNavbarParts: {
+    readonly root: "dds-subdomainnavbar";
+    readonly inner: "dds-subdomainnavbar__inner";
+    readonly brand: "dds-subdomainnavbar__brand";
+    readonly nav: "dds-subdomainnavbar__nav";
+    readonly utilities: "dds-subdomainnavbar__utilities";
+    readonly trigger: "dds-subdomainnavbar__trigger";
+    readonly 'panel-host': "dds-subdomainnavbar__panel-host";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const subdomainNavbarDefaults: {
+    readonly tone: "default";
+};

package/dist/components/core/subdomain-navbar/SubdomainNavbar.types.js

@@ -0,0 +1,13 @@
+// GENERATED from subdomain-navbar.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const subdomainNavbarParts = {
+    root: 'dds-subdomainnavbar',
+    inner: 'dds-subdomainnavbar__inner',
+    brand: 'dds-subdomainnavbar__brand',
+    nav: 'dds-subdomainnavbar__nav',
+    utilities: 'dds-subdomainnavbar__utilities',
+    trigger: 'dds-subdomainnavbar__trigger',
+    'panel-host': 'dds-subdomainnavbar__panel-host',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const subdomainNavbarDefaults = { tone: 'default' };

package/dist/components/core/subdomain-navbar/subdomain-navbar-impl.css

@@ -0,0 +1,147 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so every override below still ties or beats exactly what it did before.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * Above the page it sticks over, which a contract cannot hold: an integer with no unit.
+ *
+ * `position: sticky` alone is not enough, and the way it fails is quiet. A sticky box at
+ * `z-index: auto` paints above the in-flow content it passes and below the first positioned
+ * element further down the document — so this looks correct until a page puts a positioned section
+ * under it, which then paints straight through the bar.
+ *
+ * `layer.popup` rather than a number: the role for what floats over what the page lays out. It sits
+ * below anything that interrupts the reader, so the panel at `layer.overlay` still covers the bar
+ * it came out of.
+ */
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar {
+  z-index: var(--layer-popup);
+}
+
+/*
+ * The mark holds one end; everything else holds the other.
+ *
+ * The row is `flex-start`, and the auto margin is on the destinations rather than on the far end —
+ * so the two travel together at the trailing edge with the row's own gap between them, and the gap
+ * left in the middle is what says they are two groups rather than one long row.
+ *
+ * On the destinations and not on the utilities, which was the first arrangement and put the
+ * destinations against the mark. Either one produces a bar; they say different things about what
+ * the bar is for.
+ *
+ * `space-between` would do it with two children and stops working with three — the destinations
+ * would land in the middle of the bar, which is the marketing arrangement and the one thing this
+ * component exists not to be.
+ *
+ * Not expressible in the contract: `auto` means "whatever is left", which is a different kind of
+ * value from every step on the spacing ramp.
+ */
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__nav {
+  margin-inline-start: auto;
+}
+
+/*
+ * Which regions are drawn, and the one size query in this component.
+ *
+ * What changes at the threshold is not how big a thing is but which things exist — the destinations
+ * and the far end become a panel — and no token can say "this element is not drawn". A contract
+ * cannot say it either: `presentWhen` names a prop and a width is not one, and gating the parts on
+ * a width measured in script would mean a bar that renders one arrangement on the server and
+ * another on the client.
+ *
+ * `@container` rather than `@media`, and the difference is not a refinement. What decides whether
+ * the destinations fit is the room the bar has, which is the window's width only where the bar is
+ * full-bleed. A media query is right about the page and wrong about the component, and it is wrong
+ * silently — a bar in a column gets the collapsed arrangement at every size.
+ *
+ * In rem rather than px: a threshold in rem answers to the reader's own root size, so a bar gives
+ * way when its destinations actually stop fitting rather than at a width chosen for 16px text. It
+ * duplicates VIEWPORT_BREAKPOINT in src/tokens/emit-css.ts, which is worth flagging rather than
+ * hiding — CSS does not accept `var()` in a query prelude, so no token can be used here.
+ *
+ * `64rem`, matching the marketing bar. That one was moved up from 48 after a full row — a mark,
+ * five destinations, a switcher and two buttons — was found drawing over itself at around a
+ * thousand pixels. This bar holds the same kinds of things in the same quantity, so it would have
+ * met the same wall a little later; the two giving way at different widths would be a difference a
+ * reader moving between the sites has no way to explain.
+ *
+ * Narrow first, so the fallback where the query never matches is the arrangement that fits in less
+ * room.
+ */
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__nav,
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__utilities {
+  display: none;
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__nav,
+  :where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__utilities {
+    display: flex;
+  }
+
+  /*
+   * The control the bar keeps only while it is collapsed. It opens the panel holding what the other
+   * two regions were showing, and has nothing to answer for once both are drawn in full.
+   */
+  :where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__trigger {
+    display: none;
+  }
+
+  /*
+   * And the panel cannot be open at a width with nowhere to put it. A reader who opens it on a
+   * phone and then rotates would otherwise be left under a surface covering the page with the bar
+   * behind it already showing every destination that surface was drawn to offer.
+   *
+   * On the host, which is `display: contents` — a place in the tree rather than a box. `display:
+   * none` on a box that has none is still what takes its subtree off the page.
+   */
+  :where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__panel-host {
+    display: none;
+  }
+}
+
+/*
+ * The trigger sits at the end while it is the only thing there.
+ *
+ * Collapsed, the row holds the mark and this. The mark is at the leading edge and the auto margin
+ * that puts the utilities at the trailing one is on a box that is not drawn — so without this the
+ * control sits against the mark instead of opposite it.
+ */
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__trigger {
+  margin-inline-start: auto;
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__trigger {
+    margin-inline-start: 0;
+  }
+}
+
+/*
+ * Whatever the slot was given fills the height the bar set, and keeps its own shape doing it.
+ *
+ * The height is bound on the part, and the part is a wrapper — so alone it would constrain a box
+ * around a mark that went on drawing itself at whatever size it arrived at. Quill's marks carry
+ * `width` and `height` attributes, and a presentation attribute is exactly what a CSS declaration
+ * outranks.
+ *
+ * Two levels, because the shape the guidance describes is an anchor around a logo and a word. A
+ * link is `display: inline`, where `block-size` does not apply at all, so the wrapper is made a
+ * flex box and the mark inside it takes the measure. Navbar records the same finding.
+ */
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__brand > * {
+  align-items: center;
+  block-size: 100%;
+  display: flex;
+  inline-size: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__brand > * > * {
+  block-size: 100%;
+  inline-size: auto;
+}

package/dist/components/core/tab/Tab.css

@@ -0,0 +1,113 @@
+/* GENERATED from tab.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tab {
+  transition-property: outline-color, outline-width;
+  align-items: stretch;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: column;
+  outline-style: solid;
+  padding: 0;
+  text-decoration: none;
+  white-space: nowrap;
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__surface {
+  transition-property: background-color;
+  display: flex;
+  flex-direction: column;
+  block-size: var(--size-control-md);
+  border-radius: var(--radius-control-md);
+  padding-inline: var(--space-inset-md);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__content {
+  align-items: center;
+  display: flex;
+  flex: auto;
+  justify-content: center;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__icon {
+  transition-property: color;
+  align-items: center;
+  display: flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__sizer {
+  block-size: 0;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+  font-weight: var(--font-label-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__trailing-icon {
+  transition-property: color;
+  align-items: center;
+  display: flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__label {
+  transition-property: color, font-weight;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__surface:hover:where(:not(:has(.dds-tab:disabled))) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab[data-selected="false"] .dds-tab__icon {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab[data-selected="false"] .dds-tab__label {
+  color: var(--color-fg-muted);
+  font-weight: var(--font-body-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab[data-selected="false"] .dds-tab__trailing-icon {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab[data-selected="true"] .dds-tab__icon {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab[data-selected="true"] .dds-tab__label {
+  color: var(--color-fg-default);
+  font-weight: var(--font-label-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-tab[data-selected="true"] .dds-tab__trailing-icon {
+  color: var(--color-fg-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-tab,
+  :where([data-dds-context="marketing"]) .dds-tab * { transition: none; }
+}
+

package/dist/components/core/tab/Tab.d.ts

@@ -0,0 +1,36 @@
+import './Tab.css';
+import './tab-impl.css';
+import { type TabProps } from './Tab.types.js';
+export type { TabProps };
+/**
+ * A pill with the words in it, and the strip's bar underneath.
+ *
+ * Built as Product's Tab is built, deliberately: a column whose surface is the
+ * pill the pointer lands on, and whose content is the row the strip measures its
+ * bar against. Only the values are Marketing's — and there is one size rather
+ * than three, so nothing here picks a height or a radius.
+ *
+ * `type="button"`, set here rather than left to the browser. A bare button inside
+ * a form submits it, and a comparison strip inside a signup form is an ordinary
+ * place for this to be.
+ *
+ * Not an anchor, which is the whole difference from Product's. Pressing this
+ * changes which slice of the page is showing; there is no route behind it, so an
+ * anchor would offer a destination in the status bar and open a duplicate of the
+ * page already open.
+ *
+ * `selected` arrives from TabList. A tab cannot see its siblings, so a set each
+ * holding their own answer would show every one of them as current.
+ *
+ * `aria-current="true"` rather than `aria-pressed`. This is not a toggle the
+ * reader turns on and off; it is the one of a set they are looking at.
+ *
+ * The trailing slot follows Product's: `content` names what is in it rather than
+ * the component inferring it from which node arrived. One thing at most, and a
+ * node left behind after a switch renders nothing instead of doubling the mark.
+ *
+ * The badge inside it is rendered bare, again as Product's is. It arrives as a
+ * complete box that paints and sizes itself, so a wrapper would be a part the
+ * stylesheet never had a reason to name — the content row's own gap places it.
+ */
+export declare function Tab({ selected, onSelect, value, label, icon, content, badge, trailingIcon, onClick, ...rest }: TabProps): import("react").JSX.Element;

package/dist/components/core/tab/Tab.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Tab.css';
+import './tab-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { tabDefaults, tabParts } from './Tab.types.js';
+/**
+ * A pill with the words in it, and the strip's bar underneath.
+ *
+ * Built as Product's Tab is built, deliberately: a column whose surface is the
+ * pill the pointer lands on, and whose content is the row the strip measures its
+ * bar against. Only the values are Marketing's — and there is one size rather
+ * than three, so nothing here picks a height or a radius.
+ *
+ * `type="button"`, set here rather than left to the browser. A bare button inside
+ * a form submits it, and a comparison strip inside a signup form is an ordinary
+ * place for this to be.
+ *
+ * Not an anchor, which is the whole difference from Product's. Pressing this
+ * changes which slice of the page is showing; there is no route behind it, so an
+ * anchor would offer a destination in the status bar and open a duplicate of the
+ * page already open.
+ *
+ * `selected` arrives from TabList. A tab cannot see its siblings, so a set each
+ * holding their own answer would show every one of them as current.
+ *
+ * `aria-current="true"` rather than `aria-pressed`. This is not a toggle the
+ * reader turns on and off; it is the one of a set they are looking at.
+ *
+ * The trailing slot follows Product's: `content` names what is in it rather than
+ * the component inferring it from which node arrived. One thing at most, and a
+ * node left behind after a switch renders nothing instead of doubling the mark.
+ *
+ * The badge inside it is rendered bare, again as Product's is. It arrives as a
+ * complete box that paints and sizes itself, so a wrapper would be a part the
+ * stylesheet never had a reason to name — the content row's own gap places it.
+ */
+export function Tab({ selected, onSelect, value, label, icon, content = tabDefaults.content, badge, trailingIcon, onClick, ...rest }) {
+    return (_jsx("button", { ...rest, 
+        // Never a submit button. A tab inside a form would post it, which is a
+        // navigation the reader did not ask for and the one default worth overriding.
+        type: "button", className: tabParts.root, "data-selected": selected === true, "aria-current": selected === true ? 'true' : undefined, 
+        /*
+          Both handlers, the consumer's first — the same chaining TabList does for
+          `onSelect`. A page's own `onClick` used to replace this one wholesale, so
+          a tab that logged its own press stopped telling the strip it had been
+          pressed and the selection silently stopped moving.
+        */
+        onClick: (event) => {
+            onClick?.(event);
+            onSelect?.(value);
+        }, children: _jsx("span", { className: tabParts.surface, children: _jsxs("span", { className: tabParts.content, children: [icon === undefined || icon === null ? null : (_jsx("span", { className: tabParts.icon, children: _jsx(Icon, { size: "sm", children: icon }) })), _jsxs("span", { className: tabParts.label, children: [label, _jsx("span", { className: tabParts.sizer, "aria-hidden": "true", children: label })] }), content === 'icon' && (_jsx("span", { className: tabParts['trailing-icon'], children: _jsx(Icon, { size: "sm", children: trailingIcon }) })), content === 'badge' && badge] }) }) }));
+}

package/dist/components/core/tab/Tab.types.d.ts

@@ -0,0 +1,42 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface TabOwnProps {
+    /** Injected by TabList, which is the only thing that can know. A tab cannot see its siblings, so a set of tabs each deciding for itself would show every one of them selected — the same reason Accordion holds which row is open. Passing it directly is how a strip says which tab it opens on */
+    selected?: boolean;
+    /** Learning which tab was pressed, when the page wants to know as well as the strip. TabList calls it after its own handler, so a page's handler is not replaced by being inside a set */
+    onSelect?: (value: string) => void;
+    /** Always — it is how the page says which slice to show. It is what reaches onSelect and what TabList compares its own value against, so it is required rather than defaulted: a tab identified by its position would renumber every time the set changes */
+    value: string;
+    /** Always — it is what the reader presses. One or two words, and a noun rather than an instruction: 'Yearly', not 'Switch to yearly'. A string rather than a node, for the reason CardBody's title is one — a node prop cannot be given text in an examples row */
+    label: string;
+    /** The tabs are things a mark tells apart faster than a word does — a platform, a market class. Pass the glyph; the tab draws it at its own step.
+  
+  Solid when the tab is current and regular otherwise, which is the package's `icon-solid-marks-selection` rule. Nothing here can enforce it: a Quill glyph's weight is chosen at the import, so a page that wants the swap passes a different glyph per state */
+    icon?: ReactNode;
+}
+export type TabProps = TabOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'selected' | 'onSelect' | 'value' | 'label' | 'icon' | 'badge' | 'content' | 'trailingIcon'> & ({
+    content?: 'none' | 'icon' | 'badge';
+    trailingIcon: ReactNode;
+} | {
+    content?: Exclude<'none' | 'icon' | 'badge', 'icon'>;
+    trailingIcon?: ReactNode;
+}) & ({
+    content?: 'none' | 'icon' | 'badge';
+    badge: ReactNode;
+} | {
+    content?: Exclude<'none' | 'icon' | 'badge', 'badge'>;
+    badge?: ReactNode;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tabParts: {
+    readonly root: "dds-tab";
+    readonly surface: "dds-tab__surface";
+    readonly content: "dds-tab__content";
+    readonly icon: "dds-tab__icon";
+    readonly label: "dds-tab__label";
+    readonly sizer: "dds-tab__sizer";
+    readonly 'trailing-icon': "dds-tab__trailing-icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tabDefaults: {
+    readonly content: "none";
+};

package/dist/components/core/tab/Tab.types.js

@@ -0,0 +1,13 @@
+// GENERATED from tab.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tabParts = {
+    root: 'dds-tab',
+    surface: 'dds-tab__surface',
+    content: 'dds-tab__content',
+    icon: 'dds-tab__icon',
+    label: 'dds-tab__label',
+    sizer: 'dds-tab__sizer',
+    'trailing-icon': 'dds-tab__trailing-icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tabDefaults = { content: 'none' };

package/dist/components/core/tab/tab-impl.css

@@ -0,0 +1,49 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did
+ * before — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * The pointer belongs to the tab, not to what is drawn inside it.
+ *
+ * A glyph and a label are both hit targets of their own as far as pointer events are
+ * concerned, and a click landing on the label reports the label as its target. The tab is
+ * one control and its parts are not, so saying so is cheaper than the bug that finds it
+ * later.
+ *
+ * The surface is deliberately absent from this list. Its ground is bound on `:hover`, and a
+ * box that refuses the pointer is never hovered — which would make the tint dead CSS. Its
+ * children being inert is what keeps the pointer over the label reporting the surface
+ * underneath it.
+ */
+:where([data-dds-context="marketing"]) .dds-tab__content,
+:where([data-dds-context="marketing"]) .dds-tab__icon,
+:where([data-dds-context="marketing"]) .dds-tab__label {
+  pointer-events: none;
+}
+
+/*
+ * The label fades its colour and does not animate its weight.
+ *
+ * The generated `transition-property` lists everything that varies, and weight varies by
+ * selection — so with a duration bound on this part, weight would animate too. The face
+ * ships as separate cuts rather than a variable one, so an interpolated weight lands
+ * between two of them and snaps anyway; and it is the property that changes the label's
+ * width, so animating it drags the tab's neighbours along for a tenth of a second.
+ *
+ * Written here because the list is computed: a contract can say how long a change takes and
+ * on what curve, and cannot say which of the changes it applies to.
+ *
+ * Two classes deep to match what it overrides. The generated rule is `.dds-tab
+ * .dds-tab__label`, so a bare `.dds-tab__label` would lose on specificity however late it
+ * loaded — which is the quiet way an override of generated CSS fails.
+ */
+:where([data-dds-context="marketing"]) .dds-tab .dds-tab__label {
+  transition-property: color;
+}

package/dist/components/core/tab-list/TabList.css

@@ -0,0 +1,40 @@
+/* GENERATED from tablist.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tablist {
+  align-items: stretch;
+  border-block-end-style: solid;
+  border-block-start-style: none;
+  border-inline-style: none;
+  box-sizing: border-box;
+  display: flex;
+  border-color: var(--color-border-subtle);
+  border-width: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablist .dds-tablist__list {
+  align-items: stretch;
+  display: flex;
+  flex: auto;
+  min-inline-size: 0;
+  overflow-x: auto;
+  position: relative;
+  padding-block-end: var(--border-width-thick);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablist .dds-tablist__indicator {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+  background-color: var(--color-bg-brand);
+  block-size: var(--border-width-thick);
+  border-radius: var(--radius-pill);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-tablist,
+  :where([data-dds-context="marketing"]) .dds-tablist * { transition: none; }
+}
+

package/dist/components/core/tab-list/TabList.d.ts

@@ -0,0 +1,26 @@
+import './TabList.css';
+import './tab-list-impl.css';
+import { type TabListProps } from './TabList.types.js';
+export type { TabListProps };
+/**
+ * A strip of comparable versions of one thing, and the two things that belong to
+ * the set rather than to any tab: which is current, and where the bar sits.
+ *
+ * Controlled, and only controlled. The strip holds no selection state because the
+ * choice is not its to hold — the page renders whichever slice matches, so the
+ * page is where the answer lives. A private copy would be a second source of
+ * truth for the same question, and the two would disagree the first time the page
+ * set it from anywhere else. Product's keeps an uncontrolled mode because an app
+ * tab strip often has nothing else holding the view; here there always is.
+ *
+ * A `value` naming no tab selects none of them. Falling back to the first would
+ * tell the reader they are looking at a version they did not ask for, while the
+ * page beneath showed something else.
+ *
+ * `role="group"` with a name. Not `role="tablist"` — that names a widget whose
+ * tabs own panels through `aria-controls`, and the panels here belong to the
+ * page, so it is a promise this component cannot keep. Not `role="navigation"`
+ * either: a landmark says the items go places, and these change what is showing
+ * on the page the reader is already on.
+ */
+export declare function TabList({ label, value, onChange, children, ...rest }: TabListProps): import("react").JSX.Element;