@ssa-ui-kit/core 3.25.0 → 3.26.0

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

@@ -4,6 +4,7 @@ import { Interpolation, Theme } from '@emotion/react';
 import { DropdownOptionProps } from '../DropdownOptions';
 import { CommonProps } from '../../types/emotion';
 import { IconProps } from '../Icon/types';
+import { LabelBadge } from '../Label/types';
 export declare enum DropdownPositions {
     top = "top",
     bottom = "bottom",
@@ -108,6 +109,12 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
      * Label text displayed above the dropdown
      */
     label?: string;
+    /**
+     * Status badge to the right of the label, e.g.
+     * `{ text: 'default', color: 'grey' }`. Announced as the toggle's
+     * description. Needs a `label`.
+     */
+    labelBadge?: LabelBadge;
     /**
      * Helper text displayed below the dropdown
      * Shown when no errors are present
@@ -232,4 +239,11 @@ export interface DropdownContextType {
      * Computed by Dropdown based on dropdownPosition prop and available viewport space
      */
     placement?: 'top' | 'bottom';
+    /**
+     * Option highlighted by the keyboard or the pointer. Focus stays on the
+     * toggle, so the list is driven from there.
+     */
+    activeValue?: string | number | null;
+    /** Moves the highlight; called by the list on pointer moves. */
+    setActiveValue?: (value: string | number | null) => void;
 }

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/Footer/Footer.d.ts

