@ssa-ui-kit/core 3.25.0 → 3.26.0

package/dist/ai/source-map.md

@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
 
-192 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 325 exported types
+194 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 346 exported types
 
 ## Reading this file
 
@@ -16,13 +16,13 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 ## Component roster
 
-**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, FloatingActionButton, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
+**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, ContextMenu, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, FloatingActionButton, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
 
 **Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
 
 **Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, Calendar, CalendarEventDetails, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnFreezeMenu, ColumnResizeHandle, Counter, FunnelChart, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellHeader, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableContainer, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
 
-**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
+**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Footer, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
 
 **Overlay & Feedback** — Modal, ModalContent, ModalDialog, ModalDismissButton, ModalOpenButton, NotificationCard, NotificationMenu, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger, ProgressChartTooltip, SimpleChartTooltip, Tooltip, TooltipContent, TooltipContentBase, TooltipTrigger
 
@@ -122,6 +122,25 @@ Form control for selecting one or more options
   - `classnames?: { trigger, content, button, colorPicker, colorDropdown, output }`
   - `onChange?: (color: string) => void`
 
+#### ContextMenu<V>
+The list of options shown inside a dropdown, typeahead, filter or action menu.
+
+  - `items: ContextMenuEntry<V>[]` — Options and groups, in display order.
+  - `indicator?: ContextMenuIndicator` — How selected rows are marked. Defaults to `check` for `single`, `checkbox` for `multiple` and `none`…
+  - `onAction?: (value: V) => void` — Fires when an option is chosen by click, Enter or Space, in every mode — the hook for closing a popup.
+  - `activeValue?: V | null` — Controlled highlighted option (pointer or keyboard).
+  - `defaultActiveValue?: V | null` — Initially highlighted option when uncontrolled.
+  - `onActiveValueChange?: (value: V | null) => void` — Fires when the highlighted option changes.
+  - `renderItem?: (item: ContextMenuItem<V>, state: ContextMenuItemState) => ReactNode` — Replaces the row content between the start and end indicators.
+  - `renderGroupLabel?: (group: ContextMenuGroup<V>) => ReactNode` — Replaces the content of group titles.
+  - `emptyState?: ReactNode` `= 'No items'` — Shown when `items` has no options.
+  - `maxHeight?: string | number` — Scrolls the list beyond this height (px or any CSS length).
+  - `selectionMode?: 'none' | 'multiple' | 'single' | 'includeExclude'`
+  - `value?: V | V[] | ContextMenuIncludeExcludeEntry<V>[] | null` — Controlled selected value. `null` for none. Controlled selected values. Controlled chosen rows.
+  - `defaultValue?: V | V[] | ContextMenuIncludeExcludeEntry<V>[] | null` — Initially selected value when uncontrolled. Initially selected values when uncontrolled. Initially chosen…
+  - `onChange?: ((value: V) => void) | ((value: V[], toggled: V) => void) | …(1 more)` — Fires with the newly selected value. Choosing the selected option again keeps it selected. Fires with the new…
+  - _plus native element attributes_
+
 #### DatePicker
 Masked date input with a popover calendar. Use inside **`FormProvider`** (react-hook-form): the field value is the formatted string; **`onChange`** receives a JavaScript…
 
@@ -234,6 +253,7 @@ Select-like dropdown component for single selection
   - `maxHeight?: number` `= 200` — Max height (px) of the options list; overflow scrolls.
   - `avatarBorder?: boolean` `= false` — Shows a border around the avatar in the selected-item display.
   - `label?: string` — Label text displayed above the dropdown
+  - `labelBadge?: LabelBadge` — Status badge to the right of the label, e.g. `{ text: 'default', color: 'grey' }`. Announced as the toggle's…
   - `helperText?: string` — Helper text displayed below the dropdown Shown when no errors are present
   - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
   - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
@@ -407,6 +427,7 @@ Dropdown component for multi-select and single-select
   - _plus native element attributes_
 
 #### MultipleDropdownOptions
+Options menu container for MultipleDropdown
 
   - `aria-labelledby?: string` — ARIA label reference Associates the listbox with its label
   - `ariaLabelledby?: string` — ARIA label reference Associates the listbox with its label
