@leta-io/components 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -116,6 +116,19 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
116
116
  copiedLabel?: string;
117
117
  /** How long (ms) to show the copied state before resetting. Default 2000. */
118
118
  copiedDuration?: number;
119
+ /**
120
+ * Icon-only state indicator: a **count badge** on the button's top-right corner
121
+ * (Desktop Badges `Coral Red (Alt)`, 20 tall) — e.g. a filter's number of selected
122
+ * values. 0 / undefined shows nothing. Doc 3 §9.3; Library `11268:53244`.
123
+ * Put the state in `aria-label` too ("Filter, 3 applied") — the badge is decorative.
124
+ */
125
+ badgeCount?: number;
126
+ /**
127
+ * Icon-only state indicator: a **dot** (`Icon/Circle-Large`, 10px,
128
+ * `--icons-primary-status-indicator`) on the top-right corner — e.g. a sort that
129
+ * isn't the surface's default. Doc 3 §9.3. Ignored while `badgeCount` shows.
130
+ */
131
+ dot?: boolean;
119
132
  }
120
133
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
121
134
 
@@ -244,6 +257,21 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
244
257
  trailingIcon?: IconName;
245
258
  /** When true the chip renders in the Active (selected) state. Caller-controlled. */
246
259
  active?: boolean;
260
+ /**
261
+ * Makes the trailing ✕ its **own** button that removes the chip — the Selected
262
+ * Filter Control's chips (Doc 3 §9.2). The label stays the `onClick` target (it
263
+ * opens what the chip names); without an `onClick` the label is plain text.
264
+ * `trailingIcon` defaults to `Cancel` in this form.
265
+ */
266
+ onRemove?: () => void;
267
+ /** Screen-reader label for the ✕ — "Remove Driver filter". Required with `onRemove`. */
268
+ removeLabel?: string;
269
+ /**
270
+ * A count chip at zero (Doc 3 §12, "Zero counts — muted, not hidden"): it stays
271
+ * in place with a muted label and icons, isn't clickable, and leaves the tab
272
+ * order. No Figma variant exists; the muting reuses the disabled text/icon tokens.
273
+ */
274
+ disabled?: boolean;
247
275
  }
248
276
  /**
249
277
  * Desktop Chip — a compact, pill-shaped element that represents a specific
@@ -1200,9 +1228,20 @@ interface SelectionControlProps extends Omit<React.HTMLAttributes<HTMLDivElement
1200
1228
  */
1201
1229
  declare const SelectionControl: React.ForwardRefExoticComponent<SelectionControlProps & React.RefAttributes<HTMLDivElement>>;
1202
1230
 
1231
+ /** One keycap: text (`'Ctrl'`, `'Esc'`, `'K'`) or a glyph (`{ icon: 'Enter' }`). */
1232
+ type ShortcutKey = string | {
1233
+ icon: IconName;
1234
+ label: string;
1235
+ };
1203
1236
  interface ShortcutProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
1204
- /** Keys in the combination, in order (e.g. `['Ctrl', 'K']`). Each renders as its own keycap. */
1205
- keys: string[];
1237
+ /**
1238
+ * Keys in the combination, in order (e.g. `['Ctrl', 'K']`). Each renders as its
1239
+ * own keycap. A keycap can hold a 16px glyph instead of text — `{ icon: 'Up-Arrow',
1240
+ * label: 'Up arrow' }` — as the Search Overlay footer's ↑ ↓ ↵ keys do (the
1241
+ * Figma keycaps sit in a `Container` SLOT, 2026-10-21). `label` names the glyph
1242
+ * for assistive tech.
1243
+ */
1244
+ keys: ShortcutKey[];
1206
1245
  /** Muted styling for when the parent option's key binding is unavailable. */
1207
1246
  disabled?: boolean;
1208
1247
  }
@@ -1222,6 +1261,19 @@ interface ShortcutProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'chi
1222
1261
  * as a semantic `<kbd>` keycap.
1223
1262
  */
1224
1263
  declare const Shortcut: React.ForwardRefExoticComponent<ShortcutProps & React.RefAttributes<HTMLSpanElement>>;
1264
+ interface ShortcutHintProps extends React.HTMLAttributes<HTMLSpanElement> {
1265
+ /** The keys, as for {@link Shortcut}. */
1266
+ keys: ShortcutKey[];
1267
+ /** What the keys do, lower case after the keys: "to close", "to select". */
1268
+ action: string;
1269
+ }
1270
+ /**
1271
+ * Shortcut Hint — a Shortcut followed by what it does ("Esc to close"), 4px apart,
1272
+ * in Body/S/Regular. The unit the Search Overlay footer (Footer Frame
1273
+ * `Search Overlay`, `11334:57381`) is built from: its Close / Navigate /
1274
+ * Switch Type / Open frames.
1275
+ */
1276
+ declare const ShortcutHint: React.ForwardRefExoticComponent<ShortcutHintProps & React.RefAttributes<HTMLSpanElement>>;
1225
1277
 
1226
1278
  interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
1227
1279
  /** Block width — a number is treated as px, any other value is passed through as CSS (e.g. `'100%'`). Default `'100%'`. */
@@ -1501,7 +1553,7 @@ interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
1501
1553
  */
1502
1554
  declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
1503
1555
 
