@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/navbar-panel/use-navbar-panel.js

@@ -0,0 +1,135 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Everything focusable, in document order.
+ *
+ * The disabled and hidden filters matter more than they look: a disabled control
+ * is in the DOM and is not a tab stop, so a trap that counted one would send the
+ * reader to an element the browser then skips — and the cycle would land
+ * somewhere other than where it claimed.
+ */
+const FOCUSABLE = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function focusableWithin(root) {
+    return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => el.hidden === false && el.getAttribute('aria-hidden') !== 'true');
+}
+export function useNavbarPanel({ open, panelRef, triggerRef, onClose }) {
+    /*
+      The keys, which is both obligations that answer to one listener.
+  
+      On the panel rather than on the document: a listener on the document would
+      answer for Escape pressed anywhere, including inside a menu the panel
+      contains that means to handle its own — and the panel would close out from
+      under a reader who was only dismissing a dropdown.
+    */
+    useEffect(() => {
+        if (!open)
+            return;
+        const panel = panelRef.current;
+        if (panel === null)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                onClose();
+                return;
+            }
+            if (event.key !== 'Tab')
+                return;
+            const stops = focusableWithin(panel);
+            if (stops.length === 0) {
+                // Nothing to hold. Better to swallow the key than to let focus leave a
+                // surface the reader cannot see past — the exit is Escape either way.
+                event.preventDefault();
+                return;
+            }
+            const first = stops[0];
+            const last = stops[stops.length - 1];
+            const active = document.activeElement;
+            // Only the two ends wrap. Everything between them is the browser's own tab
+            // order, which is the order the reader expects and which nothing here
+            // could reproduce more faithfully by reimplementing it.
+            if (event.shiftKey && (active === first || !panel.contains(active))) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && active === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        panel.addEventListener('keydown', onKeyDown);
+        return () => panel.removeEventListener('keydown', onKeyDown);
+    }, [open, panelRef, onClose]);
+    /*
+      Focus in on open, and back to the trigger on close.
+  
+      Read the trigger once, while the panel is opening. By the time this cleanup
+      runs the ref may point at nothing — a route change can unmount the whole bar
+      — and a cleanup reading it then would return focus to null, which is the
+      body, which is the top of a document the reader had scrolled away from.
+    */
+    useEffect(() => {
+        if (!open)
+            return;
+        const panel = panelRef.current;
+        if (panel === null)
+            return;
+        const opener = triggerRef.current;
+        focusableWithin(panel)[0]?.focus();
+        return () => {
+            // Only if it is still there. A reader who has already moved on — by
+            // following a destination inside the panel, say — should not be dragged
+            // back to a control on a page they have left.
+            if (opener !== null && opener.isConnected)
+                opener.focus();
+        };
+    }, [open, panelRef, triggerRef]);
+    /*
+      The document holds still.
+  
+      Restores what was there rather than clearing to a keyword: a site with its
+      own overflow rule on the body would have it silently replaced by `visible`,
+      and would find the page unable to scroll again after the first time anyone
+      opened this.
+    */
+    useEffect(() => {
+        if (!open)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        const { body } = document;
+        const overflow = body.style.overflow;
+        const inlineEnd = body.style.paddingInlineEnd;
+        /*
+          And it holds still sideways as well, which is the half this forgot.
+    
+          Hiding the document's overflow takes its scrollbar with it, and on every platform that draws
+          one in the layout — which is most desktops — the page is suddenly wider by that much and
+          everything centred in it slides across. The mark in this panel's header and the mark in the
+          bar behind it are drawn at the same distance from the edge to the pixel, and the reader still
+          sees the logo jump, because what moved was not the logo.
+    
+          Measured rather than assumed: the difference between the window and the element filling it is
+          the scrollbar's width where there is one and nought where there is not, so an overlay
+          scrollbar costs nothing and a classic one is paid for exactly.
+    
+          Both values are put back rather than cleared, for the same reason the overflow is: a site with
+          its own padding on the body should get it back, not `0`.
+        */
+        const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+        body.style.overflow = 'hidden';
+        if (scrollbar > 0)
+            body.style.paddingInlineEnd = `${scrollbar}px`;
+        return () => {
+            body.style.overflow = overflow;
+            body.style.paddingInlineEnd = inlineEnd;
+        };
+    }, [open]);
+}

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

