@leta-io/components 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -1527,8 +1527,10 @@ interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
      * dropdown (the overlay itself is a separate component); for `global-client`
      * it optionally navigates to the client home. When omitted, the
      * `global-client` root renders as a non-interactive label (matching Figma).
+     * Receives the click event: anchor a switcher to `e.currentTarget` (Safari does
+     * not focus buttons on click, so `document.activeElement` is unreliable).
      */
-    onClientClick?: () => void;
+    onClientClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Breadcrumbs — a horizontal trail showing the user's location in a hierarchy,
@@ -2533,8 +2535,12 @@ interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'
     /** Renders a trailing dismiss (×) button and is the dismiss handler. */
     onDismiss?: () => void;
     /**
-     * Auto-dismiss delay in ms. When set together with `onDismiss`, the toast
-     * fires `onDismiss` after this delay. LETA toasts persist ~7000ms.
+     * Auto-dismiss delay in ms. With `onDismiss`, the toast shows a **progress bar**
+     * along its top edge that runs from full to empty over this time, then fires
+     * `onDismiss`. Hovering the toast, or focusing anything in it, pauses both, and
+     * leaving resumes from where it stopped (Figma `68:36772`, 2026-10-27). LETA uses
+     * 6000ms, or 8000ms when the toast carries an action (Doc 3 §4). Read when the
+     * toast mounts.
      */
     duration?: number;
     /** Optional trailing CTA (a `<Button>`), shown when `showCTA`. */
@@ -2545,11 +2551,13 @@ interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'
 /**
  * Desktop Toast — a transient, auto-dismissing notification confirming the
  * outcome of an action. Per Doc 3 §4, the consumer's toast container places
- * these top-right (stacking downward, newest on top) and persists them 6s by
- * default / 8s when a CTA is present (set `duration`); positioning/stacking is
- * owned by that container, this component is the visual surface. `type="error"`
- * (a destructive outcome) renders `role="alert"`/`aria-live="assertive"`
- * instead of `role="status"`/`polite`. Figma `68:36772`.
+ * these at the window's **bottom-left** (newest at the bottom, nearest the
+ * corner) and persists them 6s by default / 8s when a CTA is present (set
+ * `duration`); positioning and stacking are the container's, this component is
+ * the visual surface and owns the countdown — a 4px progress bar across its top
+ * edge, paused while hovered or focused. `type="error"` (a destructive outcome)
+ * renders `role="alert"`/`aria-live="assertive"` instead of `role="status"`/
+ * `polite`. Figma `68:36772`.
  */
 declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -2824,7 +2832,7 @@ interface TruncatedIdTextProps {
  */
 declare function TruncatedIdText({ id, className, color, style }: TruncatedIdTextProps): React.ReactElement;
 
-type EmptyStateType = 'no-results' | 'no-reviews' | 'no-broadcast-logs' | 'image-upload' | 'file-upload' | 'no-suspensions' | 'no-items' | 'no-orders' | 'no-network' | 'new-update' | 'no-data' | 'no-trips' | 'no-drivers' | 'no-products' | 'error' | 'comments' | 'notifications' | 'calendar' | 'recording';
+type EmptyStateType = 'no-results' | 'no-reviews' | 'no-broadcast-logs' | 'image-upload' | 'file-upload' | 'no-suspensions' | 'no-items' | 'no-orders' | 'no-network' | 'new-update' | 'no-data' | 'no-trips' | 'no-drivers' | 'no-products' | 'error' | 'comments' | 'notifications' | 'calendar' | 'recording' | 'check';
 type EmptyStateSize = 'mobile' | 'desktop';
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Preset scenario — sets the illustration + default copy. Default `no-orders`. */
@@ -3277,6 +3285,18 @@ interface MapSearchResultGroup {
     /** The group's rows — `DesktopMenuOptions type="dropdown-advanced"`, 4px apart. */
     children: React.ReactNode;
 }
+/**
+ * Which keyboard hints the footer shows (Doc 11 §11 — only the ones that work
+ * right now). Each field overrides the state's default.
+ */
+interface MapSearchFooterHints {
+    /** "↑ ↓ to select" — there is at least one item to highlight. */
+    select?: boolean;
+    /** "Tab to switch filter" — chips are showing. */
+    switchFilter?: boolean;
+    /** "↵ to open / to view / to search", by what is highlighted; `null` hides it. */
+    enter?: 'open' | 'view' | 'search' | null;
+}
 interface MapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Panel state. `idle` = field only; the rest attach a results panel. Default `active-results`. */
     state?: MapSearchState;
@@ -3317,6 +3337,28 @@ interface MapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
     /** Replaces the panel body (the recent-search list or the result groups). */
     children?: React.ReactNode;
     disabled?: boolean;
+    /** A search is running: a spinner sits beside the × (Doc 11 §6). */
+    loading?: boolean;
+    /** The ×'s accessible name. Default "Clear Search"; the global overlay, whose × closes it, passes "Close search". */
+    clearLabel?: string;
+    /** Override the footer's per-state hints (see {@link MapSearchFooterHints}). */
+    footerHints?: MapSearchFooterHints;
+    /**
+     * `active-results` only: start at 360 and grow with the results up to 480, then
+     * scroll the body (Doc 11 §3). Default false — a fixed 480.
+     */
+    fitHeight?: boolean;
+    /**
+     * Whether the filter chips are in the tab order. Default true. A consumer that
+     * keeps focus in the input and moves between chips with Tab itself (the Search
+     * Overlay, Doc 3 §15) passes false: the chips leave the tab order and a click on
+     * one doesn't take focus from the input.
+     */
+    filtersTabbable?: boolean;
+    /** Ref to the scrolling body (`active-history` / `active-results`) — for scroll-into-view and load-more. */
+    bodyRef?: React.Ref<HTMLDivElement>;
+    /** Props for the scrolling body, e.g. `role="listbox"` and an `id` for `aria-controls`. */
+    bodyProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 /**
  * Overlay search — the `Search Input` type of Data Entry `38:42`, **Overlay** variant.
@@ -3534,6 +3576,26 @@ interface DesktopMenuOptionsProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     subtext?: string;
     /** dropdown-advanced: full content override (else a flat title + subtext + chevron is built from label/subtext). */
     content?: React.ReactNode;
+    /**
+     * dropdown-advanced: the Library's **Leading Content** SLOT — replaces the
+     * built-in icon + title + subtext with caller content (e.g. a title carrying a
+     * status badge and bold match text, as the Search Overlay's result rows do).
+     * Fills the row; the Trailing Content slot keeps its place beside it.
+     */
+    leadingContent?: React.ReactNode;
+    /**
+     * dropdown-advanced: the Library's **Trailing Content** SLOT — e.g. the arrow a
+     * search result shows on hover, or (Search Overlay v2) its actions button.
+     * Replaces the chevron.
+     */
+    trailingContent?: React.ReactNode;
+    /**
+     * Draw the row in its Hover look without the pointer on it — a **keyboard
+     * highlight** (a listbox's active option). When this prop is passed at all, the
+     * row stops tracking its own hover: highlight is then the caller's alone, so a
+     * pointer resting on one row and arrow keys on another never light up two rows.
+     */
+    highlighted?: boolean;
     /**
      * filter-group: how many options are currently selected in the List section.
      * Drives the single "{n} selected" chip shown beneath the label; the chip is
@@ -3728,7 +3790,7 @@ interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement
     /**
      * Override the empty-state message for the `combobox-empty` / `combobox-search-empty`
      * variants (e.g. "No depots found"). Defaults to the `no-results` preset copy
-     * ("Try adjusting your search.").
+     * ("Check the spelling or adjust your filters").
      */
     emptyDescription?: string;
     /** User Menu display name. */
@@ -4941,8 +5003,12 @@ interface TopBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'
     };
     /** Fired when the notification bell is clicked. */
     onNotificationsClick?: () => void;
-    /** Fired when the User-Menu is clicked. */
-    onUserMenuClick?: () => void;
+    /**
+     * Fired when the User-Menu is clicked, with the click event — anchor the menu to
+     * `e.currentTarget`, not `document.activeElement` (Safari doesn't focus buttons
+     * on click, so `activeElement` is `<body>` and the menu lands at 0,0).
+     */
+    onUserMenuClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Show the global search field in the centre of the bar (Figma 2026-10-06 — it
      * moved here from the Side Bar). Default `true`.