1504
- type FooterFrameVariant = 'default' | 'tertiary-action' | 'data-summary' | 'preference' | 'validation' | 'card';
1556
+ type FooterFrameVariant = 'default' | 'tertiary-action' | 'data-summary' | 'preference' | 'validation' | 'card' | 'search-overlay';
1505
1557
  interface FooterFrameProps extends React.HTMLAttributes<HTMLDivElement> {
1506
1558
  /** Which footer treatment. Drives height / padding / background. Default `default`. */
1507
1559
  variant?: FooterFrameVariant;
@@ -1562,6 +1614,10 @@ interface FooterFrameProps extends React.HTMLAttributes<HTMLDivElement> {
1562
1614
  * - **preference** — a persistent preference control (e.g. a Selection Control).
1563
1615
  * - **validation** — a validation/error Notification Banner.
1564
1616
  * - **card** — compact (40px, no padding, transparent) for Card surfaces.
1617
+ * - **search-overlay** — the Search Overlay's keyboard-hint footer (`11334:57381`,
1618
+ * 2026-10-21): 52px, padding 16; `leading` and `children` each lay out their
1619
+ * items 16px apart (e.g. "Esc to close" · "↑↓ to select" | "Tab to switch
1620
+ * filter" · "↵ to open").
1565
1621
  */
1566
1622
  declare const FooterFrame: React.ForwardRefExoticComponent<FooterFrameProps & React.RefAttributes<HTMLDivElement>>;
1567
1623
 
@@ -1615,6 +1671,12 @@ interface ModalHeadersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
1615
1671
  title?: string;
1616
1672
  /** Close-button handler. The close button is always rendered. */
1617
1673
  onClose?: () => void;
1674
+ /**
1675
+ * Replaces the close button with another action in the same slot — the
1676
+ * Notifications panel's "Mark all as read" (Playground `2475:153697`, where the
1677
+ * header's Desktop Button instance is swapped). Omit for the standard close.
1678
+ */
1679
+ trailingAction?: React.ReactNode;
1618
1680
  /** When true, renders a Breadcrumbs component above the title. */
1619
1681
  showBreadcrumb?: boolean;
1620
1682
  /** Content to render in the breadcrumb slot (typically a `<Breadcrumbs>` element). */
@@ -1696,6 +1758,16 @@ interface ModalShellProps extends React.HTMLAttributes<HTMLDivElement> {
1696
1758
  * within itself and returns focus to the trigger on unmount.
1697
1759
  */
1698
1760
  onEscape?: () => void;
1761
+ /**
1762
+ * Whether the header casts the body's top **Scroll Edge** shadow. Default true.
1763
+ *
1764
+ * Pass false when the body's content has its **own sticky header** — the content
1765
+ * then disappears beneath that sticky row, not beneath this header, so the shadow
1766
+ * belongs to the sticky row (the order drawer's Activity tab: its All / Comments /
1767
+ * Events chips stick under the tabs and cast the edge themselves, 2026-10-17).
1768
+ * The footer's edge is unaffected.
1769
+ */
1770
+ headerScrollEdge?: boolean;
1699
1771
  }
1700
1772
  /**
1701
1773
  * Internal shell shared by the modal templates. Mirrors the Figma modal root
@@ -2005,6 +2077,12 @@ interface NotificationBannerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
2005
2077
  description: React.ReactNode;
2006
2078
  /** Override the leading icon (defaults to the icon derived from `type`). */
2007
2079
  icon?: IconName;
2080
+ /**
2081
+ * Draw the leading icon's outlined glyph. The Library's icon slots default to
2082
+ * filled glyphs; an instance that swaps in an `-Outline` icon (the Comment
2083
+ * Field's "Info-Outline" and "Message-Disabled-Outline", `1691:120714`) sets this.
2084
+ */
2085
+ iconOutlined?: boolean;
2008
2086
  onDismiss?: () => void;
2009
2087
  children?: React.ReactNode;
2010
2088
  showContentButtons?: boolean;
@@ -2146,73 +2224,75 @@ type OptionCardState = 'idle' | 'hover' | 'pressed' | 'active' | 'focus';
2146
2224
  */
2147
2225
  declare const OptionCard: React.ForwardRefExoticComponent<OptionCardProps & React.RefAttributes<HTMLLabelElement>>;
2148
2226
 
2149
- interface ConfigurationCardRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
2150
- /** Row title (Label/M/SemiBold). */
2227
+ /** Figma `State`: one row, or several with a demarcator between each. */
2228
+ type ConfigurationCardState = 'single' | 'stacked';
2229
+ interface ConfigurationCardProps extends React.HTMLAttributes<HTMLDivElement> {
2230
+ /** Figma `State`. Default `single`. */
2231
+ state?: ConfigurationCardState;
2232
+ /** The rows. In `stacked`, each child is one row and gets a demarcator above it (except the first). */
2233
+ children?: React.ReactNode;
2234
+ }
2235
+ declare const ConfigurationCard: React.ForwardRefExoticComponent<ConfigurationCardProps & React.RefAttributes<HTMLDivElement>>;
2236
+
2237
+ interface ConfigurationContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
2238
+ /** Section heading title (Body/L/SemiBold). */
2151
2239
  title: string;
2152
- /** Row description (Body/M/Regular). */
2240
+ /** Section heading description (Body/M/Regular). */
2153
2241
  description?: string;
2154
- /** Trailing action — e.g. a `<Button>` ("Dispatch"). */
2155
- trailing?: React.ReactNode;
2156
- }
2157
- declare const ConfigurationCardRow: React.ForwardRefExoticComponent<ConfigurationCardRowProps & React.RefAttributes<HTMLDivElement>>;
2158
- type ConfigurationCardVariant = 'toggle' | 'control';
2159
- interface ConfigurationCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onToggle'> {
2160
2242
  /**
2161
- * Which card shape:
2162
- * - `toggle` (default) — the standard settings card: a Toggle in the header
2163
- * switches the setting on/off and reveals the body.
2164
- * - `control` — the same card **minus the switch**, for a setting that isn't
2165
- * on/off (durations, a derived read-only value, a link out to another
2166
- * module). Its body is always visible, and the header's trailing slot takes
2167
- * whatever {@link ConfigurationCardProps.control} supplies — or nothing.
2243
+ * The feature's switch — Figma `State=Enabled` (on: Content shown) /
2244
+ * `State=Disabled` (off: Content hidden, only the heading and banner remain).
2168
2245
  */
2169
- variant?: ConfigurationCardVariant;
2246
+ enabled: boolean;
2247
+ /** Fired when the switch is flipped. */
2248
+ onEnabledChange?: (enabled: boolean) => void;
2170
2249
  /**
2171
- * Header trailing content for the `control` variant — an inline input, a
2172
- * read-only value, or a link-out Button. Ignored by the `toggle` variant,
2173
- * whose trailing slot is the Toggle.
2250
+ * **Locked** — the feature depends on another setting that is off. An instance
2251
+ * override in Figma (Returns `2829:197695`): the container dims to 60% and its
2252
+ * switch is disabled, while `enabled` and the Content stay as they are, so the
2253
+ * saved value survives until the setting it depends on is switched back on.
2254
+ * Explain why with a banner above the locked group.
2174
2255
  */
2175
- control?: React.ReactNode;
2176
- /** Section title (Label/M/SemiBold). */
2177
- title: string;
2178
- /** Section description (Body/M/Regular). */
2179
- description?: string;
2180
- /** Whether the section is enabled. Controls the header Toggle + body/footer visibility. */
2181
- enabled?: boolean;
2182
- /** Fires when the header Toggle is flipped. */
2183
- onToggle?: (enabled: boolean) => void;
2256
+ locked?: boolean;
2184
2257
  /**
2185
- * Render the whole card as unavailable: the header Toggle goes to its disabled
2186
- * state and the card dims to 60% opacity.
2187
- *
2188
- * For a setting gated by a **master switch** elsewhere in the section — the
2189
- * dependency stays visible so the admin can see what they'd get, rather than
2190
- * the options appearing out of nowhere once the master is flipped on. Distinct
2191
- * from `enabled`, which is this card's own on/off; a disabled card keeps
2192
- * whatever `enabled` value it had, so turning the master back on restores it.
2258
+ * The **Content** slot (`Content#11279:215`) — Configuration Cards (Single /
2259
+ * Stacked) or item-entry cards, stacked 16px apart. Shown only while `enabled`;
2260
+ * it stays mounted while hidden (values survive) and is `inert`.
2193
2261
  */
2194
- disabled?: boolean;
2262
+ children?: React.ReactNode;
2195
2263
  /**
2196
- * Body content — typically one or more `<ConfigurationCardRow>`. Revealed when
2197
- * enabled and hidden (but kept mounted, so entered values survive) when not.
2264
+ * The optional **Notification Banner** (`Show Notification Banner`) — a Subtle
2265
+ * Info or Warning banner stating the consequence of the current state. Always
2266
+ * the last part of the container, in either state.
2198
2267
  */
2199
- children?: React.ReactNode;
2200
- /** Show the footer region when enabled. Default true. */
2201
- showFooter?: boolean;
2202
- /** Validation / helper message shown in the footer's subtle Notification Banner. */
2203
- footerMessage?: string;
2204
- /** Notification Banner type for the footer message. Default "info". */
2205
- footerMessageType?: NotificationBannerType;
2206
- /** Secondary action label. */
2207
- cancelLabel?: string;
2208
- /** Secondary action handler. */
2209
- onCancel?: () => void;
2210
- /** Primary action label. */
2211
- submitLabel?: string;
2212
- /** Primary action handler. */
2213
- onSubmit?: () => void;
2268
+ banner?: React.ReactNode;
2269
+ /** Accessible name for the switch. Defaults to `title`. */
2270
+ switchLabel?: string;
2214
2271
  }
