@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/navbar-item/NavbarItem.d.ts

@@ -0,0 +1,22 @@
+import './NavbarItem.css';
+import { type NavbarItemProps } from './NavbarItem.types.js';
+export type { NavbarItemProps };
+/**
+ * One place the site has, in the bar across the top of it.
+ *
+ * It takes no colour of its own, and that is what lets a bar change its ink in
+ * one declaration: the bar sets it, every item inherits, and an item that painted
+ * its own would be the one thing left behind. What it does declare is the ground
+ * under the words.
+ *
+ * `tone` has to be passed rather than sensed. An item cannot see the ground it is
+ * on, and the tints either side of it are mirrors — ink-based on paper,
+ * paper-based on dark — so the page that knows which bar it is writing is the
+ * only thing that can say.
+ *
+ * The current item keeps its href. That is where this parts company with
+ * BreadcrumbItem, whose last step is not a link because it leads nowhere new: a
+ * section you are in is one you can return to the top of, and a reader who lands
+ * on it should hear which section that is rather than meet a dead stop.
+ */
+export declare function NavbarItem({ current, tone, href, icon, external, children, ...rest }: NavbarItemProps): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRightRegularIcon } from '@deriv-com/quill-icons-web';
+import './NavbarItem.css';
+import { Icon } from '../icon/Icon.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import { navbarItemDefaults, navbarItemParts } from './NavbarItem.types.js';
+/**
+ * What the words become when the destination leaves the site.
+ *
+ * Appended to the content rather than replacing it with an `aria-label`: a label
+ * replaces the words a sighted reader is looking at, and somebody using both
+ * hears one thing and sees another. This keeps them the same sentence.
+ */
+const OPENS_ELSEWHERE = '(opens in a new tab)';
+/**
+ * One place the site has, in the bar across the top of it.
+ *
+ * It takes no colour of its own, and that is what lets a bar change its ink in
+ * one declaration: the bar sets it, every item inherits, and an item that painted
+ * its own would be the one thing left behind. What it does declare is the ground
+ * under the words.
+ *
+ * `tone` has to be passed rather than sensed. An item cannot see the ground it is
+ * on, and the tints either side of it are mirrors — ink-based on paper,
+ * paper-based on dark — so the page that knows which bar it is writing is the
+ * only thing that can say.
+ *
+ * The current item keeps its href. That is where this parts company with
+ * BreadcrumbItem, whose last step is not a link because it leads nowhere new: a
+ * section you are in is one you can return to the top of, and a reader who lands
+ * on it should hear which section that is rather than meet a dead stop.
+ */
+export function NavbarItem({ current = navbarItemDefaults.current, tone = navbarItemDefaults.tone, href, icon, external = navbarItemDefaults.external, children, ...rest }) {
+    return (_jsxs("a", { ...rest, href: href, className: navbarItemParts.root, "data-current": String(current), "data-tone": tone, "aria-current": current ? 'page' : undefined, 
+        // Both, or neither. `target` without `rel` hands the opened document a live
+        // reference back to this one; `rel` without `target` guards a navigation
+        // that never leaves.
+        target: external ? '_blank' : undefined, rel: external ? 'noreferrer' : undefined, children: [icon !== undefined && icon !== null && (_jsx("span", { className: navbarItemParts.icon, children: icon })), _jsx("span", { className: navbarItemParts.label, children: children }), external && (_jsxs(_Fragment, { children: [_jsx("span", { className: navbarItemParts.external, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: _jsx(ArrowUpRightRegularIcon, {}) }) }), _jsx("span", { style: visuallyHidden, children: ` ${OPENS_ELSEWHERE}` })] }))] }));
+}

package/dist/components/core/navbar-item/NavbarItem.types.d.ts