@@ -5446,4 +5512,4 @@ interface ExtraLargeModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>
  */
 declare const ExtraLargeModal: React.ForwardRefExoticComponent<ExtraLargeModalProps & React.RefAttributes<HTMLDivElement>>;
 
-export { ALL_ORDER_COLUMNS, AVATAR_PHOTOS, AccordionChevron, AccordionContent, AccordionHeader, type AccordionHeaderProps, AlertDialog, type AlertDialogProps, type AlertDialogVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, BROADCASTED_ORDER_COLUMNS, Badge, type BadgeColor, type BadgeProps, type BreadcrumbCrumb, Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsType, Button, type ButtonPlatform, type ButtonProps, type ButtonSize, type ButtonVariant, CANCELLED_ORDER_COLUMNS, CARET_SIDE, CREATED_BY_COLUMN, Calendar, type CalendarProps, type CaretAlign, type CaretSide, CarouselPagination, type CarouselPaginationProps, Cell, type CellProps, type CellState, type CellType, Checkbox, type CheckboxProps, Chip, type ChipProps, CollapsedSidebarLogo, type CollapsedSidebarLogoProps, ConfigurationCard, type ConfigurationCardProps, type ConfigurationCardState, ConfigurationContainer, type ConfigurationContainerProps, ContentCard, type ContentCardProps, ContentPrimitives, type ContentPrimitivesProps, type ContentPrimitivesType, DEFAULT_SORT_OPTIONS, DIALOG_OVERLAY_DEFAULT_TIER, DOORSTEP_DELIVERY_IMAGE, type DataRowCell, DataRows, type DataRowsProps, type DataRowsState, type DataRowsVariant, DateTimePicker, type DateTimePickerProps, type DateTimePickerType, type DesktopDropdownVariant, DesktopDropdowns, type DesktopDropdownsProps, type DesktopMenuOptionState, type DesktopMenuOptionType, DesktopMenuOptions, type DesktopMenuOptionsProps, DesktopMetricCard, type DesktopMetricCardProps, DesktopProgressIndicator, type DesktopProgressIndicatorProps, type DesktopProgressIndicatorVariant, DesktopSegmentControl, type DesktopSegmentControlItem, type DesktopSegmentControlProps, type DesktopSegmentControlVariant, DialogOverlay, type DialogOverlayHelpers, type DialogOverlayProps, DurationLabel, type DurationLabelProps, type DurationLabelStatus, type DurationLabelVariant, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, ExtraLargeModal, type ExtraLargeModalProps, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, FileUpload, FileUploadCard, type FileUploadCardProps, type FileUploadCardStatus, type FileUploadProps, type FilterGroupDimension, Flag, type FlagProps, FloatingToolbar, type FloatingToolbarActionsProps, type FloatingToolbarContextProps, type FloatingToolbarPlacement, type FloatingToolbarProps, FooterFrame, type FooterFrameProps, type FooterFrameVariant, FormDemarcator, GroupedInput, type GroupedInputProps, type GroupedInputVariant, HoverTip, type HoverTipProps, InputField, type InputFieldProps, type InputFieldVariant, InputGroup, type InputGroupProps, InputSection, type InputSectionProps, LAST_UPDATED_COLUMN, LargeModal, type LargeModalProps, type LargeModalVariant, LeadingInputFieldElement, type LeadingInputFieldElementProps, type LeadingInputFieldElementVariant, LetaLogo, type LetaLogoProps, ListGroup, type ListGroupProps, type ListItemData, ListSection, type ListSectionProps, LoadingOverlay, type LoadingOverlayProps, MAP_ROUTE_DRIVEN, MAP_ROUTE_PLANNED, MapIcon, type MapIconProps, type MapIconVariant, MapLegend, type MapLegendEntry, type MapLegendProps, MapSearchInput, type MapSearchInputProps, type MapSearchResultGroup, type MapSearchState, MapView, type MapViewProps, MapZoomControl, type MapZoomControlProps, MenuDivider, MenuFlyout, type MenuFlyoutProps, MenuPanel, type MenuPanelProps, type MetricCardState, type MetricVariance, MobileBadge, type MobileBadgeColor, type MobileBadgeProps, type MobileBadgeVariant, MobileChip, type MobileChipProps, MobileDropdown, type MobileDropdownOption, type MobileDropdownProps, MobileFeaturedIcon, type MobileFeaturedIconColor, type MobileFeaturedIconProps, type MobileFeaturedIconSize, type MobileFeaturedIconVariant, MobileFileUpload, type MobileFileUploadImage, type MobileFileUploadProps, MobileMapSearchInput, type MobileMapSearchInputProps, type MobileMenuOptionState, type MobileMenuOptionType, MobileMenuOptions, type MobileMenuOptionsProps, MobileNavTab, type MobileNavTabProps, MobileSearchInput, type MobileSearchInputProps, MobileSegment, type MobileSegmentProps, ModalDialog, type ModalDialogProps, type ModalDialogVariant, ModalHeaders, type ModalHeadersProps, type ModalHeadersVariant, ModalShell, type ModalShellProps, NotificationBanner, type NotificationBannerProps, type NotificationBannerType, type NotificationBannerVariant, ORDER_TABLE_COLUMNS, ORDER_TABLE_COLUMNS_FINISHED, OptionCard, type OptionCardProps, type OptionCardState, Page, type PageProps, PageTab, type PageTabProps, PageTabsControl, type PageTabsControlItem, type PageTabsControlProps, type PageTabsControlVariant, type PageVariant, Pagination, type PaginationProps, type PaginationVariant, Placeholder, type PlaceholderProps, Popover, type PopoverPlacement, type PopoverProps, ProgressTracker, type ProgressTrackerProps, RadioButton, type RadioButtonProps, SCHEDULED_ORDER_COLUMNS, SIGNATURE_IMAGE, type ScrollEdges, SearchInput, type SearchInputProps, SegmentSwitcherTab, type SegmentSwitcherTabProps, Select, type SelectProps, type SelectedFilterChip, SelectedFilterControl, type SelectedFilterControlProps, SelectionControl, type SelectionControlProps, type SelectionControlVariant, Shortcut, ShortcutHint, type ShortcutHintProps, type ShortcutKey, type ShortcutProps, SideBar, type SideBarGroup, type SideBarItem, type SideBarProps, type SideBarVariant, Sidetab, type SidetabItem, type SidetabProps, Skeleton, type SkeletonProps, type SortOption, StackedCards, type StackedCardsProps, Stepper, StepperInput, type StepperInputProps, type StepperProps, type StepperVariant, type SurroundingTheme, Table, type TableColumn, type TableColumnRole, TableContainer, type TableContainerProps, type TableContainerVariant, TableDataControl, type TableDataControlProps, type TableDataControlVariant, type TableProps, type TableRow, TableSection, type TableSectionProps, Tag, type TagProps, TextArea, type TextAreaBasicProps, type TextAreaProps, type TextAreaRichProps, type TextAreaVariant, Title, type TitleProps, type TitleVariant, Toast, type ToastProps, type ToastType, Toggle, ToggleButton, type ToggleButtonProps, type ToggleProps, Tooltip, type TooltipPlatform, type TooltipPosition, type TooltipPositionInput, type TooltipProps, type TooltipRect, type TooltipSide, type TooltipVariant, TopBar, type TopBarProps, type TopBarVariant, TopFilter, type TopFilterProps, TopFilterSection, type TopFilterSectionItem, type TopFilterSectionProps, TrailingInputFieldElement, type TrailingInputFieldElementProps, type TrailingInputFieldElementVariant, TruncatedIdText, type TruncatedIdTextProps, TruncatedText, type TruncatedTextProps, UNASSIGNED_ORDER_COLUMNS, UserMenu, type UserMenuProps, type UserMenuState, ViewSwitcherTab, type ViewSwitcherTabProps, WizardTab, type WizardTabProps, abbreviateId, animateScrollTop, computeTooltipPosition, downloadFile, htmlToPlainText, inverseTheme, sanitizeRichText, sortLabelFor, useAccordion, useEscapeLayer, useRovingFocus, useScrollEdges, useScrollShadow, useSurroundingTheme };
+export { ALL_ORDER_COLUMNS, AVATAR_PHOTOS, AccordionChevron, AccordionContent, AccordionHeader, type AccordionHeaderProps, AlertDialog, type AlertDialogProps, type AlertDialogVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, BROADCASTED_ORDER_COLUMNS, Badge, type BadgeColor, type BadgeProps, type BreadcrumbCrumb, Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsType, Button, type ButtonPlatform, type ButtonProps, type ButtonSize, type ButtonVariant, CANCELLED_ORDER_COLUMNS, CARET_SIDE, CREATED_BY_COLUMN, Calendar, type CalendarProps, type CaretAlign, type CaretSide, CarouselPagination, type CarouselPaginationProps, Cell, type CellProps, type CellState, type CellType, Checkbox, type CheckboxProps, Chip, type ChipProps, CollapsedSidebarLogo, type CollapsedSidebarLogoProps, ConfigurationCard, type ConfigurationCardProps, type ConfigurationCardState, ConfigurationContainer, type ConfigurationContainerProps, ContentCard, type ContentCardProps, ContentPrimitives, type ContentPrimitivesProps, type ContentPrimitivesType, DEFAULT_SORT_OPTIONS, DIALOG_OVERLAY_DEFAULT_TIER, DOORSTEP_DELIVERY_IMAGE, type DataRowCell, DataRows, type DataRowsProps, type DataRowsState, type DataRowsVariant, DateTimePicker, type DateTimePickerProps, type DateTimePickerType, type DesktopDropdownVariant, DesktopDropdowns, type DesktopDropdownsProps, type DesktopMenuOptionState, type DesktopMenuOptionType, DesktopMenuOptions, type DesktopMenuOptionsProps, DesktopMetricCard, type DesktopMetricCardProps, DesktopProgressIndicator, type DesktopProgressIndicatorProps, type DesktopProgressIndicatorVariant, DesktopSegmentControl, type DesktopSegmentControlItem, type DesktopSegmentControlProps, type DesktopSegmentControlVariant, DialogOverlay, type DialogOverlayHelpers, type DialogOverlayProps, DurationLabel, type DurationLabelProps, type DurationLabelStatus, type DurationLabelVariant, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, ExtraLargeModal, type ExtraLargeModalProps, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, FileUpload, FileUploadCard, type FileUploadCardProps, type FileUploadCardStatus, type FileUploadProps, type FilterGroupDimension, Flag, type FlagProps, FloatingToolbar, type FloatingToolbarActionsProps, type FloatingToolbarContextProps, type FloatingToolbarPlacement, type FloatingToolbarProps, FooterFrame, type FooterFrameProps, type FooterFrameVariant, FormDemarcator, GroupedInput, type GroupedInputProps, type GroupedInputVariant, HoverTip, type HoverTipProps, InputField, type InputFieldProps, type InputFieldVariant, InputGroup, type InputGroupProps, InputSection, type InputSectionProps, LAST_UPDATED_COLUMN, LargeModal, type LargeModalProps, type LargeModalVariant, LeadingInputFieldElement, type LeadingInputFieldElementProps, type LeadingInputFieldElementVariant, LetaLogo, type LetaLogoProps, ListGroup, type ListGroupProps, type ListItemData, ListSection, type ListSectionProps, LoadingOverlay, type LoadingOverlayProps, MAP_ROUTE_DRIVEN, MAP_ROUTE_PLANNED, MapIcon, type MapIconProps, type MapIconVariant, MapLegend, type MapLegendEntry, type MapLegendProps, type MapSearchFooterHints, MapSearchInput, type MapSearchInputProps, type MapSearchResultGroup, type MapSearchState, MapView, type MapViewProps, MapZoomControl, type MapZoomControlProps, MenuDivider, MenuFlyout, type MenuFlyoutProps, MenuPanel, type MenuPanelProps, type MetricCardState, type MetricVariance, MobileBadge, type MobileBadgeColor, type MobileBadgeProps, type MobileBadgeVariant, MobileChip, type MobileChipProps, MobileDropdown, type MobileDropdownOption, type MobileDropdownProps, MobileFeaturedIcon, type MobileFeaturedIconColor, type MobileFeaturedIconProps, type MobileFeaturedIconSize, type MobileFeaturedIconVariant, MobileFileUpload, type MobileFileUploadImage, type MobileFileUploadProps, MobileMapSearchInput, type MobileMapSearchInputProps, type MobileMenuOptionState, type MobileMenuOptionType, MobileMenuOptions, type MobileMenuOptionsProps, MobileNavTab, type MobileNavTabProps, MobileSearchInput, type MobileSearchInputProps, MobileSegment, type MobileSegmentProps, ModalDialog, type ModalDialogProps, type ModalDialogVariant, ModalHeaders, type ModalHeadersProps, type ModalHeadersVariant, ModalShell, type ModalShellProps, NotificationBanner, type NotificationBannerProps, type NotificationBannerType, type NotificationBannerVariant, ORDER_TABLE_COLUMNS, ORDER_TABLE_COLUMNS_FINISHED, OptionCard, type OptionCardProps, type OptionCardState, Page, type PageProps, PageTab, type PageTabProps, PageTabsControl, type PageTabsControlItem, type PageTabsControlProps, type PageTabsControlVariant, type PageVariant, Pagination, type PaginationProps, type PaginationVariant, Placeholder, type PlaceholderProps, Popover, type PopoverPlacement, type PopoverProps, ProgressTracker, type ProgressTrackerProps, RadioButton, type RadioButtonProps, SCHEDULED_ORDER_COLUMNS, SIGNATURE_IMAGE, type ScrollEdges, SearchInput, type SearchInputProps, SegmentSwitcherTab, type SegmentSwitcherTabProps, Select, type SelectProps, type SelectedFilterChip, SelectedFilterControl, type SelectedFilterControlProps, SelectionControl, type SelectionControlProps, type SelectionControlVariant, Shortcut, ShortcutHint, type ShortcutHintProps, type ShortcutKey, type ShortcutProps, SideBar, type SideBarGroup, type SideBarItem, type SideBarProps, type SideBarVariant, Sidetab, type SidetabItem, type SidetabProps, Skeleton, type SkeletonProps, type SortOption, StackedCards, type StackedCardsProps, Stepper, StepperInput, type StepperInputProps, type StepperProps, type StepperVariant, type SurroundingTheme, Table, type TableColumn, type TableColumnRole, TableContainer, type TableContainerProps, type TableContainerVariant, TableDataControl, type TableDataControlProps, type TableDataControlVariant, type TableProps, type TableRow, TableSection, type TableSectionProps, Tag, type TagProps, TextArea, type TextAreaBasicProps, type TextAreaProps, type TextAreaRichProps, type TextAreaVariant, Title, type TitleProps, type TitleVariant, Toast, type ToastProps, type ToastType, Toggle, ToggleButton, type ToggleButtonProps, type ToggleProps, Tooltip, type TooltipPlatform, type TooltipPosition, type TooltipPositionInput, type TooltipProps, type TooltipRect, type TooltipSide, type TooltipVariant, TopBar, type TopBarProps, type TopBarVariant, TopFilter, type TopFilterProps, TopFilterSection, type TopFilterSectionItem, type TopFilterSectionProps, TrailingInputFieldElement, type TrailingInputFieldElementProps, type TrailingInputFieldElementVariant, TruncatedIdText, type TruncatedIdTextProps, TruncatedText, type TruncatedTextProps, UNASSIGNED_ORDER_COLUMNS, UserMenu, type UserMenuProps, type UserMenuState, ViewSwitcherTab, type ViewSwitcherTabProps, WizardTab, type WizardTabProps, abbreviateId, animateScrollTop, computeTooltipPosition, downloadFile, htmlToPlainText, inverseTheme, sanitizeRichText, sortLabelFor, useAccordion, useEscapeLayer, useRovingFocus, useScrollEdges, useScrollShadow, useSurroundingTheme };

