@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/core/select-chip/SelectChip.types.js

@@ -0,0 +1,14 @@
+// GENERATED from select-chip.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const selectChipParts = {
+    root: 'dds-selectchip',
+    trigger: 'dds-selectchip__trigger',
+    'trigger-icon': 'dds-selectchip__trigger-icon',
+    'trigger-label': 'dds-selectchip__trigger-label',
+    chevron: 'dds-selectchip__chevron',
+    listbox: 'dds-selectchip__listbox',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const selectChipDefaults = { disabled: false, size: 'sm', alignment: 'start', emphasis: 'highlight' };
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export const selectChipGlyphStep = { sm: 'xs', md: 'sm' };

package/dist/components/core/select-chip/select-chip-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 — both here are written a class deeper than they look in order to match
+ * generated CSS, and a scope that carried weight would break them.
+ */
+
+/*
+ * Implementation CSS the contract cannot express.
+ *
+ * A token binding carries one state, and these are two at once. `chosen` is a state rather than
+ * an axis because whether an answer has been taken is derived from the value rather than passed
+ * in — so it cannot be a `when`, and a binding cannot say "chosen, and hovered" in one breath.
+ *
+ * Nothing here is a value. Every measure comes from the same tokens the bindings use, which is
+ * what keeps these two rules honest: they are the cascade the contract could not reach, not a
+ * second opinion about what the chip should look like.
+ */
+
+/* The chosen chip's own hover, which would otherwise fall back to the unchosen one and wash the
+   fill in the wrong direction — a black alpha over a ground that is already near-black shows
+   nothing at all. This is the case color.bg.hover-inverse exists for. */
+:where([data-dds-context="marketing"]) .dds-selectchip[data-emphasis="highlight"] .dds-selectchip__trigger[data-chosen="true"]:hover {
+  background-image: linear-gradient(
+    var(--color-bg-hover-inverse),
+    var(--color-bg-hover-inverse)
+  );
+}
+
+/* An open chip borrows the heavier edge, but only while nothing is chosen. Said of both, it would
+   be a second rule as specific as the one it argues with, and the cascade would settle it by
+   source order — so the exclusion is written rather than left to whichever sorted last. A chosen
+   chip already carries a painted edge, so there is nothing for opening to add — unless it is
+   quiet, which never takes that edge, and so borrows this one whether or not anything is chosen. */
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-expanded="true"]:not([data-chosen="true"]),
+:where([data-dds-context="marketing"]) .dds-selectchip[data-emphasis="quiet"] .dds-selectchip__trigger[data-expanded="true"] {
+  border-color: var(--color-border-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__listbox {
+  /* Over whatever follows the chip. An absolutely positioned box already paints above the
+     in-flow content of its own stacking context, which is enough until the next thing on the
+     page is positioned too — and in a row of chips the next thing is another chip, whose
+     relative root painted over this list in source order. `layer.popup`, the role
+     DropdownMenu and NavbarMenu already read for a panel that floats over the page. */
+  z-index: var(--layer-popup);
+}

package/dist/components/core/spinner/Spinner.css

@@ -0,0 +1,76 @@
+/* GENERATED from spinner.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-spinner {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-variant="inherit"] .dds-spinner__circle {
+  color: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-variant="inherit"] .dds-spinner__label {
+  color: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner .dds-spinner__label {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner .dds-spinner__track {
+  stroke-opacity: var(--opacity-track);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-size="lg"] .dds-spinner__circle {
+  block-size: var(--size-spinner-lg);
+  inline-size: var(--size-spinner-lg);
+  stroke-width: var(--size-spinner-stroke-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-size="lg"] .dds-spinner__label {
+  font-family: var(--font-label-lg-family);
+  font-size: var(--font-label-lg-size);
+  font-weight: var(--font-label-lg-weight);
+  letter-spacing: var(--font-label-lg-letter-spacing);
+  line-height: var(--font-label-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-size="md"] .dds-spinner__circle {
+  block-size: var(--size-spinner-md);
+  inline-size: var(--size-spinner-md);
+  stroke-width: var(--size-spinner-stroke-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-size="md"] .dds-spinner__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-size="sm"] .dds-spinner__circle {
+  block-size: var(--size-spinner-sm);
+  inline-size: var(--size-spinner-sm);
+  stroke-width: var(--size-spinner-stroke-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-size="sm"] .dds-spinner__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-variant="accent"] .dds-spinner__circle {
+  color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner[data-variant="neutral"] .dds-spinner__circle {
+  color: var(--color-bg-strong);
+}
+

package/dist/components/core/spinner/Spinner.d.ts

@@ -0,0 +1,5 @@
+import './Spinner.css';
+import './spinner-impl.css';
+import { type SpinnerProps } from './Spinner.types.js';
+export type { SpinnerProps };
+export declare function Spinner({ size, variant, label, showLabel, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/components/core/spinner/Spinner.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Spinner.css';
+import { given } from '../../given.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import './spinner-impl.css';
+import { spinnerDefaults, spinnerParts } from './Spinner.types.js';
+export function Spinner({ size = spinnerDefaults.size, variant = spinnerDefaults.variant, label, showLabel = spinnerDefaults.showLabel, ...rest }) {
+    /**
+     * Whether this spinner is the thing being waited on, or part of one.
+     *
+     * `role="status"` is a live region, so an unnamed one is not a quiet spinner — it is a
+     * region that fires with nothing to say. An absent label is therefore the decorative
+     * mode, and a real mode rather than a workaround: no role, no name, hidden outright.
+     * That is the right one wherever the copy beside the ring already names the wait, which
+     * on a marketing page is most of them.
+     */
+    const named = given(label);
+    return (
+    /*
+      `rest` first, the way ButtonIcon and CardButton spread theirs.
+
+      Last, it let a call site pass `role` or `aria-label` and overrule what this component
+      just decided — including naming a spinner that had deliberately made itself decorative,
+      which is the one state the label guidance exists to protect. Everything a consumer
+      legitimately sets (`id`, `style`, handlers, `data-*` of its own) still lands; only the
+      four attributes this component owns are now beyond reach.
+    */
+    _jsxs("div", { ...rest, className: spinnerParts.root, ...(named ? { role: 'status', 'aria-label': label } : { 'aria-hidden': true }), "data-size": size, "data-variant": variant, children: [_jsxs("svg", { className: spinnerParts.circle, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: spinnerParts.track, cx: "12", cy: "12", r: "10", stroke: "currentColor", vectorEffect: "non-scaling-stroke" }), _jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })] }), named ? (_jsx("span", { className: spinnerParts.label, style: showLabel ? undefined : visuallyHidden, children: label })) : null] }));
+}