2215
- declare const ConfigurationCard: React.ForwardRefExoticComponent<ConfigurationCardProps & React.RefAttributes<HTMLDivElement>>;
2272
+ /**
2273
+ * **Configuration Container** (`11279:54918`, Organisms) — a card that holds one
2274
+ * configurable feature: a section heading with a switch that turns the feature on
2275
+ * or off, and the settings that apply while it is on.
2276
+ *
2277
+ * **Anatomy (from the Library):** a `card-idle` card (fill and 80% stroke), radius
2278
+ * 16, padding 20, gap 20, Neutral Drop Shadow 1 —
2279
+ * 1. **Section heading** — `Content Primitives / Section Heading`, no visual
2280
+ * anchor; title, description and a trailing **switch** (the Toggle atom; the
2281
+ * Library's `Selection Control / Switch` carries no label, so the heading names it).
2282
+ * 2. **Content** (slot) — shown only while Enabled.
2283
+ * 3. **Notification banner** — optional, last.
2284
+ *
2285
+ * **Motion** (ruled 2026-10-16): switching on grows the container with the shared
2286
+ * Accordion Behaviour height animation while each Content child fades in, settling
2287
+ * from 8px up, in a 60ms stagger; switching off fades the children first (120ms),
2288
+ * then collapses — content leaves before its container. CSS transitions, so a
2289
+ * quick double-toggle retargets rather than restarting. Reduced motion: instant.
2290
+ *
2291
+ * **When to use:** Settings pages — one container per feature, stacked 24px apart.
2292
+ * **When not to use:** read-only information (Content Card); a single setting with
2293
+ * no on/off (a Configuration Card on its own).
2294
+ */
2295
+ declare const ConfigurationContainer: React.ForwardRefExoticComponent<ConfigurationContainerProps & React.RefAttributes<HTMLDivElement>>;
2216
2296
 