package/dist/index.js

@@ -836,11 +836,17 @@ var BUTTON_STYLES = `
   }
   /* Plain underline spans the whole content row (icons + label), not just the
      text run \u2014 text-decoration:underline only underlines inline text, leaving
-     the flex-item icons un-underlined. A bottom border on the flex container
-     draws one continuous line under the leading icon, label, gap, and trailing
-     icon, matching Figma. currentColor tracks --leta-btn-text across states. */
+     the flex-item icons un-underlined. A 1px line painted across the bottom of
+     the flex container runs under the leading icon, label, gap and trailing
+     icon. It is painted INSIDE the box (Figma's Underline is a zero-height
+     vector at the bottom of the 20/16px box), so it adds no height: a
+     border-bottom made Medium 21 and Small 17 (fixed 2026-10-21).
+     currentColor tracks --leta-btn-text across states. */
   .leta-btn--plain.leta-btn--underline {
-    border-bottom: 1px solid currentColor;
+    background-image: linear-gradient(currentColor, currentColor);
+    background-size: 100% var(--stroke-xs);
+    background-position: 0 100%;
+    background-repeat: no-repeat;
   }
 `;
 function ensureStylesInjected2() {
@@ -3198,7 +3204,14 @@ var STYLES4 = `
   .leta-search-field__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
   .leta-search-field__input:disabled { cursor: not-allowed; }
   .leta-search-field__input:disabled::placeholder { color: var(--text-disabled-placeholder-disabled); }
+  @keyframes leta-search-field-spin { to { transform: rotate(360deg); } }
+  .leta-search-field__spinner { display: flex; animation: leta-search-field-spin 0.9s linear infinite; }
+  @media (prefers-reduced-motion: reduce) { .leta-search-field__spinner { animation: none; } }
 `;
+function SearchFieldSpinner() {
+  ensureStyles9();
+  return /* @__PURE__ */ jsx31("span", { className: "leta-search-field__spinner", role: "status", "aria-label": "Searching", style: { flexShrink: 0, color: "var(--icons-neutral-idle)" }, children: /* @__PURE__ */ jsx31(Icon16, { name: "Loading", size: 16 }) });
+}
 function ensureStyles9() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID12)) return;