package/dist/components/core/spinner/Spinner.types.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+export interface SpinnerOwnProps {
+    /**
+     * `sm` — In a line of body copy, or inside a control the reader has just pressed. Sixteen, the size of the words beside it, so it sits on the line rather than in front of it
+     * `md` — The default. A form that has been submitted, a card waiting on the figure it is going to show
+     * `lg` — A section holding space for something that arrives separately — an embed, a demo, a band of live figures. Sized to be found from where the reader is looking, which is the whole section rather than one control in it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * `accent` — The default, and what a page nearly always wants. The wait is the one thing happening, and the brand colour is what says the page is doing it rather than failing to
+     * `neutral` — The wait is incidental to what the reader came for — a figure refreshing inside a card that is otherwise readable. Brand colour on a wait nobody is watching spends attention the page needs further down
+     * `inherit` — Inside something that has already set a colour: a filled button, a dark band, a coloured panel. `currentColor` reaches the ring and the label together.
+  
+  This is also how a spinner on a dark section or a photograph gets its colour. There is no fixed-light or fixed-dark role in this package, and adding one would be asking a second time a question the section has already answered by setting its text colour
+     */
+    variant?: 'accent' | 'neutral' | 'inherit';
+}
+export type SpinnerProps = SpinnerOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'size' | 'variant' | 'label' | 'showLabel'> & ({
+    showLabel?: boolean;
+    label: string;
+} | {
+    showLabel?: false;
+    label?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const spinnerParts: {
+    readonly root: "dds-spinner";
+    readonly circle: "dds-spinner__circle";
+    readonly track: "dds-spinner__track";
+    readonly label: "dds-spinner__label";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const spinnerDefaults: {
+    readonly size: "md";
+    readonly variant: "accent";
+    readonly showLabel: false;
+};

package/dist/components/core/spinner/Spinner.types.js

@@ -0,0 +1,10 @@
+// GENERATED from spinner.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const spinnerParts = {
+    root: 'dds-spinner',
+    circle: 'dds-spinner__circle',
+    track: 'dds-spinner__track',
+    label: 'dds-spinner__label',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const spinnerDefaults = { size: 'md', variant: 'accent', showLabel: false };

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

@@ -0,0 +1,27 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so each one still ties or beats exactly what it did before.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+@keyframes dds-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+:where([data-dds-context="marketing"]) .dds-spinner__circle {
+  animation: dds-spinner-rotate var(--motion-duration-spinner) var(--motion-easing-spinner) infinite;
+}
+
+/*
+ * The ring stands still rather than disappearing. What is left is a full track with one
+ * arc drawn over it — still visibly an indicator, and still named by its label, which is
+ * what a reader who has turned motion off is relying on.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-spinner__circle {
+    animation: none;
+  }
+}

package/dist/components/core/status-dot/StatusDot.css

@@ -0,0 +1,43 @@
+/* GENERATED from statusdot.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-statusdot {
+  transition-property: outline-color, outline-width;
+  display: inline-block;
+  outline-style: solid;
+  border-radius: var(--radius-pill);
+  height: var(--size-dot-diameter);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+  width: var(--size-dot-diameter);
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-variant="accent"] {
+  background-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-variant="error"] {
+  background-color: var(--color-bg-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-variant="info"] {
+  background-color: var(--color-bg-info);
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-variant="success"] {
+  background-color: var(--color-bg-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-variant="warning"] {
+  background-color: var(--color-bg-warning);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-statusdot { transition: none !important; }
+}
+

package/dist/components/core/status-dot/StatusDot.d.ts

@@ -0,0 +1,35 @@
+import './StatusDot.css';
+import './status-dot-impl.css';
+import { type StatusDotProps } from './StatusDot.types.js';
+export type { StatusDotProps };
+/**
+ * The dot, and — when it has something to explain — the description attached to it.
+ *
+ * `tooltip` is the whole of the difference. Without it this renders one span and
+ * nothing else, which is what a dot in a list of twenty should cost. With it the dot
+ * becomes a tooltip anchor, and that brings two consequences the contract names and
+ * this file has to deliver.
+ *
+ * The first is the tab stop. `TooltipAnchor` reveals on pointer and on focus, and a
+ * span is not somewhere focus can rest — so the description would be one only a mouse
+ * ever reached. `tabIndex` is therefore set exactly when there is a tooltip to reach,
+ * and left alone otherwise: a dot with nothing to say is not a stop on the way to
+ * anything. It sits before the spread so a consumer with a reason to move the dot out
+ * of the tab order still can.
+ *
+ * The second is that the outermost element stops being the dot. `TooltipAnchor`'s own
+ * positioning wrapper goes around it, which is why the flex guard in
+ * status-dot-impl.css has to reach that box as well as this one — the flex child is
+ * whichever of the two the parent actually sees.
+ *
+ * And it carries no role and no name unless it is given one. The contract asks for a
+ * visible text label beside every dot and says outright that the text is what states
+ * the meaning — so a dot naming itself as well is heard twice. It was `role="status"`
+ * with a name defaulting to "Status", which made every dot on a page a live region
+ * announcing a word that says nothing: "Status, Online".
+ *
+ * `label` is the escape hatch for the rare dot standing alone, and it is what a dot
+ * carrying a tooltip must have — a tooltip makes it a tab stop, and a focusable thing
+ * with no name is announced as nothing at all.
+ */
+export declare function StatusDot({ variant, pulse, label, tooltip, ...rest }: StatusDotProps): import("react").JSX.Element;

package/dist/components/core/status-dot/StatusDot.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './StatusDot.css';
+import './status-dot-impl.css';
+import { TooltipAnchor } from '../tooltip/TooltipAnchor.js';
+import { given } from '../../given.js';
+import { statusDotDefaults, statusDotParts } from './StatusDot.types.js';
+/**
+ * The dot, and — when it has something to explain — the description attached to it.
+ *
+ * `tooltip` is the whole of the difference. Without it this renders one span and
+ * nothing else, which is what a dot in a list of twenty should cost. With it the dot
+ * becomes a tooltip anchor, and that brings two consequences the contract names and
+ * this file has to deliver.
+ *
+ * The first is the tab stop. `TooltipAnchor` reveals on pointer and on focus, and a
+ * span is not somewhere focus can rest — so the description would be one only a mouse
+ * ever reached. `tabIndex` is therefore set exactly when there is a tooltip to reach,
+ * and left alone otherwise: a dot with nothing to say is not a stop on the way to
+ * anything. It sits before the spread so a consumer with a reason to move the dot out
+ * of the tab order still can.
+ *
+ * The second is that the outermost element stops being the dot. `TooltipAnchor`'s own
+ * positioning wrapper goes around it, which is why the flex guard in
+ * status-dot-impl.css has to reach that box as well as this one — the flex child is
+ * whichever of the two the parent actually sees.
+ *
+ * And it carries no role and no name unless it is given one. The contract asks for a
+ * visible text label beside every dot and says outright that the text is what states
+ * the meaning — so a dot naming itself as well is heard twice. It was `role="status"`
+ * with a name defaulting to "Status", which made every dot on a page a live region
+ * announcing a word that says nothing: "Status, Online".
+ *
+ * `label` is the escape hatch for the rare dot standing alone, and it is what a dot
+ * carrying a tooltip must have — a tooltip makes it a tab stop, and a focusable thing
+ * with no name is announced as nothing at all.
+ */
+export function StatusDot({ variant = statusDotDefaults.variant, pulse = statusDotDefaults.pulse, label, tooltip, ...rest }) {
+    const described = given(tooltip);
+    const dot = (_jsx("span", { className: statusDotParts.root, "aria-label": label, "aria-hidden": label === undefined || undefined, "data-variant": variant, "data-pulse": pulse || undefined, tabIndex: described ? 0 : undefined, ...rest }));
+    if (!described)
+        return dot;
+    // The anchor clones the dot to attach its handlers and the aria-describedby, so the
+    // description belongs to the element carrying the role — not to the wrapper, which
+    // no assistive technology has any reason to visit.
+    return _jsx(TooltipAnchor, { content: tooltip, children: dot });
+}

package/dist/components/core/status-dot/StatusDot.types.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react';
+export interface StatusDotOwnProps {
+    /**
+     * `accent` — A mark in the brand colour, for something worth noticing that is not a state — a feature that is new, an item the page is pointing at. It is the default because most dots on a marketing page are drawing attention rather than reporting a condition, which is the opposite of the balance an application view has.
+     * `success` — Available, online, healthy, or passing
+     * `warning` — Away, degraded, or approaching a limit
+     * `error` — Busy, offline, failed, or critical
+     * `info` — In progress, syncing, or informational
+     */
+    variant?: 'accent' | 'success' | 'warning' | 'error' | 'info';
+    /** The status is live or actively changing — draws attention to an ongoing state */
+    pulse?: boolean;
+}
+export type StatusDotProps = StatusDotOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'variant' | 'pulse' | 'label' | 'tooltip'> & ({
+    tooltip?: string;
+    label: string;
+} | {
+    tooltip?: undefined;
+    label?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const statusDotParts: {
+    readonly root: "dds-statusdot";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const statusDotDefaults: {
+    readonly variant: "accent";
+    readonly pulse: false;
+};

package/dist/components/core/status-dot/StatusDot.types.js

@@ -0,0 +1,7 @@
+// GENERATED from status-dot.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const statusDotParts = {
+    root: 'dds-statusdot',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const statusDotDefaults = { variant: 'accent', pulse: false };

package/dist/components/core/status-dot/status-dot-impl.css

@@ -0,0 +1,42 @@
+/*
+ * 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. */
+
+:where([data-dds-context="marketing"]) .dds-statusdot {
+  flex-shrink: 0;
+}
+
+@keyframes dds-statusdot-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.5; }
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-pulse] {
+  animation: dds-statusdot-pulse var(--motion-duration-pulse) var(--motion-easing-enter) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-statusdot[data-pulse] {
+    animation: none;
+  }
+}
+
+/*
+ * The flex guard, again, one box out.
+ *
+ * A tooltip puts TooltipAnchor's positioning wrapper between the dot and whatever row
+ * it sits in, so the flex child stops being the dot and the rule above stops reaching
+ * it — a dot beside a long name would be squashed into an ellipse by the text rather
+ * than holding its diameter. The wrapper is another module's DOM and carries no class
+ * of ours, so it is matched by what it contains.
+ */
+:where([data-dds-context="marketing"]) .dds-tooltip-anchor:has(> .dds-statusdot) {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,89 @@
+/* GENERATED from subdomainnavbar.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  inset-block-start: 0;
+  justify-content: center;
+  position: sticky;
+  background-color: var(--color-bg-page);
+  box-shadow: var(--elevation-edge-bottom);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__inner {
+  align-items: center;
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: flex-start;
+  min-inline-size: 0;
+  block-size: var(--size-bar-height);
+  gap: var(--space-gap-xl);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__brand {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  block-size: var(--icon-size-md);
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__nav {
+  align-items: center;
+  display: flex;
+  min-inline-size: 0;
+  position: relative;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__utilities {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__trigger {
+  align-items: center;
+  appearance: none;
+  border-style: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  outline-style: solid;
+  padding: 0;
+  background-color: var(--color-bg-transparent);
+  border-radius: var(--radius-control-sm);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__panel-host {
+  display: contents;
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar .dds-subdomainnavbar__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar[data-tone="inverse"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar[data-tone="inverse"] .dds-subdomainnavbar__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+

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

@@ -0,0 +1,21 @@
+import './SubdomainNavbar.css';
+import './subdomain-navbar-impl.css';
+import { type SubdomainNavbarProps } from './SubdomainNavbar.types.js';
+export type { SubdomainNavbarProps };
+/**
+ * The bar across the top of a subdomain, and the plain sibling of Navbar.
+ *
+ * What it does not do is the point of it. There is no pill, nothing gathers, and nothing here reads
+ * the scroll position — a subdomain is somewhere a reader works, and chrome that rearranged itself
+ * while they read would be motion answering nothing. The marketing bar's behaviour is that site's
+ * signature and belongs to that site.
+ *
+ * What it shares is everything below the bar itself: the destinations are NavbarItem, the sections
+ * that open are NavbarMenu, and the surface it collapses into is NavbarPanel, which brings its own
+ * focus trap, its Escape and its scroll lock. That sharing is the argument for this being a second
+ * component rather than a variant of the first — the parts that carry the design were already
+ * separate, so a second bar costs a contract and a row.
+ *
+ * No `role="banner"`: a `<header>` outside a sectioning element already is that landmark.
+ */
+export declare function SubdomainNavbar({ tone, label, menuLabel, closeLabel, brand, utilities, menuOpen, onMenuOpenChange, children, ...rest }: SubdomainNavbarProps): import("react").JSX.Element;