2217
2297
  interface ContentCardProps extends React.HTMLAttributes<HTMLDivElement> {
2218
2298
  /**
@@ -2509,10 +2589,13 @@ interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title
2509
2589
  */
2510
2590
  width?: number;
2511
2591
  /**
2512
- * `standard` only — **hug the content** up to this width, px, instead of a
2513
- * fixed width. Short copy ("Broadcasted (18).") gets a snug panel; longer copy
2514
- * wraps once it reaches the cap. Takes precedence over `width`. The group-filter
2515
- * tag tooltip uses 232 (Playground spec `2784:408287`, ruled 2026-10-09).
2592
+ * **Hug the content** up to this width, px.
2593
+ * - `standard`: instead of a fixed width. Short copy ("Broadcasted (18).") gets a
2594
+ * snug panel; longer copy wraps once it reaches the cap. Takes precedence over
2595
+ * `width`. The group-filter tag tooltip uses 232 (`2784:408287`, 2026-10-09).
2596
+ * - `small`: lifts the default 163px text cap, so a state label stays on **one
2597
+ * line** as the Figma Small Tooltip draws it ("Sort: Trip Distance (Shortest
2598
+ * first)", "Delayed deliveries: 20" — `2884:463401`, 2026-10-17).
2516
2599
  */
2517
2600
  maxWidth?: number;
2518
2601
  step?: number;
@@ -2713,8 +2796,35 @@ interface TruncatedTextProps {
2713
2796
  * truncated address reveals itself, and only the line you hover.
2714
2797
  */
2715
2798
  declare function TruncatedText({ text, className, color, tipLabel, ariaLabel, variant, style, }: TruncatedTextProps): React.ReactElement;
2799
+ /**
2800
+ * Head/tail abbreviation for a long identifier: first 8 characters, an ellipsis,
2801
+ * then the last 5 — e.g. `07hxh-qq...gygaf`. Both ends carry signal in these ids
2802
+ * (the head is what a dispatcher scans, the tail is what disambiguates a run of
2803
+ * similar ones), which is why it isn't a plain head-truncation.
2804
+ */
2805
+ declare function abbreviateId(id: string): string;
2806
+ interface TruncatedIdTextProps {
2807
+ /** The full identifier (e.g. an Order ID). */
2808
+ id: string;
2809
+ /** Typography class, e.g. `text-label-m-semibold`. */
2810
+ className?: string;
2811
+ /** Text colour. */
2812
+ color?: string;
2813
+ /** Wrapper style — e.g. `{ maxWidth: 120 }` to cap where the id starts truncating. */
2814
+ style?: React.CSSProperties;
2815
+ }
2816
+ /**
2817
+ * An identifier that truncates with an ellipsis and, **only when it was cut
2818
+ * off**, shows the dark Small tooltip with its {@link abbreviateId} form
2819
+ * ("tgext-5t...4p1m7"). The table's Order ID cell uses it — on a wide monitor the
2820
+ * full 29-character value is longer than the Small tooltip is designed to carry,
2821
+ * and the head+tail is what identifies the order — and so does every other place
2822
+ * an Order ID is clipped (the Add Orders card caps it at 120px, 2026-10-16), so
2823
+ * the same id reads the same way everywhere. The accessible name is the whole id.
2824
+ */
2825
+ declare function TruncatedIdText({ id, className, color, style }: TruncatedIdTextProps): React.ReactElement;
2716
2826
 
2717
- 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';
2827
+ 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';
2718
2828
  type EmptyStateSize = 'mobile' | 'desktop';
2719
2829
  interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
2720
2830
  /** Preset scenario — sets the illustration + default copy. Default `no-orders`. */
@@ -3161,6 +3271,12 @@ interface MobileSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInpu
3161
3271
  declare const MobileSearchInput: React.ForwardRefExoticComponent<MobileSearchInputProps & React.RefAttributes<HTMLInputElement>>;
3162
3272
 
3163
3273
  type MapSearchState = 'idle' | 'no-history' | 'active-history' | 'empty-results' | 'active-results';
3274
+ interface MapSearchResultGroup {
3275
+ /** Group heading, e.g. "Orders" (Body/S/Medium). */
3276
+ title: string;
3277
+ /** The group's rows — `DesktopMenuOptions type="dropdown-advanced"`, 4px apart. */
3278
+ children: React.ReactNode;
3279
+ }
3164
3280
  interface MapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
3165
3281
  /** Panel state. `idle` = field only; the rest attach a results panel. Default `active-results`. */
3166
3282
  state?: MapSearchState;
@@ -3170,41 +3286,54 @@ interface MapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
3170
3286
  icon?: IconName;
3171
3287
  /** Notified when the clear (×) is clicked. Optional — the field clears itself. */
3172
3288
  onClear?: () => void;
3289
+ /** Fired on Escape anywhere in the open card — the footer's "Esc to close". */
3290
+ onClose?: () => void;
3173
3291
  /** `active-history` header title. Default "Recent Searches". */
3174
3292
  recentTitle?: string;
3175
3293
  /** `active-history` "Clear All" handler. */
3176
3294
  onClearHistory?: () => void;
3177
- /** Filter chip labels in the results Top Section. Default three "Filter"s. */
3295
+ /** Filter chip labels in the `active-results` Top Section. Default three "Filter"s. */
3178
3296
  filters?: string[];
3179
3297
  /** Index of the active filter chip. Default 0. */
3180
3298
  activeFilter?: number;
3181
- /** Results count shown in the Top Section heading ("Results (N)"). Default 5. */
3182
- resultsCount?: number;
3183
- /** Empty-results copy below the no-results illustration. */
3299
+ /** Fired with a chip's index when it is clicked. */
3300
+ onFilterChange?: (index: number) => void;
3301
+ /** `active-results`: the result groups, split by 1px demarcators. Ignored when `children` is passed. */
3302
+ groups?: MapSearchResultGroup[];
3303
+ /** `empty-results` heading. Default "No matching results". */
3304
+ noResultsTitle?: string;
3305
+ /** `empty-results` copy. Default "All results will be displayed here." */
3184
3306
  noResultsText?: string;
3185
- /** "No recent searches" copy. */
3307
+ /** `no-history` heading. Default "Search Leta". */
3308
+ noHistoryTitle?: string;
3309
+ /** `no-history` copy. Default "Find orders, trips, recipients and drivers by ID, name or plate number." */
3186
3310
  noHistoryText?: string;
3187
- /** Menu-options list — defaults to a `<Placeholder>` standing in for Desktop Menu Options `1531:5056`. */
3311
+ /**
3312
+ * The keyboard-hint footer (Footer Frame `Search Overlay`). Default true. Its
3313
+ * hints follow the state: Esc always; ↑↓ / ↵ once there are rows; Tab once
3314
+ * there are filters to switch.
3315
+ */
3316
+ showFooter?: boolean;
3317
+ /** Replaces the panel body (the recent-search list or the result groups). */
3188
3318
  children?: React.ReactNode;
3189
3319
  disabled?: boolean;
3190
3320
  }
3191
3321
  /**
3192
- * Overlay search — the `Search Input` type of Data Entry `38:42`, **Overlay** variant
3193
- * (renamed from "Web Map", 2026-10-06; the component keeps its name so imports don't
3194
- * break). Use it when search is **overlaid on top of a screen**: map interfaces with
3195
- * search, and the global search reachable from the Top Bar on any screen. Closed it is
3196
- * a 350px field; open, a 480px card on `--surface-neutral-search-field` with the
3197
- * results attached.
3198
- * The `state` prop drives the panel (Figma states):
3322
+ * Overlay search — the `Search Input` type of Data Entry `38:42`, **Overlay** variant.
3323
+ * Use it when search is **overlaid on top of a screen**: the global search reachable
3324
+ * from the Top Bar on any screen, and map interfaces with search. Closed it is a
3325
+ * 350px field; open, a 620px card (2026-10-21; was 480) with the field on
3326
+ * `--surface-neutral-search-field`, a body, and a keyboard-hint footer.
3327
+ * The `state` prop drives the body (Figma states):
3199
3328
  * - `idle` — field only.
3200
- * - `no-history` — "No recent searches" helper.
3201
- * - `active-history` — "Recent Searches" header + Clear All + a recent-search list.
3202
- * - `empty-results` — filter chips + "Results (0)" + a no-results `<EmptyState>`.
3203
- * - `active-results` — filter chips + "Results (N)" + a results list.
3204
- * The list slots default to `DesktopMenuOptions` rows; pass your own via `children`.
3205
- *
3206
- * The field shows a trailing clear (×) — always while the panel is open, and as soon
3207
- * as the closed (idle) field has text. Clicking it clears the field and fires `onClear`.
3329
+ * - `no-history` — a centred "Search Leta" prompt naming what can be searched.
3330
+ * - `active-history` — "Recent Searches" + Clear All over the recent-search rows.
3331
+ * - `empty-results` — a text-only Empty State ("No matching results").
3332
+ * - `active-results` — filter chips under the field; grouped result rows that scroll.
3333
+ *
3334
+ * The footer advertises the keys a consumer is expected to support; the component
3335
+ * handles **Esc** itself (`onClose`). Arrow-key row selection, Tab between filters
3336
+ * and Enter to open belong to the consumer, which owns the rows.
3208
3337
  */
3209
3338
  declare const MapSearchInput: React.ForwardRefExoticComponent<MapSearchInputProps & React.RefAttributes<HTMLInputElement>>;
3210
3339
 
@@ -3283,7 +3412,7 @@ interface FileUploadCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
3283
3412
  /**
3284
3413
  * A single row of the File Upload queue — the "File Upload Cards" sub-instance of
3285
3414
  * Data Entry `38:42` (`Property 1 = Uploading | Uploaded`). A `--surface-neutral-
3286
- * bg-muted` card with a leading status glyph, filename + size, a trailing Ghost
3415
+ * bg-subtle` card with a leading status glyph, filename + size, a trailing Ghost
3287
3416
  * Icon-Only remove button, and (when uploading) a `DesktopProgressIndicator`.
3288
3417
  */
3289
3418
  declare const FileUploadCard: React.ForwardRefExoticComponent<FileUploadCardProps & React.RefAttributes<HTMLDivElement>>;
@@ -3342,7 +3471,7 @@ declare const Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & Re
3342
3471
  * - `combobox` — a selectable option in a single-select list. The chosen option
3343
3472
  * gets a light highlight and a trailing checkmark.
3344
3473
  * - `dropdown-basic` — a standard menu command. Can show a trailing chevron (to
3345
- * open a submenu), a keyboard shortcut, or a small badge.
3474
+ * open a submenu), a keyboard shortcut, a small badge or a Plain button.
3346
3475
  * - `dropdown-advanced` — a richer two-line item (title + description) for results