@@ -3222,6 +3235,11 @@ var SearchField = /* @__PURE__ */ React31.forwardRef(function SearchField2({
   onChange,
   className,
   style,
+  trailing,
+  clearLabel = "Clear Search",
+  clearVariant = "glyph",
+  onFocus,
+  onBlur,
   ...inputProps
 }, ref) {
   ensureStyles9();
@@ -3278,22 +3296,35 @@ var SearchField = /* @__PURE__ */ React31.forwardRef(function SearchField2({
             },
             onFocus: (e) => {
               setFocused(true);
-              inputProps.onFocus?.(e);
+              onFocus?.(e);
             },
             onBlur: (e) => {
               setFocused(false);
-              inputProps.onBlur?.(e);
+              onBlur?.(e);
             },
             style: { color: disabled ? "var(--text-disabled-placeholder-disabled)" : "var(--text-default-label)" },
             ...inputProps
           }
         ),
-        clearVisible && /* @__PURE__ */ jsx31(
+        trailing,
+        clearVisible && clearVariant === "ghost" && // Figma's open Overlay: Extra Small Ghost icon-only (24×24), 16 from the value.
+        /* @__PURE__ */ jsx31(
+          Button,
+          {
+            variant: "ghost",
+            size: "extra-small",
+            iconOnly: "Cancel",
+            "aria-label": clearLabel,
+            onClick: handleClear,
+            style: { flexShrink: 0, marginLeft: "calc(var(--spacing-16px) - var(--spacing-8px))" }
+          }
+        ),
+        clearVisible && clearVariant === "glyph" && /* @__PURE__ */ jsx31(
           "button",
           {
             type: "button",
             onClick: handleClear,
-            "aria-label": "Clear Search",
+            "aria-label": clearLabel,
             style: { flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", border: 0, background: "transparent", padding: 0, cursor: "pointer", color: "var(--icons-neutral-default)" },
             children: /* @__PURE__ */ jsx31(Icon16, { name: "Cancel", size: 16 })
           }
@@ -3594,8 +3625,9 @@ function surfaceVar(type, eff, active, selected, disabled) {
       return `--surface-neutral-sidetab-navigation-${eff}`;
   }
 }
-function borderVar(type, active, disabled) {
+function borderVar(type, active, disabled, eff = "idle") {
   if (disabled) return null;
+  if (type === "dropdown-advanced" && eff !== "idle") return `--border-neutral-dropdown-advanced-${eff}`;
   if (type === "filter-group") return active ? "--border-secondary-filter-group-active" : "--border-neutral-filter-group-idle";
   if (active && (type === "sidebar-main" || type === "sidebar-main-icon")) return "--border-neutral-sidebar-main-navigation-active";
   if (active && type === "sidebar-sub") return "--border-neutral-sidebar-sub-navigation-active";
@@ -3666,12 +3698,19 @@ var DesktopMenuOptions = /* @__PURE__ */ React35.forwardRef(function DesktopMenu
   showChevron,
   subtext,
   content,
+  leadingContent,
+  trailingContent,
+  highlighted,
   selectedCount,
   onDeselectAll,
   onSelect,
   className,
   style,
   role,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
   ...rest
 }, ref) {
   ensureStyles10();
@@ -3681,9 +3720,9 @@ var DesktopMenuOptions = /* @__PURE__ */ React35.forwardRef(function DesktopMenu
   const disabled = state ? state === "disabled" || state === "disabled-selected" : disabledProp;
   const active = state ? state === "active" || state === "active-selected" : activeProp;
   const selected = state ? state.endsWith("-selected") : selectedProp;
-  const eff = disabled ? "idle" : state ? state.startsWith("hover") ? "hover" : state.startsWith("pressed") ? "pressed" : "idle" : press ? "pressed" : hover ? "hover" : "idle";
+  const eff = disabled ? "idle" : state ? state.startsWith("hover") ? "hover" : state.startsWith("pressed") ? "pressed" : "idle" : press ? "pressed" : (highlighted !== void 0 ? highlighted : hover) ? "hover" : "idle";
   const bg = surfaceVar(type, eff, active, selected, disabled);
-  const bd = borderVar(type, active, disabled);
+  const bd = borderVar(type, active, disabled, eff);
   const txtVar = textVar(type, active, disabled);
   const txtClass = textClass(type, active);
   const fire = () => {
@@ -3740,7 +3779,15 @@ var DesktopMenuOptions = /* @__PURE__ */ React35.forwardRef(function DesktopMenu
     }
     case "dropdown-advanced": {
       const advChevron = showChevron ?? false;
-      inner = content ?? /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-20px)", width: "100%" }, children: [
+      const usesSlots = leadingContent !== void 0 || trailingContent !== void 0;
+      inner = content ?? (usesSlots ? (
+        // The Library's two SLOTs (Leading Content, gap 12 inside; Trailing Content
+        // hugging its content), 20 apart.
+        /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-20px)", width: "100%", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx35("div", { style: { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-12px)", flex: 1, minWidth: 0 }, children: leadingContent }),
+          trailingContent != null && /* @__PURE__ */ jsx35("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-end", flexShrink: 0 }, children: trailingContent })
+        ] })
+      ) : /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-20px)", width: "100%" }, children: [
         /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-12px)", flex: 1, minWidth: 0 }, children: [
           leadingIcon && // Figma `Leading Icon` frame: 20×22, padding-top 2 — the glyph sits
           // on the title's line.
@@ -3750,8 +3797,22 @@ var DesktopMenuOptions = /* @__PURE__ */ React35.forwardRef(function DesktopMenu
             subtext != null && /* @__PURE__ */ jsx35("span", { className: "text-body-s-regular", style: { color: "var(--text-default-sub-body)" }, children: subtext })
           ] })
         ] }),
-        advChevron && chevron("right", 20)
-      ] });
+        advChevron ? chevron("right", 20) : /* @__PURE__ */ jsx35(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              display: "flex",
+              flexShrink: 0,
+              width: 20,
+              height: 20,
+              color: "var(--icons-neutral-default)",
+              visibility: eff === "idle" ? "hidden" : "visible"
+            },
+            children: /* @__PURE__ */ jsx35(Icon20, { name: "Enter", size: 20 })
+          }
+        )
+      ] }));
       break;
     }
     case "checkbox-selection":