@@ -660,6 +681,7 @@ Multi-line text input component
   - `status?: 'custom' | 'error' | 'success' | 'basic'` `= 'basic'` — Visual validation status (aligns with Input/TextField palette behavior). - `basic`: default border/outline…
   - `title?: string` — Title attribute for the textarea element Provides tooltip text on hover
   - `id?: string` — HTML id attribute for the textarea (e.g. for label htmlFor). Defaults to `formElement-${name}` when not…
+  - `aria-describedby?: string` — Ids of the elements describing the textarea — a label badge, helper text
   - `onPaste?: ClipboardEventHandler<HTMLTextAreaElement>` — Paste event handler Fired when content is pasted into the textarea
   - `setCountChar?: ReactEventHandler` — Callback function to track character count Called with the event when content changes Useful for displaying…
 
@@ -667,6 +689,7 @@ Multi-line text input component
 Ready-to-use text input (single- or multi-line) with label and validation UI.
 
   - `label?: string` — Label text displayed above the input field
+  - `labelBadge?: LabelBadge` — Status badge to the right of the label, e.g. `{ text: 'mapped', color: 'primary' }`. Announced as the field's…
   - `errors?: FieldError` — React Hook Form field error object Used to display validation error messages
   - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
   - `helperText?: string` — Helper text displayed below the input Shown when no errors are present
@@ -716,6 +739,7 @@ Advanced autocomplete search component with dropdown functionality
   - `endIconClassName?: string` — Custom CSS class name for the end icon
   - `name?: string` `= 'typeahead-search'` — Form field name (required for React Hook Form integration)
   - `label?: string` — Label text displayed above the input
+  - `labelBadge?: LabelBadge` — Status badge to the right of the label, e.g. `{ text: 'mapped', color: 'primary' }`. Announced as the input's…
   - `helperText?: string` — Helper text displayed below the input
   - `error?: FieldError` — Field error from React Hook Form
   - `success?: boolean` `= false` — Whether to show success state
@@ -758,8 +782,9 @@ Props for TypeaheadOption component Record type that allows any string or number
   - `aria-selected?: boolean` — ARIA selected state
 
 #### TypeaheadOptions
+The Typeahead's option list: a `ContextMenu` driven from the Typeahead's input. The options themselves come from the `TypeaheadOption` children of `Typeahead`, filtered…
 
-  - `children?: ReactNode`
+  - `children?: ReactNode` — Ignored: the options come from the `TypeaheadOption` children of `Typeahead`, through context.
   - `noItemsMessage?: string`
 
 ### Form Structure
@@ -802,12 +827,14 @@ Props for TypeaheadOption component Record type that allows any string or number
   - _plus native element attributes_
 
 #### FiltersMultiSelectOption
+One filter row of a `FiltersMultiSelect`.
 
-  - `filter: Filter`
-  - `children: ReactNode`
+  - `filter: Filter` — The filter this row adds. `group: true` makes it a select-only row.
+  - `children: ReactNode` — Row content.
   - `selected?: boolean`
 
 #### FiltersMultiSelectOptions
+The options list of a `FiltersMultiSelect`.
 
   - `children: React.ReactNode`
   - _plus native element attributes_
@@ -1079,7 +1106,7 @@ Compact component for tags, labels, and removable items.
   - `label: ReactNode` — Main text content of the chip Can be a string, number, or React node
   - `title?: ReactNode` — Optional title/heading text displayed before the label Useful for chips with additional context
   - `variant?: ChipVariant` `= 'filled'` — Visual style variant - `filled`: Solid background (default) - `outlined`: Transparent with border