@@ -0,0 +1,34 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface NavbarItemOwnProps {
+    /**
+     * `default` — The bar has a light ground under it, which is every bar on a marketing page today. The tints here are ink-based and read against paper
+     * `inverse` — The bar sits on a dark ground — a band, or art the page put behind it — and the ink runs light. The tints mirror: paper-based rather than ink-based, so a hover is visible instead of disappearing into the dark
+     */
+    tone?: 'default' | 'inverse';
+    /** Always. This is a place, and a place has an address — an item with no href is a control drawn as a link, which is the one thing its intent says it is not */
+    href: string;
+    /** The bar's sections are quicker to tell apart by a mark than by reading them, which is rare on a marketing site and usual in an application */
+    icon?: ReactNode;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type NavbarItemProps = NavbarItemOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'current' | 'tone' | 'href' | 'icon' | 'external'> & ({
+    current?: boolean;
+    external?: false;
+} | {
+    current?: false;
+    external?: boolean;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const navbarItemParts: {
+    readonly root: "dds-navbaritem";
+    readonly icon: "dds-navbaritem__icon";
+    readonly label: "dds-navbaritem__label";
+    readonly external: "dds-navbaritem__external";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const navbarItemDefaults: {
+    readonly current: false;
+    readonly tone: "default";
+    readonly external: false;
+};

package/dist/components/core/navbar-item/NavbarItem.types.js

@@ -0,0 +1,10 @@
+// GENERATED from navbar-item.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const navbarItemParts = {
+    root: 'dds-navbaritem',
+    icon: 'dds-navbaritem__icon',
+    label: 'dds-navbaritem__label',
+    external: 'dds-navbaritem__external',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const navbarItemDefaults = { current: false, tone: 'default', external: false };

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

@@ -0,0 +1,128 @@
+/* GENERATED from navbarmenu.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__trigger {
+  transition-property: background-color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  border-style: none;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  outline-style: solid;
+  white-space: nowrap;
+  background-color: var(--color-bg-transparent);
+  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-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-md);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__chevron {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  block-size: var(--icon-size-xs);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__surface {
+  box-sizing: border-box;
+  display: flex;
+  position: absolute;
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__groups {
+  display: block;
+  flex: auto;
+  inline-size: 100%;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xl);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__feature {
+  display: flex;
+  flex: auto;
+  inline-size: 100%;
+  min-inline-size: 0;
+  aspect-ratio: var(--aspect-widescreen);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu .dds-navbarmenu__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-presentation="floating"] .dds-navbarmenu__groups {
+  padding-block-end: var(--space-inset-lg);
+  padding-block-start: var(--space-inset-md);
+  padding-inline-start: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-presentation="floating"] .dds-navbarmenu__surface {
+  background-color: var(--color-bg-surface-raised);
+  border-radius: var(--radius-container);
+  box-shadow: var(--elevation-surface-overlay);
+  gap: var(--space-gap-xl);
+  inline-size: var(--size-menu-panel-max);
+  margin-block-start: var(--space-gap-sm);
+  min-block-size: var(--size-menu-panel-min);
+  padding-block: var(--space-inset-xs);
+  padding-inline: var(--space-inset-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-presentation="inline"] .dds-navbarmenu__chevron {
+  inline-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-presentation="inline"] .dds-navbarmenu__surface {
+  background-color: var(--color-bg-transparent);
+  border-radius: var(--radius-none);
+  gap: var(--space-gap-md);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="default"] .dds-navbarmenu__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="inverse"] .dds-navbarmenu__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="default"] .dds-navbarmenu__trigger[data-expanded="true"] {
+  background-color: var(--color-bg-selected);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbarmenu[data-tone="inverse"] .dds-navbarmenu__trigger[data-expanded="true"] {
+  background-color: var(--color-bg-hover-inverse);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-navbarmenu,
+  :where([data-dds-context="marketing"]) .dds-navbarmenu * { transition: none; }
+}
+

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

@@ -0,0 +1,5 @@
+import './NavbarMenu.css';
+import './navbar-menu-impl.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

@@ -0,0 +1,186 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useCallback, useEffect, useRef, useState, } from 'react';
+import { ChevronDownRegularIcon } from '@deriv-com/quill-icons-web';
+import './NavbarMenu.css';
+import './navbar-menu-impl.css';
+import { milliseconds } from '../../css-time.js';
+import { useHoverOpen } from '../../hover-open.js';
+import { Icon } from '../icon/Icon.js';
+import { navbarMenuDefaults, navbarMenuParts } from './NavbarMenu.types.js';
+/**
+ * A section of the site that opens rather than goes.
+ *
+ * A `<button>`, not a link. Pressing it reveals something on the page the reader
+ * is already on — no navigation, no history entry, nothing for the back button to
+ * undo — and a trigger that claimed to be a link would be wrong to the browser,
+ * the back button and every assistive technology at once.
+ *
+ * Controlled when told, its own answer otherwise. A row of these needs the bar to
+ * hold which one is open, because no menu can see its neighbours and two panels
+ * open at once is two surfaces overlapping in front of the page. Standing alone
+ * it holds its own, which is what makes it usable outside a bar at all.
+ *
+ * The panel is not a menu and takes no menu role. What it holds is links, and
+ * `role="menu"` would promise arrow-key navigation over a set of commands — a
+ * promise whose first consequence is that a screen reader stops announcing the
+ * links as links.
+ */
+/**
+ * How a section's panel arrives, which is a different movement in each presentation.
+ *
+ * Floating, it hangs off the trigger over a page that does not move: nothing below it is
+ * displaced, so the motion is the panel itself appearing — a fade with a few pixels of travel
+ * down from the name that opened it, which gives the fade a direction without making a journey
+ * of it.
+ *
+ * Inline, it is a row of a list and everything under it is pushed down. There the honest movement
+ * is the height: a panel that faded in at full height would shove the rest of the list away in one
+ * frame and then take a fifth of a second to become visible in the space it had already taken.
+ * That mismatch — a box at its final size before what fills it has arrived — is the same thing
+ * that read as a jump when the bar gathered, and it is worth not repeating.
+ *
+ * Measured and handed over rather than transitioned, for the reason the bar's pill was: the height
+ * here is `auto`, layout decides it, and there is no value for CSS to interpolate between. The
+ * element is measured in a layout effect, after React has written it and before the browser paints
+ * it.
+ *
+ * `overflow: hidden` only while it runs. A panel clipped for the rest of its life would cut off a
+ * focus ring on the first destination in it, and the property cannot be part of the animation —
+ * so it is set here and taken off when the animation settles.
+ *
+ * The step and the curve come from the same roles everything else in this family moves on, read
+ * off the element so a retune reaches all of them at once.
+ */
+function useOpening(surface, presentation, open) {
+    useLayoutEffect(() => {
+        const element = surface.current;
+        if (element === null || !open)
+            return;
+        /*
+          Both are absent outside a browser that draws: jsdom implements neither, and the
+          generated tests render this component. Asking for the feature rather than for a
+          environment — the animation is an enhancement, and anything that cannot run it
+          gets the same arrangement without it.
+        */
+        if (typeof window === 'undefined')
+            return;
+        if (typeof window.matchMedia !== 'function')
+            return;
+        if (typeof element.animate !== 'function')
+            return;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const style = getComputedStyle(element);
+        const duration = milliseconds(style.getPropertyValue('--motion-duration-normal')) ?? 200;
+        const easing = style.getPropertyValue('--motion-easing-standard').trim() || 'ease';
+        if (presentation !== 'inline') {
+            // The same step a control lifts by under a pointer, off the same role, rather
+            // than a distance invented here.
+            const travel = style.getPropertyValue('--motion-translate-hover').trim() || '0 0';
+            element.animate([{ opacity: 0 }, { opacity: 1 }], { duration, easing });
+            /*
+              Added to the panel's own translate rather than written over it.
+      
+              The floating panel is centred on its trigger by `translate: -50%`, and a keyframe naming
+              `translate` outright replaces that for as long as it runs — so the panel spent the whole
+              animation half its own width to the right of where it belonged and snapped into place at
+              the end, when the stylesheet got the property back. `composite: 'add'` leaves the
+              positioning underneath and moves the panel relative to it, which is what an entrance was
+              always meant to do: say how something arrives, not where it goes.
+      
+              Two animations rather than one because only the travel is additive. Opacity added to an
+              underlying 1 would start the fade at full strength and never show it.
+            */
+            element.animate([{ translate: travel }, { translate: '0 0' }], {
+                duration,
+                easing,
+                composite: 'add',
+            });
+            return;
+        }
+        const height = element.getBoundingClientRect().height;
+        element.style.overflow = 'hidden';
+        const opening = element.animate([{ blockSize: '0', opacity: 0 }, { blockSize: `${height}px`, opacity: 1 }], { duration, easing });
+        // `finished` rejects when an animation is cancelled, which is what unmounting
+        // does — and an unhandled rejection is not the price of closing a menu.
+        opening.finished.then(() => { element.style.overflow = ''; }).catch(() => { });
+    }, [surface, presentation, open]);
+}
+export function NavbarMenu({ presentation = navbarMenuDefaults.presentation, tone = navbarMenuDefaults.tone, label, open, onOpenChange, replacing = navbarMenuDefaults.replacing, feature, children, ...rest }) {
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const [held, setHeld] = useState(false);
+    const controlled = open !== undefined;
+    const expanded = controlled ? open : held;
+    /*
+      The entrance runs when this panel is arriving and not when it is taking another's place. The
+      two are different elements — one unmounts, the other mounts — so nothing can tween between
+      them, and playing the entrance on the second reads as a close and an open rather than as an
+      exchange. The bar is the only thing that knows which of the two this is.
+    */
+    useOpening(surfaceRef, presentation, expanded && !replacing);
+    const setOpen = useCallback((next) => {
+        if (!controlled)
+            setHeld(next);
+        onOpenChange?.(next);
+    }, [controlled, onOpenChange]);
+    /*
+      Escape, and a press outside.
+  
+      On the document rather than the root, because both questions are about what
+      happened elsewhere. The panel holds links rather than controls that handle
+      their own keys, so there is nothing inside it with a prior claim on Escape —
+      which is the case that kept the panel's listener local in NavbarPanel and does
+      not arise here.
+    */
+    useEffect(() => {
+        if (!expanded)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            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) => {
+            const root = rootRef.current;
+            if (root === null)
+                return;
+            if (root.contains(event.target))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('pointerdown', onPointerDown);
+        };
+    }, [expanded, setOpen]);
+    /*
+      Opening on hover, floating only. The inline panel is a row of a list read down — there is no
+      hovering a list on the device it is drawn for, and a section that opened as a finger passed
+      over it would open every one on the way to the last.
+  
+      The behaviour itself is shared: DropdownMenu wants the identical thing, and the three subtle
+      parts of it are three things to get wrong twice. See `useHoverOpen`.
+    */
+    const hover = useHoverOpen(presentation === 'floating', expanded, setOpen);
+    return (_jsxs("div", { ...rest, ref: rootRef, className: navbarMenuParts.root, "data-presentation": presentation, "data-tone": tone, onPointerEnter: (event) => {
+            rest.onPointerEnter?.(event);
+            hover.onPointerEnter(event);
+        }, onPointerLeave: (event) => {
+            rest.onPointerLeave?.(event);
+            hover.onPointerLeave(event);
+        }, children: [_jsxs("button", { ref: triggerRef, type: "button", className: navbarMenuParts.trigger, "aria-expanded": expanded, "data-expanded": String(expanded), onClick: () => {
+                    // The press owns the state from here. Left set, a panel the pointer had opened and
+                    // the reader then pressed shut would close a second time when the pointer left.
+                    hover.release();
+                    setOpen(!expanded);
+                }, children: [label, _jsx("span", { className: navbarMenuParts.chevron, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: _jsx(ChevronDownRegularIcon, {}) }) })] }), expanded && (_jsxs("div", { ref: surfaceRef, className: navbarMenuParts.surface, children: [_jsx("div", { className: navbarMenuParts.groups, children: children }), feature !== undefined && feature !== null && (_jsx("div", { className: navbarMenuParts.feature, children: feature }))] }))] }));
+}

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

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface NavbarMenuOwnProps {
+    /**
+     * `floating` — The menu is in the bar, which is everywhere a page puts one. The panel hangs from the trigger and floats over what is beneath it
+     * `inline` — NavbarPanel is rendering the menu, and it sets this itself — a page should not. Inside the collapsed panel there is nothing to float over and no bar to hang from, so the panel opens in the flow and pushes what follows it down, which is what an accordion row does
+     */
+    presentation?: 'floating' | 'inline';
+    /**
+     * `default` — The bar has a light ground under it, which is every bar on a marketing page today. The trigger's tints are ink-based and read against paper
+     * `inverse` — The bar sits on a dark ground and the ink runs light. Only the trigger mirrors — the panel is its own surface with its own ground, and is the same either way
+     */
+    tone?: 'default' | 'inverse';
+    /** Always — it is the name of the section, the words on the trigger, and the accessible name of the control. Name the section rather than the act: 'Trading', not 'Open trading menu' */
+    label: string;
+    /** The bar is holding which section is open, because only one should be at a time. Passing it makes the menu controlled: it shows what it is told and reports presses through onOpenChange.
+  
+  Leave it off and the menu holds its own answer, which is right for a menu standing alone and wrong for a row of them — two panels open at once is two surfaces overlapping in front of the page */
+    open?: boolean;
+    /** Whenever open is — together they are how a bar holds which section is showing. It is called with the state being moved to, by the trigger and by Escape */
+    onOpenChange?: (open: boolean) => void;
+    /** Another section's panel was already on screen when this one opened. A container that holds one section open at a time knows this and a menu cannot, so the container sets it — Navbar does, and a page should not */
+    replacing?: boolean;
+    /** The section has something the site wants shown alongside its destinations — a promotion, a platform, a piece of art. A Card, which already knows how to hold a picture with words over it.
+  
+  That is not declared as an `accepts`, and the omission is deliberate: the workbench builds a sample for any slot naming a component, from that component's own showcase, and it cannot build one whose children are themselves components — which a Card's are. Naming it would document the slot by breaking the page that shows it. */
+    feature?: ReactNode;
+    /** Allowed: NavbarMenuGroup, NavbarItem */
+    children: ReactNode;
+}
+export type NavbarMenuProps = NavbarMenuOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'presentation' | 'tone' | 'label' | 'open' | 'onOpenChange' | 'replacing' | 'feature'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const navbarMenuParts: {
+    readonly root: "dds-navbarmenu";
+    readonly trigger: "dds-navbarmenu__trigger";
+    readonly chevron: "dds-navbarmenu__chevron";
+    readonly surface: "dds-navbarmenu__surface";
+    readonly groups: "dds-navbarmenu__groups";
+    readonly feature: "dds-navbarmenu__feature";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const navbarMenuDefaults: {
+    readonly presentation: "floating";
+    readonly tone: "default";
+    readonly replacing: false;
+};

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

@@ -0,0 +1,12 @@
+// GENERATED from navbar-menu.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const navbarMenuParts = {
+    root: 'dds-navbarmenu',
+    trigger: 'dds-navbarmenu__trigger',
+    chevron: 'dds-navbarmenu__chevron',
+    surface: 'dds-navbarmenu__surface',
+    groups: 'dds-navbarmenu__groups',
+    feature: 'dds-navbarmenu__feature',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const navbarMenuDefaults = { presentation: 'floating', tone: 'default', replacing: false };