@ssa-ui-kit/core 3.25.1 → 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'`
 
-193 components · 20 contexts · 23 hooks · 20 functions · 16 constants · 340 exported types
+194 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 346 exported types
 
 ## Reading this file
 
@@ -22,7 +22,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **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
 
@@ -253,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'
@@ -680,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…
 
@@ -687,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
@@ -736,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
@@ -1102,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…
@@ -1112,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
@@ -1188,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>`
@@ -1586,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.
 
@@ -2205,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>`
@@ -2351,6 +2372,7 @@ A sticky action bar across the bottom of the panel.
 - `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…
@@ -2438,13 +2460,14 @@ _Names only — read the `.d.ts` for their shape._
 `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/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/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;

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

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/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/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;

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

@@ -1,5 +1,6 @@
 import type { UseFormReturn, FieldError } from 'react-hook-form';
 import { InputProps } from '../Input/types';
+import { LabelBadge } from '../Label/types';
 /**
  * Props for the TextField component
  *
@@ -55,6 +56,12 @@ export interface TextFieldProps extends InputProps, Partial<Pick<UseFormReturn,
      * Label text displayed above the input field
      */
     label?: string;
+    /**
+     * Status badge to the right of the label, e.g.
+     * `{ text: 'mapped', color: 'primary' }`. Announced as the field's
+     * description. Needs a `label`.
+     */
+    labelBadge?: LabelBadge;
     /**
      * React Hook Form field error object
      * Used to display validation error messages

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

@@ -111,6 +111,10 @@ export interface TextareaProps extends Partial<Pick<UseFormReturn, 'register'>>
      * Defaults to `formElement-${name}` when not provided.
      */
     id?: string;
+    /**
+     * Ids of the elements describing the textarea — a label badge, helper text
+     */
+    'aria-describedby'?: string;
     /**
      * Paste event handler
      * Fired when content is pasted into the textarea

package/dist/components/Typeahead/Typeahead.context.d.ts

@@ -11,6 +11,7 @@ export declare const TypeaheadContext: React.Context<{
     isMultiple: boolean | undefined;
     singleLine: boolean;
     typeaheadId: string;
+    labelId: string | undefined;
     triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;
     startIcon: React.ReactNode;

package/dist/components/Typeahead/Typeahead.d.ts

@@ -172,4 +172,4 @@ import { TypeaheadProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
-export declare const Typeahead: ({ name, label, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Typeahead: ({ name, label, labelBadge, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { CommonProps } from '../../types/emotion';
 import { FieldError } from 'react-hook-form';
+import { LabelBadge } from '../Label/types';
 /**
  * Allowed value types for Typeahead options
  */
@@ -139,6 +140,12 @@ export interface TypeaheadProps {
      * Label text displayed above the input
      */
     label?: string;
+    /**
+     * Status badge to the right of the label, e.g.
+     * `{ text: 'mapped', color: 'primary' }`. Announced as the input's
+     * description. Needs a `label`.
+     */
+    labelBadge?: LabelBadge;
     /**
      * Helper text displayed below the input
      */
@@ -214,7 +221,7 @@ export interface TypeaheadProps {
  * Props used by the useTypeahead hook
  * Internal type that picks specific props from TypeaheadProps
  */
-export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues'>;
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues' | 'label'>;
 /**
  * Props for TypeaheadOptions container component
  */

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -7,7 +7,7 @@ type HandleChangeParams = {
     shouldClose?: boolean;
     resetInput?: boolean;
 };
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, label, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
@@ -17,6 +17,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     isMultiple: boolean | undefined;
     singleLine: boolean;
     typeaheadId: string;
+    labelId: string | undefined;
     triggerRef: React.RefObject<HTMLDivElement | null>;
     className: string | undefined;
     startIcon: React.ReactNode;

package/dist/components/index.d.ts

@@ -93,6 +93,7 @@ export type * from './Chip/types';
 export { default as Avatar } from './Avatar';
 export * from './Avatar/types';
 export { default as Label } from './Label';
+export { getLabelBadgeId } from './Label';
 export type * from './Label/types';
 export { default as Indicator } from './Indicator';
 export type * from './Indicator/types';
@@ -121,6 +122,8 @@ export * from './NavBar';
 export * from './CollapsibleNavBar';
 export * from './Header';
 export type * from './Header/types';
+export * from './Footer';
+export type * from './Footer/types';
 export * from './TreeView';
 export { default as Tab } from './Tab';
 export { default as TabBar } from './TabBar';