@@ -0,0 +1,117 @@
+/* GENERATED from navbarswitcher.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher {
+  display: inline-flex;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__trigger {
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  gap: inherit;
+  outline-style: solid;
+  white-space: nowrap;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  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);
+  outline-width: var(--border-width-none);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  block-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__chevron {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  block-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__surface {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__back {
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  outline-style: solid;
+  padding: 0;
+  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-navbarswitcher .dds-navbarswitcher__list {
+  min-inline-size: 0;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__back:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation="floating"] .dds-navbarswitcher__surface {
+  background-color: var(--color-bg-surface-raised);
+  border-radius: var(--radius-container);
+  box-shadow: var(--elevation-surface-floating);
+  inline-size: var(--size-switcher-panel-width);
+  margin-block-start: var(--space-gap-sm);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation="panel"] .dds-navbarswitcher__surface {
+  background-color: var(--color-bg-page);
+  gap: var(--space-gap-sm);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation="panel"] .dds-navbarswitcher__trigger {
+  padding-block: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-tone="inverse"] .dds-navbarswitcher__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-tone="inverse"] .dds-navbarswitcher__trigger:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+}
+

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

@@ -0,0 +1,20 @@
+import './NavbarSwitcher.css';
+import './navbar-switcher-impl.css';
+import { type NavbarSwitcherProps } from './NavbarSwitcher.types.js';
+export type { NavbarSwitcherProps };
+/**
+ * Something a reader sets, in whichever of its two forms the container asks for.
+ *
+ * In a bar it is a trigger and a panel hanging off it. In the collapsed panel it is 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, and because sixteen languages fit on a phone only if
+ * everything else stops being drawn.
+ *
+ * Controlled when told, its own answer otherwise, exactly as NavbarMenu is: a bar holding which of
+ * several things is open needs to say so, and a switcher standing alone needs no such help.
+ *
+ * What opens is not a menu and takes no menu role. Its rows are states, one of which is already in
+ * force — `role="menu"` would promise arrow-key navigation over commands, and its first consequence
+ * is that a screen reader stops announcing the choices as the buttons they are.
+ */
+export declare function NavbarSwitcher({ presentation, tone, label, menuLabel, backLabel, icon, chevron, open, onOpenChange, children, ...rest }: NavbarSwitcherProps): import("react").JSX.Element;

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

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useHoverOpen } from '../../hover-open.js';
+import { Icon } from '../icon/Icon.js';
+import { navbarSwitcherDefaults, navbarSwitcherParts, } from './NavbarSwitcher.types.js';
+/**
+ * Something a reader sets, in whichever of its two forms the container asks for.
+ *
+ * In a bar it is a trigger and a panel hanging off it. In the collapsed panel it is 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, and because sixteen languages fit on a phone only if
+ * everything else stops being drawn.
+ *
+ * Controlled when told, its own answer otherwise, exactly as NavbarMenu is: a bar holding which of
+ * several things is open needs to say so, and a switcher standing alone needs no such help.
+ *
+ * What opens is not a menu and takes no menu role. Its rows are states, one of which is already in
+ * force — `role="menu"` would promise arrow-key navigation over commands, and its first consequence
+ * is that a screen reader stops announcing the choices as the buttons they are.
+ */
+export function NavbarSwitcher({ presentation = navbarSwitcherDefaults.presentation, tone = navbarSwitcherDefaults.tone, label, menuLabel, backLabel, icon, chevron = navbarSwitcherDefaults.chevron, open, onOpenChange, children, ...rest }) {
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [held, setHeld] = useState(false);
+    const controlled = open !== undefined;
+    const expanded = controlled ? open : held;
+    const setOpen = useCallback((next) => {
+        if (!controlled)
+            setHeld(next);
+        onOpenChange?.(next);
+    }, [controlled, onOpenChange]);
+    const inPanel = presentation === 'panel';
+    /*
+      Opening on hover, in the bar only. There is no hovering a row in a panel read down with a
+      finger, and a row that opened as one passed over it would open on the way to the one below.
+    */
+    const hover = useHoverOpen(!inPanel, expanded, setOpen);
+    /*
+      Escape, and a press outside.
+  
+      On the document rather than the root, because both questions are about what happened elsewhere.
+      The set holds buttons rather than controls with a prior claim on Escape, so nothing inside it
+      wants the key first.
+  
+      The outside press is for the floating form alone: the panel form covers everything a reader
+      could press instead, and the only ways out of it are the way back and this key.
+    */
+    useEffect(() => {
+        if (!expanded)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.stopPropagation();
+            hover.release();
+            setOpen(false);
+            // Back to the trigger. A reader who opened this from the keyboard is otherwise returned to
+            // the top of the document.
+            triggerRef.current?.focus();
+        };
+        const onPointerDown = (event) => {
+            if (inPanel)
+                return;
+            const root = rootRef.current;
+            if (root === null || root.contains(event.target))
+                return;
+            hover.release();
+            setOpen(false);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            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: () => {
+                    // 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();
+                    setOpen(!expanded);
+                }, children: [icon !== undefined && icon !== null && (_jsx("span", { className: navbarSwitcherParts.icon, "aria-hidden": "true", children: icon })), label, (inPanel || chevron) && (_jsx("span", { className: navbarSwitcherParts.chevron, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: inPanel ? _jsx(ChevronRightRegularIcon, {}) : _jsx(ChevronDownRegularIcon, {}) }) }))] }), expanded && (_jsxs("div", { className: navbarSwitcherParts.surface, children: [_jsx("button", { type: "button", className: navbarSwitcherParts.back, "aria-label": backLabel, onClick: () => {
+                            setOpen(false);
+                            triggerRef.current?.focus();
+                        }, children: _jsx(Icon, { size: "sm", children: _jsx(ChevronLeftRegularIcon, {}) }) }), _jsx("div", { className: navbarSwitcherParts.list, children: children })] }))] }));
+}

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

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+export interface NavbarSwitcherOwnProps {
+    /**
+     * `floating` — The switcher is in the bar, which is everywhere a page puts one. The choices hang off the trigger and float over what is beneath
+     * `panel` — NavbarPanel is rendering it, and it sets this itself — a page should not. Inside the collapsed panel the choices take the whole surface and offer a way back, because a dropdown inside something already covering the screen is a surface inside a surface
+     */
+    presentation?: 'floating' | 'panel';
+    /**
+     * `default` — The bar has a light ground under it
+     * `inverse` — The bar sits on a dark ground and the ink runs light. Only the tints move — the words take the ink around them either way
+     */
+    tone?: 'default' | 'inverse';
+    /** Always — the choice in force, short enough for a bar. "EN", not "English": a bar is read at a glance and a switcher showing the longest name in the set is a switcher that changes width when somebody picks one */
+    label: string;
+    /** Always — what the set is, for a reader who meets the trigger without seeing the mark beside it. "Language", "Region". The trigger shows the answer; this says what the question was */
+    menuLabel: string;
+    /** Always. It names the way out of the page the panel form opens, and a glyph pointing left is not a name. Unused in the floating form, which has no page to leave */
+    backLabel: string;
+    /** A mark saying which question this answers. Nearly always on a bar, where the label is two letters and the glyph is what makes them mean a language */
+    icon?: ReactNode;
+    /** The floating trigger should say it opens. Off by default because a switcher usually sits among destinations that each carry one. The panel form draws one whatever this says — a row in a list has nothing else to go on */
+    chevron?: boolean;
+    /** A container holds which of several things is open. Standing alone the switcher holds its own */
+    open?: boolean;
+    /** Whenever open is — together they are how a container holds it */
+    onOpenChange?: (open: boolean) => void;
+    /** Allowed: NavbarSwitcherOption */
+    children: ReactNode;
+}
+export type NavbarSwitcherProps = NavbarSwitcherOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const navbarSwitcherParts: {
+    readonly root: "dds-navbarswitcher";
+    readonly trigger: "dds-navbarswitcher__trigger";
+    readonly icon: "dds-navbarswitcher__icon";
+    readonly chevron: "dds-navbarswitcher__chevron";
+    readonly surface: "dds-navbarswitcher__surface";
+    readonly back: "dds-navbarswitcher__back";
+    readonly list: "dds-navbarswitcher__list";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const navbarSwitcherDefaults: {
+    readonly presentation: "floating";
+    readonly tone: "default";
+    readonly chevron: false;
+};

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

@@ -0,0 +1,13 @@
+// GENERATED from navbar-switcher.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const navbarSwitcherParts = {
+    root: 'dds-navbarswitcher',
+    trigger: 'dds-navbarswitcher__trigger',
+    icon: 'dds-navbarswitcher__icon',
+    chevron: 'dds-navbarswitcher__chevron',
+    surface: 'dds-navbarswitcher__surface',
+    back: 'dds-navbarswitcher__back',
+    list: 'dds-navbarswitcher__list',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const navbarSwitcherDefaults = { presentation: 'floating', tone: 'default', chevron: false };

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

@@ -0,0 +1,179 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * Where the floating set hangs, which is three offsets a contract cannot hold: two of them negate
+ * the trigger's own box and the third is a percentage of nothing.
+ *
+ * `inset-block-start: 100%` puts it under the trigger, and the inline half centres it on that
+ * trigger — the same way a section's panel is placed, and for the same reason. Hung from either
+ * corner, a panel this wide dropped from a two-letter trigger reads as belonging to whatever is
+ * beside it rather than to the thing above it; centred, it is obviously the switcher's.
+ *
+ * `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 axis. The
+ * entrance adds to it rather than replacing it, which is a thing that has already been got wrong
+ * once here.
+ *
+ * Above what it floats over, which is the other thing no contract can hold: an integer with no
+ * unit. `layer.popup` is the role for what leaves the flow and floats over the page; it sits below
+ * anything that interrupts the reader, so a panel covering the page still covers this.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='floating'] .dds-navbarswitcher__surface {
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
+  position: absolute;
+  translate: -50%;
+  z-index: var(--layer-popup);
+}
+
+/*
+ * And in the panel it is a page rather than a panel.
+ *
+ * `position: absolute` with `inset: 0` against NavbarPanel's scrolling body, which declares itself
+ * the positioning context for exactly this. So the set covers the destinations and the switchers
+ * below them and stops at the header — the mark and the way out stay on screen while a reader is
+ * two levels in, which is what the back control is for and what a full-screen takeover would make
+ * a lie.
+ *
+ * It scrolls on its own. Sixteen languages at two columns fits a phone; twenty-six does not, and a
+ * set that overflowed a surface with no scroll of its own would simply lose the last of them.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='panel'] .dds-navbarswitcher__surface {
+  inset: 0;
+  overflow-y: auto;
+  position: absolute;
+}
+
+/*
+ * The row takes the width of the list it is in, and puts its ends at the ends.
+ *
+ * In a bar the trigger is as wide as its own words, which is what lets it sit among the
+ * destinations. In a panel it is a row: the choice at one end, the mark that says it opens at the
+ * other, and everything between them pressable — a target that stopped at its text would leave most
+ * of the row dead where a reader is already aiming.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='panel'] {
+  display: flex;
+
+  /*
+    And it stops being the box the set is positioned against.
+
+    `position: relative` on the root is what the floating form hangs from, and in the panel it is
+    exactly wrong: `inset: 0` then resolves against the row rather than against the surface the row
+    is sitting in, so the set is drawn at the size of its own trigger — two columns of names in a
+    forty-pixel box, overlapping the destinations behind them.
+
+    Static, so the nearest positioned ancestor is NavbarPanel's body, which declares itself the
+    context for this and is the thing the set is meant to cover.
+  */
+  position: static;
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='panel'] .dds-navbarswitcher__trigger {
+  inline-size: 100%;
+  justify-content: flex-start;
+}
+
+/*
+ * The choice reads as the mark's own word, and only the chevron goes to the far end.
+ *
+ * `space-between` was the first arrangement and spread all three: the globe at one edge, the
+ * chevron at the other, and "EN" stranded in the middle of the row belonging to neither. What the
+ * mark and the choice say is one thing — this is the language, and it is English — so they sit
+ * together at the start with the trigger's own gap between them, the way they do in the bar.
+ *
+ * An auto margin on the chevron takes everything left over, which is what puts it at the end
+ * without making the two before it share the row.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='panel'] .dds-navbarswitcher__chevron {
+  margin-inline-start: auto;
+}
+
+/*
+ * Two columns in the panel, one in the bar.
+ *
+ * The bar's set is as wide as its longest word and no wider, where a second column would be two
+ * narrow lists side by side. The panel's is a whole screen: sixteen languages down one column is a
+ * scroll for something a reader should take in at a glance.
+ *
+ * `columns` rather than a grid track list, for the reason NavbarMenu's sets use it: a grid aligns
+ * its rows, so a short name beside a long one is stretched to the taller of the two and the next
+ * pair begins below both. Multi-column packs each column in turn.
+ *
+ * Not expressible in the contract — a count is an integer with no unit.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='panel'] .dds-navbarswitcher__list {
+  columns: 2;
+}
+
+/*
+ * Three in the bar, where the panel is as wide as it declares itself rather than as wide as a
+ * phone. Eighteen languages down one column is a list taller than the window it hangs in; across
+ * three it is six rows, which is a set a reader takes in rather than scrolls.
+ *
+ * Two in the panel and three here is not an inconsistency: what changes is the width available, and
+ * the count is chosen for the width rather than being a property of the set.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='floating'] .dds-navbarswitcher__list {
+  columns: 3;
+}
+
+/*
+ * The way back sits at the start of its own line, which is where a reader's eye returns to.
+ *
+ * `align-self: flex-start` rather than a width: the control is a target, and one stretched to the
+ * width of the surface would be a strip of nothing that happens to be pressable along its whole
+ * length.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__back {
+  align-self: flex-start;
+}
+
+/*
+ * A choice must not be broken across the fold of the two columns.
+ *
+ * Multi-column will split a box between columns given the chance, and a row of one line has nothing
+ * to split — until a language's own name wraps, at which point half of it appears at the top of the
+ * next column. `break-inside` is what says no; NavbarMenuGroup carries the same rule for the same
+ * reason.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcheroption {
+  break-inside: avoid;
+}
+
+/*
+ * And there is nothing to go back to in the bar.
+ *
+ * The control is rendered at both presentations and drawn at one. `display: none` rather than a
+ * gate in the markup, which is the same choice the bars make about their own trigger: a part that
+ * disappears from the DOM on an axis value is a part no generated assertion can reach, and this
+ * takes it out of the accessibility tree just as surely.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher[data-presentation='floating'] .dds-navbarswitcher__back {
+  display: none;
+}
+
+/*
+ * And whatever the slot was handed fits the measure the row reserved for it.
+ *
+ * The part carries the size and the part is a wrapper, so on its own it constrains a box around a
+ * mark that goes on drawing itself at whatever size it arrived at. Every glyph in the icon package
+ * ships `width` and `height` attributes defaulting to twenty-four, and a presentation attribute is
+ * exactly what a CSS declaration outranks — which is the finding Button, ButtonIcon and DropdownMenu
+ * each record in their own words.
+ *
+ * `inline-size: auto` against a bound block size keeps the shape rather than squaring it, which
+ * matters for the one mark here that is not square.
+ *
+ * The contract says this slot takes an Icon, and an Icon sizes itself. This is for the bare glyph
+ * that arrives anyway: a row whose mark is a third larger than the measure it was given is a
+ * mistake worth drawing correctly rather than faithfully.
+ */
+:where([data-dds-context="marketing"]) .dds-navbarswitcher .dds-navbarswitcher__icon > * {
+  block-size: 100%;
+  inline-size: auto;
+}

package/dist/components/core/navbar-switcher-option/NavbarSwitcherOption.css

@@ -0,0 +1,39 @@
+/* GENERATED from navbarswitcheroption.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcheroption {
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  inline-size: 100%;
+  outline-style: solid;
+  text-align: start;
+  border-radius: var(--radius-container-item);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  min-block-size: var(--size-control-md);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcheroption:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcheroption:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarswitcheroption[data-current="true"] {
+  color: var(--color-fg-brand-accent);
+}
+

package/dist/components/core/navbar-switcher-option/NavbarSwitcherOption.d.ts

@@ -0,0 +1,16 @@
+import './NavbarSwitcherOption.css';
+import { type NavbarSwitcherOptionProps } from './NavbarSwitcherOption.types.js';
+export type { NavbarSwitcherOptionProps };
+/**
+ * One choice inside a NavbarSwitcher.
+ *
+ * A `<button>`, not a link. Choosing a language changes how the page a reader is already on is
+ * drawn — no navigation, no history entry, nothing for the back button to undo — and a row that
+ * claimed to be a link would be wrong to the browser, the back button and every assistive
+ * technology at once.
+ *
+ * It takes the ink around it rather than naming one, except when it is the choice in force. A
+ * switcher's options are drawn on whatever surface holds them, and a row that named a colour would
+ * be the one thing on that surface not answering to it.
+ */
+export declare function NavbarSwitcherOption({ current, onSelect, children, ...rest }: NavbarSwitcherOptionProps): import("react").JSX.Element;