@@ -0,0 +1,42 @@
+import { FooterProps } from './types';
+/**
+ * Footer - The page's bottom bar: a copyright line and legal links, and
+ * optionally a logo, a short description and navigation columns above them.
+ *
+ * ### Default and extended
+ * With only `copyright` and `links` the Footer is a single bar in one of
+ * three sizes. Passing `logo`, `description` or `columns` makes it extended:
+ * the brand block and columns sit above the same bar. The design has the
+ * extended footer in medium only, so it ignores `size`.
+ *
+ * ### Links
+ * A link with a `path` renders as a react-router link, so the Footer must
+ * then sit inside a router; a link with an `href` renders as a plain anchor.
+ * Each column is its own navigation landmark, named by its title.
+ *
+ * ### Layout
+ * The layout follows the Footer's own width, not the window's. Below 900px
+ * the bottom bar stacks the copyright over the links, and the extended
+ * footer puts the brand block above its columns, two per row.
+ *
+ * @category Navigation
+ * @example
+ * ```tsx
+ * <Footer
+ *   copyright="Acme © 2007-2026. All rights reserved."
+ *   links={[
+ *     { id: 'privacy', label: 'Privacy Policy', path: '/privacy' },
+ *     { id: 'terms', label: 'Terms & Conditions', path: '/terms' },
+ *   ]}
+ *   logo={<img src="/logo.svg" alt="Acme" height={64} />}
+ *   columns={[
+ *     {
+ *       id: 'company',
+ *       title: 'Company',
+ *       links: [{ id: 'about', label: 'About us', path: '/about' }],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -0,0 +1,53 @@
+import { Theme } from '@emotion/react';
+import { FooterSize, FooterTheme } from './types';
+export declare const TYPOGRAPHY: Record<FooterSize, {
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: number;
+}>;
+/** From this footer width up the design layout; below it, everything stacks. */
+export declare const DESKTOP_MIN_WIDTH = 900;
+export declare const resolvePalette: (theme: Theme, footerTheme: FooterTheme) => {
+    background: string;
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | undefined;
+} | {
+    background: `rgb${string}` | "transparent";
+    text: `rgb${string}` | undefined;
+    accent: `rgb${string}` | "transparent";
+};
+export type FooterPalette = ReturnType<typeof resolvePalette>;
+/**
+ * The query container. It is the footer itself, so consumer styles land on
+ * the outermost element; the padding the query switches lives on the inner
+ * wrapper, as a container cannot query its own width. The kit's global reset
+ * gives every element its own color, hence the explicit inherit inside.
+ */
+export declare const container: (palette: FooterPalette) => import("@emotion/react").SerializedStyles;
+export declare const inner: import("@emotion/react").SerializedStyles;
+/**
+ * Design: 24px above the content, 40px between it and the bottom bar. The
+ * container already pads 12px, so this adds the other 12px on top.
+ */
+export declare const extended: import("@emotion/react").SerializedStyles;
+export declare const content: import("@emotion/react").SerializedStyles;
+export declare const brand: import("@emotion/react").SerializedStyles;
+/**
+ * Fixed height, as in the design's placeholder; width follows the logo so
+ * wordmarks fit.
+ */
+export declare const logo: import("@emotion/react").SerializedStyles;
+export declare const description: import("@emotion/react").SerializedStyles;
+/**
+ * Two columns side by side on phones. On desktop the design's 160px gaps,
+ * shrinking with the footer so a fourth column still fits.
+ */
+export declare const columns: import("@emotion/react").SerializedStyles;
+export declare const column: import("@emotion/react").SerializedStyles;
+export declare const columnTitle: import("@emotion/react").SerializedStyles;
+export declare const linkList: import("@emotion/react").SerializedStyles;
+/** Stacked on phones; copyright left and links right from 900px. */
+export declare const bottomBar: (size: FooterSize) => import("@emotion/react").SerializedStyles;
+export declare const copyright: import("@emotion/react").SerializedStyles;
+export declare const legalList: import("@emotion/react").SerializedStyles;
+export declare const link: (theme: Theme, palette: FooterPalette) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,110 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Footer size: the text size of the bottom bar — 14px, 16px or 20px — and so
+ * its height, 42px, 48px or 52px. The extended footer is always medium.
+ */
+export type FooterSize = 'small' | 'medium' | 'large';
+/**
+ * Footer color scheme: the light grey bar, or the dark graphite gradient the
+ * Header uses.
+ */
+export type FooterTheme = 'light' | 'dark';
+/**
+ * One link of the Footer — a legal link in the bottom bar, or a line of a
+ * navigation column.
+ *
+ * Give it a `path` to render a react-router link (the Footer must then sit
+ * inside a router), or an `href` for a plain anchor — a page on another site,
+ * a `mailto:`. With neither it renders as plain text.
+ *
+ * @example
+ * ```tsx
+ * const links: FooterLink[] = [
+ *   { id: 'privacy', label: 'Privacy Policy', path: '/privacy' },
+ *   { id: 'terms', label: 'Terms & Conditions', href: 'https://example.com/terms' },
+ * ];
+ * ```
+ */
+export interface FooterLink {
+    /** Unique key of the link within its list */
+    id: string;
+    /** Visible label */
+    label: ReactNode;
+    /** In-app route, rendered as a react-router link. Wins over `href`. */
+    path?: string;
+    /** Address of a plain anchor, for links outside the app */
+    href?: string;
+}
+/**
+ * A navigation column of the extended Footer: a bold title over a list of
+ * links.
+ *
+ * @example
+ * ```tsx
+ * const column: FooterColumn = {
+ *   id: 'company',
+ *   title: 'Company',
+ *   links: [
+ *     { id: 'about', label: 'About us', path: '/about' },
+ *     { id: 'careers', label: 'Careers', path: '/careers' },
+ *   ],
+ * };
+ * ```
+ */
+export interface FooterColumn {
+    /** Unique key of the column */
+    id: string;
+    /** Column title; also names the column's navigation landmark */
+    title: ReactNode;
+    /** Links listed under the title */
+    links: FooterLink[];
+}
+/**
+ * Props for the Footer component.
+ *
+ * @example
+ * ```tsx
+ * <Footer
+ *   copyright="Acme © 2007-2026. All rights reserved."
+ *   links={[{ id: 'privacy', label: 'Privacy Policy', path: '/privacy' }]}
+ * />
+ * ```
+ */
+export interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Copyright line, on the left of the bottom bar */
+    copyright?: ReactNode;
+    /** Legal links — privacy policy, terms — on the right of the bottom bar */
+    links?: FooterLink[];
+    /**
+     * Project logo, at the top left of the extended footer, in a 64px high box.
+     * Passing it makes the footer extended.
+     */
+    logo?: ReactNode;
+    /**
+     * Short text under the logo — a tagline, the company name. Passing it makes
+     * the footer extended.
+     */
+    description?: ReactNode;
+    /**
+     * Navigation columns on the right of the extended footer. Passing any makes
+     * the footer extended.
+     */
+    columns?: FooterColumn[];
+    /**
+     * Color scheme. Named after the kit's other light/dark components (Header,
+     * TreeView) — not the Emotion theme.
+     * @default 'light'
+     */
+    theme?: FooterTheme;
+    /**
+     * Text size and height of the bottom bar. Ignored by the extended footer,
+     * which the design only has in medium.
+     * @default 'small'
+     */
+    size?: FooterSize;
+    /**
+     * Accessible name of the legal links' navigation landmark
+     * @default 'Legal'
+     */
+    linksLabel?: string;
+}

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