3347
3476
  * or entities that need extra detail.
3348
3477
  * - `dropdown-destructive` — a dangerous command such as Delete, shown in red.
@@ -3384,15 +3513,21 @@ interface DesktopMenuOptionsProps extends Omit<React.HTMLAttributes<HTMLDivEleme
3384
3513
  leadingIcon?: IconName;
3385
3514
  /** Show the leading icon. */
3386
3515
  showLeadingIcon?: boolean;
3387
- /** dropdown-basic: trailing keyboard shortcut keys. */
3388
- shortcut?: string[];
3516
+ /** dropdown-basic: trailing keyboard shortcut keys (text or glyph keycaps). */
3517
+ shortcut?: ShortcutKey[];
3518
+ /**
3519
+ * dropdown-basic: a trailing **Plain button** (Medium, no icon), e.g. "Edit" —
3520
+ * the Figma row's hidden `Desktop Button` (2026-10-21). Sits after the badge,
3521
+ * before the chevron. Stop the click propagating if the row is also selectable.
3522
+ */
3523
+ trailingAction?: React.ReactNode;
3389
3524
  /** Trailing badge (dropdown-basic / sidebar / side-tab). */
3390
3525
  badge?: React.ReactNode;
3391
3526
  /**
3392
3527
  * Show the trailing chevron (dropdown-basic / dropdown-advanced → right;
3393
- * sidebar-main / side-tab → down). Default per type — `dropdown-advanced`
3394
- * defaults to `true`, so pass `false` for a row whose trailing content Figma
3395
- * switches off.
3528
+ * sidebar-main / side-tab → down). Default per type — `dropdown-basic` shows
3529
+ * it; `dropdown-advanced` does not (its Figma Trailing Content is empty by
3530
+ * default since 2026-10-21), so pass `true` for a row that opens something further.
3396
3531
  */
3397
3532
  showChevron?: boolean;
3398
3533
  /** dropdown-advanced: subtext beneath the title. */
@@ -3561,6 +3696,8 @@ interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement
3561
3696
  * selections across opens).
3562
3697
  */
3563
3698
  initialGroupSelections?: string[][];
3699
+ /** Which rail dimension shows first (`filter-group`) — a Selected Filter Control chip opens its own. Default 0. */
3700
+ initialGroupIndex?: number;
3564
3701
  /**
3565
3702
  * Fires with the full current per-group selection (index-aligned with
3566
3703
  * `groups`) whenever any checkbox toggles. These are a live/draft preview —
@@ -3570,7 +3707,12 @@ interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement
3570
3707
  onGroupSelectionChange?: (selected: string[][]) => void;
3571
3708
  /** "Show Results" clicked (`filter-group`) — the host should commit the last selection reported via `onGroupSelectionChange` and typically close the panel. */
3572
3709
  onApply?: () => void;
3573
- /** "Reset" clicked (`filter-group`) — clears every dimension's selection (both here and on the host's applied filter). */
3710
+ /**
3711
+ * "Clear all" clicked (`filter-group`) — clears the selection in **every**
3712
+ * dimension, not just the one in view. Like any change in the panel it is a
3713
+ * draft: nothing applies until Show Results (Doc 3 §9.1), so the host should
3714
+ * clear its draft here, not its applied filter.
3715
+ */
3574
3716
  onReset?: () => void;
3575
3717
  /** Disable "Show Results" (`filter-group`) — e.g. the host's live preview count is 0. */
3576
3718
  showResultsDisabled?: boolean;
@@ -3598,16 +3740,12 @@ interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement
3598
3740
  /** User Menu avatar photo URL. When set, shown in place of the monogram. */
3599
3741
  userAvatarSrc?: string;
3600
3742
  /**
3601
- * Sort fields + per-field direction labels (Figma `1050:209224`). The selected
3602
- * field's `ascLabel`/`descLabel` drive the two direction rows — e.g. a date field
3603
- * reads "Oldest to Newest / Newest to Oldest" while a numeric field reads
3604
- * "Low to High / High to Low". Defaults to Created / Duration / Last Updated.
3743
+ * Sort fields + per-field direction phrases (Figma `1050:209224`; Doc 3 §9.4).
3744
+ * The selected field's `ascLabel`/`descLabel` are the two direction rows — a date
3745
+ * reads "Newest first / Oldest first", a distance "Nearest first / Farthest
3746
+ * first". Defaults to the Deliveries fields ({@link DEFAULT_SORT_OPTIONS}).
3605
3747
  */
3606
- sortOptions?: Array<{
3607
- label: string;
3608
- ascLabel?: string;
3609
- descLabel?: string;
3610
- }>;
3748
+ sortOptions?: SortOption[];
3611
3749
  /**
3612
3750
  * Initially-selected sort field index (`sort` variant). Default 0.
3613
3751
  *
@@ -3630,6 +3768,25 @@ interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement
3630
3768
  /** Override the panel body entirely. */
3631
3769
  children?: React.ReactNode;
3632
3770
  }
3771
+ /**
3772
+ * A sort field and its **direction phrases** (Doc 3 §9.4): a "{X} first" pair
3773
+ * chosen by what the field measures — never "Low to High", "Ascending" or arrows.
3774
+ * The menu lists the pair in the table's order, so `descFirst` puts the
3775
+ * descending phrase on top (dates: "Newest first" before "Oldest first").
3776
+ */
3777
+ interface SortOption {
3778
+ label: string;
3779
+ /** The ascending phrase — "Oldest first", "Nearest first", "Lowest first". */
3780
+ ascLabel: string;
3781
+ /** The descending phrase — "Newest first", "Farthest first", "Highest first". */
3782
+ descLabel: string;
3783
+ /** List the descending phrase first (Doc 3 §9.4's pair order). */
3784
+ descFirst?: boolean;
3785
+ }
3786
+ /** The Deliveries table's sort fields (Figma `1050:209224`) with their Doc 3 §9.4 phrases. */
3787
+ declare const DEFAULT_SORT_OPTIONS: SortOption[];
3788
+ /** "Sort: {Field} ({Direction phrase})" — the labelled sort button and the icon-only sort tooltip (Doc 3 §9.3). */
3789
+ declare function sortLabelFor(option: SortOption | undefined, direction: 'asc' | 'desc'): string;
3633
3790
  /**
3634
3791
  * Desktop Dropdowns — a ready-made floating panel that appears when you open a
3635
3792
  * menu, select, filter, or picker. It's the white rounded card with a soft shadow
@@ -4383,77 +4540,162 @@ declare const LAST_UPDATED_COLUMN: TableColumn;
4383
4540
  */