@@ -3845,13 +3906,23 @@ var DesktopMenuOptions = /* @__PURE__ */ React35.forwardRef(function DesktopMenu
           fire();
         }
       },
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => {
+      onMouseEnter: (e) => {
+        setHover(true);
+        onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
         setHover(false);
         setPress(false);
+        onMouseLeave?.(e);
+      },
+      onMouseDown: (e) => {
+        setPress(true);
+        onMouseDown?.(e);
+      },
+      onMouseUp: (e) => {
+        setPress(false);
+        onMouseUp?.(e);
       },
-      onMouseDown: () => setPress(true),
-      onMouseUp: () => setPress(false),
       style: container,
       ...rest,
       children: inner
@@ -4315,6 +4386,11 @@ var SideBar = /* @__PURE__ */ React38.forwardRef(function SideBar2({
     return "0:0";
   }, [groups]);
   const [activeKey, setActiveKey] = React38.useState(seedActive);
+  const [prevSeed, setPrevSeed] = React38.useState(seedActive);
+  if (seedActive !== prevSeed) {
+    setPrevSeed(seedActive);
+    setActiveKey(seedActive);
+  }
   const width = collapsed ? 72 : 240;
   const toggle = () => {
     setCollapsed((c) => {
@@ -4638,7 +4714,10 @@ var UserMenu = /* @__PURE__ */ React40.forwardRef(function UserMenu2({ name, ava
         border: "none",
         cursor: "pointer",
         backgroundColor: SURFACE2[eff],
-        boxShadow: `inset 0 0 0 var(--stroke-xs) ${BORDER2[eff]}`,
+        // Figma 2026-10-21: a 1px ring OUTSIDE the 68×40 pill (an outer spread, so
+        // the box doesn't grow). At Idle the ring matches the surface and is meant
+        // to be invisible; Hover/Pressed show it.
+        boxShadow: `0 0 0 var(--stroke-xs) ${BORDER2[eff]}`,
         ...style
       },
       onMouseEnter: (e) => {
@@ -7241,6 +7320,7 @@ var TopFilter = /* @__PURE__ */ React57.forwardRef(
     const pressed = forcedState ? forcedState === "pressed" : pressedLive;
     const split = advanced && !!onChevronClick;
     const stateSurface = pressed ? "var(--surface-neutral-top-filter-tab-pressed)" : hovered ? "var(--surface-neutral-top-filter-tab-hover)" : "var(--surface-neutral-top-filter-tab-idle)";
+    const selectedSurface = pressed || hovered ? stateSurface : "var(--surface-neutral-top-filter-tab-active)";
     const stateBorder = pressed ? "var(--border-neutral-top-filter-tab-pressed)" : hovered ? "var(--border-neutral-top-filter-tab-hover)" : "var(--border-neutral-top-filter-tab-idle)";
     const selectedRing = `inset 0 0 0 var(--stroke-sm) var(--border-secondary-top-filter-tab-active)`;
     const hoverHandlers = {
@@ -7288,11 +7368,9 @@ var TopFilter = /* @__PURE__ */ React57.forwardRef(
         height: 40,
         padding: "var(--padding-8px) var(--padding-12px)",
         borderRadius: "var(--rounding-lg)",
-        // Selection is carried by the 1.5px ring alone: Idle-Selected sits on the
-        // idle surface (Library 2026-10-18 — `Surface/neutral/top-filter-tab-active`
-        // was deleted; Advanced rebinds to idle, Basic still points at the deleted
-        // variable, reported as Figma hygiene).
-        backgroundColor: stateSurface,
+        // Selected → the 1.5px ring plus the selected surface (`top-filter-tab-active`
+        // at Idle-Selected; hover/pressed surfaces otherwise).
+        backgroundColor: selected ? selectedSurface : stateSurface,
         color: "var(--text-default-label)",
         // 1px unselected, 1.5px selected (all six of each in Figma).
         boxShadow: selected ? selectedRing : `inset 0 0 0 var(--stroke-xs) ${stateBorder}`,
@@ -7334,7 +7412,7 @@ var TopFilter = /* @__PURE__ */ React57.forwardRef(
       height: 40,
       padding: 0,
       borderRadius: "var(--rounding-lg)",
-      backgroundColor: selected ? stateSurface : "transparent",
+      backgroundColor: selected ? selectedSurface : "transparent",
       color: "var(--text-default-label)",
       border: "none",
       cursor: "pointer",
@@ -7909,6 +7987,7 @@ var EMPTY_STATE_ILLUSTRATIONS = {
   "no-notifications": new URL("./assets/no-notifications.png", import.meta.url).href,
   calendar: new URL("./assets/calendar.png", import.meta.url).href,
   recordings: new URL("./assets/recordings.png", import.meta.url).href,
+  check: new URL("./assets/check.png", import.meta.url).href,
   "error": new URL("./assets/error.png", import.meta.url).href
 };
 var EMPTY_STATE_ILLUSTRATIONS_WEBP = {
@@ -7929,6 +8008,7 @@ var EMPTY_STATE_ILLUSTRATIONS_WEBP = {
   "no-notifications": new URL("./assets/no-notifications.webp", import.meta.url).href,
   calendar: new URL("./assets/calendar.webp", import.meta.url).href,
   recordings: new URL("./assets/recordings.webp", import.meta.url).href,
+  check: new URL("./assets/check.webp", import.meta.url).href,
   "error": new URL("./assets/error.webp", import.meta.url).href
 };
 
@@ -7943,31 +8023,36 @@ function ensureIllustrationStyles() {
   document.head.appendChild(el);
 }
 var PRESET = {
-  "no-results": { illustration: "no-results", heading: "No matching results", description: "Try adjusting your search." },
-  "no-reviews": { illustration: "no-reviews", heading: "No reviews", description: "All reviews will be displayed here" },
-  "no-broadcast-logs": { illustration: "no-broadcast-logs", heading: "No broadcast logs", description: "All info will be displayed here" },
-  "image-upload": { illustration: "image-upload", heading: "Select image to upload", description: "Or drag and drop here" },
-  "file-upload": { illustration: "file-upload", heading: "Select file to upload", description: "Or drag and drop here" },
+  // Every description ends with a full stop (ruled 2026-10-27 — Figma had them on
+  // most Desktop variants and the code had dropped them all).
+  // Copy per Figma (2026-10-21): the No Results variants read "Check the spelling or
+  // adjust your filters." Surfaces with their own ruled copy pass `description`.
+  "no-results": { illustration: "no-results", heading: "No matching results", description: "Check the spelling or adjust your filters." },
+  "no-reviews": { illustration: "no-reviews", heading: "No reviews", description: "All reviews will be displayed here." },
+  "no-broadcast-logs": { illustration: "no-broadcast-logs", heading: "No broadcast logs", description: "All info will be displayed here." },
+  "image-upload": { illustration: "image-upload", heading: "Select image to upload", description: "Or drag and drop here." },
+  "file-upload": { illustration: "file-upload", heading: "Select file to upload", description: "Or drag and drop here." },
   "no-suspensions": { illustration: "no-suspensions", heading: "No suspensions", description: "You are currently eligible to receive order broadcasts from partner companies." },
-  "no-items": { illustration: "no-items", heading: "No items", description: "You have no returnables" },
-  "no-orders": { illustration: "no-orders", heading: "No orders yet", description: "All orders will be displayed here" },
+  "no-items": { illustration: "no-items", heading: "No items", description: "You have no returnables." },
+  "no-orders": { illustration: "no-orders", heading: "No orders yet", description: "All orders will be displayed here." },
   "no-network": { illustration: "no-network", heading: "Check your connection", description: "Could not connect to the internet. Please check your network." },
   "new-update": { illustration: "new-update", heading: "Get the new update", description: "Update to the latest version with bug fixes and improvements." },
-  "no-data": { illustration: "no-data", heading: "No data yet", description: "All data will be displayed here" },
-  "no-trips": { illustration: "no-trips", heading: "No trips yet", description: "All trips will be displayed here" },
-  "no-drivers": { illustration: "no-drivers", heading: "No drivers", description: "All drivers will be displayed here" },
+  "no-data": { illustration: "no-data", heading: "No data yet", description: "All data will be displayed here." },
+  "no-trips": { illustration: "no-trips", heading: "No trips yet", description: "All trips will be displayed here." },
+  "no-drivers": { illustration: "no-drivers", heading: "No drivers", description: "All drivers will be displayed here." },
   "no-products": { illustration: "no-items", heading: "No products", description: "No products have been added." },
   "error": { illustration: "error", heading: "Oops, something went wrong", description: "We couldn't load your content. Reload the page." },
-  // Added 2026-08-26 (Figma `Type=Comments` / `Type=Notifications`). Copy verbatim
-  // from the component set; both illustrations ship at the same 150×150 render size
-  // as every other type.
-  "comments": { illustration: "no-comments", heading: "No comments yet", description: "All comments will be displayed here" },
-  "notifications": { illustration: "no-notifications", heading: "No notifications yet", description: "New notifications will be displayed here" },
+  // Added 2026-08-26 (Figma `Type=Comments` / `Type=Notifications`). Both
+  // illustrations ship at the same 150×150 render size as every other type.
+  "comments": { illustration: "no-comments", heading: "No comments yet", description: "All comments will be displayed here." },
+  "notifications": { illustration: "no-notifications", heading: "No notifications yet", description: "New notifications will be displayed here." },
   // Added 2026-10-06 (Figma `Type=Calendar`, desktop). Figma reads "No Schedule";
   // sentence-cased like every other preset title (2026-10-02 ruling).
-  "calendar": { illustration: "calendar", heading: "No schedule", description: "All schedules will be displayed here" },
+  "calendar": { illustration: "calendar", heading: "No schedule", description: "All schedules will be displayed here." },
   // Added 2026-10-21 (Figma `Type=Recording`, Desktop + Mobile — same copy in both).
-  "recording": { illustration: "recordings", heading: "No recordings", description: "All recordings will be displayed here" }
+  "recording": { illustration: "recordings", heading: "No recordings", description: "All recordings will be displayed here." },
+  // Added 2026-10-27 (Figma `Type=Check`, Desktop + Mobile) — nothing left to do.
+  "check": { illustration: "check", heading: "You\u2019re all good", description: "Any pending tasks will be displayed here." }
 };
 var ILLUSTRATION_SIZE = 150;
 var HEADING_CLASS = {
@@ -7996,7 +8081,10 @@ var EmptyState = /* @__PURE__ */ React62.forwardRef(function EmptyState2({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        gap: "var(--spacing-20px)",
+        // Desktop keeps 20 between illustration, copy and CTA; Mobile packs them
+        // tight (Figma Container gap 0, 2026-10-27 — the illustration's own
+        // whitespace does the separating).
+        gap: size === "mobile" ? 0 : "var(--spacing-20px)",
         width: 300,
         padding: "var(--padding-16px)",
         boxSizing: "border-box",
@@ -9106,6 +9194,7 @@ var FooterFrame = /* @__PURE__ */ React72.forwardRef(
     const isCard = variant === "card";
     const itemGap = variant === "search-overlay" ? "var(--spacing-16px)" : "var(--spacing-8px)";
     const hasLeading = leading != null && leading !== false;
+    const wraps = variant === "search-overlay";
     return /* @__PURE__ */ jsxs52(
       "div",
       {
@@ -9119,7 +9208,7 @@ var FooterFrame = /* @__PURE__ */ React72.forwardRef(
           // the trailing buttons' own gap is 8px (handled on the inner flex).
           gap: 10,
           width: "100%",
-          height: HEIGHT[variant],
+          ...wraps ? { minHeight: HEIGHT[variant], flexWrap: "wrap", rowGap: "var(--spacing-8px)" } : { height: HEIGHT[variant] },
           padding: isCard ? 0 : "var(--padding-16px)",
           backgroundColor: isCard ? "transparent" : "var(--surface-neutral-bg-default)",
           // No top border (Figma removed the footer's top outline across all
@@ -9146,8 +9235,8 @@ var FooterFrame = /* @__PURE__ */ React72.forwardRef(
         },
         ...rest,
         children: [
-          hasLeading && /* @__PURE__ */ jsx71("div", { style: { display: "flex", alignItems: "center", gap: itemGap, minWidth: 0 }, children: leading }),
-          /* @__PURE__ */ jsx71("div", { style: { display: "flex", alignItems: "center", gap: itemGap, flexShrink: 0 }, children })
+          hasLeading && /* @__PURE__ */ jsx71("div", { style: { display: "flex", alignItems: "center", gap: itemGap, minWidth: 0, ...wraps ? { flexWrap: "wrap", rowGap: "var(--spacing-8px)" } : null }, children: leading }),
+          /* @__PURE__ */ jsx71("div", { style: { display: "flex", alignItems: "center", gap: itemGap, flexShrink: 0, ...wraps ? { flexWrap: "wrap", rowGap: "var(--spacing-8px)" } : null }, children })
         ]
       }
     );
@@ -10575,6 +10664,23 @@ var InputSection = /* @__PURE__ */ React87.forwardRef(function InputSection2({ t
 import * as React88 from "react";
 import { Icon as Icon38 } from "@leta-io/icons";
 import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
+var STYLE_ID27 = "leta-toast-styles";
+var STYLES18 = `
+  @keyframes leta-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+  .leta-toast-progress {
+    transform-origin: left center;
+    animation-name: leta-toast-progress;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+`;
+function ensureStyles24() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID27)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID27;
+  el.textContent = STYLES18;
+  document.head.appendChild(el);
+}
 var TYPE_CONFIG2 = {
   success: { icon: "Check-Circle", iconColor: "var(--icons-success-default)" },
   warning: { icon: "Warning", iconColor: "var(--icons-warning-default)" },
@@ -10590,17 +10696,38 @@ var Toast = /* @__PURE__ */ React88.forwardRef(function Toast2({
   duration,
   children,
   showCTA = false,
+  className,
   style,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
   ...rest
 }, ref) {
+  ensureStyles24();
   const config = TYPE_CONFIG2[type];
   const isDestructive = type === "error";
+  const autoDismiss = Boolean(duration && onDismiss);
+  const [hovered, setHovered] = React88.useState(false);
+  const [focused, setFocused] = React88.useState(false);
+  const paused = hovered || focused;
+  const remaining = React88.useRef(duration ?? 0);
+  const dismiss = React88.useRef(onDismiss);
+  React88.useEffect(() => {
+    dismiss.current = onDismiss;
+  });
   React88.useEffect(() => {
-    if (!duration || !onDismiss) return;
-    const t = setTimeout(onDismiss, duration);
-    return () => clearTimeout(t);
-  }, [duration, onDismiss]);
+    if (!autoDismiss || paused) return;
+    const started = Date.now();
+    const id = setTimeout(() => dismiss.current?.(), remaining.current);
+    return () => {
+      clearTimeout(id);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+    };
+  }, [autoDismiss, paused]);
   const rootStyle = {
+    position: "relative",
+    overflow: "hidden",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
@@ -10621,12 +10748,41 @@ var Toast = /* @__PURE__ */ React88.forwardRef(function Toast2({
       ref,
       role: isDestructive ? "alert" : "status",
       "aria-live": isDestructive ? "assertive" : "polite",
+      className: ["leta-toast", className].filter(Boolean).join(" "),
       style: rootStyle,
+      onMouseEnter: (e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+        onBlur?.(e);
+      },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)", minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx83("div", { style: { flexShrink: 0, width: 24, height: 24, color: config.iconColor }, children: /* @__PURE__ */ jsx83(Icon38, { name: config.icon, outlined: false, size: 24 }) }),
-          /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-2px)", minWidth: 0 }, children: [
+        autoDismiss && /* @__PURE__ */ jsx83("div", { "aria-hidden": true, style: { position: "absolute", top: 0, left: 0, right: 0, height: 4, backgroundColor: "var(--surface-neutral-bg-default)" }, children: /* @__PURE__ */ jsx83(
+          "div",
+          {
+            className: "leta-toast-progress",
+            style: {
+              height: "100%",
+              backgroundColor: "var(--surface-success-task-progress-bar)",
+              animationDuration: `${duration}ms`,
+              animationPlayState: paused ? "paused" : "running"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-12px)", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx83("div", { style: { flexShrink: 0, width: 24, height: 24, paddingTop: "var(--padding-2px)", color: config.iconColor }, children: /* @__PURE__ */ jsx83(Icon38, { name: config.icon, outlined: false, size: 24 }) }),
+          /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
             showTitle && title && /* @__PURE__ */ jsx83("span", { className: "text-body-l-medium", style: { color: "var(--text-default-heading)" }, children: title }),
             showSubtitle && subtitle && /* @__PURE__ */ jsx83("span", { className: "text-body-m-regular", style: { color: "var(--text-default-sub-body)" }, children: subtitle })
           ] })
@@ -10662,18 +10818,18 @@ import "@leta-io/icons";
 import * as React89 from "react";
 import { Icon as Icon39 } from "@leta-io/icons";
 import { Fragment as Fragment19, jsx as jsx84, jsxs as jsxs61 } from "react/jsx-runtime";
-var STYLE_ID27 = "leta-mmo-styles";
-var STYLES18 = `
+var STYLE_ID28 = "leta-mmo-styles";
+var STYLES19 = `
   .leta-mmo { cursor: pointer; }
   .leta-mmo[aria-disabled="true"] { cursor: not-allowed; }
   .leta-mmo:focus-visible { outline: var(--stroke-sm) solid var(--border-secondary-component-focus); outline-offset: 2px; }
 `;
-function ensureStyles24() {
+function ensureStyles25() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID27)) return;
+  if (document.getElementById(STYLE_ID28)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID27;
-  el.textContent = STYLES18;
+  el.id = STYLE_ID28;
+  el.textContent = STYLES19;
   document.head.appendChild(el);
 }
 function surfaceVar3(type, press, active, disabled) {
@@ -10711,7 +10867,7 @@ function borderVar3(type, press, active, disabled) {
   }
 }
 var MobileMenuOptions = /* @__PURE__ */ React89.forwardRef(function MobileMenuOptions2({ type = "combobox", label = "Insert Text", leadingIcon, showLeadingIcon = false, active = false, selected = false, disabled = false, state, onSelect, className, style, role, ...rest }, ref) {
-  ensureStyles24();
+  ensureStyles25();
   const [press, setPress] = React89.useState(false);
   const isCell = type === "mobile-day-cell";
   const isSel = type === "checkbox-selection" || type === "radio-selection";
@@ -11622,8 +11778,8 @@ function cleanStickyMarker(marker) {
 
 // src/TextArea/TextArea.tsx
 import { Fragment as Fragment22, jsx as jsx87, jsxs as jsxs64 } from "react/jsx-runtime";
-var STYLE_ID28 = "leta-textarea-styles";
-var STYLES19 = `
+var STYLE_ID29 = "leta-textarea-styles";
+var STYLES20 = `
   .leta-textarea__input {
     border: 0;
     outline: none;
@@ -11646,12 +11802,12 @@ var STYLES19 = `
   }
   .leta-textarea__rich-input:empty::before { content: ''; }
 `;
-function ensureStyles25() {
+function ensureStyles26() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID28)) return;
+  if (document.getElementById(STYLE_ID29)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID28;
-  el.textContent = STYLES19;
+  el.id = STYLE_ID29;
+  el.textContent = STYLES20;
   document.head.appendChild(el);
 }
 function LabelSection({
@@ -12095,7 +12251,7 @@ var RichField = /* @__PURE__ */ React92.forwardRef(function RichField2({ props,
   ] });
 });
 var TextArea = /* @__PURE__ */ React92.forwardRef(function TextArea2(props, ref) {
-  ensureStyles25();
+  ensureStyles26();
   const [focused, setFocused] = React92.useState(false);
   const borderColor = borderColorFor(props.disabled, props.error, focused);
   return /* @__PURE__ */ jsxs64(
@@ -12155,6 +12311,56 @@ var OPEN_HEIGHT = {
   "active-results": 480
 };
 var Demarcator2 = () => /* @__PURE__ */ jsx89("div", { "aria-hidden": true, style: { height: 0, flexShrink: 0, borderTop: "var(--stroke-xs) solid var(--border-neutral-default)" } });
+var CHIP_FADE = 24;
+function FilterChipRow({
+  filters,
+  activeFilter,
+  onFilterChange,
+  tabbable
+}) {
+  const scrollRef = React94.useRef(null);
+  const edges = useScrollEdges(scrollRef);
+  React94.useEffect(() => {
+    const el = scrollRef.current?.children[activeFilter];
+    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [activeFilter]);
+  return /* @__PURE__ */ jsx89("div", { style: { display: "flex", padding: "0 var(--padding-12px) var(--padding-12px)", marginTop: "calc(var(--spacing-16px) - var(--padding-12px))", minWidth: 0 }, children: /* @__PURE__ */ jsx89(
+    "div",
+    {
+      ref: scrollRef,
+      role: "group",
+      "aria-label": "Filters",
+      className: "scroll-hidden",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--spacing-8px)",
+        flex: 1,
+        minWidth: 0,
+        overflowX: "auto",
+        overscrollBehavior: "contain",
+        scrollbarWidth: "none",
+        // Room for the chips' focus rings, which the scroller would clip.
+        padding: "6px",
+        margin: "-6px",
+        maskImage: `linear-gradient(to right, ${edges.atStart ? "#000" : "transparent"} 0, #000 ${CHIP_FADE}px, #000 calc(100% - ${CHIP_FADE}px), ${edges.atEnd ? "#000" : "transparent"} 100%)`
+      },
+      children: filters.map((f, i) => /* @__PURE__ */ jsx89(
+        Chip,
+        {
+          label: f,
+          active: i === activeFilter,
+          "aria-pressed": i === activeFilter,
+          tabIndex: tabbable ? void 0 : -1,
+          onMouseDown: tabbable ? void 0 : (e) => e.preventDefault(),
+          onClick: onFilterChange ? () => onFilterChange(i) : void 0,
+          style: { flexShrink: 0 }
+        },
+        i
+      ))
+    }
+  ) });
+}
 var SAMPLE_GROUPS = ["Group Name", "Group Name"].map((title) => ({
   title,
   children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx89(DesktopMenuOptions, { type: "dropdown-advanced", label: "Title", subtext: "Enter description here" }, i))
@@ -12178,6 +12384,13 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
   showFooter = true,
   children,
   disabled = false,
+  loading = false,
+  clearLabel,
+  footerHints,
+  fitHeight = false,
+  filtersTabbable = true,
+  bodyRef,
+  bodyProps,
   value,
   defaultValue,
   onChange,
@@ -12197,6 +12410,9 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
       placeholder,
       onClear,
       showClear: open,
+      clearLabel,
+      clearVariant: open ? "ghost" : "glyph",
+      trailing: open && loading ? /* @__PURE__ */ jsx89(SearchFieldSpinner, {}) : void 0,
       disabled,
       value,
       defaultValue,
@@ -12228,7 +12444,7 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
       },
       children: [
         field,
-        state === "active-results" && /* @__PURE__ */ jsx89("div", { role: "group", "aria-label": "Filters", style: { display: "flex", alignItems: "center", gap: "var(--spacing-8px)", flexWrap: "wrap", padding: "0 var(--padding-12px) var(--padding-12px)", marginTop: "calc(var(--spacing-16px) - var(--padding-12px))" }, children: filters.map((f, i) => /* @__PURE__ */ jsx89(Chip, { label: f, active: i === activeFilter, onClick: onFilterChange ? () => onFilterChange(i) : void 0 }, i)) })
+        state === "active-results" && /* @__PURE__ */ jsx89(FilterChipRow, { filters, activeFilter, onFilterChange, tabbable: filtersTabbable })
       ]
     }
   );
@@ -12247,10 +12463,22 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
       /* @__PURE__ */ jsx89("span", { className: "text-body-m-regular", style: { color: "var(--text-default-sub-body)", textWrap: "pretty" }, children: noHistoryText })
     ] }) });
   } else if (state === "active-history") {
-    body = /* @__PURE__ */ jsxs66("div", { style: { ...bodyStyle, gap: "var(--spacing-8px)", padding: "var(--padding-16px)", overflowY: "auto", overscrollBehavior: "contain" }, children: [
+    body = /* @__PURE__ */ jsxs66("div", { ref: bodyRef, ...bodyProps, className: ["scroll-slim", bodyProps?.className].filter(Boolean).join(" "), style: { ...bodyStyle, gap: "var(--spacing-8px)", padding: "var(--padding-16px)", overflowY: "auto", overscrollBehavior: "contain", ...bodyProps?.style }, children: [
       /* @__PURE__ */ jsxs66("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-8px)" }, children: [
         /* @__PURE__ */ jsx89("span", { className: "text-body-s-medium", style: { color: "var(--text-default-sub-heading)" }, children: recentTitle }),
-        /* @__PURE__ */ jsx89(Button, { variant: "plain", size: "small", iconLeft: "Cancel", showUnderline: false, onClick: onClearHistory, children: "Clear All" })
+        /* @__PURE__ */ jsx89(
+          Button,
+          {
+            variant: "plain",
+            size: "small",
+            iconLeft: "Cancel",
+            showUnderline: false,
+            onClick: onClearHistory,
+            tabIndex: filtersTabbable ? void 0 : -1,
+            onMouseDown: filtersTabbable ? void 0 : (e) => e.preventDefault(),
+            children: "Clear All"
+          }
+        )
       ] }),
       children ?? /* @__PURE__ */ jsx89("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)" }, children: ["LTA-ID-001", "LTA-ID-002", "Michael", "Kitisuru"].map((l) => /* @__PURE__ */ jsx89(DesktopMenuOptions, { type: "dropdown-basic", label: l, leadingIcon: "History", showLeadingIcon: true, showChevron: false }, l)) })
     ] });
@@ -12258,15 +12486,27 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
     body = /* @__PURE__ */ jsx89("div", { style: { ...bodyStyle, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx89("div", { style: { width: 480, maxWidth: "100%", padding: "var(--padding-12px) var(--padding-16px)", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx89(EmptyState, { type: "no-results", size: "desktop", showIcon: false, heading: noResultsTitle, description: noResultsText, style: { width: "100%" } }) }) });
   } else {
     const list = groups ?? SAMPLE_GROUPS;
-    body = /* @__PURE__ */ jsx89("div", { style: { ...bodyStyle, overflowY: "auto", overscrollBehavior: "contain" }, children: /* @__PURE__ */ jsx89("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-16px)", padding: "var(--padding-12px) var(--padding-16px)" }, children: children ?? list.map((g, i) => /* @__PURE__ */ jsxs66(React94.Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsx89(Demarcator2, {}),
-      /* @__PURE__ */ jsxs66("div", { role: "group", "aria-label": g.title, style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)" }, children: [
-        /* @__PURE__ */ jsx89("span", { className: "text-body-s-medium", style: { color: "var(--text-default-sub-heading)" }, children: g.title }),
-        /* @__PURE__ */ jsx89("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)" }, children: g.children })
-      ] })
-    ] }, i)) }) });
+    body = /* @__PURE__ */ jsx89(
+      "div",
+      {
+        ref: bodyRef,
+        ...bodyProps,
+        className: ["scroll-slim", bodyProps?.className].filter(Boolean).join(" "),
+        style: { ...bodyStyle, ...fitHeight ? { flex: "1 1 auto" } : null, overflowY: "auto", overscrollBehavior: "contain", ...bodyProps?.style },
+        children: /* @__PURE__ */ jsx89("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-16px)", padding: "var(--padding-12px) var(--padding-16px)" }, children: children ?? list.map((g, i) => /* @__PURE__ */ jsxs66(React94.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx89(Demarcator2, {}),
+          /* @__PURE__ */ jsxs66("div", { role: "group", "aria-label": g.title, style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)" }, children: [
+            /* @__PURE__ */ jsx89("span", { className: "text-body-s-medium", style: { color: "var(--text-default-sub-heading)" }, children: g.title }),
+            /* @__PURE__ */ jsx89("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)" }, children: g.children })
+          ] })
+        ] }, i)) })
+      }
+    );
   }
   const hasRows = state === "active-history" || state === "active-results";
