@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/core/navbar/Navbar.js

@@ -1,9 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, Children, cloneElement, isValidElement, useCallback, useEffect, useRef, useState, } from 'react';
-import { BarsRegularIcon, XmarkRegularIcon } from '@deriv-com/quill-icons-web';
+import { useLayoutEffect, Children, Fragment, cloneElement, isValidElement, useCallback, useEffect, useRef, useState, } from 'react';
+import { BarsRegularIcon, MoonRegularIcon, SunBrightRegularIcon, XmarkRegularIcon, } from '@deriv-com/quill-icons-web';
 import './Navbar.css';
 import './navbar-impl.css';
+import './navbar-material.css';
+import { Button } from '../button/Button.js';
+import { buttonDefaults } from '../button/Button.types.js';
 import { ButtonIcon } from '../button-icon/ButtonIcon.js';
 import { milliseconds } from '../../css-time.js';
 import { DropdownMenu } from '../dropdown-menu/DropdownMenu.js';
@@ -229,21 +232,110 @@ function useCollapse(element, collapsed, gapSide) {
 /** The two of this package's own components a page is likely to put in a switcher slot. */
 const TONED = [DropdownMenu, ButtonIcon, NavbarSwitcher];
 /**
- * The tone, pressed on a switcher the page passed in.
+ * The tone, pressed on a switcher or a secondary action the page passed in.
  *
  * A slot is the page's and this component does not dress what goes in one — that rule is why the
- * mark and the actions are the page's to make legible. This is the exception, and it earns it: what
- * the tone has to answer is the ground *this* component painted, and it changes on scroll, which no
- * page can see without writing a second scroll listener against the bar it is already inside.
+ * mark is the page's to make legible. This is the exception, and it earns it: what the tone has to
+ * answer is the ground *this* component painted, and it changes on scroll, which no page can see
+ * without writing a second scroll listener against the bar it is already inside.
+ *
+ * A secondary Button is told too, and only a secondary one. Its `inverse` tone is a fill for a dark
+ * ground, and a page that set it for the hero left it white-on-white once the bar gathered into its
+ * pill. A primary is coral on either ground and carries its own, so it is left as it was handed.
+ *
+ * And every Button in the bar's action slots is drawn at `md`, whatever the page passed: the bar's
+ * items stand at size.control.md, and a button a step taller than the row it sits in pushes the
+ * bar taller with it. The collapsed panel's foot is not the bar, so it keeps the page's size.
  *
  * Matched by type rather than hoped for. Anything else the slot is handed goes through untouched,
  * because pressing the prop on a component that does not declare it would put an unknown attribute
  * on a DOM node, which React says out loud and a reader then has to go and disprove.
+ *
+ * Each of several, not only a lone one. The slot is for "a language picker, a theme toggle", and
+ * handed both as a list the second used to go through undressed — dark ink on a dark hero.
+ */
+function toned(children, dressing) {
+    // An empty slot stays empty rather than becoming `[]`, which every "is there anything here"
+    // check downstream — NavbarPanel's among them, and the bar's own — would read as something to
+    // draw a box for. `false` from a `{signedIn && <Button/>}` flattens to nothing, so it is empty too.
+    return children.length === 0 ? undefined : children.map((child) => dressed(child, dressing));
+}
+/**
+ * A slot's contents as one flat list, with every fragment opened.
+ *
+ * A page hands a pair of actions over as `<>…</>` and a list of switchers the same way, and
+ * `Children.map` does not look inside a fragment — so a fragment reached anything that matched on
+ * type, NavbarPanel's switcher-to-row swap included, as one opaque element. Opened here, once,
+ * each control is a child of its own wherever the slot is drawn.
+ *
+ * Every element comes out with a key unique across the whole list. `Children.toArray` keys each
+ * level from `.0` again, so the children of two fragments side by side would share keys and React
+ * could hand one control's state — an open switcher, say — to another. Each key is prefixed with
+ * the path of fragments it came through, the way React keys nested arrays itself.
+ */
+export function flattened(node, path = '') {
+    return Children.toArray(node).flatMap((child) => {
+        if (!isValidElement(child))
+            return [child];
+        const key = `${path}${String(child.key)}`;
+        if (child.type === Fragment)
+            return flattened(child.props.children, `${key}/`);
+        return [path === '' ? child : cloneElement(child, { key })];
+    });
+}
+/**
+ * The bar's actions are a pair, and a page that hands it more is told.
+ *
+ * At most two Buttons: one primary, and one secondary beside it — the conversion and the way back
+ * in. A lone Button is the primary. A third, or a second of either rank, is the bar asking the
+ * reader to choose between things it should have ranked; the `navbar-actions-are-a-pair` rule has
+ * the reasoning. Nothing checks a page's JSX yet, so this is where it is caught.
+ *
+ * Said, not refused. The bar still draws what it was handed — a page mid-build that lost its
+ * buttons would be worse than one with a third — and says so once for each shape of mistake, the
+ * way product's charts warn about a crowded palette.
+ */
+const warned = new Set();
+function warnIfActionsAreNotAPair(utilities) {
+    const variants = utilities
+        .filter((child) => isValidElement(child) && child.type === Button)
+        .map((button) => button.props.variant ?? buttonDefaults.variant);
+    const problem = variants.length > 2
+        ? `was handed ${variants.length} Buttons`
+        : variants.length === 1 && variants[0] !== 'primary'
+            ? `was handed a single ${variants[0]} Button`
+            : variants.length === 2 && !(variants.includes('primary') && variants.includes('secondary'))
+                ? `was handed two Buttons that are ${variants.join(' and ')}`
+                : undefined;
+    if (problem === undefined || warned.has(problem))
+        return;
+    warned.add(problem);
+    // eslint-disable-next-line no-console
+    console.warn(`Navbar ${problem} in utilities. The bar holds at most two: one primary, and one secondary ` +
+        'beside it — a lone Button is the primary. A third action belongs somewhere on the page, ' +
+        'not in the bar. See the navbar-actions-are-a-pair rule.');
+}
+/**
+ * One control, dressed for where it stands.
+ *
+ * Only what the dressing sets is written. `openOnHover` in particular is a page's to decide in a
+ * slot the bar has no view on, and cloning `{ openOnHover: undefined }` would reset it rather than
+ * leave it — an explicit `undefined` is an override to `cloneElement`, not an absence.
+ *
+ * A Button takes the bar's tone whatever its variant. On a secondary the tone is the fill; on the
+ * others it is only the focus ring, which has to follow the ground as much as any fill does — a
+ * primary keeping `inverse` from the hero would draw a white ring on the white pill.
  */
-function toned(node, { tone, openOnHover }) {
-    if (!isValidElement(node) || !TONED.includes(node.type))
+function dressed(node, { tone, openOnHover, size }) {
+    if (!isValidElement(node))
         return node;
-    return cloneElement(node, node.type === DropdownMenu ? { tone, openOnHover } : { tone });
+    if (node.type === Button) {
+        return cloneElement(node, { tone, ...(size === undefined ? {} : { size }) });
+    }
+    if (!TONED.includes(node.type))
+        return node;
+    const hover = node.type === DropdownMenu && openOnHover !== undefined ? { openOnHover } : {};
+    return cloneElement(node, { tone, ...hover });
 }
 /**
  * The bar across the top of a marketing page: the mark, the places the site has,
@@ -267,7 +359,33 @@ function toned(node, { tone, openOnHover }) {
  * landmark, and writing it as well says so a second time in a way that goes stale
  * if the element is ever nested.
  */
-export function Navbar({ tone = navbarDefaults.tone, label, menuLabel, closeLabel, brand, utilities, compactAction, preferences, menuOpen, onMenuOpenChange, children, ...rest }) {
+export function Navbar({ tone = navbarDefaults.tone, label, menuLabel, closeLabel, brand, utilities, compactAction, preferences, showThemeToggle = navbarDefaults.showThemeToggle, theme, onThemeChange, themeToggleLabel, menuOpen, onMenuOpenChange, children, ...rest }) {
+    /*
+      The theme toggle, drawn by the bar and placed after whatever the page put in preferences.
+  
+      A ButtonIcon rather than a switcher: two themes are a toggle, not a choice among many, so a
+      menu listing both is a step nobody needs. `plain` so it is one of the pill's own items, and
+      `md` because that square is size.control.md — the height every item, menu and switcher in the
+      pill stands at, and the size the bar's buttons are. The glyph is the theme a press moves to; the name stays the theme it turns on
+      and aria-pressed carries the state, so a screen reader hears one name whichever way it is.
+  
+      Joined to preferences as a list rather than drawn in a box of its own, so it takes the same
+      tone on the hero and in the pill, and the collapsed panel draws it at its foot beside the
+      rest — both come for free from how that slot is already handled.
+    */
+    /*
+      Drawn only once it can be named. The pairing is enforced by the types, which a consumer
+      writing JavaScript never sees — and a glyph-only toggle with no label is a button a screen
+      reader announces with nothing after it. Absent is the honest failure; unnamed is not.
+    */
+    const themeToggle = showThemeToggle && theme !== undefined && themeToggleLabel !== undefined && themeToggleLabel !== '' ? (_jsx(ButtonIcon, { variant: "plain", size: "md", label: themeToggleLabel, "aria-pressed": theme === 'dark', icon: theme === 'dark' ? _jsx(SunBrightRegularIcon, {}) : _jsx(MoonRegularIcon, {}), onClick: () => onThemeChange?.(theme === 'dark' ? 'light' : 'dark') }, "dds-navbar-theme-toggle")) : null;
+    /*
+      Each slot opened into one flat list, once per render — the warning, the bar and the panel all
+      read these rather than each walking the fragments again.
+    */
+    const preferenceList = themeToggle === null ? flattened(preferences) : [...flattened(preferences), themeToggle];
+    const utilityList = flattened(utilities);
+    const compactList = flattened(compactAction);
     const rootRef = useRef(null);
     const condensed = useScrolled(rootRef);
     const gathered = condensed ? 'true' : undefined;
@@ -287,6 +405,15 @@ export function Navbar({ tone = navbarDefaults.tone, label, menuLabel, closeLabe
       One value, read by the attribute the stylesheet matches and by every child that is told a tone.
     */
     const worn = condensed ? 'default' : tone;
+    /*
+      Each slot dressed once, for the ground it stands on. The utilities are drawn in two places —
+      inside the pill once it gathers, and at the trailing end before — and both show the same
+      element, so they share one dressing rather than keeping two in step by hand.
+    */
+    const barSwitchers = toned(preferenceList, { tone: worn, openOnHover: true });
+    warnIfActionsAreNotAPair(utilityList);
+    const barUtilities = toned(utilityList, { tone: worn, size: 'md' });
+    const barCompact = toned(compactList, { tone: worn, size: 'md' });
     const triggerRef = useRef(null);
     /*
       The pill's pair, which is the half of this that JavaScript has to do.
@@ -352,7 +479,7 @@ export function Navbar({ tone = navbarDefaults.tone, label, menuLabel, closeLabe
             }),
         });
     });
-    return (_jsxs("header", { ...rest, ref: rootRef, className: navbarParts.root, "data-tone": worn, "data-condensed": gathered, "data-dds-pinned-surface": open ? 'open' : undefined, children: [_jsxs("div", { className: navbarParts.inner, "data-condensed": gathered, children: [_jsx("div", { className: navbarParts.ground, "data-condensed": gathered }), brand !== undefined && brand !== null && (_jsx("div", { className: navbarParts.brand, "data-condensed": gathered, children: brand })), _jsxs("div", { className: navbarParts.cluster, "data-condensed": gathered, children: [brand !== undefined && brand !== null && (_jsx("div", { ref: pillBrandRef, className: navbarParts.brand, children: brand })), _jsx("nav", { className: navbarParts.nav, "aria-label": label, children: governed }), preferences !== undefined && preferences !== null && (_jsx("div", { className: navbarParts.preferences, children: toned(preferences, { tone: worn, openOnHover: true }) })), utilities !== undefined && utilities !== null && (_jsx("div", { ref: pillActionsRef, className: navbarParts.utilities, children: utilities }))] }), utilities !== undefined && utilities !== null && (_jsx("div", { className: navbarParts.utilities, "data-condensed": gathered, children: utilities })), compactAction !== undefined && compactAction !== null && (_jsx("div", { className: navbarParts['compact-action'], children: compactAction })), _jsx("button", { ref: triggerRef, type: "button", className: navbarParts.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: navbarParts['panel-host'], children: _jsx(NavbarPanel, { label: label, closeLabel: closeLabel, onClose: close, brand: brand, 
+    return (_jsxs("header", { ...rest, ref: rootRef, className: navbarParts.root, "data-tone": worn, "data-condensed": gathered, "data-dds-pinned-surface": open ? 'open' : undefined, children: [_jsxs("div", { className: navbarParts.inner, "data-condensed": gathered, children: [_jsx("div", { className: navbarParts.ground, "data-condensed": gathered }), brand !== undefined && brand !== null && (_jsx("div", { className: navbarParts.brand, "data-condensed": gathered, children: brand })), _jsxs("div", { className: navbarParts.cluster, "data-condensed": gathered, children: [brand !== undefined && brand !== null && (_jsx("div", { ref: pillBrandRef, className: navbarParts.brand, children: brand })), _jsx("nav", { className: navbarParts.nav, "aria-label": label, children: governed }), barSwitchers !== undefined && (_jsx("div", { className: navbarParts.preferences, children: barSwitchers })), barUtilities !== undefined && (_jsx("div", { ref: pillActionsRef, className: navbarParts.utilities, children: barUtilities }))] }), barUtilities !== undefined && (_jsx("div", { className: navbarParts.utilities, "data-condensed": gathered, children: barUtilities })), barCompact !== undefined && (_jsx("div", { className: navbarParts['compact-action'], children: barCompact })), _jsx("button", { ref: triggerRef, type: "button", className: navbarParts.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: navbarParts['panel-host'], children: _jsx(NavbarPanel, { label: label, closeLabel: closeLabel, onClose: close, brand: brand, 
                     /*
                       Both, because the pill they were drawn in is not drawn at this width and
                       the foot is where everything that was in the bar has gone. What a reader
@@ -367,5 +494,5 @@ export function Navbar({ tone = navbarDefaults.tone, label, menuLabel, closeLabe
                       And not told to open on hover: in a panel a switcher is a row read down with a
                       finger, and the panel is the thing that turns it into one.
                     */
-                    preferences: toned(preferences, { tone: 'default' }), footer: utilities, openerRef: triggerRef, children: children }) }))] }));
+                    preferences: toned(preferenceList, { tone: 'default', openOnHover: false }), footer: toned(utilityList, { tone: 'default' }), openerRef: triggerRef, children: children }) }))] }));
 }