@@ -11,10 +11,10 @@ import { HeaderProps } from './types';
  * further. Following a link closes them.
  *
  * ### Layout
- * 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.
+ * 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

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

@@ -10,9 +10,10 @@ interface HeaderMobileMenuProps {
     navLabel: string;
 }
 /**
- * The navigation below 900px: a full-width drawer 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.
+ * 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/styles.d.ts

@@ -5,6 +5,8 @@ export declare const SIZES: Record<HeaderSize, {
     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) => {
@@ -33,10 +35,16 @@ export declare const resolvePalette: (theme: Theme, headerTheme: HeaderTheme) =>
     drawerBackground: `rgb${string}` | "transparent";
 };
 export type HeaderPalette = ReturnType<typeof resolvePalette>;
-export declare const root: (theme: Theme, palette: HeaderPalette, size: HeaderSize) => import("@emotion/react").SerializedStyles;
+/**
+ * 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: (theme: Theme) => import("@emotion/react").SerializedStyles;
+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.
@@ -46,7 +54,7 @@ export declare const logo: (size: HeaderSize) => import("@emotion/react").Serial
  * The scroll container. Dropdowns are portalled, so the overflow here does
  * not clip them.
  */
-export declare const nav: (theme: Theme) => import("@emotion/react").SerializedStyles;
+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;
@@ -59,5 +67,8 @@ export declare const navItem: (theme: Theme, palette: HeaderPalette, active: boo
 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. */
+/**
+ * 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;

package/dist/components/Label/Label.d.ts

@@ -1,3 +1,13 @@
 import { LabelProps } from './types';
-declare const Label: ({ children, htmlFor, className, disabled, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Builds the default badge id for a label's `htmlFor`, so a field can point
+ * its control's `aria-describedby` at the badge.
+ *
+ * @example
+ * ```tsx
+ * <input id="email" aria-describedby={getLabelBadgeId('email')} />
+ * ```
+ */
+export declare const getLabelBadgeId: (htmlFor: string) => string;
+declare const Label: ({ children, htmlFor, id, badge, className, disabled, isDisabled, onMouseEnter, onMouseLeave, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Label;

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

@@ -1 +1,2 @@
 export { default } from './Label';
+export { getLabelBadgeId } from './Label';

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

@@ -1,8 +1,43 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { CommonProps } from '../../types/emotion';
+import { ChipProps } from '../Chip/types';
+/**
+ * A small status pill shown to the right of a field label — "mapped",
+ * "default", "not present in the CV". Rendered as an outlined Chip.
+ *
+ * The badge sits next to the `<label>` element, not inside it, so it does
+ * not become part of the field's accessible name. Point the control's
+ * `aria-describedby` at its `id` to have it announced as a description —
+ * the kit's fields with a `labelBadge` prop do this for you.
+ *
+ * @example
+ * ```tsx
+ * const badge: LabelBadge = { text: 'mapped', color: 'primary' };
+ * const custom: LabelBadge = { text: 'not present in the CV', color: '#ff8a00' };
+ * ```
+ */
+export interface LabelBadge {
+    /** Badge text */
+    text: ReactNode;
+    /**
+     * A Chip color: `primary`, `success`, `warning`… , any theme color key
+     * (e.g. `'purple'`) or a CSS color (e.g. `'#ff8a00'`).
+     * @default 'default'
+     */
+    color?: ChipProps['color'];
+    /**
+     * `id` of the badge element, for the control's `aria-describedby`
+     * @default `${htmlFor}-badge`, or a generated id without `htmlFor`
+     */
+    id?: string;
+}
 export interface LabelProps extends CommonProps {
     htmlFor?: string;
+    /** `id` of the `<label>` element, e.g. for a control's `aria-labelledby` */
+    id?: string;
     children: React.ReactNode;
+    /** Status badge shown to the right of the label text */
+    badge?: LabelBadge;
     /** Renders the label in its muted, disabled state. */
     disabled?: boolean;
     /**

package/dist/components/MultipleDropdown/MultipleDropdown.d.ts

@@ -68,7 +68,10 @@ import { DropdownProps } from './types';
  *
  * @accessibility
  * - ARIA attributes set according to WAI-ARIA combobox pattern
- * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Focus stays on the toggle, which points at the highlighted option with
+ *   `aria-activedescendant`
+ * - Arrow keys, Home and End move the highlight; Enter or Space toggles it
+ *   (picks and closes in single-select mode); Escape and Tab close
  * - Click outside to close
  * - Screen reader friendly with aria-expanded and aria-controls
  *

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

@@ -119,4 +119,12 @@ export interface DropdownContextType<T extends DropdownOptionProps> {
      * Max height (px) of the options list
      */
     maxHeight?: number;
+    /**
+     * Highlighted option, driven by the toggle's keyboard and the pointer
+     */
+    activeValue?: string | number | null;
+    /**
+     * Updates the highlighted option
+     */
+    setActiveValue?: (value: string | number | null) => void;
 }

package/dist/components/MultipleDropdownOptions/MultipleDropdownOptions.d.ts

@@ -1,3 +1,30 @@
 import { DropdownItemsListProps } from './types';
+/**
+ * MultipleDropdownOptions - Options menu container for MultipleDropdown
+ *
+ * Renders the `DropdownOption` children as a `ContextMenu` under the
+ * MultipleDropdown toggle: a checkbox per row in multi-select mode, a check
+ * mark on the selected row otherwise. Focus stays on the toggle; the
+ * highlighted option is driven from there and announced through
+ * `aria-activedescendant`.
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * // Rendered by MultipleDropdown from its DropdownOption children
+ * <MultipleDropdown label="Fruits" onChange={handleChange}>
+ *   <DropdownOption value="apple">Apple</DropdownOption>
+ *   <DropdownOption value="banana">Banana</DropdownOption>
+ * </MultipleDropdown>
+ * ```
+ *
+ * @see {@link MultipleDropdown} - Parent component
+ *
+ * @accessibility
+ * - Uses role="listbox" (multi-selectable in multi-select mode) with role="option" rows
+ * - Arrow keys, Home, End, Enter, Space and Escape on the toggle
+ */
 declare const MultipleDropdownOptions: ({ "aria-labelledby": ariaLabelledbyNative, ariaLabelledby, id, children, }: DropdownItemsListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default MultipleDropdownOptions;

package/dist/components/Table/ColumnFreezeMenu.d.ts

@@ -27,6 +27,8 @@ import { ColumnFreezeMenuProps } from './types';
  *
  * @accessibility
  * - The trigger is a labelled button, reachable by keyboard even while hidden
+ * - Opening moves focus into the menu (`role="menu"`): arrows, Home, End and
+ *   type-to-find move the highlight, Enter or Space picks, Escape closes
  * - Clicks inside the menu do not reach the header cell, so they never sort
  */
 export declare const ColumnFreezeMenu: ({ columnId }: ColumnFreezeMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TextField/TextField.d.ts

@@ -75,5 +75,5 @@ import { TextFieldProps } from './types';
  * - ARIA attributes via React Hook Form (when register is provided)
  * - Error messages announced to screen readers
  */
-declare const TextField: ({ multirow, name, label, errors, helperText, success, disabled, maxLength, ...props }: TextFieldProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TextField: ({ multirow, name, label, labelBadge, errors, helperText, success, disabled, maxLength, ...props }: TextFieldProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;