+  const hintSelect = footerHints?.select ?? hasRows;
+  const hintSwitch = footerHints?.switchFilter ?? state === "active-results";
+  const hintEnter = footerHints && "enter" in footerHints ? footerHints.enter : hasRows ? "open" : null;
   const footer = showFooter && /* @__PURE__ */ jsxs66(
     FooterFrame,
     {
@@ -12274,11 +12514,11 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
       style: { boxShadow: "inset 0 var(--stroke-xs) 0 var(--border-neutral-input-field)", flexShrink: 0 },
       leading: /* @__PURE__ */ jsxs66(Fragment24, { children: [
         /* @__PURE__ */ jsx89(ShortcutHint, { keys: ["Esc"], action: "to close" }),
-        hasRows && /* @__PURE__ */ jsx89(ShortcutHint, { keys: [{ icon: "Up-Arrow", label: "Up arrow" }, { icon: "Down-Arrow", label: "Down arrow" }], action: "to select" })
+        hintSelect && /* @__PURE__ */ jsx89(ShortcutHint, { keys: [{ icon: "Up-Arrow", label: "Up arrow" }, { icon: "Down-Arrow", label: "Down arrow" }], action: "to select" })
       ] }),
       children: [
-        state === "active-results" && /* @__PURE__ */ jsx89(ShortcutHint, { keys: ["Tab"], action: "to switch filter" }),
-        hasRows && /* @__PURE__ */ jsx89(ShortcutHint, { keys: [{ icon: "Enter", label: "Enter" }], action: "to open" })
+        hintSwitch && /* @__PURE__ */ jsx89(ShortcutHint, { keys: ["Tab"], action: "to switch filter" }),
+        hintEnter && /* @__PURE__ */ jsx89(ShortcutHint, { keys: [{ icon: "Enter", label: "Enter" }], action: `to ${hintEnter}` })
       ]
     }
   );