4384
4541
  declare const CREATED_BY_COLUMN: TableColumn;
4385
4542
 
4386
- interface BulkActionsToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
4543
+ /** Where the toolbar sits. `page` is fixed to the viewport; the `contained-*`
4544
+ * placements are absolute inside a positioned surface (modal, expanded map). */
4545
+ type FloatingToolbarPlacement = 'page' | 'contained-top' | 'contained-bottom';
4546
+ interface FloatingToolbarCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
4547
+ /**
4548
+ * Controls presence with the enter/exit motion (opacity + an 8px rise,
4549
+ * instant under reduced motion). The toolbar stays mounted through its exit and
4550
+ * renders nothing once it has left. Omit to manage mounting yourself.
4551
+ */
4552
+ open?: boolean;
4553
+ /**
4554
+ * Apply the real placement (Figma descriptions):
4555
+ * - Actions on a page — fixed, centred, 80px above the viewport's bottom edge;
4556
+ * - Context on a page — fixed, centred, 24px above the bottom edge;
4557
+ * - `contained-top` / `contained-bottom` — absolute, centred, 16px from that edge
4558
+ * of the nearest positioned ancestor.
4559
+ * Omit to place it yourself.
4560
+ */
4561
+ placement?: FloatingToolbarPlacement;
4562
+ }
4563
+ interface FloatingToolbarActionsProps extends FloatingToolbarCommonProps {
4564
+ /** Actions Toolbar (`7973:17061`) — batch actions for selected table rows. */
4565
+ variant?: 'actions';
4387
4566
  /** Leading selection-count label. Default "10 selected". */
4388
4567
  selectionLabel?: string;
4389
- /** Fired when the selection button is clicked (typically clears the selection). */
4568
+ /** Fired when the selection control is clicked (opens selection-scope options). */
4390
4569
  onSelectionClick?: () => void;
4391
4570
  /**
4392
- * Structured weight/volume metadata shown between the selection and actions.
4393
- * Each item renders its `value` in SemiBold and `unit` in Regular, separated
4394
- * by a Regular " · ". Omit for the common case (no summary). Used only for
4395
- * weight/size metadata — never for displaying a selection count.
4571
+ * Totals for the selection, value then unit ("800 kg · 980 cases"). Values
4572
+ * render SemiBold, units Regular. Never a selection count.
4396
4573
  */
4397
4574
  summaryItems?: Array<{
4398
4575
  value: string;
4399
4576
  unit: string;
4400
4577
  }>;
4401
4578
  /**
4402
- * The action buttons (Center group). Default = two Ghost "Action" + one
4403
- * Ghost-Error "Action" (all leading ↗). Pass your own row-level action Buttons.
4404
- *
4405
- * **Use outlined icons by default.** When composing actions, pass `iconOutlined`
4406
- * to each `Button` so its glyph renders as the outlined library variant (the
4407
- * filled variant is only a fallback when no outline exists, e.g. `Proceed`).
4408
- * This keeps the toolbar visually correct across every screen it is dropped into.
4579
+ * The action buttons. Ghost leading-icon buttons with `iconOutlined`; Ghost
4580
+ * Error for destructive actions, placed last. Default = two Ghost "Action" + one
4581
+ * Ghost Error "Action".
4409
4582
  */
4410
4583
  actions?: React.ReactNode;
4411
4584
  /** Show the overflow "More" (⋯) button after the actions. Default true. */
4412
4585
  showOverflow?: boolean;
4413
- /** Fired when the overflow (More) button is clicked. */
4414
4586
  onOverflowClick?: () => void;
4415
- /** Fired when the close (✕) button is clicked. */
4587
+ /** The dismiss ✕ — clears the selection. */
4416
4588
  onClose?: () => void;
4589
+ }
4590
+ interface FloatingToolbarContextProps extends FloatingToolbarCommonProps {
4591
+ /** Context Toolbar (`11285:55268`) — a short, task-relevant message with up to two actions. */
4592
+ variant: 'context';
4593
+ /** The message — concise, direct, specific to the current context. Required. */
4594
+ message: React.ReactNode;
4595
+ /** Optional leading icon (18px, `Icons/secondary/default`). Default `Info`; `null` hides it. */
4596
+ leadingIcon?: IconName | null;
4597
+ /** Draw the leading icon's outlined glyph. Default false (Figma swaps filled glyphs). */
4598
+ leadingIconOutlined?: boolean;
4417
4599
  /**
4418
- * Apply the real placement — `position: fixed`, centered, 80px from the
4419
- * viewport bottom (per the Figma annotation). Default false (consumer owns
4420
- * placement, like Toast).
4600
+ * The primary action — a Primary / Small button (a split button works too).
4601
+ * The divider shows only when there is an action or a dismiss.
4421
4602
  */
4422
- fixed?: boolean;
4603
+ action?: React.ReactNode;
4604
+ /** Label for the optional dismiss action (Plain / Small, no underline). Default "Close". */
4605
+ dismissLabel?: string;
4606
+ /** Shows the dismiss action and fires when it is pressed. */
4607
+ onDismiss?: () => void;
4423
4608
  }