package/dist/components/core/navbar/Navbar.types.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 export interface NavbarOwnProps {
     /**
      * `default` — The page begins on a light ground, which is most marketing pages. The bar paints in ink and the pill is paper
-     * `inverse` — The first section of the page paints its own dark ground and the bar stands on it — a dark hero, a photograph, a brand-coloured takeover. The bar's ink runs light, the pill becomes a veil of white rather than a sheet of it, and the collapsed bar takes a solid dark ground of its own
+     * `inverse` — The first section of the page paints its own dark ground and the bar stands on it — a dark hero, a photograph, a brand-coloured takeover. The bar's ink runs light, and the pill and the collapsed bar take the dark see-through material — a near-opaque black base, a white tint and a blur — so a light photograph behind cannot wash them out
      */
     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' */
@@ -13,9 +13,9 @@ export interface NavbarOwnProps {
     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, a conversion action, or some combination. A switcher is a DropdownMenu with the current choice on its trigger, which is what DropdownMenu's own guidance describes and why it is accepted here alongside the two controls. They are drawn in the row at wide widths and across the foot of the panel once it collapses */
+    /** The bar's trailing end has the site's actions in it: one Button, which is primary, or two — one primary and one secondary, the conversion beside the way back in. A switcher is a DropdownMenu with the current choice on its trigger, which is what DropdownMenu's own guidance describes and why it is accepted here alongside the two controls. They are drawn in the row at wide widths and across the foot of the panel once it collapses. The bar dresses what it is handed: every Button here is drawn at md and takes the tone of the ground the bar is on at that scroll position — inverse on the hero, default once the pill gathers — and a ButtonIcon or a DropdownMenu takes the tone too. That reaches the controls handed in directly, or in a fragment; a control inside a component of the page's own is past it, so a wrapper takes tone and size as props and passes them down */
     utilities?: ReactNode;
-    /** The one thing a reader should still be able to do once the bar has collapsed and everything else has gone into the panel — a sign-up, usually. Drawn beside the control that opens the panel, and only at the widths where that control is drawn */
+    /** The one thing a reader should still be able to do once the bar has collapsed and everything else has gone into the panel — a sign-up, usually. Drawn beside the control that opens the panel, and only at the widths where that control is drawn. Dressed like utilities: a Button here is drawn at md and takes the bar's tone */
     compactAction?: ReactNode;
     /** A switcher that belongs with the destinations rather than with the conversion — a language picker, a theme toggle. It is drawn inside the pill, beside the sections, at every scroll position. A NavbarSwitcher is the one built for it: in the pill it is a trigger and a menu, and in the collapsed panel the same element becomes a row that opens a page of its own with a way back, because a dropdown inside a surface already covering the screen is a surface inside a surface */
     preferences?: ReactNode;
@@ -28,7 +28,25 @@ export interface NavbarOwnProps {
     /** Allowed: NavbarItem, NavbarMenu */
     children: ReactNode;
 }
-export type NavbarProps = NavbarOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'tone' | 'label' | 'menuLabel' | 'closeLabel' | 'brand' | 'utilities' | 'compactAction' | 'preferences' | 'menuOpen' | 'onMenuOpenChange'>;
+export type NavbarProps = NavbarOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'tone' | 'label' | 'menuLabel' | 'closeLabel' | 'brand' | 'utilities' | 'compactAction' | 'preferences' | 'showThemeToggle' | 'theme' | 'onThemeChange' | 'themeToggleLabel' | 'menuOpen' | 'onMenuOpenChange'> & ({
+    showThemeToggle?: boolean;
+    theme: 'light' | 'dark';
+} | {
+    showThemeToggle?: false;
+    theme?: 'light' | 'dark';
+}) & ({
+    showThemeToggle?: boolean;
+    onThemeChange: (theme: 'light' | 'dark') => void;
+} | {
+    showThemeToggle?: false;
+    onThemeChange?: (theme: 'light' | 'dark') => void;
+}) & ({
+    showThemeToggle?: boolean;
+    themeToggleLabel: string;
+} | {
+    showThemeToggle?: false;
+    themeToggleLabel?: string;
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const navbarParts: {
     readonly root: "dds-navbar";
@@ -46,4 +64,5 @@ export declare const navbarParts: {
 /** Generated so defaults cannot drift from the contract. */
 export declare const navbarDefaults: {
     readonly tone: "default";
+    readonly showThemeToggle: false;
 };

package/dist/components/core/navbar/Navbar.types.js

@@ -14,4 +14,4 @@ export const navbarParts = {
     cluster: 'dds-navbar__cluster',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const navbarDefaults = { tone: 'default' };
+export const navbarDefaults = { tone: 'default', showThemeToggle: false };

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

@@ -45,6 +45,11 @@
   z-index: -1;
 }
 
+/*
+ * The see-through material — tint, blur, and the layer the pill's blur sits on — is in
+ * navbar-material.css, which the bar's panels share.
+ */
+
 /*
  * Which regions the bar draws, and the one size query in this package.
  *
@@ -558,8 +563,8 @@
  * There is one of these in the markup and there always was: the same element holds the destinations
  * at rest and the whole row once the bar gathers, which is why its ground, its corner and its lift
  * are declared once and never handed between parts. What changes on scroll is what is inside it and
- * what it is painted in — a bar standing on a dark hero wears a veil of white, and a bar that has
- * left that hero behind wears paper.
+ * what it is painted in — a bar standing on a dark hero wears the dark material, and a bar that has
+ * left that hero behind wears the page's.
  *
  * Instantly, though, and that is the part a reader cannot read. A surface that swaps colour in one
  * frame while its contents change in the same frame is indistinguishable from a second surface
@@ -575,7 +580,9 @@
  * one a data attribute swaps.
  */
 :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster {
-  transition: background-color var(--motion-duration-shift) var(--motion-easing-shift);
+  transition:
+    background-color var(--motion-duration-shift) var(--motion-easing-shift),
+    --dds-navbar-tint var(--motion-duration-shift) var(--motion-easing-shift);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar {

package/dist/components/core/navbar/navbar-material.css

@@ -0,0 +1,96 @@
+/*
+ * The navigation bar's material, in one place.
+ *
+ * Every surface the bar paints — the pill, the collapsed bar, and each panel that opens from it —
+ * is the same see-through stuff: a nearly opaque base in its own ink, a thin tint over it, and a
+ * blur of whatever scrolls behind. The base is bound in each component's contract; what a
+ * contract cannot hold is here, once, so a change to the blur or the tint is one edit rather than
+ * one per component. Navbar, NavbarMenu and NavbarSwitcher each import it, and a bundler loads it
+ * once.
+ *
+ * Scoped like the generated sheets: `:where([data-dds-context="marketing"])` adds no specificity.
+ */
+
+/*
+ * The tint is a registered custom property so that it can travel.
+ *
+ * It is painted as a `background-image` gradient over the base, because that is how one colour is
+ * laid over another in a single box. A gradient cannot transition — the base eased from one tone to
+ * the other while the tint changed in one frame, and the pill popped as it began. A registered
+ * `<color>` property interpolates, and the gradient drawn from it follows it on every frame.
+ */
+@property --dds-navbar-tint {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster,
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground {
+  --dds-navbar-tint: var(--color-bg-surface-translucent-tint);
+  background-image: linear-gradient(var(--dds-navbar-tint), var(--dds-navbar-tint));
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__cluster,
+:where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__ground {
+  --dds-navbar-tint: var(--color-bg-surface-translucent-tint-on-brand-strong);
+}
+
+/*
+ * The blur.
+ *
+ * `blur()` around the token rather than a binding, because a binding can only write the length.
+ * The `-webkit-` form is still the one Safari reads.
+ *
+ * The collapsed bar holds nothing, so it carries its blur itself.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground {
+  -webkit-backdrop-filter: blur(var(--size-backdrop-blur));
+  backdrop-filter: blur(var(--size-backdrop-blur));
+}
+
+/*
+ * The pill carries its blur on a layer beneath its own fill, not on itself.
+ *
+ * An element with `backdrop-filter` becomes the backdrop root for everything inside it, and the
+ * section panels hang inside the pill — so a blur on the pill would leave each panel blurring only
+ * what the pill had painted. On a pseudo-element the pill stays an ordinary box.
+ *
+ * `z-index: -1` with no stacking context made for it. The bar's row already is one — its
+ * `container-type` brings layout containment — so the layer paints under everything in the row,
+ * the pill's own fill included, and the fill lands on top of the blurred page exactly as a
+ * `backdrop-filter` on the pill itself would have drawn it. Giving the pill `isolation` instead
+ * would have made it a stacking context around its panels, which some engines read as a backdrop
+ * root too.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(var(--size-backdrop-blur));
+  backdrop-filter: blur(var(--size-backdrop-blur));
+}
+
+/*
+ * Each panel the bar opens is the pill's material, so a panel reads as part of the bar rather than
+ * a sheet laid over it. NavbarMenu and NavbarSwitcher bind the base and the tint in their
+ * contracts. A DropdownMenu does not know it is in a bar, and elsewhere its panel is rightly solid,
+ * so inside one it is given the material here — a class deeper than its own rule, so this wins.
+ */
+:where([data-dds-context="marketing"]) .dds-navbar .dds-dropdownmenu .dds-dropdownmenu__surface {
+  background-color: var(--color-bg-surface-translucent);
+  background-image: linear-gradient(
+    var(--color-bg-surface-translucent-tint),
+    var(--color-bg-surface-translucent-tint)
+  );
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-presentation="floating"] .dds-navbarmenu__surface,
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation="floating"] .dds-navbarswitcher__surface,
+:where([data-dds-context="marketing"]) .dds-navbar .dds-dropdownmenu .dds-dropdownmenu__surface {
+  -webkit-backdrop-filter: blur(var(--size-backdrop-blur));
+  backdrop-filter: blur(var(--size-backdrop-blur));
+}

package/dist/components/core/navbar-item/NavbarItem.css

@@ -13,7 +13,7 @@
   white-space: nowrap;
   border-radius: var(--radius-pill);
   gap: var(--space-gap-xs);
-  min-block-size: var(--size-control-lg);
+  min-block-size: var(--size-control-md);
   outline-width: var(--border-width-none);
   padding-block: var(--space-inset-2xs);
   padding-inline: var(--space-inset-md);
@@ -57,7 +57,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbaritem[data-tone="inverse"]:hover {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbaritem[data-current="true"][data-tone="default"] {
@@ -65,11 +65,11 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbaritem[data-current="true"][data-tone="inverse"] {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-navbaritem,
-  :where([data-dds-context="marketing"]) .dds-navbaritem * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-navbaritem * { transition: none !important; }
 }
 

package/dist/components/core/navbar-menu/NavbarMenu.css

@@ -24,7 +24,7 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-label-sm-letter-spacing);
   line-height: var(--font-label-sm-line-height);
-  min-block-size: var(--size-control-lg);
+  min-block-size: var(--size-control-md);
   outline-width: var(--border-width-none);
   padding-block: var(--space-inset-2xs);
   padding-inline: var(--space-inset-md);
@@ -37,6 +37,7 @@
   display: inline-flex;
   flex-shrink: 0;
   justify-content: center;
+  transition-property: rotate;
   block-size: var(--icon-size-xs);
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-easing-standard);
@@ -82,7 +83,8 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarmenu[data-presentation="floating"] .dds-navbarmenu__surface {
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-translucent);
+  background-image: linear-gradient(var(--color-bg-surface-translucent-tint), var(--color-bg-surface-translucent-tint));
   border-radius: var(--radius-container);
   box-shadow: var(--elevation-surface-overlay);
   gap: var(--space-gap-xl);
@@ -110,7 +112,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="inverse"] .dds-navbarmenu__trigger:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="default"] .dds-navbarmenu__trigger[data-expanded="true"] {
@@ -118,11 +120,11 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="inverse"] .dds-navbarmenu__trigger[data-expanded="true"] {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-navbarmenu,
-  :where([data-dds-context="marketing"]) .dds-navbarmenu * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-navbarmenu * { transition: none !important; }
 }
 

package/dist/components/core/navbar-menu/NavbarMenu.d.ts

@@ -1,5 +1,6 @@
 import './NavbarMenu.css';
 import './navbar-menu-impl.css';
+import '../navbar/navbar-material.css';
 import { type NavbarMenuProps } from './NavbarMenu.types.js';
 export type { NavbarMenuProps };
 export declare function NavbarMenu({ presentation, tone, label, open, onOpenChange, replacing, feature, children, ...rest }: NavbarMenuProps): import("react").JSX.Element;

package/dist/components/core/navbar-menu/NavbarMenu.js

@@ -4,6 +4,7 @@ import { useLayoutEffect, useCallback, useEffect, useRef, useState, } from 'reac
 import { ChevronDownRegularIcon } from '@deriv-com/quill-icons-web';
 import './NavbarMenu.css';
 import './navbar-menu-impl.css';
+import '../navbar/navbar-material.css';
 import { milliseconds } from '../../css-time.js';
 import { useHoverOpen } from '../../hover-open.js';
 import { Icon } from '../icon/Icon.js';

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

@@ -13,16 +13,16 @@
  * Where the panel hangs, which is three offsets a contract cannot hold: two of them
  * negate the bar's own padding and the third is a percentage of nothing.
  *
- * `inset-block-start: 100%` puts it under the trigger. The inline half centres it on that
- * trigger rather than hanging it from the trigger's leading edge — an 846px panel dropped
+ * `inset-block-start: 100%` puts it under the row it hangs from. The inline half centres it
+ * on its containing block rather than hanging it from a leading edge — an 846px panel dropped
  * from the left of a one-word name runs off the end of the page for the last section in the
  * row, and reads as belonging to whatever is to its right rather than to the name above it.
  *
- * Centred on the trigger rather than on the bar, which is the same thing in practice and a
- * far smaller claim. The destinations sit in a pill the bar centres, so a panel centred on
- * one of them lands near the middle of the page anyway — and doing it this way keeps the
- * component positioning against its own root, so a menu used outside a Navbar still knows
- * where to put its panel.
+ * The containing block is the nearest positioned ancestor, and this root is not positioned. In
+ * a Navbar that is the pill — the landmark inside it is deliberately not positioned — so every
+ * section's panel opens centred on the pill, in the same place whichever section is pressed,
+ * and the language switcher and the theme toggle beside the destinations do not pull it off
+ * centre. Outside a Navbar it centres on whatever positioned box the page gives it.
  *
  * `translate` rather than a negative margin: it is the transform property, so it composes
  * with anything else the panel is given instead of fighting a layout value for the same

package/dist/components/core/navbar-switcher/NavbarSwitcher.css

@@ -24,7 +24,7 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-label-sm-letter-spacing);
   line-height: var(--font-label-sm-line-height);
-  min-block-size: var(--size-control-lg);
+  min-block-size: var(--size-control-md);
   outline-width: var(--border-width-none);
   padding-inline: var(--space-inset-md);
 }
@@ -33,7 +33,7 @@
   align-items: center;
   display: inline-flex;
   flex-shrink: 0;
-  block-size: var(--icon-size-xs);
+  block-size: var(--icon-control-md);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__chevron {
@@ -87,7 +87,8 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation="floating"] .dds-navbarswitcher__surface {
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-translucent);
+  background-image: linear-gradient(var(--color-bg-surface-translucent-tint), var(--color-bg-surface-translucent-tint));
   border-radius: var(--radius-container);
   box-shadow: var(--elevation-surface-floating);
   inline-size: var(--size-switcher-panel-width);
@@ -108,10 +109,10 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher[data-tone="inverse"] .dds-navbarswitcher__trigger:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbarswitcher[data-tone="inverse"] .dds-navbarswitcher__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 

package/dist/components/core/navbar-switcher/NavbarSwitcher.d.ts

@@ -1,5 +1,6 @@
 import './NavbarSwitcher.css';
 import './navbar-switcher-impl.css';
+import '../navbar/navbar-material.css';
 import { type NavbarSwitcherProps } from './NavbarSwitcher.types.js';
 export type { NavbarSwitcherProps };
 /**

package/dist/components/core/navbar-switcher/NavbarSwitcher.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronDownRegularIcon, ChevronLeftRegularIcon, ChevronRightRegularIcon, } from '@deriv-com/quill-icons-web';
 import './NavbarSwitcher.css';
 import './navbar-switcher-impl.css';
+import '../navbar/navbar-material.css';
 import { useHoverOpen } from '../../hover-open.js';
 import { Icon } from '../icon/Icon.js';
 import { navbarSwitcherDefaults, navbarSwitcherParts, } from './NavbarSwitcher.types.js';
@@ -78,7 +79,7 @@ export function NavbarSwitcher({ presentation = navbarSwitcherDefaults.presentat
             document.removeEventListener('pointerdown', onPointerDown);
         };
     }, [expanded, inPanel, setOpen, hover]);
-    return (_jsxs("div", { ...rest, ref: rootRef, className: navbarSwitcherParts.root, "data-presentation": presentation, "data-tone": tone, onPointerEnter: hover.onPointerEnter, onPointerLeave: hover.onPointerLeave, children: [_jsxs("button", { ref: triggerRef, type: "button", className: navbarSwitcherParts.trigger, "aria-label": menuLabel, "aria-expanded": expanded, "data-expanded": String(expanded), onClick: () => {
+    return (_jsxs("div", { ...rest, ref: rootRef, className: navbarSwitcherParts.root, "data-presentation": presentation, "data-tone": tone, "data-dds-pinned-surface": inPanel && expanded ? 'open' : undefined, onPointerEnter: hover.onPointerEnter, onPointerLeave: hover.onPointerLeave, children: [_jsxs("button", { ref: triggerRef, type: "button", className: navbarSwitcherParts.trigger, "aria-label": menuLabel, "aria-expanded": expanded, "data-expanded": String(expanded), onClick: () => {
                     // The press owns the state from here, or a set the pointer had opened and the reader
                     // then pressed shut would close a second time when the pointer left.
                     hover.release();

package/dist/components/core/option/Option.css

@@ -128,6 +128,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-option,
-  :where([data-dds-context="marketing"]) .dds-option * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-option * { transition: none !important; }
 }