@deriv-com/dds-marketing 0.1.0 → 0.2.0

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; }
+}
+

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-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-subdomainnavbar[data-tone="inverse"] .dds-subdomainnavbar__trigger:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+}
+

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;

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

@@ -0,0 +1,127 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useCallback, useRef, useState, } from 'react';
+import { BarsRegularIcon, XmarkRegularIcon } from '@deriv-com/quill-icons-web';
+import './SubdomainNavbar.css';
+import './subdomain-navbar-impl.css';
+import { ButtonIcon } from '../button-icon/ButtonIcon.js';
+import { DropdownMenu } from '../dropdown-menu/DropdownMenu.js';
+import { Icon } from '../icon/Icon.js';
+import { NavbarItem } from '../navbar-item/NavbarItem.js';
+import { NavbarMenu } from '../navbar-menu/NavbarMenu.js';
+import { NavbarPanel } from '../navbar-panel/NavbarPanel.js';
+import { NavbarSwitcher } from '../navbar-switcher/NavbarSwitcher.js';
+import { subdomainNavbarDefaults, subdomainNavbarParts, } from './SubdomainNavbar.types.js';
+/** The two of this package's own components a page is likely to put at the far end. */
+const TONED = [DropdownMenu, ButtonIcon, NavbarSwitcher];
+/** What the panel draws under the destinations rather than in its foot. */
+const SWITCHERS = [NavbarSwitcher, ButtonIcon];
+/**
+ * Both handlers, the menu's own first.
+ *
+ * `cloneElement` replaces rather than merges, so a menu already reporting its own state would
+ * silently stop — and that is the handler a page is most likely to have written.
+ */
+function chain(theirs, ours) {
+    if (theirs === undefined)
+        return ours;
+    return (open) => {
+        theirs(open);
+        ours(open);
+    };
+}
+/**
+ * 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 function SubdomainNavbar({ tone = subdomainNavbarDefaults.tone, label, menuLabel, closeLabel, brand, utilities, menuOpen, onMenuOpenChange, children, ...rest }) {
+    const triggerRef = useRef(null);
+    /*
+      Controlled when told, its own answer otherwise. A private copy alongside a passed one would be
+      two answers to a question with one truth, and would show the stale one for a frame the first
+      time a page set it from anywhere else.
+    */
+    const [held, setHeld] = useState(false);
+    const controlled = menuOpen !== undefined;
+    const open = controlled ? menuOpen : held;
+    const setOpen = useCallback((next) => {
+        if (!controlled)
+            setHeld(next);
+        onMenuOpenChange?.(next);
+    }, [controlled, onMenuOpenChange]);
+    const close = useCallback(() => setOpen(false), [setOpen]);
+    // Which section is showing, by position in the row. Positions rather than labels: two sections
+    // can share a name in a way nothing here should have an opinion about.
+    const [section, setSection] = useState(null);
+    const items = Children.toArray(children);
+    const governed = items.map((child, index) => {
+        if (!isValidElement(child))
+            return child;
+        /*
+          The tone travels to everything this component owns. A row where one destination is inverse and
+          its neighbours are not is a row whose hovers half disappear — and the bar is the only thing
+          that knows what ground it painted, so it tells them rather than asking the page to tell each.
+        */
+        if (child.type === NavbarItem)
+            return cloneElement(child, { tone });
+        if (child.type !== NavbarMenu)
+            return child;
+        return cloneElement(child, {
+            tone,
+            open: section === index,
+            onOpenChange: chain(child.props.onOpenChange, (next) => {
+                setSection(next ? index : null);
+            }),
+        });
+    });
+    /*
+      And the far end, which is a slot rather than children — so only the two components the bar can
+      speak to are spoken to. Anything else goes through untouched: pressing a prop on a component
+      that does not declare it puts an unknown attribute on a DOM node, which React says out loud.
+  
+      `openOnHover` is not set here, unlike the marketing bar's switcher. Nothing else in this row
+      opens under the pointer, so a control that did would be the odd one rather than the consistent
+      one.
+    */
+    const trailing = Children.map(utilities, (child) => isValidElement(child) && TONED.includes(child.type)
+        ? cloneElement(child, { tone })
+        : child);
+    /*
+      And the same set again, split for the panel.
+  
+      A switcher belongs under the destinations there and the action belongs in the foot — the foot
+      is for the one thing the subdomain wants pressed, and a preference sitting beside it competes
+      for the last word. The bar has one slot, so the split is made by type: the two components that
+      are switchers go one way and everything else goes the other.
+  
+      At no tone. The panel paints paper whatever the bar is standing on, so what it holds takes the
+      default — the same element is inverse a few pixels away in the bar, and one of the two would
+      otherwise be wrong.
+    */
+    const settings = [];
+    const actions = [];
+    Children.forEach(utilities, (child) => {
+        const isSwitcher = isValidElement(child) && SWITCHERS.includes(child.type);
+        (isSwitcher ? settings : actions).push(child);
+    });
+    return (_jsxs("header", { ...rest, className: subdomainNavbarParts.root, "data-tone": tone, "data-dds-pinned-surface": open ? 'open' : undefined, children: [_jsxs("div", { className: subdomainNavbarParts.inner, children: [brand !== undefined && brand !== null && (_jsx("div", { className: subdomainNavbarParts.brand, children: brand })), _jsx("nav", { className: subdomainNavbarParts.nav, "aria-label": label, children: governed }), utilities !== undefined && utilities !== null && (_jsx("div", { className: subdomainNavbarParts.utilities, children: trailing })), _jsx("button", { ref: triggerRef, type: "button", className: subdomainNavbarParts.trigger, "aria-label": menuLabel, "aria-expanded": open, onClick: () => setOpen(!open), children: _jsx(Icon, { size: "md", children: open ? _jsx(XmarkRegularIcon, {}) : _jsx(BarsRegularIcon, {}) }) })] }), open && (_jsx("div", { className: subdomainNavbarParts['panel-host'], children: _jsx(NavbarPanel, { label: label, closeLabel: closeLabel, onClose: close, brand: brand, 
+                    /*
+                      The far end is one slot here, and the panel wants it in two places: what a reader
+                      sets goes under the destinations, and what the subdomain wants pressed goes in the
+                      foot. Split by type rather than by another prop — a switcher is a NavbarSwitcher or a
+                      ButtonIcon, and anything else is the action.
+                    */
+                    preferences: settings, footer: actions, openerRef: triggerRef, children: children }) }))] }));
+}