4609
+ type FloatingToolbarProps = FloatingToolbarActionsProps | FloatingToolbarContextProps;
4424
4610
  /**
4425
- * Bulk Actions Toolbar — the floating action bar that appears when rows are
4426
- * selected in a table. A centered white pill grouping the selection control (+
4427
- * optional summary), the available bulk actions (with a "More" overflow), and a
4428
- * close control, separated by vertical dividers. Per the design it is fixed to
4429
- * the viewport 80px from the bottom, centered, capped at 800px, in a single
4430
- * non-wrapping row — pass `fixed` to apply that placement, or place it yourself.
4431
- *
4432
- * The selection control is a Ghost button with a **trailing `Chevron-Down`**
4433
- * ("10 selected ⌄") — a dropdown affordance for selection-scope options — not a
4434
- * leading checkbox.
4435
- *
4436
- * **Icon convention — outlined by default.** Every icon-bearing Button in this
4437
- * toolbar (the default actions, and any `actions` you supply) should pass
4438
- * `iconOutlined` so glyphs render as the outlined library variant; the filled
4439
- * variant is only a fallback for glyphs with no outline (e.g. `Proceed`, `More`,
4440
- * `Cancel`). This guarantees the toolbar renders correctly on every screen.
4441
- *
4442
- * **When to use:** acting on a multi-row selection in a `Table`.
4443
- * **When not to use:** a single row's actions (the row's `actions` cell); page-level
4444
- * primary actions (Table Data Control CTAs); transient feedback (Toast).
4611
+ * **Floating Toolbar** (`11285:55267`) — a compact toolbar that floats above the
4612
+ * page in the **inverse theme**: the Dark Theme on a light page, the Light Theme
4613
+ * on a dark one, so it stands out on a busy surface. Everything inside follows the
4614
+ * toolbar's theme, not the page's.
4615
+ *
4616
+ * - **`variant="actions"`** — the Actions Toolbar: appears when table rows are
4617
+ * selected and offers the actions that apply to the whole selection ("10
4618
+ * selected ⌄" · summary | actions + More | ✕). Hugs its content up to 800px.
4619
+ * Replaces `BulkActionsToolbar` (removed in 0.5.0).
4620
+ * - **`variant="context"`** — the Context Toolbar: a brief, task-relevant message
4621
+ * with up to two actions (an optional dismiss + a primary action). Max 512px,
4622
+ * fills narrower surfaces. On a page it sits 24px above the viewport's bottom;
4623
+ * in a modal or other contained surface, 16px from its top or bottom.
4624
+ *
4625
+ * **How the inverse theme is drawn.** The shadow belongs to the page it falls on,
4626
+ * so an outer layer casts `--shadow-neutral-2` in the *surrounding* theme, and an
4627
+ * inner layer carries `data-theme` (the inverse) with the surface, border and
4628
+ * content. Tooltips portal to `<body>` and so read the page's theme.
4629
+ *
4630
+ * **When to use:** batch actions on selected rows (actions); a status, guidance or
4631
+ * a next step that mustn't interrupt the task (context) — e.g. "You have unsaved
4632
+ * changes." on Settings, or an order's state on its expanded map.
4633
+ * **When not to use:** a long explanation or several actions (Notification Banner);
4634
+ * transient confirmation of something that just happened (Toast); a single row's
4635
+ * actions (the row's Actions cell).
4445
4636
  */
4446
- declare const BulkActionsToolbar: React.ForwardRefExoticComponent<BulkActionsToolbarProps & React.RefAttributes<HTMLDivElement>>;
4637
+ declare const FloatingToolbar: React.ForwardRefExoticComponent<FloatingToolbarProps & React.RefAttributes<HTMLDivElement>>;
4447
4638
 
4639
+ /** One filter narrowing the table, as a chip. */
4640
+ interface SelectedFilterChip {
4641
+ /** Stable key — the dimension ("Depot") or "sla". */
4642
+ id: string;
4643
+ /** "Driver: Michael Muriuki" · "Depot: Arc Kitisuru, +2" · "Delayed". */
4644
+ label: string;
4645
+ /** The dimension's icon (Depot `Depot`, Recipient `User`, Driver `Motorcycle`, Created By `Open-Box`), or the SLA icon. */
4646
+ icon?: IconName;
4647
+ /** Leading icon colour — the SLA chip draws its icon in its SLA colour. */
4648
+ iconColor?: string;
4649
+ /** Clicking the label opens this dimension's filter. Omit for a chip with nothing to open (the SLA chip). */
4650
+ onOpen?: () => void;
4651
+ /** The ✕ — removes this filter entirely. */
4652
+ onRemove: () => void;
4653
+ /** The ✕'s screen-reader label — "Remove Driver filter". */
4654
+ removeLabel: string;
4655
+ }
4656
+ interface SelectedFilterControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
4657
+ /** The chips, in display order: the SLA chip first, then attribute filters in the filter rail's order. */
4658
+ chips: SelectedFilterChip[];
4659
+ /** Clear Filters — removes every filter the row covers (set-aside ones included). Never touches date, search, statuses or sort. */
4660
+ onClearAll: () => void;
4661
+ }
4448
4662
  /**
4449
- * - `search-create` — search + filter buttons (Created / Filter / Sort By) on the
4450
- * left, primary CTAs (Create Order / Import-Export) on the right.
4451
- * - `search-column` — the same search + filters, with a data count + an
4452
- * Auto-refresh switch + Columns control on the right.
4663
+ * **Selected Filter Control** — Library Table Data Control › `Type=Selected Filter
4664
+ * Control` (`11262:51088`); Doc 3 §9.2.
4665
+ *
4666
+ * A one-line row between a table's group buttons and the table: a chip per filter
4667
+ * narrowing the table, and **Clear Filters** pinned right. (The leading "Filtered
4668
+ * by:" label was removed from the Library on 2026-10-18 — the chips start the row;
4669
+ * assistive tech still hears the group as "Applied filters".) It
4670
+ * shows only what has no other home — attribute filters and the SLA shortcut; the
4671
+ * status selection, date, search and sort each show their own state.
4672
+ *
4673
+ * - **No chips → renders nothing** (it takes no space).
4674
+ * - **One line.** Overflowing chips scroll sideways; the edge they disappear under
4675
+ * fades (Scroll Edges, via `useScrollEdges`), and Clear Filters never scrolls.
4676
+ * - **A chip's label opens its dimension** (`onOpen`); its **✕ removes** it, with
4677
+ * its own screen-reader label.
4678
+ *
4679
+ * Layout per the Library: row height 28, the leading group fills, a 64px gap to the
4680
+ * trailing Plain / Medium / leading-✕ "Clear Filters" button. Tables only — modals
4681
+ * keep their own pill row and show state on their icon buttons (Doc 3 §9.3).
4682
+ */
4683
+ declare const SelectedFilterControl: React.ForwardRefExoticComponent<SelectedFilterControlProps & React.RefAttributes<HTMLDivElement>>;
4684
+
4685
+ /**
4686
+ * The Library's six `Type`s (`7575:36637`, 2026-10-15):
4687
+ * - `search-create` — search, the Created pill, an icon-only Filter and a
4688
+ * **labelled Sort** on the left; Create Order / Import-Export on the right.
4689
+ * - `search-column` — the same left side, with a data count + an Auto-refresh
4690
+ * switch + Columns control on the right.
4453
4691
  * - `filters-column` — a Top Filter Section on the left, data count +
4454
4692
  * Auto-refresh switch + Columns on the right.
4693
+ * - `selected-filters` — the Selected Filter Control row (Doc 3 §9.2).
4694
+ * - `search-compact` — Search + Column Control (Compact-Default / Compact-Active):
4695
+ * for modals and drawers, never tables. Search fills; Filter and Sort stay
4696
+ * icon-only and carry their state as a count badge and a dot (Doc 3 §9.3).
4455
4697
  */