-  - `color?: ChipColor` `= 'default'` — Color theme for the chip. Semantic colors read from `theme.palette`, so palette overrides in a custom theme…
+  - `color?: (string & {}) | 'black' | 'black25' | 'black45' | 'white' | 'white60' | …(139 more)` `= 'default'` — Color theme for the chip. Semantic colors read from `theme.palette`, so palette overrides in a custom theme…
   - `size?: ChipSize` `= 'medium'` — Size of the chip
   - `disabled?: boolean` `= false` — Whether the chip is disabled Disabled chips cannot be clicked or deleted
   - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` — Icon name to display before the label Uses the Icon component internally Defaults to 'plus' if showIcon is…
@@ -1089,6 +1116,7 @@ Compact component for tags, labels, and removable items.
   - `showIcon?: boolean` `= true` — Whether to show the leading icon If false, no icon will be displayed even if icon prop is provided
   - `onClick?: MouseEventHandler<HTMLDivElement>` — Click handler for the chip Makes the chip clickable/interactive
   - `clickable?: boolean` — Explicitly mark chip as clickable Used to enable pointer cursor and keyboard interaction Automatically true…
+  - `id?: string` — `id` of the chip element, e.g. for a control's `aria-describedby`
 
 #### ColumnFreezeMenu
 The freeze/unfreeze menu in a table header cell
@@ -1165,7 +1193,9 @@ Stage diagram drawn as a funnel or a triangle
 #### Label
 
   - `htmlFor?: string`
+  - `id?: string` — `id` of the `<label>` element, e.g. for a control's `aria-labelledby`
   - `children: ReactNode`
+  - `badge?: LabelBadge` — Status badge shown to the right of the label text
   - `disabled?: boolean` — Renders the label in its muted, disabled state.
   - `isDisabled?: boolean`
   - `onMouseEnter?: MouseEventHandler<HTMLLabelElement>`
@@ -1563,6 +1593,18 @@ The app sidebar: a logo, a menu, and three layouts.
   _No library-specific props._
   - _plus native element attributes_
 
+#### Footer
+The page's bottom bar: a copyright line and legal links, and optionally a logo, a short description and navigation columns above them.
+
+  - `copyright?: ReactNode` — Copyright line, on the left of the bottom bar
+  - `links?: FooterLink[]` — Legal links — privacy policy, terms — on the right of the bottom bar
+  - `logo?: ReactNode` — Project logo, at the top left of the extended footer, in a 64px high box. Passing it makes the footer…
+  - `description?: ReactNode` — Short text under the logo — a tagline, the company name. Passing it makes the footer extended.
+  - `columns?: FooterColumn[]` — Navigation columns on the right of the extended footer. Passing any makes the footer extended.
+  - `size?: FooterSize` `= 'small'` — Text size and height of the bottom bar. Ignored by the extended footer, which the design only has in medium.
+  - `linksLabel?: string` `= 'Legal'` — Accessible name of the legal links' navigation landmark
+  - _plus native element attributes_
+
 #### Header
 The application's top bar: logo, main navigation and a free slot on the right for the user profile, notifications or log out.
 
@@ -2182,6 +2224,8 @@ Accessible label for form fields
 
   - `children: ReactNode` — Label text content
   - `htmlFor?: string`
+  - `id?: string` — `id` of the `<label>` element, e.g. for a control's `aria-labelledby`
+  - `badge?: LabelBadge` — Status badge shown to the right of the label text
   - `disabled?: boolean` — Renders the label in its muted, disabled state.
   - `isDisabled?: boolean`
   - `onMouseEnter?: MouseEventHandler<HTMLLabelElement>`
@@ -2327,7 +2371,11 @@ A sticky action bar across the bottom of the panel.
 - `clearButtonStyles`
 - `deriveBreadcrumbs` — Pure derivation of breadcrumb items from a route tree and a pathname. Extracted from the hook so it can be unit-tested without a router.
 - `filterButtonStyles`
+- `getContextMenuOptionId` — DOM id of an option, for `aria-activedescendant` on an element outside the list (e.g. a combobox input). `menuId` is the `id` given to the ContextMenu. Characters not…
+- `getLabelBadgeId` — Builds the default badge id for a label's `htmlFor`, so a field can point its control's `aria-describedby` at the badge.
+- `getNextActiveValue` — Where a navigation key moves the highlight: ArrowDown / ArrowUp step over disabled options and wrap, Home / End jump to the ends. Returns `undefined` for any other key,…
 - `highlightInputMatch`
+- `nextIncludeExcludeType` — Where Enter moves an `includeExclude` row: none → include → exclude → none, or none ⇄ selected for `selectOnly` rows. For driving that cycle from an input that keeps…
 - `resetDeprecationWarnings` — Clears the once-per-pair warning cache.
 - `resolveAriaProp` — Shorthand for the camelCase-ARIA → native-ARIA renames (issue #656, chunk 3 item 1).
 - `resolveDeprecatedProp` — Resolves a prop that is mid-rename: returns the new prop's value when it is defined, otherwise falls back to the deprecated one and warns in dev.
@@ -2395,26 +2443,31 @@ _Names only — read the `.d.ts` for their shape._
 `CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi`
 `ColumnFreezeMenuProps` · `ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi`
 `ColumnResizeHandleProps` · `ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps`
-`ContextType` · `ControlledButtonProps` · `CounterProps` · `CounterSizes` · `CounterVariants`
-`CustomIconProps` · `CustomTagStyles` · `DatePickerContextProps` · `DatePickerFormat`
-`DatePickerProps` · `DateRangePickerContextProps` · `DateRangePickerFormBridgeProps`
-`DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates` · `DateRangePickerProps`
-`DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple` · `DeprecatedOpenStateProps`
-`DropdownContextType` · `DropdownOptionProps` · `DropdownPositions` · `DropdownProps`
-`DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams` · `DynamicToastParams`
-`FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps` · `FieldErrorProps`
-`FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
+`ContextMenuBaseProps` · `ContextMenuEntry` · `ContextMenuGroup` · `ContextMenuIncludeExcludeEntry`
+`ContextMenuIncludeExcludeSelectionProps` · `ContextMenuIncludeExcludeType` · `ContextMenuIndicator`
+`ContextMenuItemState` · `ContextMenuItem` · `ContextMenuMultipleSelectionProps`
+`ContextMenuNoSelectionProps` · `ContextMenuProps` · `ContextMenuSelectionProps`
+`ContextMenuSingleSelectionProps` · `ContextMenuValue` · `ContextType` · `ControlledButtonProps`
+`CounterProps` · `CounterSizes` · `CounterVariants` · `CustomIconProps` · `CustomTagStyles`
+`DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
+`DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
+`DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`
+`DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions`
+`DropdownProps` · `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams`
+`DynamicToastParams` · `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps`
+`FieldErrorProps` · `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
 `FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
 `FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
 `FiltersMultiSelectProps` · `FloatingActionButtonAction` · `FloatingActionButtonColor`
 `FloatingActionButtonIcon` · `FloatingActionButtonPosition` · `FloatingActionButtonProps`
-`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
-`FrozenColumns` · `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps`
-`FunnelChartRender` · `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold`
-`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps`
-`HeaderSize` · `HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps`
-`IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
-`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelProps` · `LargeTabProps`
+`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `FooterColumn`
+`FooterLink` · `FooterProps` · `FooterSize` · `FooterTheme` · `Format` · `FrozenColumns`
+`FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps` · `FunnelChartRender`
+`FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold` · `GaugeBarValueFormatter`
+`GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps` · `HeaderSize`
+`HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps` · `IconButtonProps`
+`IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
+`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelBadge` · `LabelProps` · `LargeTabProps`
 `LastFocusedElement` · `LinkProps` · `LinksTabBarProps` · `MainColors` · `MainSizes`
 `MapIconsType` · `ModalContextProps` · `ModalDialogProps` · `ModalProps` · `ModalRootProps`
 `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup` · `NavBarExtendedItem`

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

@@ -6,4 +6,4 @@ export declare const crumbLink: import("@emotion/react").SerializedStyles;
 export declare const crumbText: import("@emotion/react").SerializedStyles;
 export declare const crumbCurrent: import("@emotion/react").SerializedStyles;
 export declare const menu: import("@emotion/react").SerializedStyles;
-export declare const menuItem: import("@emotion/react").SerializedStyles;
+export declare const menuLink: import("@emotion/react").SerializedStyles;

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

@@ -1,6 +1,6 @@
 import { Theme } from '@emotion/react';
-import { ChipProps } from './types';
-type SemanticColor = Exclude<ChipProps['color'], 'default' | undefined>;
+import { ChipColor, ChipProps } from './types';
+type SemanticColor = Exclude<ChipColor, 'default'>;
 type ColorConfig = {
     /** Solid background for filled variant / border + text for outlined */
     main: string;

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

@@ -1,4 +1,4 @@
-import { CommonProps } from '../../types/emotion';
+import { ColorsKeys, CommonProps } from '../../types/emotion';
 import { Interpolation, Theme } from '@emotion/react';
 import { ReactNode, MouseEventHandler } from 'react';
 import { IconProps } from '../Icon/types';
@@ -90,10 +90,13 @@ export interface ChipProps extends CommonProps {
     variant?: ChipVariant;
     /**
      * Color theme for the chip. Semantic colors read from `theme.palette`,
-     * so palette overrides in a custom theme apply automatically.
+     * so palette overrides in a custom theme apply automatically. Any other
+     * theme color key (e.g. `'purple'`) or CSS color (e.g. `'#ff8a00'`) is
+     * used as is: border and text in `outlined`, background in `filled`, with
+     * the text color picked for contrast.
      * @default 'default'
      */
-    color?: ChipColor;
+    color?: ChipColor | ColorsKeys | (string & {});
     /**
      * Size of the chip
      * @default 'medium'
@@ -148,4 +151,8 @@ export interface ChipProps extends CommonProps {
      * Custom Emotion CSS styles
      */
     css?: Interpolation<Theme>;
+    /**
+     * `id` of the chip element, e.g. for a control's `aria-describedby`
+     */
+    id?: string;
 }

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,74 @@
+import { ReactElement, Ref } from 'react';
+import { ContextMenuProps, ContextMenuValue } from './types';
+/**
+ * ContextMenu - The list of options shown inside a dropdown, typeahead,
+ * filter or action menu.
+ *
+ * It renders only the list: open state, the trigger and positioning belong to
+ * the component hosting it, which places it inline or inside a `Popover`.
+ *
+ * ### Selection
+ * `selectionMode` picks the behaviour and the shape of `value` / `onChange`:
+ * - `none` (default): an action menu (`role="menu"`); rows only fire `onAction`
+ * - `single`: one value; marked with a check by default
+ * - `multiple`: an array of values; marked with checkboxes by default
+ * - `includeExclude`: `{ value, type }` entries; every row has + / − controls,
+ *   `selectOnly` rows a single check-circle. Clicking the active control clears
+ *   it; Enter cycles none → include → exclude → none.
+ *
+ * `indicator` overrides how selected rows are marked. Use `startContent` /
+ * `endContent` for anything the design does not cover.
+ *
+ * ### Rows
+ * Each option can carry an avatar, a status dot, a right-hand description and
+ * free start / end content. Text labels ellipsise and show the full text in a
+ * tooltip after a hover. Pass a `ContextMenuGroup` among `items` for a titled
+ * section; groups are separated by a divider.
+ *
+ * ### Keyboard
+ * The list is a single tab stop. Arrow keys, Home and End move the highlight
+ * (announced through `aria-activedescendant`), Enter or Space choose, and
+ * typing jumps to the next option starting with the typed text. Escape is left
+ * to the host. A host that keeps focus elsewhere (e.g. in an input) can drive
+ * the highlight with `activeValue` / `onActiveValueChange`.
+ *
+ * @category Components
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState<string | null>(null);
+ *
+ * <ContextMenu
+ *   selectionMode="single"
+ *   value={value}
+ *   onChange={setValue}
+ *   items={[
+ *     {
+ *       id: 'project',
+ *       label: 'Project Members',
+ *       items: [
+ *         { value: 'ann', label: 'Ann Lee', avatar: annPhotoUrl },
+ *         { value: 'bob', label: 'Bob Stone', avatar: bobPhotoUrl },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Include / exclude filters
+ * <ContextMenu
+ *   selectionMode="includeExclude"
+ *   value={filters}
+ *   onChange={setFilters}
+ *   items={[
+ *     { value: 'remote', label: 'Remote' },
+ *     { value: 'my-team', label: 'My team', selectOnly: true },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ContextMenu: <V extends ContextMenuValue = ContextMenuValue>(props: ContextMenuProps<V> & {
+    ref?: Ref<HTMLUListElement>;
+}) => ReactElement;

package/dist/components/ContextMenu/ContextMenuOption.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ContextMenuIncludeExcludeType, ContextMenuIndicator, ContextMenuItem, ContextMenuItemState, ContextMenuValue } from './types';
+export interface ContextMenuOptionProps<V extends ContextMenuValue> {
+    id: string;
+    item: ContextMenuItem<V>;
+    state: ContextMenuItemState;
+    role: 'option' | 'menuitem';
+    /** Resolved indicator; `null` in `includeExclude` mode. */
+    indicator: ContextMenuIndicator | null;
+    renderItem?: (item: ContextMenuItem<V>, state: ContextMenuItemState) => ReactNode;
+    /** Row click. Not called for include / exclude rows, whose controls choose. */
+    onActivate: () => void;
+    /** An include / exclude control was clicked. */
+    onIncludeExclude: (type: ContextMenuIncludeExcludeType) => void;
+    onHover: () => void;
+}
+/** One option row of a `ContextMenu`. Internal. */
+export declare const ContextMenuOption: <V extends ContextMenuValue>({ id, item, state, role, indicator, renderItem, onActivate, onIncludeExclude, onHover, }: ContextMenuOptionProps<V>) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './ContextMenu';
+export type * from './types';
+export { getContextMenuOptionId, getNextActiveValue, nextIncludeExcludeType, } from './utils';

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

@@ -0,0 +1,17 @@
+import { Theme } from '@emotion/react';
+/** Row height for options and group titles (Figma draws 32 and 34; 34 wins). */
+export declare const ROW_HEIGHT = 34;
+export declare const menu: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const group: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const groupList: import("@emotion/react").SerializedStyles;
+export declare const groupLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const option: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const empty: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const label: import("@emotion/react").SerializedStyles;
+export declare const description: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const status: import("@emotion/react").SerializedStyles;
+export declare const slot: import("@emotion/react").SerializedStyles;
+export declare const checkbox: import("@emotion/react").SerializedStyles;
+export declare const includeExcludeControls: import("@emotion/react").SerializedStyles;
+export declare const includeExcludeControl: import("@emotion/react").SerializedStyles;
+export declare const visuallyHidden: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,153 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/** Value type a {@link ContextMenu} option can carry. */
+export type ContextMenuValue = string | number;
+/**
+ * One selectable row of a {@link ContextMenu}.
+ *
+ * The row is laid out as `[indicator] [status | avatar] [startContent] label
+ * [description] [endContent] [indicator]`; every part but the label is
+ * optional.
+ */
+export interface ContextMenuItem<V extends ContextMenuValue = ContextMenuValue> {
+    /** Identifies the option in `value`, `onChange` and `onAction`. Unique per menu. */
+    value: V;
+    /** Row content. Strings and numbers ellipsise and get a hover tooltip. */
+    label: ReactNode;
+    /**
+     * Plain-text form of `label`, used for type-to-find and the tooltip when
+     * `label` is a node. Defaults to `label` when that is a string or number.
+     */
+    textValue?: string;
+    /** Secondary text at the right of the row, e.g. a date. */
+    description?: ReactNode;
+    /** Image URL (rendered as a 24px `Avatar`) or any node placed before the label. */
+    avatar?: string | ReactNode;
+    /** CSS color or gradient of a 12px status dot placed before the label. */
+    status?: string;
+    /** Extra content placed before the label, after the status dot / avatar. */
+    startContent?: ReactNode;
+    /** Extra content placed after the label and description. */
+    endContent?: ReactNode;
+    /** Skipped by keyboard navigation and ignores clicks. */
+    disabled?: boolean;
+    /**
+     * `includeExclude` mode only: the row is selected as a whole (one blue
+     * check-circle) instead of being included or excluded — e.g. a saved
+     * filter group.
+     */
+    selectOnly?: boolean;
+    /** Class name added to the option's `<li>`. */
+    className?: string;
+    /** Test id set on the option's `<li>`. */
+    'data-testid'?: string;
+}
+/** A titled group of options. The title is not selectable. */
+export interface ContextMenuGroup<V extends ContextMenuValue = ContextMenuValue> {
+    /** Unique per menu. */
+    id: string;
+    /** Group title. */
+    label: ReactNode;
+    items: ContextMenuItem<V>[];
+}
+/** A top-level entry of `items`: an option or a group of options. */
+export type ContextMenuEntry<V extends ContextMenuValue = ContextMenuValue> = ContextMenuItem<V> | ContextMenuGroup<V>;
+/**
+ * How a selected option is marked. Selected rows also get the selected
+ * background, except in `includeExclude` mode.
+ * - `check`: a check mark at the end of selected rows
+ * - `checkbox`: a checkbox at the start of every row
+ * - `checkCircle`: a blue check-circle at the end of every row, filled when selected
+ * - `none`: background only
+ */
+export type ContextMenuIndicator = 'check' | 'checkbox' | 'checkCircle' | 'none';
+/** State of a row in `includeExclude` mode. `selected` is used by `selectOnly` rows. */
+export type ContextMenuIncludeExcludeType = 'include' | 'exclude' | 'selected';
+/** One chosen row in `includeExclude` mode. */
+export interface ContextMenuIncludeExcludeEntry<V extends ContextMenuValue = ContextMenuValue> {
+    value: V;
+    type: ContextMenuIncludeExcludeType;
+}
+/** State passed to `renderItem`. */
+export interface ContextMenuItemState {
+    /** The option is selected (in `includeExclude` mode: included, excluded or selected). */
+    selected: boolean;
+    /** The option is highlighted by the pointer or the keyboard. */
+    active: boolean;
+    disabled: boolean;
+    /** `includeExclude` mode only. */
+    includeExcludeType?: ContextMenuIncludeExcludeType;
+}
+/** Selection props for an action menu: rows only fire `onAction`. */
+export interface ContextMenuNoSelectionProps {
+    selectionMode?: 'none';
+    value?: never;
+    defaultValue?: never;
+    onChange?: never;
+}
+/** Selection props for picking one option. */
+export interface ContextMenuSingleSelectionProps<V extends ContextMenuValue> {
+    selectionMode: 'single';
+    /** Controlled selected value. `null` for none. */
+    value?: V | null;
+    /** Initially selected value when uncontrolled. */
+    defaultValue?: V | null;
+    /** Fires with the newly selected value. Choosing the selected option again keeps it selected. */
+    onChange?: (value: V) => void;
+}
+/** Selection props for picking any number of options. */
+export interface ContextMenuMultipleSelectionProps<V extends ContextMenuValue> {
+    selectionMode: 'multiple';
+    /** Controlled selected values. */
+    value?: V[];
+    /** Initially selected values when uncontrolled. */
+    defaultValue?: V[];
+    /** Fires with the new selection and the option that was toggled. */
+    onChange?: (value: V[], toggled: V) => void;
+}
+/**
+ * Selection props for include / exclude filters. Each row is included,
+ * excluded or neither (`selectOnly` rows: selected or not).
+ */
+export interface ContextMenuIncludeExcludeSelectionProps<V extends ContextMenuValue> {
+    selectionMode: 'includeExclude';
+    /** Controlled chosen rows. */
+    value?: ContextMenuIncludeExcludeEntry<V>[];
+    /** Initially chosen rows when uncontrolled. */
+    defaultValue?: ContextMenuIncludeExcludeEntry<V>[];
+    /** Fires with the new list and the option that changed. */
+    onChange?: (value: ContextMenuIncludeExcludeEntry<V>[], changed: V) => void;
+}
+/** Selection behaviour of a {@link ContextMenu}, keyed by `selectionMode`. */
+export type ContextMenuSelectionProps<V extends ContextMenuValue> = ContextMenuNoSelectionProps | ContextMenuSingleSelectionProps<V> | ContextMenuMultipleSelectionProps<V> | ContextMenuIncludeExcludeSelectionProps<V>;
+/** Props shared by every `selectionMode` of a {@link ContextMenu}. */
+export interface ContextMenuBaseProps<V extends ContextMenuValue> extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange' | 'defaultValue' | 'children'> {
+    /** Options and groups, in display order. */
+    items: ContextMenuEntry<V>[];
+    /**
+     * How selected rows are marked. Defaults to `check` for `single`,
+     * `checkbox` for `multiple` and `none` otherwise. Ignored by
+     * `includeExclude`, which always shows include / exclude controls.
+     */
+    indicator?: ContextMenuIndicator;
+    /**
+     * Fires when an option is chosen by click, Enter or Space, in every mode —
+     * the hook for closing a popup.
+     */
+    onAction?: (value: V) => void;
+    /** Controlled highlighted option (pointer or keyboard). */
+    activeValue?: V | null;
+    /** Initially highlighted option when uncontrolled. */
+    defaultActiveValue?: V | null;
+    /** Fires when the highlighted option changes. */
+    onActiveValueChange?: (value: V | null) => void;
+    /** Replaces the row content between the start and end indicators. */
+    renderItem?: (item: ContextMenuItem<V>, state: ContextMenuItemState) => ReactNode;
+    /** Replaces the content of group titles. */
+    renderGroupLabel?: (group: ContextMenuGroup<V>) => ReactNode;
+    /** Shown when `items` has no options. @default 'No items' */
+    emptyState?: ReactNode;
+    /** Scrolls the list beyond this height (px or any CSS length). */
+    maxHeight?: number | string;
+}
+/** Props of {@link ContextMenu}. */
+export type ContextMenuProps<V extends ContextMenuValue = ContextMenuValue> = ContextMenuBaseProps<V> & ContextMenuSelectionProps<V>;

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

@@ -0,0 +1,79 @@
+import { ContextMenuEntry, ContextMenuGroup, ContextMenuIncludeExcludeType, ContextMenuItem, ContextMenuValue } from './types';
+/**
+ * Long enough that the label tooltip does not fire while the pointer is
+ * travelling down the list, short enough to feel like a deliberate hover
+ * (#669).
+ */
+export declare const LABEL_TOOLTIP_DELAY = 1000;
+/** Keeps a long label from producing a tooltip as wide as the list itself. */
+export declare const LABEL_TOOLTIP_MAX_WIDTH = 320;
+/**
+ * Only a primitive is safe to repeat inside a tooltip. Rendering the same
+ * element twice mounts two independent copies of it, so labels made of
+ * components get no tooltip.
+ */
+export declare const asText: (value: unknown) => string | number | undefined;
+export declare const isGroup: <V extends ContextMenuValue>(entry: ContextMenuEntry<V>) => entry is ContextMenuGroup<V>;
+/** Every option in display order, groups unwrapped. */
+export declare const flattenItems: <V extends ContextMenuValue>(entries: ContextMenuEntry<V>[]) => ContextMenuItem<V>[];
+/** Text used for type-to-find and the label tooltip. */
+export declare const getTextValue: <V extends ContextMenuValue>(item: ContextMenuItem<V>) => string | undefined;
+/**
+ * Where Enter moves an `includeExclude` row: none → include → exclude → none,
+ * or none ⇄ selected for `selectOnly` rows. For driving that cycle from an
+ * input that keeps focus while it highlights rows.
+ *
+ * @example
+ * ```ts
+ * nextIncludeExcludeType(undefined, false); // 'include'
+ * nextIncludeExcludeType('include', false); // 'exclude'
+ * nextIncludeExcludeType('exclude', false); // undefined
+ * nextIncludeExcludeType(undefined, true); // 'selected'
+ * ```
+ */
+export declare const nextIncludeExcludeType: (current: ContextMenuIncludeExcludeType | undefined, selectOnly: boolean) => ContextMenuIncludeExcludeType | undefined;
+/**
+ * The enabled option `step` places away from `from`, wrapping around the
+ * ends. With no `from`, ArrowDown lands on the first option and ArrowUp on
+ * the last.
+ */
+export declare const getSteppedIndex: (enabled: boolean[], from: number, step: 1 | -1) => number;
+/**
+ * Makes any string safe inside an id and an IDREF list: characters other than
+ * letters, digits and `-` become `_<hex>_`, so distinct inputs stay distinct.
+ */
+export declare const escapeId: (value: string) => string;
+/**
+ * DOM id of an option, for `aria-activedescendant` on an element outside the
+ * list (e.g. a combobox input). `menuId` is the `id` given to the ContextMenu.
+ * Characters not allowed in an id are escaped, so any value is safe.
+ *
+ * @example
+ * ```tsx
+ * <input
+ *   aria-controls="people-menu"
+ *   aria-activedescendant={
+ *     active == null ? undefined : getContextMenuOptionId('people-menu', active)
+ *   }
+ * />
+ * <ContextMenu id="people-menu" items={items} activeValue={active} />
+ * ```
+ */
+export declare const getContextMenuOptionId: (menuId: string, value: ContextMenuValue) => string;
+/**
+ * Where a navigation key moves the highlight: ArrowDown / ArrowUp step over
+ * disabled options and wrap, Home / End jump to the ends. Returns `undefined`
+ * for any other key, so a host driving the list from its own input can tell
+ * whether the key was a navigation key.
+ *
+ * @example
+ * ```tsx
+ * const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+ *   const next = getNextActiveValue(items, active, event.key);
+ *   if (next === undefined) return; // not a navigation key
+ *   event.preventDefault();
+ *   setActive(next);
+ * };
+ * ```
+ */
+export declare const getNextActiveValue: <V extends ContextMenuValue>(entries: ContextMenuEntry<V>[], activeValue: V | null | undefined, key: string) => V | null | undefined;

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

@@ -94,5 +94,5 @@ import { DropdownProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  */
-declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, helperText, errors, success, icon, width, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, labelBadge, helperText, errors, success, icon, width, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dropdown;