@ssa-ui-kit/core 3.24.1 → 3.25.1

package/dist/components/DropdownOptions/DropdownOptions.d.ts

@@ -2,8 +2,9 @@ import { DropdownItemsListProps } from './types';
 /**
  * DropdownOptions - Options menu container for Dropdown component
  *
- * Renders the scrollable list of options that appears when the dropdown is open.
- * Provides proper ARIA attributes for accessibility and keyboard navigation.
+ * Renders the `DropdownOption` children as a `ContextMenu` placed under (or
+ * above) the Dropdown toggle. Focus stays on the toggle; the highlighted
+ * option is driven from there and announced through `aria-activedescendant`.
  *
  * Placement (opening upward or downward) is driven entirely by the parent
  * Dropdown via context — this component does not calculate position itself.
@@ -31,9 +32,8 @@ import { DropdownItemsListProps } from './types';
  * @see {@link DropdownOption} - Individual option components
  *
  * @accessibility
- * - Uses role="listbox" for proper ARIA semantics
- * - Supports keyboard navigation (Arrow keys, Enter, Escape)
- * - Screen reader friendly
+ * - Uses role="listbox" with role="option" rows
+ * - Arrow keys, Home, End, Enter, Space and Escape on the toggle
  */
 declare const DropdownOptions: ({ "aria-labelledby": ariaLabelledbyNative, ariaLabelledby, id, children, }: DropdownItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default DropdownOptions;

package/dist/components/DropdownOptions/useToggleListKeys.d.ts

@@ -0,0 +1,33 @@
+import { KeyboardEvent } from 'react';
+import { ContextMenuItem } from '../ContextMenu';
+import { OptionValue } from './utils';
+/** Options of {@link useToggleListKeys}. */
+export interface UseToggleListKeysOptions {
+    /** Id of the ContextMenu the toggle controls. */
+    listId: string;
+    isOpen: boolean;
+    disabled?: boolean;
+    menuItems: ContextMenuItem<OptionValue>[];
+    /** Highlighted option. */
+    activeValue: OptionValue | null;
+    setActiveValue: (value: OptionValue | null) => void;
+    /** Opens the list; `key` is the arrow that opened it. */
+    open: (key: string) => void;
+    close: () => void;
+    /** Enter or Space on the highlighted option. */
+    onPick: (value: OptionValue) => void;
+    /** Consumer handlers, run first; `preventDefault()` skips the built-in keys. */
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onKeyUp?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Keyboard for a dropdown toggle that keeps focus while it drives its list:
+ * arrows open it, then Arrow/Home/End move the highlight, Enter/Space pick,
+ * Escape/Tab close. Returns the toggle's handlers and its
+ * `aria-activedescendant`.
+ */
+export declare const useToggleListKeys: ({ listId, isOpen, disabled, menuItems, activeValue, setActiveValue, open, close, onPick, onKeyDown, onKeyUp, }: UseToggleListKeysOptions) => {
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onKeyUp: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    'aria-activedescendant': string | undefined;
+};

package/dist/components/DropdownOptions/utils.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ContextMenuItem } from '../ContextMenu';
+/** Value of a Dropdown option as the list sees it. */
+export type OptionValue = string | number;
+/**
+ * Reads `DropdownOption` children into ContextMenu items. The label resolves
+ * as `children` → `label` → `value`, as it always has.
+ */
+export declare const toDropdownMenuItems: (children: React.ReactNode) => ContextMenuItem<OptionValue>[];

package/dist/components/FiltersMultiSelect/FiltersMultiSelectProvider.d.ts

@@ -1,7 +1,16 @@
+import { MutableRefObject } from 'react';
 import { UseFiltersMultiSelectStore } from './useFiltersMultiSelect';
+import type { FilterMenuItem } from './utils';
 export interface FiltersMultiSelectContextValue {
     store: UseFiltersMultiSelectStore;
     emptyNode?: React.ReactNode;
+    /** Id of the options list, referenced by the search input. */
+    listId?: string;
+    /** Highlighted option, driven from the search input and the pointer. */
+    activeValue?: string | null;
+    setActiveValue?: (value: string | null) => void;
+    /** The rendered options, kept here for the search input's keyboard. */
+    itemsRef?: MutableRefObject<FilterMenuItem[]>;
 }
 export declare const FiltersMultiSelectProvider: ({ children, value, }: {
     value: FiltersMultiSelectContextValue;

package/dist/components/FiltersMultiSelect/components/FiltersMultiSelectOption.d.ts

@@ -1,7 +1,37 @@
 import { Filter } from '../useFiltersMultiSelect';
 export interface FiltersMultiSelectOptionProps {
+    /** The filter this row adds. `group: true` makes it a select-only row. */
     filter: Filter;
+    /** Row content. */
     children: React.ReactNode;
+    /**
+     * @deprecated Ignored — the row's state comes from the store's selected
+     * filters. Removed in the next major release.
+     */
     selected?: boolean;
 }
-export declare const FiltersMultiSelectOption: ({ filter, children, selected, }: FiltersMultiSelectOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * FiltersMultiSelectOption - One filter row of a `FiltersMultiSelect`.
+ *
+ * Declarative: `FiltersMultiSelectOptions` reads its props and renders the
+ * row, so it renders nothing on its own. Regular filters get + (include) and
+ * − (exclude) controls; `group` filters get a single check-circle.
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * <FiltersMultiSelectOptions>
+ *   <FiltersMultiSelectOption filter={{ id: '1', label: 'Active' }}>
+ *     Active
+ *   </FiltersMultiSelectOption>
+ *   <FiltersMultiSelectOption filter={{ id: 'g', label: 'Saved', group: true }}>
+ *     Saved
+ *   </FiltersMultiSelectOption>
+ * </FiltersMultiSelectOptions>
+ * ```
+ *
+ * @see {@link FiltersMultiSelectOptions} - The list that renders it
+ */
+export declare const FiltersMultiSelectOption: (_props: FiltersMultiSelectOptionProps) => null;

package/dist/components/FiltersMultiSelect/components/FiltersMultiSelectOptions.d.ts

@@ -1,4 +1,31 @@
 import React, { type HTMLAttributes } from 'react';
-export declare const FiltersMultiSelectOptions: ({ children, ...props }: {
+/**
+ * FiltersMultiSelectOptions - The options list of a `FiltersMultiSelect`.
+ *
+ * Renders its `FiltersMultiSelectOption` children as an include / exclude
+ * `ContextMenu`: + and − on each row (one check-circle on group rows), Enter
+ * in the search input cycles the highlighted row. Shows the
+ * `FiltersMultiSelect` `emptyNode` when it has no options.
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * <FiltersMultiSelect store={store}>
+ *   <FiltersMultiSelectOptions>
+ *     {filters.map((filter) => (
+ *       <FiltersMultiSelectOption key={filter.id} filter={filter}>
+ *         {filter.label}
+ *       </FiltersMultiSelectOption>
+ *     ))}
+ *   </FiltersMultiSelectOptions>
+ * </FiltersMultiSelect>
+ * ```
+ *
+ * @see {@link FiltersMultiSelect} - Parent component
+ * @see {@link FiltersMultiSelectOption} - One filter row
+ */
+export declare const FiltersMultiSelectOptions: ({ children, onMouseDown, ...props }: {
     children: React.ReactNode;
-} & HTMLAttributes<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & Omit<HTMLAttributes<HTMLUListElement>, "onChange" | "defaultValue" | "children">) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/FiltersMultiSelect/utils.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ContextMenuIncludeExcludeEntry, ContextMenuIncludeExcludeType, ContextMenuItem } from '../ContextMenu';
+import { Filter, SelectedFilter, UseFiltersMultiSelectStore } from './useFiltersMultiSelect';
+/** A ContextMenu row together with the filter it stands for. */
+export type FilterMenuItem = ContextMenuItem<string> & {
+    filter: Filter;
+};
+/** Reads `FiltersMultiSelectOption` children into ContextMenu items. */
+export declare const toFilterMenuItems: (children: React.ReactNode) => FilterMenuItem[];
+/** The store's selection in ContextMenu's `includeExclude` shape. */
+export declare const toMenuSelection: (selectedFilters: SelectedFilter[]) => ContextMenuIncludeExcludeEntry<string>[];
+/** The store's current type for a filter, in ContextMenu's terms. */
+export declare const getMenuType: (store: UseFiltersMultiSelectStore, id: string) => ContextMenuIncludeExcludeType | undefined;
+/** Selects `filter` as `type`, or unselects it when `type` is undefined. */
+export declare const setFilterType: (store: UseFiltersMultiSelectStore, { id, label }: Filter, type: ContextMenuIncludeExcludeType | undefined) => void;

package/dist/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,79 @@
+import { FloatingActionButtonIcon, FloatingActionButtonSize } from './types';
+/**
+ * FloatingActionButton - A button fixed to a corner of the viewport for the
+ * page's primary action, optionally opening a speed-dial menu of related
+ * actions.
+ *
+ * ### Look
+ * Icon-only by default; pass `label` for the extended (icon + text) FAB.
+ * `color` takes the design's `primary` / `secondary`, a theme color key or
+ * any CSS color — for custom colors the icon and label color is chosen for
+ * contrast. `shadow` and `shape` are independent of the color.
+ *
+ * ### Menu
+ * Pass `actions` to turn the button into a menu trigger. The items stack
+ * away from the corner as secondary FABs of the same size; the trigger
+ * switches to `openIcon` while open. Choosing an item, Escape, a click
+ * outside or tabbing away closes the menu. Control it with `open` +
+ * `onOpenChange`, or leave it uncontrolled (`defaultOpen`).
+ *
+ * ### Icons
+ * A kit icon name is sized for the FAB and painted with its foreground color.
+ * Any other node is rendered as-is.
+ *
+ * @category Components
+ * @subcategory Buttons
+ *
+ * @example
+ * ```tsx
+ * <FloatingActionButton aria-label="Add member" onClick={addMember} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Extended, secondary, bottom-left
+ * <FloatingActionButton label="New report" color="secondary" position="bottom-left" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Speed-dial menu
+ * <FloatingActionButton
+ *   aria-label="Create"
+ *   actions={[
+ *     { id: 'task', icon: 'plus', label: 'Task', onClick: createTask },
+ *     { id: 'note', icon: 'edit', label: 'Note', onClick: createNote },
+ *   ]}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Icon-only FABs need an `aria-label` (a dev warning fires without one)
+ * - In menu mode the trigger has `aria-haspopup="menu"` and `aria-expanded`;
+ *   the items are `menuitem`s
+ * - Opening the menu from the keyboard focuses its first item; ↑/↓, Home and
+ *   End move between items (and from the trigger into the menu while it is
+ *   open); Escape closes it and returns focus to the trigger
+ */
+export declare const FloatingActionButton: import("react").ForwardRefExoticComponent<Pick<import("react").AriaAttributes, "aria-label" | "aria-describedby"> & {
+    icon?: FloatingActionButtonIcon;
+    label?: string;
+    color?: import("./types").FloatingActionButtonColor;
+    shadow?: boolean;
+    shape?: "square" | "round";
+    size?: FloatingActionButtonSize;
+    disabled?: boolean;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement>;
+    actions?: import("./types").FloatingActionButtonAction[];
+    showActionLabels?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openIcon?: FloatingActionButtonIcon;
+    position?: import("./types").FloatingActionButtonPosition;
+    offset?: number | {
+        x: number;
+        y: number;
+    };
+    className?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/FloatingActionButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FloatingActionButton';

package/dist/components/FloatingActionButton/styles.d.ts

@@ -0,0 +1,42 @@
+import { Theme } from '@emotion/react';
+import { FloatingActionButtonColor, FloatingActionButtonPosition, FloatingActionButtonSize } from './types';
+type SizeTokens = {
+    /** Height, and width when icon-only. */
+    box: number;
+    /** Glyph size when icon-only. */
+    iconOnly: number;
+    /** Glyph size next to a label. */
+    iconLabelled: number;
+    paddingLeft: number;
+    paddingRight: number;
+    gap: number;
+    fontSize: number;
+    lineHeight: number;
+};
+/**
+ * Figma draws labelled FABs 4px taller than icon-only ones of the same size;
+ * that is a design bug, so both use the icon-only height here.
+ */
+export declare const SIZES: Record<FloatingActionButtonSize, SizeTokens>;
+export type ColorTokens = {
+    background: string;
+    hover: string;
+    active: string;
+    foreground: string;
+};
+/**
+ * Resolves `color` to the four colors a FAB paints with. The two named
+ * colors follow the design tokens; anything else is a theme key or CSS
+ * color whose foreground is picked for contrast.
+ */
+export declare const resolveColors: (theme: Theme, color: FloatingActionButtonColor) => ColorTokens;
+export declare const container: (position: FloatingActionButtonPosition, x: number, y: number) => import("@emotion/react").SerializedStyles;
+export declare const menu: (position: FloatingActionButtonPosition) => import("@emotion/react").SerializedStyles;
+export declare const button: (theme: Theme, { size, colors, shadow, round, labelled, }: {
+    size: FloatingActionButtonSize;
+    colors: ColorTokens;
+    shadow: boolean;
+    round: boolean;
+    labelled: boolean;
+}) => import("@emotion/react").SerializedStyles;
+export {};

package/dist/components/FloatingActionButton/types.d.ts

@@ -0,0 +1,129 @@
+import { AriaAttributes, MouseEventHandler, ReactNode } from 'react';
+import { ColorsKeys } from '../../types/emotion';
+import { IconProps } from '../Icon/types';
+/**
+ * Size scale of a {@link FloatingActionButton}. Icon-only and labelled FABs
+ * share one height per size: 32 / 36 / 40 / 44px.
+ */
+export type FloatingActionButtonSize = 'extraSmall' | 'small' | 'medium' | 'large';
+/**
+ * Corner of the viewport the {@link FloatingActionButton} is fixed to.
+ */
+export type FloatingActionButtonPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/**
+ * Background color of a {@link FloatingActionButton}.
+ * - `primary`: theme blue with a white icon (design default)
+ * - `secondary`: light grey with a dark icon
+ * - any theme color key (e.g. `'green'`) or CSS color string — the icon and
+ *   label color is picked automatically for contrast
+ */
+export type FloatingActionButtonColor = 'primary' | 'secondary' | ColorsKeys | (string & {});
+/**
+ * Icon of a FAB or of a menu action: a kit icon name, sized and colored by
+ * the FAB, or any node — which then brings its own size and color.
+ */
+export type FloatingActionButtonIcon = IconProps['name'] | ReactNode;
+/**
+ * A single item of a {@link FloatingActionButton} menu.
+ */
+export type FloatingActionButtonAction = {
+    /** Stable key for the item. */
+    id: string;
+    /** Icon of the item. */
+    icon: FloatingActionButtonIcon;
+    /**
+     * Text of the item. Always its accessible name; shown next to the icon
+     * unless `showActionLabels` is `false`.
+     */
+    label: string;
+    /** Called when the item is chosen. The menu then closes. */
+    onClick: () => void;
+    /** Disables the item. */
+    disabled?: boolean;
+};
+/**
+ * Props of the {@link FloatingActionButton} component.
+ */
+export type FloatingActionButtonProps = Pick<AriaAttributes, 'aria-label' | 'aria-describedby'> & {
+    /**
+     * Icon of the button (of the menu trigger while the menu is closed).
+     * @default 'plus'
+     */
+    icon?: FloatingActionButtonIcon;
+    /**
+     * Text shown next to the icon (the "extended" FAB). Without it the FAB is
+     * icon-only and needs an `aria-label`.
+     */
+    label?: string;
+    /**
+     * Background color. Pre-defined `primary` / `secondary`, a theme color key
+     * or any CSS color; custom colors get an auto-contrast icon and label.
+     * @default 'primary'
+     */
+    color?: FloatingActionButtonColor;
+    /**
+     * Draws the elevation shadow under the button.
+     * @default true
+     */
+    shadow?: boolean;
+    /**
+     * Corner shape: `square` keeps the 8px radius, `round` is fully rounded
+     * (a circle when icon-only, a pill when labelled).
+     * @default 'square'
+     */
+    shape?: 'square' | 'round';
+    /**
+     * Size of the button and of its menu items.
+     * @default 'medium'
+     */
+    size?: FloatingActionButtonSize;
+    /**
+     * Disables the button (and, in menu mode, opening the menu).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler. In menu mode it also runs, before the menu toggles.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Items of the speed-dial menu. When given, the button toggles a stack of
+     * secondary FABs above it (below it for `top-*` positions).
+     */
+    actions?: FloatingActionButtonAction[];
+    /**
+     * Shows each action's `label` next to its icon. When `false` the items are
+     * icon-only and the label stays as their accessible name.
+     * @default true
+     */
+    showActionLabels?: boolean;
+    /** Controlled open state of the menu. */
+    open?: boolean;
+    /**
+     * Initial open state of the menu when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Icon of the trigger while the menu is open.
+     * @default 'cross'
+     */
+    openIcon?: FloatingActionButtonIcon;
+    /**
+     * Viewport corner the FAB is fixed to.
+     * @default 'bottom-right'
+     */
+    position?: FloatingActionButtonPosition;
+    /**
+     * Distance from the corner in px — one value for both axes, or `{ x, y }`.
+     * @default 24
+     */
+    offset?: number | {
+        x: number;
+        y: number;
+    };
+    /** Class name of the fixed container. */
+    className?: string;
+};

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,43 @@
+import { HeaderProps } from './types';
+/**
+ * Header - The application's top bar: logo, main navigation and a free slot
+ * on the right for the user profile, notifications or log out.
+ *
+ * ### Navigation
+ * `items` render as react-router links, so the Header must sit inside a
+ * router. The item matching the current location is highlighted, and so is
+ * every group above it. Groups open a dropdown — on hover with a mouse, on
+ * tap on touch screens — and a dropdown item can open a flyout one level
+ * further. Following a link closes them.
+ *
+ * ### Layout
+ * The layout follows the Header's own width, not the window's. From 900px
+ * the navigation is centred between the logo and the right side, and scrolls
+ * sideways when it does not fit. Below 900px it moves into a drawer opened
+ * by a burger button, the logo is centred and `rightSide` stays as it is.
+ *
+ * ### Selected state
+ * The design sets the selected item in bold. The kit marks it by color
+ * only: a heavier face widens the item and shifts the whole bar whenever the
+ * route changes.
+ *
+ * @category Navigation
+ * @example
+ * ```tsx
+ * <Header
+ *   logo={<img src="/logo.svg" alt="Acme" height={38} />}
+ *   items={[
+ *     { id: 'home', label: 'Home', path: '/' },
+ *     {
+ *       id: 'people',
+ *       label: 'People',
+ *       children: [
+ *         { id: 'employees', label: 'Employees', path: '/people/employees' },
+ *       ],
+ *     },
+ *   ]}
+ *   rightSide={<UserProfile {...profile} />}
+ * />
+ * ```
+ */
+export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Header/HeaderMobileMenu.d.ts

@@ -0,0 +1,19 @@
+import { UseDrawerStore } from '../Drawer/useDrawer';
+import { HeaderNavItem, HeaderTheme } from './types';
+import * as S from './styles';
+interface HeaderMobileMenuProps {
+    store: UseDrawerStore;
+    items: HeaderNavItem[];
+    headerTheme: HeaderTheme;
+    palette: S.HeaderPalette;
+    pathname: string;
+    navLabel: string;
+}
+/**
+ * The navigation below 900px: a 400px drawer (full width on phones) holding
+ * a `TreeView`, the same engine as CollapsibleNavBar's menu. The tree owns
+ * expansion and opens the group holding the current page; this module owns
+ * the routing.
+ */
+export declare const HeaderMobileMenu: ({ store, items, headerTheme, palette, pathname, navLabel, }: HeaderMobileMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header/HeaderNavMenu.d.ts

@@ -0,0 +1,17 @@
+import { HeaderNavItem } from './types';
+import * as S from './styles';
+interface NavEntryProps {
+    item: HeaderNavItem;
+    /** 0 — the bar itself, 1 — dropdown, 2 — flyout */
+    depth: number;
+    palette: S.HeaderPalette;
+    pathname: string;
+    /** Closes every menu above this one once a link is followed */
+    onNavigate?: () => void;
+}
+/**
+ * Top-level entry. Each group roots its own floating tree, so a flyout's
+ * hover and dismiss events reach the dropdown that opened it.
+ */
+export declare const HeaderNavEntry: (props: NavEntryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header/helpers.d.ts

@@ -0,0 +1,13 @@
+import { HeaderNavItem } from './types';
+/** Submenus nest this deep at most: top level → dropdown → flyout. */
+export declare const MAX_DEPTH = 2;
+/**
+ * Same rule as react-router's `NavLink` without `end`: the path itself or
+ * anything below it, matched on whole segments — `/people` covers
+ * `/people/42` but not `/peoples`. `/` only matches itself, as with NavLink.
+ */
+export declare const isPathActive: (pathname: string, path: string) => boolean;
+/** Leaf: its own path. Group: any descendant up to `MAX_DEPTH`. */
+export declare const isItemActive: (item: HeaderNavItem, pathname: string, depth?: number) => boolean;
+export declare const hasSubmenu: (item: HeaderNavItem, depth: number) => boolean;
+export declare const renderItemIcon: (icon: HeaderNavItem["icon"], size: number) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Header/index.d.ts

@@ -0,0 +1 @@
+export * from './Header';

package/dist/components/Header/styles.d.ts

@@ -0,0 +1,74 @@
+import { Theme } from '@emotion/react';
+import { HeaderSize, HeaderTheme } from './types';
+export declare const SIZES: Record<HeaderSize, {
+    height: number;
+    logo: number;
+}>;
+export declare const MENU_WIDTH = 164;
+/** From this header width up the bar shows the nav; below it, the burger. */
+export declare const DESKTOP_MIN_WIDTH = 900;
+/** Design: dropdowns sit 6px below their trigger and flyouts 6px aside. */
+export declare const MENU_OFFSET = 6;
+export declare const resolvePalette: (theme: Theme, headerTheme: HeaderTheme) => {
+    background: string;
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | undefined;
+    disabled: `rgb${string}` | undefined;
+    menuBackground: `rgb${string}` | undefined;
+    menuItem: `rgb${string}` | undefined;
+    menuItemHover: `rgb${string}` | undefined;
+    menuItemOpen: `rgb${string}` | undefined;
+    menuText: `rgb${string}` | undefined;
+    menuDisabled: `rgb${string}` | undefined;
+    drawerBackground: `rgb${string}` | undefined;
+} | {
+    background: `rgb${string}` | undefined;
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | "transparent";
+    disabled: `rgb${string}` | undefined;
+    menuBackground: `rgb${string}` | undefined;
+    menuItem: `rgb${string}` | undefined;
+    menuItemHover: `rgb${string}` | undefined;
+    menuItemOpen: `rgb${string}` | undefined;
+    menuText: `rgb${string}` | undefined;
+    menuDisabled: `rgb${string}` | undefined;
+    drawerBackground: `rgb${string}` | "transparent";
+};
+export type HeaderPalette = ReturnType<typeof resolvePalette>;
+/**
+ * The query container. It is the `header` itself, so consumer styles such
+ * as `position: sticky` land on the outermost element; the layout that
+ * the query switches lives on the bar inside.
+ */
+export declare const container: (palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+export declare const bar: (size: HeaderSize) => import("@emotion/react").SerializedStyles;
+export declare const burger: (theme: Theme, palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+/** Holds the burger's column when there is no menu, so the logo stays centred. */
+export declare const burgerPlaceholder: import("@emotion/react").SerializedStyles;
+/**
+ * Fixed height from the size; width follows the logo so wordmarks fit, but
+ * never drops below a square, so an empty box still holds its place.
+ */
+export declare const logo: (size: HeaderSize) => import("@emotion/react").SerializedStyles;
+/**
+ * The scroll container. Dropdowns are portalled, so the overflow here does
+ * not clip them.
+ */
+export declare const nav: import("@emotion/react").SerializedStyles;
+/** `margin: auto` centres the list while it fits and lets it scroll after. */
+export declare const navList: import("@emotion/react").SerializedStyles;
+export declare const rightSide: import("@emotion/react").SerializedStyles;
+/**
+ * Selected keeps the regular weight: the design's bold resizes the item and
+ * shifts the whole bar as the route changes, so the state is marked by color
+ * alone.
+ */
+export declare const navItem: (theme: Theme, palette: HeaderPalette, active: boolean) => import("@emotion/react").SerializedStyles;
+export declare const menu: (theme: Theme, palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+export declare const menuItem: (theme: Theme, palette: HeaderPalette, active: boolean) => import("@emotion/react").SerializedStyles;
+export declare const drawerContent: (palette: HeaderPalette) => import("@emotion/react").SerializedStyles;
+/**
+ * Chevron of a mobile group row; flips while the group is open. Pushed to the
+ * row's end so every chevron shares one vertical line.
+ */
+export declare const mobileToggle: (expanded: boolean) => import("@emotion/react").SerializedStyles;