4456
- type TableDataControlVariant = 'search-create' | 'search-column' | 'filters-column';
4698
+ type TableDataControlVariant = 'search-create' | 'search-column' | 'filters-column' | 'selected-filters' | 'search-compact';
4457
4699
  interface TableDataControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
4458
4700
  /** Which toolbar layout to render. Default `search-create`. */
4459
4701
  variant?: TableDataControlVariant;
@@ -4469,14 +4711,28 @@ interface TableDataControlProps extends Omit<React.HTMLAttributes<HTMLDivElement
4469
4711
  */
4470
4712
  showColumnControl?: boolean;
4471
4713
  /**
4472
- * Number of active filter rules currently applied. When > 0, a Coral Red (Alt)
4473
- * count badge is overlaid at the top-right corner of the Filter icon button.
4474
- * Filter and Sort are always icon-only buttons in both base and active states.
4475
- * Mirrors the Figma `search-create` / `search-column` variants and their
4476
- * "Active Filter" counterparts (Figma nodes `10697:60514` / `10697:60683`).
4477
- * Default 0 (no active filters).
4714
+ * **`search-compact` only:** the total number of selected filter values across
4715
+ * every dimension (two depots + one recipient = 3) — drawn as the Filter button's
4716
+ * Coral Red (Alt) count badge and named in its label ("Filter, 3 applied").
4717
+ * Doc 3 §9.3. The table variants **never** badge (the Library removed the Active
4718
+ * variants, 2026-10-15): a table shows its filters in the Selected Filter Control.
4478
4719
  */
4479
4720
  filterCount?: number;
4721
+ /**
4722
+ * The current sort in Doc 3 §9.3's syntax — "Sort: Created (Newest first)".
4723
+ * Table variants render it as the **labelled** Sort button (leading Sort icon);
4724
+ * `search-compact` uses it as the icon-only Sort button's tooltip.
4725
+ * Default "Sort: Created (Newest first)" on the table variants, "Sort" compact.
4726
+ */
4727
+ sortLabel?: string;
4728
+ /** `search-compact`: the sort isn't the surface's default — draws the Sort button's dot. */
4729
+ sortChanged?: boolean;
4730
+ /** `search-compact`: show the Filter button (a modal with no filter hides it). Default true. */
4731
+ showFilter?: boolean;
4732
+ /** `selected-filters`: the chips (Doc 3 §9.2). With none, the row renders nothing. */
4733
+ selectedFilters?: SelectedFilterChip[];
4734
+ /** `selected-filters`: Clear Filters. */
4735
+ onClearFilters?: () => void;
4480
4736
  /** Left section for the search variants — overrides the default search + filter buttons. */
4481
4737
  searchSection?: React.ReactNode;
4482
4738
  /** Left section for `filters-column` — overrides the default Top Filter Section. */
@@ -4503,8 +4759,9 @@ interface TableDataControlProps extends Omit<React.HTMLAttributes<HTMLDivElement
4503
4759
  /** Label for the Created date-filter button. Default "Created: Today". */
4504
4760
  createdLabel?: string;
4505
4761
  onCreatedClick?: () => void;
4506
- onFilterClick?: () => void;
4507
- onSortClick?: () => void;
4762
+ /** Receives the click so a host can anchor its dropdown on the button. */
4763
+ onFilterClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
4764
+ onSortClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
4508
4765
  onAddOrderClick?: () => void;
4509
4766
  onImportExportClick?: () => void;
4510
4767
  onColumnsClick?: () => void;
@@ -5035,6 +5292,22 @@ interface ScrollEdges {
5035
5292
  */
5036
5293
  declare function useScrollEdges(containerRef: React.RefObject<HTMLElement | null>): ScrollEdges;
5037
5294
 
5295
+ type SurroundingTheme = 'light' | 'dark';
5296
+ /**
5297
+ * The theme an element sits in — the nearest `data-theme` above it, falling back
5298
+ * to `<html>` and then to light. Re-reads whenever any `data-theme` attribute in
5299
+ * the document changes, so a theme switch (or a Storybook decorator flipping its
5300
+ * container) reaches components that are already mounted.
5301
+ *
5302
+ * Exists for **inverse surfaces** (Floating Toolbar, 2026-10-18): a surface that
5303
+ * must stand out against the page renders the *other* theme — Dark Theme on a
5304
+ * light page, Light Theme on a dark one. It reads the surroundings from its own
5305
+ * parent, never from itself, so its own `data-theme` can't feed back into it.
5306
+ */
5307
+ declare function useSurroundingTheme(ref: React.RefObject<HTMLElement | null>): SurroundingTheme;
5308
+ /** The opposite theme — what an inverse surface renders. */
5309
+ declare function inverseTheme(theme: SurroundingTheme): SurroundingTheme;
5310
+
5038
5311
  /**
5039
5312
  * Arrow-key navigation for a menu, applied to the container that holds its rows.
5040
5313
  *
@@ -5173,4 +5446,4 @@ interface ExtraLargeModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>
5173
5446
  */
5174
5447
  declare const ExtraLargeModal: React.ForwardRefExoticComponent<ExtraLargeModalProps & React.RefAttributes<HTMLDivElement>>;
5175
5448
 
5176
- 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, BulkActionsToolbar, type BulkActionsToolbarProps, 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, ConfigurationCardRow, type ConfigurationCardRowProps, type ConfigurationCardVariant, ContentCard, type ContentCardProps, ContentPrimitives, type ContentPrimitivesProps, type ContentPrimitivesType, 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, 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, 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, SelectionControl, type SelectionControlProps, type SelectionControlVariant, Shortcut, type ShortcutProps, SideBar, type SideBarGroup, type SideBarItem, type SideBarProps, type SideBarVariant, Sidetab, type SidetabItem, type SidetabProps, Skeleton, type SkeletonProps, StackedCards, type StackedCardsProps, Stepper, StepperInput, type StepperInputProps, type StepperProps, type StepperVariant, 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, TruncatedText, type TruncatedTextProps, UNASSIGNED_ORDER_COLUMNS, UserMenu, type UserMenuProps, type UserMenuState, ViewSwitcherTab, type ViewSwitcherTabProps, WizardTab, type WizardTabProps, animateScrollTop, computeTooltipPosition, downloadFile, htmlToPlainText, sanitizeRichText, useAccordion, useEscapeLayer, useRovingFocus, useScrollEdges, useScrollShadow };
5449
+ 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 };