@@ -12297,7 +12537,7 @@ var MapSearchInput = /* @__PURE__ */ React94.forwardRef(function MapSearchInput2
         flexDirection: "column",
         width: OPEN_WIDTH,
         maxWidth: "100%",
-        height: OPEN_HEIGHT[state],
+        ...fitHeight && state === "active-results" ? { minHeight: OPEN_HEIGHT["no-history"], maxHeight: OPEN_HEIGHT["active-results"] } : { height: OPEN_HEIGHT[state] },
         boxSizing: "border-box",
         borderRadius: "var(--rounding-xl)",
         overflow: "hidden",
@@ -12545,20 +12785,20 @@ var FileUploadCard = /* @__PURE__ */ React98.forwardRef(function FileUploadCard2
 import * as React99 from "react";
 import { Icon as Icon45 } from "@leta-io/icons";
 import { jsx as jsx94, jsxs as jsxs70 } from "react/jsx-runtime";
-var STYLE_ID29 = "leta-mobile-file-upload-styles";
-var STYLES20 = `
+var STYLE_ID30 = "leta-mobile-file-upload-styles";
+var STYLES21 = `
   .leta-mfu__add, .leta-mfu__delete { cursor: pointer; }
   .leta-mfu__add:focus-visible, .leta-mfu__delete:focus-visible {
     outline: var(--stroke-sm) solid var(--border-secondary-component-focus);
     outline-offset: 4px;
   }
 `;
-function ensureStyles26() {
+function ensureStyles27() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID29)) return;
+  if (document.getElementById(STYLE_ID30)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID29;
-  el.textContent = STYLES20;
+  el.id = STYLE_ID30;
+  el.textContent = STYLES21;
   document.head.appendChild(el);
 }
 var TILE = { width: 111, height: 104, flexShrink: 0, borderRadius: "var(--rounding-lg)", boxSizing: "border-box" };
@@ -12576,7 +12816,7 @@ var MobileFileUpload = /* @__PURE__ */ React99.forwardRef(function MobileFileUpl
   style,
   ...rest
 }, ref) {
-  ensureStyles26();
+  ensureStyles27();
   const adds = addTiles ?? (images.length === 0 ? 3 : 0);
   return /* @__PURE__ */ jsxs70(
     "div",
@@ -13211,8 +13451,8 @@ function rootTheme() {
 
 // src/FloatingToolbar/FloatingToolbar.tsx
 import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
-var STYLE_ID30 = "leta-floating-toolbar-styles";
-var STYLES21 = `
+var STYLE_ID31 = "leta-floating-toolbar-styles";
+var STYLES22 = `
 @keyframes leta-floating-toolbar-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
 @keyframes leta-floating-toolbar-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 8px; } }
 .leta-floating-toolbar[data-presence="enter"] { animation: leta-floating-toolbar-in 200ms cubic-bezier(0.16, 1, 0.3, 1); }
@@ -13221,11 +13461,11 @@ var STYLES21 = `
   .leta-floating-toolbar[data-presence] { animation: none; }
 }
 `;
-function ensureStyles27() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID30)) return;
+function ensureStyles28() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID31)) return;
   const el = document.createElement("style");
-  el.id = STYLE_ID30;
-  el.textContent = STYLES21;
+  el.id = STYLE_ID31;
+  el.textContent = STYLES22;
   document.head.appendChild(el);
 }
 var EXIT_MS2 = 160;
@@ -13271,7 +13511,7 @@ var DefaultActions = () => /* @__PURE__ */ jsxs72(Fragment28, { children: [
 ] });
 var FloatingToolbar = /* @__PURE__ */ React103.forwardRef(
   function FloatingToolbar2(props, ref) {
-    ensureStyles27();
+    ensureStyles28();
     const anchorRef = React103.useRef(null);
     const setRefs = (el) => {
       anchorRef.current = el;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leta-io/components",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "LETA React component library",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "country-flag-icons": "^1.6.17",
     "leaflet": "^1.9.4",
     "lottie-web": "^5.12.2",
-    "@leta-io/design-tokens": "0.5.1",
-    "@leta-io/icons": "0.5.1"
+    "@leta-io/icons": "0.6.0",
+    "@leta-io/design-tokens": "0.6.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",