@mortenbrudvik/waveui 0.15.0 → 0.17.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ClassValue } from 'clsx';
+import { CSSProperties } from 'react';
 import { FC } from 'react';
 import { JSX } from 'react';
 import { JSXElementConstructor } from 'react';
@@ -713,6 +714,33 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanEleme
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/**
+ * A full brand ramp: a hex colour (`#rgb` or `#rrggbb`) for each of the 16 stops, darkest first.
+ * The shape of Fluent's `BrandVariants`, which `createLightTheme(brand)` and
+ * `createDarkTheme(brand)` take. The themes read the light primary from stop 80 (hover 70, pressed
+ * 40, focus ring 80), the light selection from stops 160, 150 and 140 with its text at 60, the
+ * dark primary from stop 110 (hover 120, pressed 90, focus ring 100) and the dark selection from
+ * stops 20, 40 and 10 with its text at 110. A ramp whose stops have the luminance of the default
+ * ramp's keeps the contrast of the light and dark themes; the high-contrast theme reads no stop.
+ */
+export declare type BrandRamp = Readonly<Record<BrandStop, string>>;
+
+/**
+ * A stop of the brand ramp, from 10 (the darkest) to 160 (the lightest) in steps of 10: the stops
+ * of Fluent's `BrandVariants` and of the `--wave-brand-N` tokens.
+ */
+export declare type BrandStop = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160;
+
+/**
+ * The 16 brand tokens, `brand10` to `brand160`: the overrides of `--wave-brand-10` to
+ * `--wave-brand-160`, in the shape `WaveProvider tokens` and `getTokenStyle` take. Where Fluent's
+ * `createLightTheme(brand)` builds a whole theme from a `BrandVariants` ramp, Wave applies the
+ * ramp as these tokens over its named themes; the high-contrast theme reads none of them.
+ */
+export declare type BrandTokens = {
+    [K in `brand${BrandStop}`]: string;
+};
+
 /**
  * A breadcrumb trail: a `<nav aria-label="Breadcrumb">` landmark with an ordered list. Each child
  * is placed in its own list item (Fragments are opened, so each of their items gets one too); from
@@ -1886,6 +1914,25 @@ export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivEle
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/**
+ * The 12 palette fills as token names, in the order a categorical chart gives them to its series.
+ * The order keeps neighbouring series as far apart as the palette allows, for colour vision and
+ * for hue: in the light and dark themes, every two neighbours (the first and second, the second
+ * and third, up to the eleventh and twelfth) differ by at least 6.3 (OKLab ΔE ×100) under
+ * simulated protanopia, deuteranopia and tritanopia and by at least 15.7 for full colour vision,
+ * and their hues are at least 49° apart. The first six are the six fills that stay furthest apart
+ * as a set, yet no six fills of the palette keep every pair apart for colour-vision deficiencies:
+ * two series that are not neighbours can differ by only about 3.2 among the first six, and by
+ * less further on. So colour never identifies a series on its own: every chart needs a second
+ * encoding (a pattern, a marker shape or a direct label), whatever its number of series, and in
+ * high contrast every palette fill is white. Read each colour through `waveTokens`
+ * (`waveTokens[chartPalette[index]]`), so the series follow the theme. Frozen and server-safe.
+ *
+ * @example
+ * const color = waveTokens[chartPalette[index % chartPalette.length]];
+ */
+export declare const chartPalette: readonly WaveTokenName[];
+
 /**
  * A checkbox for a boolean (or mixed) choice, drawn as a `role="checkbox"` button inside a
  * `<label>`.
@@ -2051,6 +2098,9 @@ export declare interface CheckedValuesChangeDetails {
  */
 export declare type CheckedValuesChangeHandler = (checkedValues: Record<string, string[]>, details?: CheckedValuesChangeDetails) => void;
 
+/** The check state of an item in a `selectionMode="multiple"` tree. */
+export declare type CheckState = 'checked' | 'mixed' | 'unchecked';
+
 /**
  * Joins class names (clsx) and resolves Tailwind conflicts so the **last** class wins — pass
  * internal classes first and the consumer's `className` last.
@@ -2639,6 +2689,26 @@ export declare interface ColorSwatchProps extends Omit<React_2.ButtonHTMLAttribu
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/** The sizing of one column of a table with resizable columns. */
+export declare interface ColumnSizingOption {
+    /**
+     * The narrowest the column can be, in pixels: the initial width and every resize are held at or
+     * above it.
+     * @default 80
+     */
+    minWidth?: number;
+    /**
+     * The width the column starts at when it has no `defaultWidth`, in pixels.
+     * @default 150
+     */
+    idealWidth?: number;
+    /**
+     * The width the column starts at, in pixels. It wins over `idealWidth`.
+     * @default idealWidth, else 150
+     */
+    defaultWidth?: number;
+}
+
 /**
  * An editable combobox: a text input with a filterable listbox of `Option`s (APG combobox with
  * list autocomplete). Typing filters the options; ArrowDown/ArrowUp move the highlight
@@ -2668,6 +2738,15 @@ export declare interface ColorSwatchProps extends Omit<React_2.ButtonHTMLAttribu
  * the value. `freeform` is not available with `multiselect`, and a non-literal
  * `multiselect={flag}` is a type error: render two elements, one for each mode.
  *
+ * **Data mode**: `items` passes the options as data instead of children. The open list renders an
+ * option per matching item (`renderOption` draws it, an `Option` with the item's label by
+ * default) and the closed list none; the keys, the filter and the input's text follow the data,
+ * and each option carries `aria-posinset` and `aria-setsize` among the shown options. A long list
+ * takes a `virtualWindow` (from `useVirtualWindow({ itemSize })`): the open list then renders only
+ * the options in view, plus an overscan, with spacers for the others, every option `itemSize`
+ * tall; the active option stays rendered, and opening scrolls it (else the first selected option)
+ * to the middle of the list.
+ *
  * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,
  * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,
  * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,
@@ -2694,7 +2773,8 @@ export declare const Combobox: ComboboxComponent;
  * Combobox: `root` on the outer element; `input` on the `role="combobox"` input; `clearButton` on
  * the clear button; `expandButton` on the expand button and `expandIcon` on its glyph; `listbox`
  * on the `role="listbox"` list; `surface` on its portaled popup; `emptyMessage` on the
- * "No matches" row.
+ * "No matches" row; `spacer` on each spacer element of the list with a `virtualWindow` (the
+ * elements that stand in for the options that are not rendered).
  */
 export declare const comboboxClassNames: {
     readonly root: "wave-combobox";
@@ -2705,6 +2785,7 @@ export declare const comboboxClassNames: {
     readonly listbox: "wave-combobox__listbox";
     readonly surface: "wave-combobox__surface";
     readonly emptyMessage: "wave-combobox__empty-message";
+    readonly spacer: "wave-combobox__spacer";
 };
 
 /** The Combobox component's type: a multi-select signature, then the single-select one. */
@@ -2857,8 +2938,9 @@ export declare interface ComboboxProps<M extends boolean = false> extends Omit<R
      * keep options that do not contain the text: `filter={() => true}` with `query` and
      * `onQueryChange` leaves the matching to you (a server-side search that replaces the options),
      * and a filter that always keeps an option of your own gives a "Create …" entry. With a
-     * server-side search, keep the selected option among the children, `hidden` while the results
-     * leave it out: a value without an option shows no label (the "Async search" story does this).
+     * server-side search, keep the selected option among the children (or `items`), `hidden` while
+     * the results leave it out: a value without an option shows no label (the "Async search" story
+     * does this).
      * @default a case-insensitive substring match on the option's `textValue`, else its `label`
      */
     filter?: (option: ListboxItem, query: string) => boolean;
@@ -2952,6 +3034,51 @@ export declare interface ComboboxProps<M extends boolean = false> extends Omit<R
      * Unset members keep their English defaults.
      */
     labels?: ComboboxLabels;
+    /**
+     * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,
+     * `disabled` and `hidden`; values unique). The open list renders one option per item that is
+     * not `hidden` and that the typed text matches (`filter`, on `textValue ?? label` by default; see
+     * `renderOption`); the closed list renders none. The keys, the selection and the input's label
+     * text follow `items`, also for a selected item whose option is not rendered. The children are
+     * neither read nor rendered: passing both warns once in development. Each option gets
+     * `aria-posinset` and `aria-setsize` from its place among the shown items (typing narrows
+     * them), and keeps one id per value. Without it, the options are the `Option` children.
+     */
+    items?: readonly ListboxItem[];
+    /**
+     * Data mode: renders the option of an item, given its state (`selected`, `active`, and `index`
+     * among the shown options). Return an `Option`, or an option component of your own on
+     * `useListboxOption`, with the item's `value` (and its `disabled`); its position is set for you,
+     * and in a windowed list (`virtualWindow`) its height. It is called again only when the item, its
+     * state, its position (`aria-posinset` and `aria-setsize`, which typing changes) or the function
+     * itself changes, so pass a stable function in a long list. Ignored without `items`, with a
+     * development warning.
+     * @default an `Option` with the item's `value`, `label` (also its text), `textValue` and `disabled`
+     */
+    renderOption?: (item: ListboxItem, state: ListboxOptionRenderState) => React_2.ReactNode;
+    /**
+     * Data mode: renders only the options in view of a long list, plus an overscan, and spacers
+     * (`aria-hidden`, `data-virtual-spacer`) as tall as the options they stand for: pass the result
+     * of `useVirtualWindow({ itemSize })`, or an object of your own that implements `VirtualWindow`.
+     * It needs `items`: without them, or beside `OptionGroup` children, it is ignored with a
+     * development warning (a window renders a flat list).
+     *
+     * The open popup's list is the window's scroller, so it needs no height of yours: it scrolls
+     * within its own maximum height (15rem, 240 pixels at the default root size, less where the
+     * viewport has no room). Every option is exactly `itemSize` tall (the list sets its height,
+     * after the option's own `style`), so an option's content must fit in it: the default `Option`
+     * with one line of text is 32 pixels tall.
+     *
+     * The window counts the shown options: typing narrows it, as it narrows `aria-setsize`. The
+     * arrow keys move over all of them; the active option stays rendered while it is scrolled away,
+     * so `aria-activedescendant` always names an element, and when a key (or typing) makes it
+     * active the list and the window move to it in the same update. Opening the list scrolls the
+     * active option, else the first selected one, to the middle of the list, and again once the
+     * popup's positioning has given the list its height (a short viewport) unless it was scrolled
+     * first. A closed list renders no option. The browser's scroll anchoring is off on a windowed
+     * list (the window lays the options out).
+     */
+    virtualWindow?: VirtualWindow;
     /**
      * Called when the `<input role="combobox">` receives focus (the root keeps other handlers).
      * With `multiselect`, a focus while the input shows the selected labels then selects them;
@@ -3159,6 +3286,48 @@ export declare interface CounterBadgeProps extends React_2.HTMLAttributes<HTMLSp
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/**
+ * The brand tokens of a brand colour or of a full ramp, to pass as `WaveProvider tokens` (alone or
+ * spread with other overrides) or to `getTokenStyle`. Wave's counterpart of Fluent's
+ * `createLightTheme(brand)` and `createDarkTheme(brand)`, which take a full `BrandVariants` ramp;
+ * Wave also builds the ramp from one colour. The high-contrast theme ignores the brand: its colours
+ * are fixed.
+ *
+ * From a seed (`#rgb` or `#rrggbb`, any case, with the `#`), each stop keeps the **luminance of the
+ * default ramp's stop** and takes its hue and colourfulness from the seed: the seed's OKLCH chroma
+ * and hue, shaped per stop like the default ramp (less colourful toward both ends, the hue
+ * drifting a few degrees as the default's does), reduced where the colour would leave sRGB, and
+ * rounded to a neighbouring 8-bit colour on the side that keeps its contrast. Contrast depends
+ * only on luminance, so every text, fill, stroke and focus-ring pair of the light and dark themes
+ * keeps, to within 8-bit rounding, the contrast it has with the default ramp, and stays above the
+ * floor the themes are held to (4.5:1 for text, 3:1 for strokes, graphics and focus rings, 1.15:1
+ * between the states of a fill), whatever the seed. The cost: the seed sets hue and
+ * colourfulness, not lightness, so the primary fill (stop 80) is the seed's hue at the default's
+ * lightness, and a light seed gives a darker button than itself. For a brand whose exact colours
+ * matter, pass a full `BrandRamp`. The default seed `#0f6cbd` gives the default ramp, and a grey
+ * seed (black, white or any grey) a grey ramp.
+ *
+ * A full `BrandRamp` is returned as tokens with its colours unchanged; a stop that is missing or
+ * not a hex colour takes the default ramp's colour, with a development warning. In development the
+ * ramp is also checked against the pairs the light and dark themes read from it (the primary
+ * colour as text and as a fill under its text, the hover and pressed fills, the selection fills
+ * and their text, the focus ring): each pair below its minimum (4.5:1 for text, 3:1 for the focus
+ * ring, 1.15:1 between the states of a fill) logs one warning naming the theme, the tokens, the
+ * stops and the ratio. The check is advisory: the ramp applies as given. Any other seed returns
+ * the default ramp, with a development warning.
+ *
+ * Pure and server-safe; it returns a new object on each call, so compute it once (at module scope,
+ * or memoised) rather than on every render.
+ *
+ * @example
+ * const brand = createBrandTokens('#c43e00');
+ * <WaveProvider tokens={brand}>…</WaveProvider>
+ *
+ * @example
+ * <WaveProvider tokens={{ ...createBrandTokens('#c43e00'), fontFamily: 'Inter, sans-serif' }}>
+ */
+export declare function createBrandTokens(seed: string | BrandRamp): BrandTokens;
+
 /**
  * Creates a column for DataGrid's `columns`, typed by the grid's items, with `sortable` resolved
  * (`true` when the column has `compare`, unless `sortable` says otherwise). Returns a new object
@@ -3239,6 +3408,29 @@ export declare function createToaster(): ToasterHandle;
  * itself, and `DataGrid.Body` also takes a render function that returns each item's row. Rows
  * rendered from `items` take their `rowId` from `getRowId` (by default the item's index).
  *
+ * With `items`, selection follows the data rather than the rendered rows: select-all and its
+ * checkbox cover every item (`isSelectionDisabled` leaves items out), and ids of rows that are
+ * filtered out, on another page or not rendered stay selected through row clicks, select-all and
+ * sorting, and are reported by `onSelectedItemsChange`.
+ *
+ * With `items` and `columns`, the columns can be sized: `resizableColumns` gives each column
+ * header a resize handle (a separator that a pointer drags and the arrow keys move, mirrored in
+ * right-to-left grids; F2 on a column header moves focus to it, and Enter, Space or Escape back),
+ * `columnSizingOptions` sets each column's initial and minimum width, and `columnWidths` or
+ * `defaultColumnWidths` with `onColumnWidthsChange(widths, details)` hold the widths, for
+ * instance to persist them (Fluent's `resizableColumns`, `columnSizingOptions` and
+ * `onColumnResize`, whose data is in `details`). The grid then lays its columns out from the
+ * widths and truncates its cells' text.
+ *
+ * With `items` and `columns`, a `virtualWindow` (from `useVirtualWindow`) renders only the rows in
+ * view of a long list, with spacer rows for the others: the scroll wrapper (`containerProps`)
+ * needs a bounded height, and every row has the window's fixed row height. The header stays at
+ * the top of the wrapper, the keyboard moves by the data (a row that is not rendered is scrolled
+ * in before it gets focus), the focused row stays rendered, and selection, select-all, sorting
+ * and column sizing still cover every item. The grid then carries `aria-rowcount` and its rows
+ * `aria-rowindex`, so assistive technology reads each row's place in the whole list. Fluent's
+ * DataGrid has no built-in counterpart.
+ *
  * Sub-components are available as `DataGrid.Header`, `DataGrid.HeaderCell`, `DataGrid.Body`,
  * `DataGrid.Row`, `DataGrid.Cell` and `DataGrid.SelectionCell` in client components, and as the
  * flat exports `DataGridHeader`, `DataGridHeaderCell`, `DataGridBody`, `DataGridRow`,
@@ -3250,7 +3442,7 @@ export declare const DataGrid: typeof DataGridRoot & {
         displayName: string;
     };
     HeaderCell: {
-        ({ columnId, sortable, sortIcon, children, className, onClick, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
+        ({ columnId, sortable, sortIcon, children, className, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
         displayName: string;
     };
     Body: {
@@ -3258,7 +3450,7 @@ export declare const DataGrid: typeof DataGridRoot & {
         displayName: string;
     };
     Row: {
-        ({ rowId: rowIdProp, selectionLabel, selectionCellProps, children, className, onClick, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
+        ({ rowId: rowIdProp, selectionLabel, selectionCellProps, children, className, style, onClick, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
         displayName: string;
     };
     Cell: {
@@ -3275,10 +3467,28 @@ export declare const DataGrid: typeof DataGridRoot & {
 export declare interface DataGridBaseProps<T = unknown> extends React_2.HTMLAttributes<HTMLTableElement> {
     /**
      * The row id of an item: the `rowId` of its row (for selection), for rows rendered from `items`.
-     * A row's own `rowId` wins. Ids must be unique (a duplicate warns in development).
+     * Select-all and its checkbox use these ids, whether the rows are rendered or not. A row's own
+     * `rowId` wins for that row, but a row whose own id differs from its item's id is outside
+     * select-all and its state, and select-all selects the item's id, which no row has (a
+     * development warning says so): return the rows' ids here rather than setting `rowId`. Ids must
+     * be unique (a duplicate warns in development). Define it outside the component, or memoise it:
+     * a new function rebuilds the row of every item and the set of ids select-all works on (with a
+     * `virtualWindow`, the component that holds the window renders at every row the view enters).
      * @default the item's index in `items`, as a string
      */
     getRowId?: (item: T) => string;
+    /**
+     * Whether the selection of an item of `items` is disabled (`index` is its index in `items`), so
+     * select-all can skip items whose rows are not rendered. Select-all leaves such an item as it is,
+     * selected or not, and its state counts only the other items. The item's row takes it as the
+     * `disabled` of its selection cell (a disabled control; neither a row click nor Space changes
+     * it), unless the cell sets `disabled` itself: the cell's value then applies to the control, a
+     * value that disagrees warns in development, and select-all skips a row that either disables.
+     * Without it, every item is selectable unless its rendered row disables its selection cell.
+     * Ignored without `items`. Called for every item whenever `items`, `getRowId` or this function
+     * change: define it outside the component, or memoise it.
+     */
+    isSelectionDisabled?: (item: T, index: number) => boolean;
     /**
      * Column definitions. When given and no `DataGrid.Header` child is present, the header row
      * (including the selection column) is rendered from them: `columnId` becomes the header cell's
@@ -3289,6 +3499,87 @@ export declare interface DataGridBaseProps<T = unknown> extends React_2.HTMLAttr
      * memoised).
      */
     columns?: readonly DataGridColumn<T>[];
+    /**
+     * Gives the header cell of each column (of `columns`, by `columnId`; the last one included, the
+     * selection column not) a resize handle: a focusable `role="separator"` with the column's width
+     * as `aria-valuenow`. A drag (mouse, touch or pen) moves the column's end edge, mirrored in
+     * right-to-left grids. From the keyboard, F2 on a header cell (or on its sort button) moves focus
+     * to its handle, which adds no Tab stop to the grid; there the arrow keys move the edge by 20
+     * pixels (5 with Shift, mirrored in right-to-left grids), Home sets the minimum width, and Enter,
+     * Space or Escape return focus to the header (its sort button, which Enter still activates
+     * directly). A double click sets the column back to its initial width once a width is state.
+     * The grid carries `data-resizing` while a handle drags. Needs `columns` and `items`, as every
+     * column width prop does: without them they are all ignored, with a development warning.
+     * Fluent's `resizableColumns`.
+     * @default false
+     */
+    resizableColumns?: boolean;
+    /**
+     * The sizing of each column, by `columnId`: `minWidth` (`@default 80`), and the width it starts
+     * at, `defaultWidth`, else `idealWidth`, else 150 (never below `minWidth`). With it, or with
+     * `columnWidths` or `defaultColumnWidths`, the grid lays its columns out from these widths
+     * (a `<colgroup>` and a fixed table layout) with or without `resizableColumns`, and its cells
+     * truncate their text with an ellipsis unless a cell's class says otherwise. Until a width is
+     * state the grid is 100% wide and at least as wide as its columns, so a wider container spreads
+     * them (the selection column too); the first change takes the widths the columns are drawn at,
+     * so nothing jumps, and from then on the grid is exactly as wide as its columns (slack shows
+     * after the last one). There is no maximum width and no fitting to the container. Ids that are
+     * not columns are ignored; it may be written inline. Fluent's `columnSizingOptions`.
+     */
+    columnSizingOptions?: Record<string, ColumnSizingOption>;
+    /**
+     * The column widths in pixels (controlled), by `columnId`; a column without an entry has its
+     * initial width (see `columnSizingOptions`), and a width below the column's minimum is held at
+     * it. The grid is exactly as wide as its columns. Pair it with `onColumnWidthsChange`; a parent
+     * that ignores a change leaves the column where it is.
+     */
+    columnWidths?: Record<string, number>;
+    /** The column widths in pixels at first render (uncontrolled; see `columnWidths`). */
+    defaultColumnWidths?: Record<string, number>;
+    /**
+     * Called with the width of every column (by `columnId`) whenever a width changes, at every step
+     * of a drag (at most once per animation frame) or key press, then `details`: `{ columnId,
+     * width, event }`, the resized column, its new width and the event behind it. The grid always
+     * passes `details`; it is typed optional through 0.x, as every `details` argument. Setting the
+     * width a column already has does not call it once a width is state. Fluent's `onColumnResize`,
+     * whose data is in `details`.
+     */
+    onColumnWidthsChange?: (widths: Record<string, number>, details?: TableColumnWidthsChangeDetails) => void;
+    /**
+     * Renders only the body rows in view, plus an overscan, of a grid with many `items`: pass the
+     * result of `useVirtualWindow({ itemSize })` (or an object of your own that implements
+     * `VirtualWindow`). The rows that are not rendered are replaced by spacer rows (`aria-hidden`,
+     * `data-virtual-spacer`) of their height. Fluent has no counterpart in its DataGrid.
+     *
+     * The grid's scroll wrapper (the element of `containerProps`) becomes the window's scroller, so
+     * give it a bounded height, a height or a maximum height in `containerProps`: without one the
+     * window measures the whole list and renders every row (a development warning says so). Every
+     * row has the window's `itemSize` as its height: the grid sets it on each body row, drops the
+     * vertical padding of its cells and keeps their text on one line, so a cell's content must fit
+     * in it. The columns are laid out from widths (as with `columnSizingOptions`), so they never
+     * change width as rows come and go. The header stays at the top of the scroller: pass its height
+     * as `scrollPaddingStart` to `useVirtualWindow`, so keyboard moves bring rows into the area below
+     * it. The scroller is no tab stop of its own (`tabIndex` -1, as Firefox would stop on it; a
+     * `tabIndex` in `containerProps` wins), and the browser's scroll anchoring is off on it (the
+     * window lays the rows out).
+     *
+     * The keyboard moves by the data: ArrowUp/ArrowDown, PageUp/PageDown and Ctrl+Home/Ctrl+End
+     * scroll a target row that is not rendered into the window, then focus it, and the focused row
+     * stays rendered when it is scrolled away. When a data change (a sort, new `items`) makes the
+     * browser drop focus from the moved row, focus returns to the same row, or to the row nearest
+     * its place. Sorting, selection, select-all and column sizing work on every item, rendered or
+     * not. The grid carries `aria-rowcount` (the items plus the header rows), every row
+     * `aria-rowindex` (1-based, the header rows first, the body rows in the sorted order) and every
+     * body row `data-row-index` (its 0-based position in the sorted order); a grid without a window
+     * renders none of them.
+     *
+     * Needs `items` and `columns`, with the body rows rendered from them (no `DataGrid.Body` child,
+     * or one whose child is a render function); otherwise it is ignored, with a development warning.
+     * The component that calls `useVirtualWindow` renders again at every row the view enters: keep
+     * `items`, `columns`, `getRowId` and `isSelectionDisabled` stable (defined outside it, or
+     * memoised), or each of those renders rebuilds the rows of every item.
+     */
+    virtualWindow?: VirtualWindow;
     /**
      * Row selection mode. `'multiple'` adds a checkbox column with a "Select all rows" header
      * checkbox; `'single'` adds a radio column (its header reads "Selection" to assistive
@@ -3297,8 +3588,10 @@ export declare interface DataGridBaseProps<T = unknown> extends React_2.HTMLAttr
      */
     selectionMode?: 'none' | SelectionMode_2;
     /**
-     * The name of the select-all checkbox and the header text of the selection column, for
-     * localization. Unset members keep their English defaults. Rows are named with their own
+     * The grid's built-in text, for localization: the name of the select-all checkbox
+     * (`selectAll`), the header text of the selection column (`selectionHeader`), and, with
+     * `resizableColumns`, the name of the resize handles (`resizeColumn`) and their value text
+     * (`columnWidth`). Unset members keep their English defaults. Rows are named with their own
      * `selectionLabel`.
      */
     labels?: DataGridLabels;
@@ -3330,18 +3623,33 @@ export declare interface DataGridBaseProps<T = unknown> extends React_2.HTMLAttr
      */
     subtleSelection?: boolean;
     /**
-     * Controlled selected row ids (`DataGrid.Row` `rowId`). In single mode pass at most one id: with
-     * several, only the first one whose row is rendered is selected (a development warning says so).
+     * Controlled selected row ids (`DataGrid.Row` `rowId`; with `items`, the ids from `getRowId`).
+     * With `items`, every id counts, whether its row is rendered, filtered out or on another page
+     * (see `onSelectedItemsChange`). In single mode pass at most one id: with several, only the
+     * first one is selected (without `items`, the first one whose row is rendered), and a
+     * development warning says so.
      */
     selectedItems?: readonly string[];
     /** Initially selected row ids (uncontrolled). In single mode, at most one (see `selectedItems`). */
     defaultSelectedItems?: readonly string[];
     /**
      * Called with the new selected row ids when the selection changes, then `details` (`{ event }`,
-     * the click or key press behind the change). Ids of rows that are not rendered are left out of
-     * the reported selection and of the select-all state, so the next change drops them. Until that
-     * change an uncontrolled grid still holds such an id: a row re-added with the same `rowId` before
-     * then is shown selected again.
+     * the click or key press behind the change).
+     *
+     * With `items`, the selection follows the data: it reports every selected id, also ids whose
+     * rows are not rendered or not in `items` (filtered out, on another page, restored by id), and no
+     * change drops them. Select-all selects every item of `items` whose selection is not disabled
+     * (`isSelectionDisabled`, or the selection cell of its rendered row) and keeps every other id;
+     * when all of them are selected it removes only their ids. The select-all checkbox shows the
+     * state of those items. Both use the ids from `getRowId` (by default the item's index): a row
+     * that sets its own, different `rowId` (or a `DataGrid.Row` child whose `rowId` is no item's
+     * id) is outside them, and select-all then selects ids that no row has, with a development
+     * warning. Pass a `getRowId` that returns the rows' ids.
+     *
+     * Without `items` (rows written as `DataGrid.Row` children), ids of rows that are not rendered
+     * are left out of the reported selection and of the select-all state, so the next change drops
+     * them. Until that change an uncontrolled grid still holds such an id: a row re-added with the
+     * same `rowId` before then is shown selected again.
      */
     onSelectedItemsChange?: (selectedItems: string[], details?: DataGridSelectedItemsChangeDetails) => void;
     /** @deprecated Use `selectedItems` (an array). A `Set` or an array is accepted. */
@@ -3352,7 +3660,8 @@ export declare interface DataGridBaseProps<T = unknown> extends React_2.HTMLAttr
     onSelectionChange?: (keys: Set<string>) => void;
     /**
      * Props for the wrapper `<div>` around the `<table>`: a horizontally scrollable container
-     * (`overflow-x-auto`). Use it for its className, style (e.g. a max height) or ref. The wrapper
+     * (`overflow-x-auto`). Use it for its className, style (e.g. a max height) or ref. With a
+     * `virtualWindow` it is the window's scroller, which needs a bounded height. The wrapper
      * is not a tab stop (the grid's own cell tab stop scrolls it) and has no role, so its
      * `aria-label`/`aria-labelledby` are applied only together with a `role` (e.g. `'region'`);
      * without one they are dropped with a development warning. Name the grid with `aria-label`.
@@ -3370,7 +3679,9 @@ export declare interface DataGridBaseProps<T = unknown> extends React_2.HTMLAttr
 /**
  * The grid's `<tbody>`. Its child can also be a render function, called with each item of the
  * grid's `items` (and its index there) to render the item's row; without children, a grid with
- * `items` and `columns` renders the rows from the columns.
+ * `items` and `columns` renders the rows from the columns. In a grid with a `virtualWindow` it
+ * renders the rows of the window, the function being called for those rows only, and a spacer
+ * row for each run of rows it leaves out.
  */
 export declare const DataGridBody: {
     <T>({ children, className, ref, ...rest }: DataGridBodyProps<T>): React_2.JSX.Element;
@@ -3401,7 +3712,10 @@ export declare interface DataGridBodyProps<T = unknown> extends Omit<React_2.HTM
 
 /**
  * A grid cell (`<td>`), focusable through the grid's keyboard navigation. It is the positioning
- * box of a `Table.CellActions` inside it.
+ * box of a `Table.CellActions` inside it. In a grid that lays its columns out from widths (column
+ * sizing, a `virtualWindow`), its text stays on one line and is truncated with an ellipsis, unless
+ * its class says otherwise. In a body row of a grid with a `virtualWindow` it has no vertical
+ * padding: the row has the window's height, which its content must fit in.
  */
 export declare const DataGridCell: {
     ({ children, className, ref, ...rest }: DataGridCellProps): React_2.JSX.Element;
@@ -3421,10 +3735,15 @@ export declare interface DataGridCellProps extends React_2.TdHTMLAttributes<HTML
     ref?: React_2.Ref<HTMLTableCellElement>;
 }
 
-/** DataGrid: `root` on the grid element (`role="grid"`); `container` on the wrapper around it. */
+/**
+ * DataGrid: `root` on the grid element (`role="grid"`); `container` on the wrapper around it;
+ * `spacer` on each spacer row of a grid with a `virtualWindow` (the rows that stand in for the
+ * rows that are not rendered).
+ */
 export declare const dataGridClassNames: {
     readonly root: "wave-data-grid";
     readonly container: "wave-data-grid__container";
+    readonly spacer: "wave-data-grid__spacer";
 };
 
 /**
@@ -3492,6 +3811,8 @@ export declare interface DataGridControlledSortProps extends NoDeprecatedSortPro
  * mode) or the "Selection" header (single mode; DataGrid's `labels` localizes both), later rows of
  * a grouped header an empty cell. A header row rendered by another component cannot get it (a
  * development warning says so): use `DataGrid.Row` for such a row, which adds the cell itself.
+ * In a grid with a `virtualWindow` the header stays at the top of the grid's scroll wrapper while
+ * the rows scroll under it, and each header row carries its `aria-rowindex`.
  */
 export declare const DataGridHeader: {
     ({ children, className, ref, ...rest }: DataGridHeaderProps): React_2.JSX.Element;
@@ -3503,21 +3824,28 @@ export declare const DataGridHeader: {
  * `<button type="button">` that toggles the sort, followed by the direction glyph (`sortIcon`)
  * while its column is sorted; the `<th>` carries `aria-sort`. A consumer `onClick` (on the `<th>`)
  * runs before the sort, and calling `preventDefault()` in it cancels the sort (also for
- * Enter/Space on the button, which click it).
+ * Enter/Space on the button, which click it). In a grid with `resizableColumns`, the header cell
+ * of a column of `columns` (by `columnId`) also holds the column's resize handle, after its
+ * content, along its end edge (the cell is positioned for it); the cell is then named by its
+ * content alone (`aria-labelledby`, unless it has a name of its own), not by the handle's label.
+ * The handle is no target of the grid's navigation: a sortable cell's target stays its sort
+ * button, and F2 on the cell or the button moves focus to the handle.
  */
 export declare const DataGridHeaderCell: {
-    ({ columnId, sortable, sortIcon, children, className, onClick, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
+    ({ columnId, sortable, sortIcon, children, className, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
     displayName: string;
 };
 
 /**
  * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its
- * direction glyph (the default arrow `<svg>`, or the `<span>` of a `sortIcon` slot).
+ * direction glyph (the default arrow `<svg>`, or the `<span>` of a `sortIcon` slot);
+ * `resizeHandle` on the column's resize handle (a `Table.ResizeHandle`, with resizable columns).
  */
 export declare const dataGridHeaderCellClassNames: {
     readonly root: "wave-data-grid-header-cell";
     readonly button: "wave-data-grid-header-cell__button";
     readonly sortIcon: "wave-data-grid-header-cell__sort-icon";
+    readonly resizeHandle: "wave-data-grid-header-cell__resize-handle";
 };
 
 /** Properties for the DataGridHeaderCell sub-component. */
@@ -3619,6 +3947,16 @@ export declare interface DataGridLabels {
      * @default 'Selection'
      */
     selectionHeader?: string;
+    /**
+     * Accessible name of each column's resize handle (`resizableColumns`).
+     * @default 'Resize column'
+     */
+    resizeColumn?: string;
+    /**
+     * Builds the value text of a resize handle (`aria-valuetext`) from the column's width in pixels.
+     * @default (width) => `${width} pixels`
+     */
+    columnWidth?: (width: number) => string;
 }
 
 /**
@@ -3687,9 +4025,13 @@ declare namespace DataGridRoot {
  * ancestor, so the rows of a grid nested in a cell
  * share it: hovering the outer row also draws the subtle controls of the nested grid (a limit of
  * CSS groups). A Tree in a cell keeps its own rows' group.
+ *
+ * In a grid with a `virtualWindow`, a row rendered for an item has the window's `itemSize` as its
+ * height (its own `style` height loses) and carries `aria-rowindex` and `data-row-index`; a header
+ * row carries `aria-rowindex`.
  */
 export declare const DataGridRow: {
-    ({ rowId: rowIdProp, selectionLabel, selectionCellProps, children, className, onClick, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
+    ({ rowId: rowIdProp, selectionLabel, selectionCellProps, children, className, style, onClick, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -3710,7 +4052,9 @@ export declare interface DataGridRowProps extends React_2.HTMLAttributes<HTMLTab
      * a duplicate warns in development). A selectable grid renders no selection control (and warns
      * in development) for a row without it. A row rendered from the grid's `items` (by
      * `DataGrid.Body`'s render function or from `columns`) defaults to the item's row id
-     * (`getRowId`).
+     * (`getRowId`). In a grid with `items`, select-all uses the ids from `getRowId`: a row whose
+     * `rowId` differs from its item's id, or is no item's id, is outside it (a development warning
+     * says so), so set `getRowId` rather than a different `rowId`.
      */
     rowId?: string;
     /**
@@ -3746,7 +4090,7 @@ export declare interface DataGridRowSelectionCellProps {
      * (the cell takes focus), and neither a row click (`selectOnRowClick`), Space on a cell nor
      * select-all changes the row's selection: select-all skips it, keeps it as it is, and tells its
      * state from the other rows. In a header row it disables the select-all checkbox.
-     * @default false
+     * @default false (in a row rendered from `items`: the grid's `isSelectionDisabled` for its item)
      */
     disabled?: boolean;
     /**
@@ -3787,6 +4131,8 @@ export declare type DataGridSelectionAppearance = 'brand' | 'neutral' | 'none';
  * selection cell props of its row (`selectionCellProps`), its own winning. `aria-label`,
  * `aria-labelledby` and `aria-describedby` go to the control; the other props, `className` and
  * `ref` to the cell. In a grid without selection it renders nothing (with a development warning).
+ * In a body row of a grid with a `virtualWindow` it has no vertical padding (the row has the
+ * window's height) and its control is centred.
  */
 export declare const DataGridSelectionCell: {
     ({ disabled, invisible, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, controlRef, ref, ...rest }: DataGridSelectionCellProps): React_2.JSX.Element | null;
@@ -5454,6 +5800,14 @@ export declare type DrawerType = 'overlay' | 'inline';
  * `clearable` then clears every value. A non-literal `multiselect={flag}` is a type error: render
  * two elements, one for each mode.
  *
+ * **Data mode**: `items` passes the options as data instead of children. The open list renders an
+ * option per item (`renderOption` draws it, an `Option` with the item's label by default) and the
+ * closed list none; the keys, typeahead and the button's text follow the data, and each option
+ * carries `aria-posinset` and `aria-setsize`. A long list takes a `virtualWindow` (from
+ * `useVirtualWindow({ itemSize })`): the open list then renders only the options in view, plus an
+ * overscan, with spacers for the others, every option `itemSize` tall; the active option stays
+ * rendered, and opening scrolls it to the middle of the list.
+ *
  * The `<button>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,
  * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`
  * and `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp`. `ref`, `className`, `style`, other `aria-*`
@@ -5478,7 +5832,9 @@ export declare const Dropdown: DropdownComponent;
 /**
  * Dropdown: `root` on the outer element; `button` on the `role="combobox"` button; `value` on the
  * value or placeholder span; `expandIcon` on the chevron `<svg>`; `clearButton` on the clear
- * button; `listbox` on the `role="listbox"` list; `surface` on its portaled popup.
+ * button; `listbox` on the `role="listbox"` list; `surface` on its portaled popup; `spacer` on
+ * each spacer element of the list with a `virtualWindow` (the elements that stand in for the
+ * options that are not rendered).
  */
 export declare const dropdownClassNames: {
     readonly root: "wave-dropdown";
@@ -5488,6 +5844,7 @@ export declare const dropdownClassNames: {
     readonly clearButton: "wave-dropdown__clear-button";
     readonly listbox: "wave-dropdown__listbox";
     readonly surface: "wave-dropdown__surface";
+    readonly spacer: "wave-dropdown__spacer";
 };
 
 /** The Dropdown component's type: a multi-select signature, then the single-select one. */
@@ -5665,6 +6022,50 @@ export declare interface DropdownProps<M extends boolean = false> extends Omit<R
      * announcements, for localization. Unset members keep their English defaults.
      */
     labels?: DropdownLabels;
+    /**
+     * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,
+     * `disabled` and `hidden`; values unique). The open list renders one option per item that is
+     * not `hidden` (see `renderOption`); the closed list renders none. The keys, typeahead, the
+     * selection and the button's label text follow `items`, also for a selected item whose option
+     * is not rendered. The children are neither read nor rendered: passing both warns once in
+     * development. Each option gets `aria-posinset` and `aria-setsize` from its place among the
+     * shown items, and keeps one id per value. Without it, the options are the `Option` children.
+     */
+    items?: readonly ListboxItem[];
+    /**
+     * Data mode: renders the option of an item, given its state (`selected`, `active`, and `index`
+     * among the shown options). Return an `Option`, or an option component of your own on
+     * `useListboxOption`, with the item's `value` (and its `disabled`); its position is set for you,
+     * and in a windowed list (`virtualWindow`) its height. It is called again only when the item, its
+     * state, its position (`aria-posinset` and `aria-setsize`, which new `items` change) or the
+     * function itself changes, so pass a stable function in a long list. Ignored without `items`,
+     * with a development warning.
+     * @default an `Option` with the item's `value`, `label` (also its text), `textValue` and `disabled`
+     */
+    renderOption?: (item: ListboxItem, state: ListboxOptionRenderState) => React_2.ReactNode;
+    /**
+     * Data mode: renders only the options in view of a long list, plus an overscan, and spacers
+     * (`aria-hidden`, `data-virtual-spacer`) as tall as the options they stand for: pass the result
+     * of `useVirtualWindow({ itemSize })`, or an object of your own that implements `VirtualWindow`.
+     * It needs `items`: without them, or beside `OptionGroup` children, it is ignored with a
+     * development warning (a window renders a flat list).
+     *
+     * The open popup's list is the window's scroller, so it needs no height of yours: it scrolls
+     * within its own maximum height (15rem, 240 pixels at the default root size, less where the
+     * viewport has no room). Every option is exactly `itemSize` tall (the list sets its height,
+     * after the option's own `style`), so an option's content must fit in it: the default `Option`
+     * with one line of text is 32 pixels tall.
+     *
+     * The window counts the shown options (the items that are not `hidden`). The keys and typeahead
+     * move over all of them (Home and End to the first and the last, PageUp and PageDown by ten); the
+     * active option stays rendered while it is scrolled away, so `aria-activedescendant` always names
+     * an element, and when a key makes it active the list and the window move to it in the same
+     * update. Opening the list scrolls the active option (the selected one, by default) to the
+     * middle of the list, and again once the popup's positioning has given the list its height (a
+     * short viewport) unless it was scrolled first. A closed list renders no option. The browser's
+     * scroll anchoring is off on a windowed list (the window lays the options out).
+     */
+    virtualWindow?: VirtualWindow;
     /** Called when the `<button role="combobox">` receives focus (the root keeps other handlers). */
     onFocus?: React_2.FocusEventHandler<HTMLButtonElement>;
     /** Called when the `<button role="combobox">` loses focus. */
@@ -6060,6 +6461,231 @@ export declare interface FieldProps extends React_2.HTMLAttributes<HTMLDivElemen
  */
 export declare type FirstWeekOfYear = 'first-day' | 'first-full-week' | 'first-four-day-week';
 
+/**
+ * A tree built from flat data (WAI-ARIA Tree View pattern) that can render only the items in
+ * view, for trees of thousands of items. Its model comes from `useFlatTree(items, options)`: items
+ * listed with a `parentValue`, in any order, the expanded and the checked state. The tree renders
+ * the visible items (the roots and the children of every expanded branch) as sibling
+ * `role="treeitem"` elements with `aria-level`, `aria-setsize` and `aria-posinset` from the data,
+ * `aria-expanded` on branches, and the nested `Tree`'s chevron, checkbox and radio.
+ *
+ * ```tsx
+ * const model = useFlatTree(items, { defaultExpandedItems: ['docs'] });
+ * const virtualWindow = useVirtualWindow({ itemSize: 28 });
+ * <FlatTree aria-label="Files" model={model} {...model.getTreeProps()} virtualWindow={virtualWindow} style={{ height: 400 }} />
+ * ```
+ *
+ * Windowing: with `virtualWindow` the tree is the scrolling element (it needs a bounded height),
+ * renders the items in view plus the window's overscan and spacers for the others, and every item
+ * is exactly the window's `itemSize` tall. The server renders the first window. Keys move over the
+ * whole visible list, scrolling an item that is not rendered into view before focusing it, and the
+ * focused item stays rendered (and focused) while it is scrolled away.
+ *
+ * Keyboard: a single tab stop, on the focused item while focus is inside, else on the `selected`
+ * item while it is visible, else on the first enabled item; Tab leaves the tree. Up/Down move
+ * between the visible items, Home/End to the first and last, Right expands a collapsed branch or
+ * moves to its first child, Left collapses an expanded branch or moves to the parent (both
+ * mirrored in right-to-left layouts), Enter activates (and toggles a branch), and so does Space
+ * unless the tree has checkboxes, `*` expands the sibling branches, and typing moves to the next
+ * visible item whose label starts with the typed text (items under a collapsed branch are not
+ * searched). The focused item stays the focused item (rendered, and the tab stop) while focus is
+ * in a popup that its content opened, such as a menu in a portal, so the popup can return focus
+ * to it.
+ *
+ * Selection, as the nested `Tree`: `selected` and `onItemSelect` (single selection and activation,
+ * with radios in `selectionMode="single"`), `current`, and with `selectionMode="multiple"` a
+ * checkbox on every item bound to the model's `checkedItems` (Space or a click on the checkbox
+ * toggles it, and checks cascade). An item whose data is `disabled` is `aria-disabled`, is skipped
+ * by the keys and typeahead, never holds the tab stop (except while a pointer press has focused
+ * it), and is neither activated, expanded nor checked by the user (a check of its parent still
+ * includes it).
+ *
+ * When a branch collapses around the focused item (from code), focus moves to that branch, so it
+ * never falls to the page. Items expand and collapse at once, without motion: there is no child
+ * group to animate. A selected item under a collapsed branch is not the tab stop until it is
+ * visible again.
+ *
+ * `FlatTree.Item` is the row the tree renders for each visible item (it is not written by hand);
+ * it is also exported as `FlatTreeItem` for React Server Components, which cannot use the dotted
+ * form.
+ */
+export declare const FlatTree: {
+    ({ model, virtualWindow, renderItem, selectionMode: selectionModeProp, selected, current, onItemSelect, className, onKeyDown, onFocus, onBlur, onPointerDownCapture, ref, ...rest }: FlatTreeProps): React_2.JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        ({ item: row, children, className, style, onClick, ref, ...rest }: FlatTreeItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+};
+
+/**
+ * FlatTree: `root` on the `role="tree"` element (the scrolling element of a tree with a
+ * `virtualWindow`); `spacer` on each spacer element of a windowed tree (the elements that stand in
+ * for the items that are not rendered, 0.16).
+ */
+export declare const flatTreeClassNames: {
+    readonly root: "wave-flat-tree";
+    readonly spacer: "wave-flat-tree__spacer";
+};
+
+/**
+ * One row of a FlatTree, rendered by the tree for each visible item of its model (it is not
+ * written by hand): a `role="treeitem"` element with the item's level, set size and position,
+ * `aria-expanded` on a branch, and the expand chevron, the checkbox (multiple mode) or the radio
+ * (single mode) of the nested `Tree`'s items, before the content. Levels are drawn by indenting
+ * the row, since the items are siblings. In a windowed tree it is exactly the window's `itemSize`
+ * tall.
+ *
+ * `ref`, `className` and the other props land on the treeitem element; its `onClick` receives the
+ * clicks on the row, not those on the checkbox, and runs before the built-in activation (call
+ * `event.preventDefault()` to skip it).
+ */
+export declare const FlatTreeItem: {
+    ({ item: row, children, className, style, onClick, ref, ...rest }: FlatTreeItemProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * FlatTree.Item: `root` on the `role="treeitem"` element; `row` on its row; `expandIcon` on the
+ * chevron of a branch; `indicator` on the checkbox of a multi-select tree or the radio of a
+ * single-select one; `label` on the span around the item's content (0.16).
+ */
+export declare const flatTreeItemClassNames: {
+    readonly root: "wave-flat-tree-item";
+    readonly row: "wave-flat-tree-item__row";
+    readonly expandIcon: "wave-flat-tree-item__expand-icon";
+    readonly indicator: "wave-flat-tree-item__indicator";
+    readonly label: "wave-flat-tree-item__label";
+};
+
+/** One item of a flat tree: `parentValue` places it, items are listed in any order. */
+export declare interface FlatTreeItemData {
+    /** The item's identity; it must be unique among the items (a later duplicate is ignored). */
+    value: string;
+    /** The `value` of the item this one is nested in; absent for a root. */
+    parentValue?: string;
+    /**
+     * `'branch'` marks an item that can expand even while it has no child items (children loaded
+     * on demand). An item with child items is a branch whatever its type says.
+     */
+    itemType?: 'leaf' | 'branch';
+    /** The text the item shows. */
+    label?: string;
+    /**
+     * Whether the item is disabled. `FlatTree` reads it (the keys and typeahead skip the item, it is
+     * not the tab stop, and the user cannot activate, expand or check it); the model ignores it:
+     * `expand`, `collapse`, `toggle` and `setChecked` change a disabled item too, and a check of its
+     * parent includes it.
+     */
+    disabled?: boolean;
+}
+
+/** Properties for the FlatTreeItem sub-component. */
+export declare interface FlatTreeItemProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The row the item shows: a visible item of the tree's model (`model.visibleItems`). */
+    item: VisibleFlatItem & {
+        checked?: CheckState;
+    };
+    /** The item's content: what the tree's `renderItem` returns, else the item's label. */
+    children?: React_2.ReactNode;
+    /** Ref to the `role="treeitem"` element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/** The state and the visible rows of a flat tree, from {@link useFlatTree}. */
+export declare interface FlatTreeModel {
+    /**
+     * The rows to show: the roots and the children of every expanded branch, in tree order. With
+     * `selectionMode: 'multiple'` each row has its `checked` state. The array and its rows keep
+     * their identity until the items, the expanded set or the checked set change.
+     */
+    visibleItems: readonly (VisibleFlatItem & {
+        checked?: CheckState;
+    })[];
+    /** The visible row of `value`; `undefined` for an item under a collapsed branch or an unknown value. */
+    getItem(value: string): (VisibleFlatItem & {
+        checked?: CheckState;
+    }) | undefined;
+    /**
+     * Expands `value`, or every value of a list in one change (one `onExpandedItemsChange` call, as
+     * `*` on a tree item makes). Nothing happens, and nothing is called, if every value is already in
+     * the expanded set.
+     */
+    expand(value: string | readonly string[]): void;
+    /** Collapses `value`. Nothing happens, and nothing is called, if it is not in the expanded set. */
+    collapse(value: string): void;
+    /** Expands `value` when it is collapsed and collapses it when it is expanded. */
+    toggle(value: string): void;
+    /** Whether `value` is a branch (an item with child items, or typed `'branch'`) in the expanded set. */
+    isExpanded(value: string): boolean;
+    /**
+     * Sets the check state of `value`, with the cascade of the nested `Tree`: the item and everything
+     * nested in it, then its ancestors from their children. Nothing is called when the item is
+     * already in that state; a mixed item is set to `checked` as requested. A value that matches no
+     * item is added to, or removed from, the checked list. `event` becomes `details.event` of
+     * `onCheckedItemsChange`; without it the callback gets no `details`. It works in any
+     * `selectionMode` (the rows carry `checked` only with `'multiple'`), and on a disabled item too.
+     */
+    setChecked(value: string, checked: boolean, event?: Event): void;
+    /** The props `FlatTree` takes from the model, for `<FlatTree model={model} {...model.getTreeProps()} />`. */
+    getTreeProps(): {
+        selectionMode: 'none' | SelectionMode_2;
+    };
+}
+
+/** Properties for the FlatTree component. */
+export declare interface FlatTreeProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> {
+    /** The tree's model, from `useFlatTree`: the visible rows, the expanded and the checked state. */
+    model: FlatTreeModel;
+    /**
+     * Renders only the items in view (and a few beyond), from `useVirtualWindow({ itemSize })`. The
+     * tree is then the scrolling element: give it a bounded height (a class or a style). Every item
+     * is exactly `itemSize` pixels tall, so its content must fit in one row. Without it every visible
+     * item is rendered.
+     *
+     * The tree element is then no tab stop of its own while an item is (`tabIndex` -1, as Firefox
+     * would stop on a scroller; a `tabIndex` you pass wins), and the browser's scroll anchoring is
+     * off on it (the window lays the items out): when rows are inserted or removed above the focused
+     * item while it is in view (`*`, or a change of the model from code), the tree moves the view
+     * with it, so it stays where it was.
+     */
+    virtualWindow?: VirtualWindow;
+    /**
+     * The content of an item, from its row: the item data with its level, position, set size,
+     * expanded state and, in multiple mode, its check state. Called for the rendered items only.
+     * @default the item's `label`, else its `value`
+     */
+    renderItem?: (item: VisibleFlatItem & {
+        checked?: CheckState;
+    }) => React_2.ReactNode;
+    /**
+     * How items are selected, as the nested `Tree`'s `selectionMode`. `'multiple'` draws a checkbox
+     * on every item, bound to the model's checked items (create the model with
+     * `selectionMode: 'multiple'`); `'single'` draws a radio for `selected`. Spread
+     * `model.getTreeProps()` on the tree to pass the model's mode.
+     * @default the model's mode (`model.getTreeProps().selectionMode`)
+     */
+    selectionMode?: 'none' | SelectionMode_2;
+    /**
+     * Value of the selected item. When set (also to `null`), every item carries `aria-selected`, and
+     * the selected item is where keyboard focus enters the tree while it is visible. It has no effect
+     * with `selectionMode="multiple"` (a development warning). With `selectionMode="single"` every
+     * item carries `aria-selected` even while it is not set (a development warning: the radios need
+     * it).
+     */
+    selected?: string | null;
+    /** Value of the current item (for example the open page): it gets `aria-current="true"`. */
+    current?: string | null;
+    /**
+     * Called with an item's value every time it is activated (a click on its row, Enter, or Space
+     * unless the tree has checkboxes), also when the same item is activated again.
+     */
+    onItemSelect?: (value: string) => void;
+    /** Ref to the `role="tree"` element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /**
  * A flexbox layout container with token-based gaps.
  *
@@ -6212,6 +6838,28 @@ export declare function getTabbableElements(container: Element, options?: {
  */
 export declare function getThemeClassName(theme: WaveTheme): string;
 
+/**
+ * The inline style that applies token overrides: one `--wave-*` custom property per entry, the
+ * object `WaveProvider` puts on its root and its portals. Use it where no provider renders, such
+ * as a Server Component's document element. Server-safe.
+ *
+ * Returns `undefined` for `null`, `undefined` or a map with nothing to set. An `undefined` value is
+ * skipped, a number is written as its string, and the properties keep the order of the input. A
+ * key that is not a camelCase identifier, or a value that is neither a finite number nor a string
+ * without `;`, `{` or `}` (which could add a declaration of its own to a server-rendered `style`
+ * attribute), is skipped with a development warning (once per key). Names are not checked against
+ * the list of tokens: TypeScript refuses a misspelled one, and in JavaScript it sets a property
+ * nothing reads.
+ *
+ * @example
+ * // app/layout.tsx (a Server Component)
+ * <html style={getTokenStyle({ brand80: '#c43e00' })}>
+ *
+ * @example
+ * <div style={{ ...getTokenStyle(overrides), padding: 16 }} />
+ */
+export declare function getTokenStyle(overrides: WaveTokenOverrides | null | undefined): TokenStyle | undefined;
+
 /**
  * The week number (1–53) of `date`'s calendar day (time of day ignored): days before a year's week
  * 1 belong to the previous year's last week, and days in the next year's week 1 are week 1. ISO 8601
@@ -6260,6 +6908,29 @@ export declare interface GridNavigationHandlers {
     onBlur: React_2.FocusEventHandler<HTMLTableElement>;
 }
 
+/**
+ * The data behind the rows of a windowed grid, whose rows are mounted only in part (see
+ * {@link UseGridNavigationOptions.model}). Each mounted data row carries its 0-based index in the
+ * data as `data-row-index`.
+ */
+export declare interface GridNavigationModel {
+    /** How many data rows there are, mounted or not. */
+    rowCount: number;
+    /**
+     * How many header rows are above the data rows: the first rows of the grid without a
+     * `data-row-index` (they stay mounted). Other rows without one, such as the spacer rows of a
+     * window, are not navigated.
+     */
+    headerRowCount: number;
+    /**
+     * Brings data row `index` into the mounted rows (scrolls the window to it). Called once for each
+     * row a key moves focus to that is not mounted; focus moves to the row's cell in the commit that
+     * mounts it. Ctrl+Home in a grid with header rows also calls it for row 0, so the first rows
+     * show under the header.
+     */
+    scrollToRow(index: number): void;
+}
+
 /**
  * The Grid's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`).
@@ -7216,19 +7887,31 @@ export declare type LinkVariant = LinkAppearance;
  * - **Check marks** (`checkmark`, opt-in): a decorative check at the start of every item of a
  *   selectable list, shown while the item is selected; `List.Item checkmark` replaces or hides it.
  * - **Switching semantics remounts the items.** Listbox/list and grid use different elements
- *   (`ul`/`li` and `div`), so when a selectable list gains its first item action, loses its last
- *   one, or `selectable` or `navigationMode` changes the structure, React remounts the items and
- *   their content: state inside them (an inline rename input's draft, an uncontrolled checkbox) is
- *   reset. Focus that is on an item or inside it when the list switches moves to the same item (by
- *   `value`, else by position; the next item when the focused one was removed), or to its first
- *   focusable content when the item is no Tab stop any more, so the switch never drops it to
- *   `<body>`. This includes focus inside the last action when that action removes itself (an
- *   inline rename input that unmounts on Enter). An action that removes itself while focused
- *   without causing a switch drops focus, like any removed element. When the list may switch,
- *   keep such state in the parent, or pin the grid with `navigationMode="composite"`.
+ *   (`ul`/`li` and `div`), so when a selectable list without a window gains its first item
+ *   action, loses its last one, or `selectable` or `navigationMode` changes the structure, React
+ *   remounts the items and their content: state inside them (an inline rename input's draft, an
+ *   uncontrolled checkbox) is reset. Focus that is on an item or inside it when the list switches
+ *   moves to the same item (by `value`, else by position; the next item when the focused one was
+ *   removed), or to its first focusable content when the item is no Tab stop any more, so the
+ *   switch never drops it to `<body>`. This includes focus inside the last action when that action
+ *   removes itself (an inline rename input that unmounts on Enter). An action that removes itself
+ *   while focused without causing a switch drops focus, like any removed element. When the list
+ *   may switch, keep such state in the parent, or pin the grid with `navigationMode="composite"`.
  * - Selection: `selectionMode` `'single'` (default) or `'multiple'`; controlled with
  *   `selectedItems` (or `selectedItem` in single mode) or uncontrolled with the `default*` props.
- *   Values of items that are no longer rendered are dropped from the reported selection.
+ *   Values of items that are no longer rendered are dropped from the reported selection (a
+ *   windowed list keeps them).
+ * - **Windowing** (`virtualWindow` and `count`, for long lists): a window from `useVirtualWindow`
+ *   and a function child that returns the item at an index render only the items in view plus an
+ *   overscan, with spacers for the others. The list element scrolls (give it a bounded height),
+ *   every item has the window's item size as its height, the focused item stays rendered and is
+ *   the Tab stop while focus is in the list, each item carries its place in the whole list, and
+ *   the values selected outside the window stay selected. The keys move by index over the whole
+ *   list (ArrowUp/ArrowDown, Home/End, and PageUp/PageDown by ten), scrolling the target into view
+ *   before focusing it, rendered or not; typeahead matches the rendered items. Its structure
+ *   never follows the rendered items: a selectable windowed list is a listbox unless
+ *   `navigationMode="composite"` pins the grid (pin it when items have actions; a development
+ *   warning says so).
  * - Sub-component: `List.Item` (also exported as `ListItem` for React Server Components).
  *
  * @example
@@ -7242,13 +7925,25 @@ export declare type LinkVariant = LinkAppearance;
  *   <List.Item value="report" onAction={() => open('report')}>Report</List.Item>
  *   <List.Item value="budget" onAction={() => open('budget')}>Budget</List.Item>
  * </List>
+ *
+ * @example
+ * const virtualWindow = useVirtualWindow({ itemSize: 40 });
+ * <List
+ *   selectable
+ *   aria-label="Files"
+ *   virtualWindow={virtualWindow}
+ *   count={files.length}
+ *   style={{ height: 320 }}
+ * >
+ *   {(index) => <List.Item value={files[index].id}>{files[index].name}</List.Item>}
+ * </List>
  */
 export declare const List: {
     <M extends ListSelectionMode = "single">(props: ListProps<M>): React_2.ReactNode;
     displayName: string;
 } & {
     Item: {
-        ({ value, action, onAction, disabledSelection, checkmark, className, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
+        ({ value, action, onAction, disabledSelection, checkmark, className, style, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
         displayName: string;
     };
 };
@@ -7285,6 +7980,12 @@ export declare const List: {
  *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.
  *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never
  *   selected.
+ * - **Data mode.** `items` passes the options as data instead of children: the list renders an
+ *   option per item (`renderOption` draws it, an `Option` with the item's label by default), the
+ *   keys, typeahead and the selection follow the data, and each option carries `aria-posinset`
+ *   and `aria-setsize`. A long list takes a `virtualWindow` (from `useVirtualWindow({ itemSize
+ *   })`): the list then renders only the options in view, plus an overscan, with spacers for the
+ *   others, every option `itemSize` tall, and the active option stays rendered.
  * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per
  *   value with `multiselect`), and `required` needs a value (native validation; a missing value
  *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a
@@ -7303,12 +8004,21 @@ export declare const List: {
  *   <Listbox.Option value="apple">Apple</Listbox.Option>
  *   <Listbox.Option value="banana">Banana</Listbox.Option>
  * </Listbox>
+ *
+ * @example
+ * // Data mode
+ * <Listbox aria-label="City" items={cities.map((c) => ({ value: c.id, label: c.name }))} />
  */
 export declare const Listbox: ListboxComponent;
 
-/** Listbox: `root` on the `role="listbox"` list (its options carry Option's classes). */
+/**
+ * Listbox: `root` on the `role="listbox"` list (its options carry Option's classes); `spacer` on
+ * each spacer element of a list with a `virtualWindow` (the elements that stand in for the options
+ * that are not rendered).
+ */
 export declare const listboxClassNames: {
     readonly root: "wave-listbox";
+    readonly spacer: "wave-listbox__spacer";
 };
 
 /** Props for the combobox element (spread them; see {@link UseListboxResult.getComboboxProps}). */
@@ -7468,6 +8178,20 @@ export declare interface ListboxOptionElementProps<E extends HTMLElement = HTMLE
     'aria-disabled'?: true;
     /** While filtered out or hidden. */
     hidden?: boolean;
+    /**
+     * The number of shown options, for an option of a data-mode list rendered by Listbox, Combobox
+     * or Dropdown (`items`), which tell each option its position. Absent otherwise.
+     */
+    'aria-setsize'?: number;
+    /** The option's position among the shown options (from 1), with `aria-setsize`. */
+    'aria-posinset'?: number;
+    /**
+     * The option's box in a windowed list (a `virtualWindow` of Listbox, Combobox or Dropdown): the
+     * window's `itemSize` as its height, padding and border included, and no shrinking in a flex
+     * list. Absent otherwise. Merge it after a style of your own: every option of a window must be
+     * exactly that tall.
+     */
+    style?: React_2.CSSProperties;
     /** While the option is active, for styling. */
     'data-active'?: '';
     /** While selected, for styling. */
@@ -7487,6 +8211,25 @@ export declare interface ListboxOptionElementProps<E extends HTMLElement = HTMLE
 /** Flat name of `Listbox.OptionGroup` for React Server Components. */
 export declare const ListboxOptionGroup: React_2.FC<OptionGroupProps>;
 
+/**
+ * The state of an item's option, which `renderOption` of Listbox, Combobox and Dropdown receives
+ * with the item (data mode, `items`).
+ */
+export declare interface ListboxOptionRenderState {
+    /** The item's value is selected. */
+    selected: boolean;
+    /**
+     * The option is the active one, which `aria-activedescendant` points at: in a Listbox while the
+     * list has focus, in a Combobox or Dropdown while the list is open.
+     */
+    active: boolean;
+    /**
+     * The option's index among the shown options, from 0 (its `aria-posinset` minus one): items a
+     * filter leaves out and hidden items are not counted.
+     */
+    index: number;
+}
+
 /** Properties for the Listbox component. */
 export declare interface ListboxProps<M extends boolean = false> extends Omit<React_2.HTMLAttributes<HTMLUListElement>, 'onChange' | 'defaultValue'> {
     /**
@@ -7547,6 +8290,49 @@ export declare interface ListboxProps<M extends boolean = false> extends Omit<Re
     disabledOptionsFocusable?: boolean;
     /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */
     labels?: ListboxLabels;
+    /**
+     * Data mode: the options as data, in list order (`value`, `label`, and optionally `textValue`,
+     * `disabled` and `hidden`; values unique). The list renders one option per item that is not
+     * `hidden` (see `renderOption`), and the keys, typeahead and the selection follow `items`. The
+     * children are neither read nor rendered: passing both warns once in development. Each option
+     * gets `aria-posinset` and `aria-setsize` from its place among the shown items, and keeps one id
+     * per value. Without it, the options are the `Option` children.
+     */
+    items?: readonly ListboxItem[];
+    /**
+     * Data mode: renders the option of an item, given its state (`selected`, `active`, and `index`
+     * among the shown options). Return an `Option`, or an option component of your own on
+     * `useListboxOption`, with the item's `value` (and its `disabled`); its position is set for you,
+     * and in a windowed list (`virtualWindow`) its height. It is called again only when the item, its
+     * state, its position (`aria-posinset` and `aria-setsize`, which new `items` change) or the
+     * function itself changes, so pass a stable function in a long list. Ignored without `items`,
+     * with a development warning.
+     * @default an `Option` with the item's `value`, `label` (also its text), `textValue` and `disabled`
+     */
+    renderOption?: (item: ListboxItem, state: ListboxOptionRenderState) => React_2.ReactNode;
+    /**
+     * Data mode: renders only the options in view of a long list, plus an overscan, and spacers
+     * (`aria-hidden`, `data-virtual-spacer`) as tall as the options they stand for: pass the result
+     * of `useVirtualWindow({ itemSize })`, or an object of your own that implements `VirtualWindow`.
+     * It needs `items`: without them, or beside `OptionGroup` children, it is ignored with a
+     * development warning (a window renders a flat list).
+     *
+     * The list element is the window's scroller: give it a bounded height (a height or a maximum
+     * height, through `className` or `style`); without one the window measures the whole list and
+     * renders every option. While windowed the list has no block padding (add none through
+     * `className`), so the options start at its top, where the window counts them, and no scroll
+     * anchoring of the browser (the window lays the options out). Every option is exactly
+     * `itemSize` tall (the list sets its height, after the option's own `style`), so an option's
+     * content must fit in it: the default `Option` with one line of text is 32 pixels tall.
+     *
+     * The window counts the shown options (the items that are not `hidden`). The keys and typeahead
+     * move over all of them (Home and End to the first and the last, PageUp and PageDown by ten); the
+     * active option stays rendered while it is scrolled away, so `aria-activedescendant` always names
+     * an element, and when the list gains focus or a key makes it active the list and the window
+     * move to it in the same update (a pointer press moves neither). The server renders the first
+     * window.
+     */
+    virtualWindow?: VirtualWindow;
     /**
      * Name of the value in form submissions (renders a hidden input inside the list; one per value
      * with `multiselect`).
@@ -7739,9 +8525,14 @@ export declare interface ListboxSurfaceProps {
     children?: React_2.ReactNode;
 }
 
-/** List: `root` on the `<ul>` (the `role="grid"` element of a selectable list with actions). */
+/**
+ * List: `root` on the `<ul>` (the `role="grid"` element of a selectable list with actions);
+ * `spacer` on each spacer element of a list with a `virtualWindow` (the elements that stand in for
+ * the items that are not rendered).
+ */
 export declare const listClassNames: {
     readonly root: "wave-list";
+    readonly spacer: "wave-list__spacer";
 };
 
 /**
@@ -7751,11 +8542,15 @@ export declare const listClassNames: {
  * selection without calling `onClick`, which receives pointer clicks; `onAction` runs on clicks
  * and Enter (and Space where the item cannot be selected), before the selection toggles.
  *
+ * In a windowed list (the List's `virtualWindow`) an item has the window's item size as its
+ * height, after its own `style` (its content must fit), and carries `data-index` and its place
+ * in the whole list: `aria-setsize` and `aria-posinset`, or `aria-rowindex` in a grid.
+ *
  * Exported under the flat name `ListItem` so React Server Components can import it; `List.Item`
  * (dotted access) needs a client module.
  */
 export declare const ListItem: {
-    ({ value, action, onAction, disabledSelection, checkmark, className, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
+    ({ value, action, onAction, disabledSelection, checkmark, className, style, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -7839,7 +8634,72 @@ export declare type ListNavigationMode = 'none' | 'items' | 'composite';
  * `selectionMode="multiple"` is passed; `ListProps` without a type argument accepts every mode
  * (the 0.4 shape, extendable by interfaces).
  */
-export declare interface ListProps<M extends ListSelectionMode = ListSelectionMode> extends React_2.HTMLAttributes<HTMLUListElement> {
+export declare interface ListProps<M extends ListSelectionMode = ListSelectionMode> extends Omit<React_2.HTMLAttributes<HTMLUListElement>, 'children'> {
+    /**
+     * The items: `List.Item` elements. In a windowed list (`virtualWindow` and `count`), a function
+     * `(index) => <List.Item … />` that returns the item at an index: the list calls it for the
+     * rendered indexes only and keys each item by its index. Without `virtualWindow` and `count` a
+     * function renders nothing (a development warning says so).
+     */
+    children?: React_2.ReactNode | ((index: number) => React_2.ReactNode);
+    /**
+     * Renders only the items in view, plus an overscan, of a long list: pass the result of
+     * `useVirtualWindow({ itemSize })` (or an object of your own that implements `VirtualWindow`)
+     * with `count`, and a function child that returns the `List.Item` at an index. The items that
+     * are not rendered are replaced by spacers (`aria-hidden`, `data-virtual-spacer`) of their
+     * height.
+     *
+     * The list element becomes the window's scroller (it scrolls vertically, without the browser's
+     * scroll anchoring): give it a bounded height, a height or a maximum height (a class or a style);
+     * without one the window measures the whole list and renders every item. Where the list
+     * navigates its items, one item is its Tab stop and the list element is none of its own
+     * (`tabIndex` -1, as Firefox would stop on a scroller); a plain windowed list keeps the browser's
+     * default, under which WebKit does not let the keyboard reach and scroll it: pass `tabIndex={0}`
+     * or navigate its items (`navigationMode="items"`). A `tabIndex` you pass wins.
+     *
+     * Every item has the window's `itemSize` as its height (the list sets it, after the item's own
+     * `style`), so an item's content must fit in it. Each item carries `data-index` (its 0-based
+     * index) and its place in the whole list: `aria-setsize` and `aria-posinset`, or in a grid
+     * (`navigationMode="composite"`) the list's `aria-rowcount` and the row's `aria-rowindex`.
+     *
+     * The item that has focus stays rendered when it is scrolled away (also while focus is in a
+     * popup it opened), so it keeps focus, and while focus is in the list it is the list's Tab stop.
+     * Once focus leaves the list it is no longer kept, and the Tab stop follows the rule of a list
+     * without focus among the rendered items (the first selected item, else the first item; in a
+     * list without selection the item that last had focus while it is rendered). When `count` drops
+     * to or below the focused item, focus moves to the last item.
+     *
+     * The keys move by index over the whole list, rendered or not, where the list navigates its
+     * items (`navigationMode` `'items'` or `'composite'`, or a selectable list): ArrowUp/ArrowDown
+     * (wrapping at the ends), Home/End, and PageUp/PageDown, which move ten items and stop at the
+     * ends. The target is scrolled into view before it is focused, the least that shows it whole: a
+     * rendered one by the browser (`scrollIntoView`, nearest), which the window follows, one that is
+     * not rendered through the window's `scrollToIndex`, and focused once it renders. An item that a
+     * pointer press focuses is not scrolled. Typeahead matches the labels of the rendered items
+     * only.
+     *
+     * Selection covers every value: the values of items that are not rendered stay selected, and
+     * `onSelectionChange` reports them (a list without a window drops the values of items it no
+     * longer renders).
+     *
+     * The structure never depends on which items are rendered: a selectable windowed list stays a
+     * listbox (its items are options) unless `navigationMode="composite"` makes it a grid from the
+     * first render, so scrolling never replaces the list element (which would reset its scroll
+     * position and remount every item). Its items' actions do not switch it to a grid as they do in
+     * a list without a window: an item with an action in a selectable windowed list without that
+     * pin is a development warning, since an option cannot hold interactive content. Pin
+     * `navigationMode="composite"` when items have actions.
+     *
+     * Applies only with `count` and a function child; otherwise it is ignored, with a development
+     * warning.
+     */
+    virtualWindow?: VirtualWindow;
+    /**
+     * The number of items of a windowed list (with `virtualWindow`): the function child is called
+     * for the indexes from 0 to `count - 1` that are rendered. A value that is not a whole number
+     * counts as its whole part, and one below 0 (or not finite) as 0.
+     */
+    count?: number;
     /** Whether list items can be selected.
      * @default false
      */
@@ -7886,7 +8746,10 @@ export declare interface ListProps<M extends ListSelectionMode = ListSelectionMo
      *   the Tab order. The rows of a list without selection carry no `aria-selected`.
      *
      * The resolved mode is rendered as `data-navigation-mode`. Changing it while mounted can switch
-     * between `ul`/`li` and `div` elements, which remounts the items (see {@link List}).
+     * between `ul`/`li` and `div` elements, which remounts the items (see {@link List}). A windowed
+     * list (`virtualWindow`) never switches for its items' actions: unset or `'items'`, a selectable
+     * one is a listbox; only `'composite'` makes it a grid. In a windowed list the keys move by
+     * index over the whole list, PageUp/PageDown included (see `virtualWindow`).
      */
     navigationMode?: ListNavigationMode;
     /**
@@ -10102,7 +10965,9 @@ export declare interface OpenChangeDetails<R extends string = string> {
  *
  * Options register with the surrounding listbox (in DOM order, groups included), so they can be
  * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight
- * re-renders only the previously and the newly active option.
+ * re-renders only the previously and the newly active option. In a windowed list (the
+ * `virtualWindow` of Listbox, Combobox or Dropdown) the option is exactly the window's `itemSize`
+ * tall, a height set after its own `style`, so its content must fit in it.
  *
  * Styling: `className` comes last. A plain background class (`className="bg-primary"`) replaces
  * the built-in hover, selected and active backgrounds in every state. To restyle one state only,
@@ -11201,7 +12066,8 @@ export declare type PopupTargetInput = PopupTarget | {
 
 /**
  * Renders its children into `document.body` (or the WaveProvider `portalContainer`), wrapped in a
- * `<div class="wave-portal …">` that carries the provider's theme classes, direction and font, so
+ * `<div class="wave-portal …">` that carries the provider's theme classes, direction and font, and
+ * its token overrides (WaveProvider `tokens`, unless its `applyStylesToPortals` is `false`), so
  * portaled overlays look like the rest of the themed tree. The wrapper paints no background.
  *
  * - **Client only, first commit**: nothing is rendered on the server or during hydration (no
@@ -13425,11 +14291,12 @@ export declare type SwitchSize = Extract<Size, 'small' | 'medium'>;
  * `Table.CellActions` shows a cell's actions while its row is hovered or holds focus.
  *
  * Sub-components are available as `Table.Header`, `Table.HeaderCell`, `Table.Body`, `Table.Row`,
- * `Table.Cell`, `Table.SelectionCell`, `Table.CellLayout` and `Table.CellActions` in client
+ * `Table.Cell`, `Table.SelectionCell`, `Table.CellLayout`, `Table.CellActions` and
+ * `Table.ResizeHandle` (the separator that resizes a column, for a header cell's `aside`) in client
  * components, and as the flat exports `TableHeader`, `TableHeaderCell`, `TableBody`, `TableRow`,
- * `TableCell`, `TableSelectionCell`, `TableCellLayout` and `TableCellActions` (the form React
- * Server Components can import). `Table.Head`/`Table.HeadCell` (`TableHead`/`TableHeadCell`) are
- * deprecated aliases.
+ * `TableCell`, `TableSelectionCell`, `TableCellLayout`, `TableCellActions` and
+ * `TableResizeHandle` (the form React Server Components can import). `Table.Head`/`Table.HeadCell`
+ * (`TableHead`/`TableHeadCell`) are deprecated aliases.
  */
 export declare const Table: {
     ({ striped, containerProps, children, className, ref, ...props }: TableProps): React_2.JSX.Element;
@@ -13477,6 +14344,10 @@ export declare const Table: {
         ({ visible, className, ref, ...rest }: TableCellActionsProps): React_2.JSX.Element;
         displayName: string;
     };
+    ResizeHandle: {
+        ({ width, minWidth, maxWidth, onResize, onReset, onLeave, label, valueText, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onDoubleClick, onKeyDown, onKeyUp, onBlur, className, ref, ...rest }: TableResizeHandleProps): React_2.JSX.Element;
+        displayName: string;
+    };
 };
 
 /** The table's `<tbody>`. */
@@ -13606,6 +14477,86 @@ export declare const tableClassNames: {
     readonly container: "wave-table__container";
 };
 
+/**
+ * The column widths of {@link useTableFeatures} (`state.columnSizing`), filled by
+ * `useTableColumnSizing`. Without that plugin no width is set and the functions do nothing.
+ */
+export declare interface TableColumnSizingState {
+    /**
+     * The width of every column in pixels, by `columnId`: the width that is state, else the
+     * column's initial width.
+     */
+    columnWidths: Readonly<Record<string, number>>;
+    /** Whether a width is state (set, controlled or given as a default). */
+    isSized: boolean;
+    /** The width of the column `columnId` in pixels, or `undefined` when it is no column. */
+    getColumnWidth(columnId: string): number | undefined;
+    /**
+     * Sets the width of the column `columnId` in pixels. Without `event`, the change's details carry
+     * an untrusted `resize` event with no target.
+     */
+    setColumnWidth(columnId: string, width: number, event?: Event): void;
+    /** Props for the table element: its fixed layout and width style. */
+    getTableProps(): {
+        style: CSSProperties;
+    };
+    /** Props for the column's `<col>` element: its width style. */
+    getColumnProps(columnId: string): {
+        style: CSSProperties;
+    };
+    /** Props for the resize handle of the column `columnId`. */
+    getResizeHandleProps(columnId: string): TableResizeHandleBindings;
+}
+
+/** What {@link UseTableColumnSizingOptions.onColumnWidthsChange} gets besides the new widths. */
+export declare interface TableColumnWidthsChangeDetails {
+    /** The column that was resized. */
+    columnId: string;
+    /** Its new width in pixels, held at or above its `minWidth`. */
+    width: number;
+    /**
+     * The event behind the change (the drag, the key press); when none was passed, an untrusted
+     * `resize` event with no target.
+     */
+    event: Event;
+}
+
+/**
+ * A feature of {@link useTableFeatures}, returned by `useTableSort`, `useTableSelection` and
+ * `useTableColumnSizing`, which hold the feature's state where they are called. The object is
+ * opaque. It keeps its identity while the feature's state and the options it reads keep theirs; a
+ * new one costs `useTableFeatures` a recompute of its state, and of the rows only when the sort
+ * changed. `T` is the item type the plugin reads (a selection's `isDisabled`): a plugin that reads
+ * no item, such as the sort, fits every table.
+ */
+export declare interface TableFeaturePlugin<T> {
+    /** The brand of a plugin: only the plugin hooks create one. */
+    readonly [tableFeaturePluginBrand]: (item: T) => void;
+}
+
+declare const tableFeaturePluginBrand: unique symbol;
+
+/** The state that {@link useTableFeatures} returns. */
+export declare interface TableFeaturesState<T> {
+    /** The items, as given. */
+    items: readonly T[];
+    /** The columns, as given. */
+    columns: readonly DataGridColumn<T>[];
+    /** The row id of an item: `getRowId` as given, else the index as a string. */
+    getRowId: (item: T, index: number) => string;
+    /**
+     * The rows in display order: sorted while `useTableSort` sorts them, else in the order of
+     * `items`. The same array is returned until `items`, `getRowId`, `columns` or the sort change.
+     */
+    getRows(): readonly TableRowData<T>[];
+    /** The sort; without `useTableSort` it is `null` and its functions do nothing. */
+    sort: TableSortState;
+    /** The selection; without `useTableSelection` nothing is selected and its functions do nothing. */
+    selection: TableSelectionState;
+    /** The column widths; without `useTableColumnSizing` no width is set. */
+    columnSizing: TableColumnSizingState;
+}
+
 /** @deprecated Use `Table.Header` (`TableHeader`). */
 export declare const TableHead: {
     (props: TableHeadProps): React_2.JSX.Element;
@@ -13724,6 +14675,110 @@ export declare interface TableProps extends React_2.HTMLAttributes<HTMLTableElem
     ref?: React_2.Ref<HTMLTableElement>;
 }
 
+/**
+ * The drag handle of a column's edge: a vertical `role="separator"` with `aria-valuenow`, meant
+ * for the `aside` slot of a `Table.HeaderCell` whose cell is positioned, since the handle is drawn
+ * along the cell's end edge. A DataGrid with `resizableColumns` renders it in the header cell of
+ * each of its columns itself (a `DataGrid.HeaderCell` has no `aside` slot). A pointer drag (mouse,
+ * touch or pen) resizes through `onResize`, with the movement mirrored in right-to-left tables;
+ * the arrow keys move the edge by 20 pixels (5 with Shift), Home sets the minimum width and End
+ * the maximum one. A double click calls `onReset`. The handle is a Tab stop (`tabIndex` 0), so the
+ * keys work in a static table; a grid that manages its own tab stops overrides `tabIndex`. The
+ * handle carries `data-grid-auxiliary`, so a grid's cell navigation does not take it for the
+ * cell's own widget.
+ *
+ * It keeps no width: spread the result of `useTableColumnSizing`'s `getResizeHandleProps(columnId)`
+ * onto it, or pass `width`, `minWidth` and `onResize` from your own state.
+ */
+export declare const TableResizeHandle: {
+    ({ width, minWidth, maxWidth, onResize, onReset, onLeave, label, valueText, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onDoubleClick, onKeyDown, onKeyUp, onBlur, className, ref, ...rest }: TableResizeHandleProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * What a resize handle needs from the table state, as returned by
+ * `columnSizing.getResizeHandleProps(columnId)`: the column's width and minimum, the callback
+ * that sets a new width and the one that resets it. `Table.ResizeHandle` takes these props (and a few more).
+ */
+export declare interface TableResizeHandleBindings {
+    /** The column's current width in pixels. */
+    width: number;
+    /** The narrowest the column can be, in pixels. */
+    minWidth: number;
+    /**
+     * Sets the column's width in pixels (held at or above `minWidth`); `details.event` is the event
+     * behind it (without `details`, an untrusted `resize` event is reported).
+     */
+    onResize(width: number, details?: {
+        event: Event;
+    }): void;
+    /**
+     * Sets the column back to its initial width (a double click on the handle). It changes nothing
+     * while no width is state, since the table is then in its initial layout.
+     */
+    onReset?(details: {
+        event: Event;
+    }): void;
+}
+
+/**
+ * Table.ResizeHandle: `root` on the separator element that resizes a column (placed in the `aside`
+ * of a header cell).
+ */
+export declare const tableResizeHandleClassNames: {
+    readonly root: "wave-table-resize-handle";
+};
+
+/** Properties for the TableResizeHandle sub-component. */
+export declare interface TableResizeHandleProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onResize' | 'onReset'> {
+    /** The column's current width in pixels. It is reported as `aria-valuenow`. */
+    width: number;
+    /**
+     * The narrowest the column can be, in pixels. The handle never asks for less, and Home sets it.
+     * It is reported as `aria-valuemin`.
+     * @default 0
+     */
+    minWidth?: number;
+    /**
+     * The widest the column can be, in pixels. The handle never asks for more, and End sets it.
+     * Without a maximum there is no `aria-valuemax` and End does nothing.
+     */
+    maxWidth?: number;
+    /**
+     * Called with the width the user asks for, in whole pixels, held between `minWidth` and
+     * `maxWidth`: while a pointer drags (at most once per animation frame) and for every handled
+     * key, then `details` with the event behind it. The handle always passes `details`; it is typed
+     * optional through 0.x, as every `details` argument. The handle keeps no width of its own, so a
+     * parent that ignores the call leaves the column where it is.
+     */
+    onResize: (width: number, details?: {
+        event: Event;
+    }) => void;
+    /** Called with the event when the handle is double-clicked: reset the column's width. */
+    onReset?: (details: {
+        event: Event;
+    }) => void;
+    /**
+     * Called when Escape is pressed on the handle, or Enter or Space is released on it after being
+     * pressed there: move focus back to the header cell. Enter and Space are consumed from their
+     * keydown on (their repeats included), so a held key never reaches the element that focus moves
+     * to. Without it those keys are left to the handle's ancestors.
+     */
+    onLeave?: () => void;
+    /**
+     * The accessible name of the separator.
+     * @default 'Resize column'
+     */
+    label?: string;
+    /**
+     * Builds `aria-valuetext` from the width.
+     * @default (width) => `${width} pixels`
+     */
+    valueText?: (width: number) => string;
+    /** Ref to the `<div>` element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /**
  * A table row. Striping comes from the table (`striped`), so rows need no context. The row is the
  * `group/table-row` group whose hover or focus draws the subtle selection controls and the cell
@@ -13739,6 +14794,16 @@ export declare const tableRowClassNames: {
     readonly root: "wave-table-row";
 };
 
+/** One row of {@link useTableFeatures}: an item of `items` with its id. */
+export declare interface TableRowData<T> {
+    /** The item. */
+    item: T;
+    /** The row's id, from `getRowId` (by default the index in `items`, as a string). */
+    rowId: string;
+    /** The item's index in `items`. Sorting moves the row, not this index. */
+    index: number;
+}
+
 /** Properties for the TableRow sub-component. */
 export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableRowElement> {
     /** Table cell elements. */
@@ -13852,6 +14917,59 @@ export declare interface TableSelectionCellProps extends Omit<React_2.TdHTMLAttr
     ref?: React_2.Ref<HTMLTableCellElement>;
 }
 
+/**
+ * The selection of {@link useTableFeatures} (`state.selection`), filled by `useTableSelection`. The
+ * selection is a set of row ids held apart from the rendered rows: rows that are not rendered keep
+ * their state, and ids whose item is not in `items` (filtered out, on another page) stay selected.
+ */
+export declare interface TableSelectionState {
+    /** `single` keeps at most one row selected; `multiple` selects rows independently. */
+    selectionMode: SelectionMode_2;
+    /** The selected row ids, ids whose item is not in `items` included. */
+    selectedItems: ReadonlySet<string>;
+    /**
+     * Whether every selectable row of `items` is selected (and there is one): rows that
+     * `isDisabled` marks do not count, rows that are not rendered do.
+     */
+    allRowsSelected: boolean;
+    /**
+     * Whether a row of `items` is selected while not every selectable one is (the mixed state of a
+     * select-all checkbox). A selected disabled row counts; ids outside `items` do not.
+     */
+    someRowsSelected: boolean;
+    /** Whether the row `id` is selected. */
+    isRowSelected(id: string): boolean;
+    /** Selects or deselects the row `id` (`multiple`); selects it (`single`). */
+    toggleRow(id: string, event?: Event): void;
+    /** Selects the row `id`; in `single` mode it replaces the selection. */
+    selectRow(id: string, event?: Event): void;
+    /** Deselects the row `id`. */
+    deselectRow(id: string, event?: Event): void;
+    /**
+     * Selects every selectable row of `items` when not all of them are selected, else deselects
+     * them. A disabled row keeps its state, and ids outside `items` stay selected. It does nothing in
+     * `single` mode.
+     */
+    toggleAllRows(event?: Event): void;
+    /** Empties the selection, ids outside `items` included. */
+    clearRows(event?: Event): void;
+}
+
+/** The sort of {@link useTableFeatures} (`state.sort`), filled by `useTableSort`. */
+export declare interface TableSortState {
+    /** The sorted column and its direction, or `null` while the rows are in the order of `items`. */
+    value: DataGridSort | null;
+    /** Sorts by the column `columnId` in `direction`. */
+    setColumnSort(columnId: string, direction: SortDirection, event?: Event): void;
+    /**
+     * Sorts by the column `columnId`, as a sortable header of DataGrid does: ascending, or descending
+     * when the column is already sorted ascending.
+     */
+    toggleColumnSort(columnId: string, event?: Event): void;
+    /** The direction of the column `columnId` while the rows are sorted by it, else `undefined`. */
+    getSortDirection(columnId: string): SortDirection | undefined;
+}
+
 /**
  * A set of tabs with their panels (WAI-ARIA Tabs pattern): the arrow keys (Left/Right, mirrored
  * in RTL; Up/Down when vertical), Home and End move focus and select (automatic activation); with
@@ -15986,13 +17104,20 @@ export declare interface TextOwnProps {
      */
     variant?: TypographyVariant;
     /**
-     * Font weight: `'regular'`, `'semibold'` or `'bold'`. Unset, the variant's own weight applies:
-     * semibold for `'subtitle-2'` and every larger variant (`'subtitle-1'`, the titles,
-     * `'large-title'`, `'display'`), inherited for the caption and body variants. Pass `'regular'`
-     * for a title at regular weight. The numeric 0.4 values `400`, `600` and `700` still work but
-     * are deprecated.
+     * Font weight: `'regular'`, `'medium'`, `'semibold'` or `'bold'`. Unset, the variant's own
+     * weight applies: semibold for `'subtitle-2'` and every larger variant (`'subtitle-1'`, the
+     * titles, `'large-title'`, `'display'`), inherited for the caption and body variants. Pass
+     * `'regular'` for a title at regular weight. The numeric 0.4 values `400`, `600` and `700` still
+     * work but are deprecated.
      */
     weight?: TextWeight | 400 | 600 | 700;
+    /**
+     * Font family: `'base'` keeps the inherited family (the Wave sans-serif), `'monospace'` sets the
+     * Wave monospace stack for code and identifiers, `'numeric'` the stack for figures that should
+     * align in columns. Fluent's `font` prop. A `className` that sets a font family replaces it.
+     * @default 'base'
+     */
+    font?: 'base' | 'monospace' | 'numeric';
 }
 
 /**
@@ -16001,8 +17126,8 @@ export declare interface TextOwnProps {
  */
 export declare type TextProps<C extends React_2.ElementType = 'span'> = PolymorphicProps<C, TextOwnProps>;
 
-/** Font weight vocabulary shared by Text and Label (400 / 600 / 700). */
-export declare type TextWeight = 'regular' | 'semibold' | 'bold';
+/** Font weight vocabulary shared by Text and Label (400 / 500 / 600 / 700). */
+export declare type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 /**
  * A time input with a filterable list of times (APG editable combobox with list autocomplete).
@@ -16779,6 +17904,23 @@ export declare interface ToggleButtonProps extends Omit<React_2.ButtonHTMLAttrib
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/**
+ * The inline style that applies token overrides: a React style object whose `--wave-*` custom
+ * properties set the tokens, so it can be merged with other style properties.
+ */
+export declare type TokenStyle = React_2.CSSProperties & {
+    [K in `--wave-${string}`]?: string;
+};
+
+/**
+ * The CSS custom property of a token name at the type level: `TokenVariable<'brand80'>` is
+ * `'--wave-brand-80'`, by the rule of {@link tokenVariable}. It spells out the literal values of
+ * `waveTokens`. It walks the name one character at a time (tail-recursive, so long names stay
+ * within the compiler's depth limit): `AfterLetter` says whether the previous character was a
+ * letter, `Done` holds the converted text so far.
+ */
+declare type TokenVariable<Name extends string, AfterLetter extends boolean = false, Done extends string = ''> = Name extends `${infer Char}${infer Rest}` ? Char extends '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' ? TokenVariable<Rest, false, `${Done}${AfterLetter extends true ? '-' : ''}${Char}`> : Char extends Lowercase<Char> ? TokenVariable<Rest, true, `${Done}${Char}`> : TokenVariable<Rest, true, `${Done}-${Lowercase<Char>}`> : `--wave-${Done}`;
+
 /**
  * A container for a set of controls (APG Toolbar pattern): `role="toolbar"`, one Tab stop, and
  * arrow-key navigation between its controls.
@@ -17558,7 +18700,9 @@ export declare type TypographyVariant = 'caption-2' | 'caption-1' | 'body-1' | '
  * - The moved-to item is dropped when it leaves `items` or while `enabled` is `false`, and does not
  *   come back without a user action; `fallback` is active while nothing was moved to.
  * - Keyboard and programmatic moves are scrolled into view (`{ block: 'nearest' }`); pointer moves
- *   (`highlight`) and `setActiveValue(value, { scroll: false })` are not.
+ *   (`highlight`) and `setActiveValue(value, { scroll: false })` are not. With `onScrollToItem` (a
+ *   windowed list) each such move is first passed to it by the item's index, also for an item
+ *   without an element.
  * - `onActiveValueChange` reports every change after the commit, once (StrictMode included).
  *
  * `useListbox` is built on it; use it directly for composites that are not listboxes.
@@ -17599,6 +18743,17 @@ export declare interface UseActiveDescendantOptions {
     activateFirstOnChange?: boolean;
     /** The element of an item, for scrolling it into view. @default document.getElementById(getId(value)) */
     getElement?: (value: string) => HTMLElement | null;
+    /**
+     * Called for every move that scrolls the active item into view, for a windowed list that renders
+     * part of its items: `index` is the item's index in `items`. Scroll the list so that it shows and
+     * renders the item (a virtual window's `scrollToIndex`, which moves the window in the same
+     * update); an element, when there is one (`getElement`, then the id lookup), is then scrolled
+     * into view as well. `aria-activedescendant` already names the item, and points at its element
+     * once it mounts. Called after the same moves that scroll (not after a pointer move or a
+     * `scroll: false` move), from a layout effect, once per change of the active item. Without it,
+     * an item without an element is not scrolled to.
+     */
+    onScrollToItem?: (index: number) => void;
     /** Called after the active item changed (from an effect), `null` included. */
     onActiveValueChange?: (value: string | null) => void;
 }
@@ -17844,6 +18999,60 @@ export declare interface UseFieldControlOptions {
     nativeRequired?: boolean;
 }
 
+/**
+ * The model of a flat tree: items listed with a `parentValue` link, in any order, become the rows
+ * a windowed tree shows (`FlatTree`), without building an element tree. Returns the visible rows
+ * (with `level`, `position`, `setSize` and `expanded` for the tree ARIA), the expanded and
+ * checked state, and the actions on them.
+ *
+ * Pass `items` as a stable reference or memoise it: the index of the items is rebuilt when its
+ * identity changes. Expanded and checked state work as in `Tree`: pass `expandedItems` or
+ * `checkedItems` to control it (a stable array, or the rows are rebuilt on every render), or
+ * `defaultExpandedItems` and `defaultCheckedItems` to start uncontrolled; the change callbacks
+ * fire once per change. When `items` is replaced, the expanded and checked values stay in the
+ * state: a value that matches no item is ignored for the rows until an item with it returns, and
+ * it is changed only by you.
+ *
+ * Development warnings, once each: an unknown `parentValue` (the item is a root), a cycle of
+ * parents (cut) and a duplicate value (the first item wins).
+ *
+ * @example
+ * const model = useFlatTree(items, { defaultExpandedItems: ['docs'] });
+ * model.visibleItems.map((row) => row.item.label);
+ */
+export declare function useFlatTree(items: readonly FlatTreeItemData[], options?: UseFlatTreeOptions): FlatTreeModel;
+
+/** Options of {@link useFlatTree}: the state names and shapes of the nested `Tree`. */
+export declare interface UseFlatTreeOptions {
+    /** Controlled list of expanded item values. */
+    expandedItems?: readonly string[];
+    /**
+     * Item values that are expanded initially (uncontrolled).
+     * @default []
+     */
+    defaultExpandedItems?: readonly string[];
+    /** Called with the new list of expanded item values when an item expands or collapses. */
+    onExpandedItemsChange?: (expandedItems: string[]) => void;
+    /** Controlled checked items (`selectionMode="multiple"`); the cascade rule is the nested `Tree`'s. */
+    checkedItems?: readonly string[];
+    /**
+     * Initially checked items (uncontrolled).
+     * @default []
+     */
+    defaultCheckedItems?: readonly string[];
+    /**
+     * Called with every checked item (in tree order) when a check changes. `details` is passed when
+     * `setChecked` got an `event`; it is typed optional until 1.0.
+     */
+    onCheckedItemsChange?: (checkedItems: string[], details?: TreeCheckedItemsChangeDetails) => void;
+    /**
+     * How items are selected, as `Tree`. With `'multiple'` every visible row carries its `checked`
+     * state; the model's `getTreeProps()` hands the mode on to `FlatTree`.
+     * @default 'none'
+     */
+    selectionMode?: 'none' | SelectionMode_2;
+}
+
 /**
  * A focusable group (Fluent's `useFocusableGroup`, tabster's groupper): one tab stop that holds
  * several focusable elements, so a long list of rich rows does not cost a Tab press per control.
@@ -17982,14 +19191,32 @@ export declare function useFocusVisible(): boolean;
  *   keys: its cell takes focus, and Enter/F2 enters the composite at its own tab stop. The grid never
  *   writes `tabindex` on or inside a composite (the composite manages its own), so a composite
  *   keeps its own Tab stop — the same documented limitation as `useRovingTabIndex`.
+ * - **Auxiliary widgets** (a widget that carries `data-grid-auxiliary`, such as a column's resize
+ *   handle) are left out when the cell's target is chosen, so a header with a sort button and a
+ *   resize handle keeps the button as its target (Enter sorts), and a cell whose only widget is
+ *   auxiliary is its own target. Like every widget they are at `tabindex="-1"` in navigation mode
+ *   and take part in interaction mode. F2 on a cell that has one, or on its target widget, enters
+ *   interaction mode at the first auxiliary widget (Enter on a cell that is its own target still
+ *   enters its first widget); Escape returns to the cell's target, the cell or its target widget.
+ *   While the widgets of such a cell are interacted with, its target widget is in interaction mode
+ *   too, so Tab moves between all of them and Escape on the target ends the mode. A cell without
+ *   auxiliary widgets behaves as described above.
+ * - **Rows by their data** (a `model`: a windowed grid, whose rows are mounted in part): the rows
+ *   are the header rows and the data rows, which carry their index in the data as `data-row-index`
+ *   (other rows, such as the spacer rows of a window, are skipped). ArrowUp/ArrowDown,
+ *   PageUp/PageDown and Ctrl+Home/Ctrl+End go by that index over every row of the data, header
+ *   rows first, with the rules above: a target row that is not mounted is asked for with
+ *   `scrollToRow` (once per row) and focused in the commit that mounts it, and Ctrl+Home also
+ *   brings data row 0 back under the header rows. The active cell is kept by its row and column:
+ *   `activeRowIndex` and `pendingRowIndex` name the rows the owner keeps mounted, and while the
+ *   active row is not mounted anyway, a cell of the nearest mounted row holds the tab stop until
+ *   the row is back. ArrowLeft/ArrowRight and Home/End work in the row as above.
  *
  * Keys are ignored when the event's default was prevented (a widget that handled the key, a
  * consumer handler), or with Alt/Meta held. The tab indexes are written to the DOM (layout effect
  * plus a `MutationObserver`), so rows and widgets added later are covered without a re-render. Focus
  * moves re-sync only the cells involved, the observer only the cells that changed, and the grid's
  * own `tabindex` writes do not trigger a re-sync.
- *
- * Internal to the table package.
  */
 export declare function useGridNavigation(options?: UseGridNavigationOptions): UseGridNavigationResult;
 
@@ -18000,6 +19227,14 @@ export declare interface UseGridNavigationOptions {
      * @default 10
      */
     pageSize?: number;
+    /**
+     * The data of a windowed grid (DataGrid with a virtual window). ArrowUp/ArrowDown,
+     * PageUp/PageDown and Ctrl+Home/Ctrl+End then move by the rows of the data: a target row that is
+     * not mounted is asked for with `scrollToRow` and focused when it mounts. The active row is kept
+     * by its index (see {@link UseGridNavigationResult.activeRowIndex}). Without it, the mounted
+     * rows are the whole grid.
+     */
+    model?: GridNavigationModel;
 }
 
 /** Result of {@link useGridNavigation}. */
@@ -18008,6 +19243,19 @@ export declare interface UseGridNavigationResult {
     gridRef: React_2.RefCallback<HTMLTableElement>;
     /** Keyboard and focus handlers for the grid element. Stable identities. */
     gridProps: GridNavigationHandlers;
+    /**
+     * With a `model`: the `data-row-index` of the active cell's row, the row that holds the grid's
+     * tab stop (or takes it back once it is mounted again), so the owner keeps that row mounted.
+     * `null` on a header row, and always `null` without a model. A change re-renders the owner.
+     */
+    activeRowIndex: number | null;
+    /**
+     * With a `model`: the index of the data row a key moved focus to while it is not mounted (asked
+     * for with `scrollToRow`); focus moves there in the commit that mounts it, so the owner keeps it
+     * mounted too. `null` when no row is awaited, and always `null` without a model. A change
+     * re-renders the owner.
+     */
+    pendingRowIndex: number | null;
 }
 
 /**
@@ -18103,7 +19351,10 @@ export declare function useIsOverflowItemVisible(itemId: string): boolean;
  *   render. Options register even when filtered out or hidden (they render `hidden` and are not
  *   navigable), so labels are always known — use {@link collectOptionLabels} for the display text
  *   before registration (SSR/first render). `filter` is the navigability predicate, which a
- *   picker builds from its query.
+ *   picker builds from its query. In data mode the keys, typeahead, the labels and the filter
+ *   read `items` only, so a picker may render just the shown options (`items` of the result), or
+ *   part of them: `onScrollToItem` receives every active option that scrolls into view, rendered
+ *   or not.
  * - **Active option** is derived during render: the highlighted value, else the `autoHighlight`
  *   fallback. The highlight is reset on close and after a single-select commit that closes the
  *   listbox, and dropped once it is not navigable any more (filtered out, hidden, removed by an
@@ -18170,8 +19421,10 @@ export declare function useListbox(options: UseListboxOptions): UseListboxResult
  * the option (registration mode) and its element, and reads its flags from the listbox store, so
  * it re-renders only when its own active/selected/hidden state changes. Spread `optionProps` onto
  * the `<li>` (`id`, `role="option"`, `aria-selected`, `aria-disabled`, `hidden`, and
- * `data-active`/`data-selected`/`data-disabled` for styling) and compose its `onClick` — and in
- * standalone mode its `onMouseDown`, the pointer press — with your own handlers. Mark the
+ * `data-active`/`data-selected`/`data-disabled` for styling; `aria-posinset` and `aria-setsize`
+ * when a `renderOption` of Listbox, Combobox or Dropdown renders it, and in a windowed list a
+ * `style` with its height, to merge after yours) and compose its `onClick` —
+ * and in standalone mode its `onMouseDown`, the pointer press — with your own handlers. Mark the
  * component with {@link markListboxElement}, so its label is known before it registers.
  *
  * Throws in development when used outside a listbox; in production it logs the error once and
@@ -18330,6 +19583,16 @@ export declare interface UseListboxOptions {
      * {@link useActiveDescendant}'s `onActiveValueChange`.
      */
     onActiveValueChange?: (value: string | null) => void;
+    /**
+     * Called for every move that scrolls the active option into view, for a list that renders only
+     * part of its options (a virtual window): `index` is the option's index in
+     * {@link UseListboxResult.items}, the shown options (filtered-out and hidden items are not
+     * counted, disabled ones are). Scroll the list so that it shows and renders the option (a
+     * window's `scrollToIndex(index)`, which moves the window in the same update); an element, when
+     * there is one, is then scrolled into view as well. `aria-activedescendant` names the option
+     * meanwhile. Passed to {@link useActiveDescendant}'s `onScrollToItem`, mapped to that index.
+     */
+    onScrollToItem?: (index: number) => void;
     /** Prefix of the generated listbox id. @default 'listbox' */
     idPrefix?: string;
     /**
@@ -19089,6 +20352,224 @@ export declare interface UseRovingTabIndexResult {
     focusLast: () => void;
 }
 
+/**
+ * Selection by id, held outside the DOM, for lists, tables and trees whose items are not all
+ * rendered. State is controlled with `selectedItems` or uncontrolled with `defaultSelectedItems`;
+ * `onSelectedItemsChange` fires once per change, never for a no-op.
+ *
+ * @example
+ * const selection = useSelection({ selectionMode: 'multiple' });
+ * selection.toggleAll(rows.map((row) => row.id));
+ */
+export declare function useSelection({ selectionMode, selectedItems: selectedItemsProp, defaultSelectedItems, onSelectedItemsChange, }: UseSelectionOptions): UseSelectionResult;
+
+/** What {@link UseSelectionOptions.onSelectedItemsChange} receives as its second argument. */
+export declare interface UseSelectionChangeDetails {
+    /** The event that caused the change, when the caller passed one. */
+    event?: Event;
+    /** The id that was toggled, selected or deselected. Absent for `toggleAll` and `clear`. */
+    id?: string;
+}
+
+/** Options of {@link useSelection}. */
+export declare interface UseSelectionOptions {
+    /**
+     * `single` keeps at most one id selected and never deselects through `toggle`; `multiple` toggles
+     * ids independently.
+     */
+    selectionMode: SelectionMode_2;
+    /** The selected ids (controlled). Pair it with `onSelectedItemsChange`. */
+    selectedItems?: readonly string[];
+    /**
+     * The ids selected at first render (uncontrolled).
+     * @default []
+     */
+    defaultSelectedItems?: readonly string[];
+    /**
+     * Called with a new array of the selected ids whenever the selection changes. A call that leaves
+     * the selection as it is (selecting a selected id, toggling the selected id in `single` mode)
+     * does not call it.
+     */
+    onSelectedItemsChange?: (selectedItems: string[], details?: UseSelectionChangeDetails) => void;
+}
+
+/** What {@link useSelection} returns. */
+export declare interface UseSelectionResult {
+    /** The mode the hook was given. */
+    selectionMode: SelectionMode_2;
+    /**
+     * The selected ids. The same set object is returned while the ids stay the same, so it can key a
+     * memo. It holds ids whose items are not rendered.
+     */
+    selectedItems: ReadonlySet<string>;
+    /** Whether `id` is selected. */
+    isSelected(id: string): boolean;
+    /** Toggles `id`: in `multiple` mode adds or removes it, in `single` mode selects it. */
+    toggle(id: string, event?: Event): void;
+    /** Selects `id`; in `single` mode it replaces the selection. */
+    select(id: string, event?: Event): void;
+    /** Removes `id` from the selection. */
+    deselect(id: string, event?: Event): void;
+    /**
+     * Selects every id of `universe` when not all of them are selected, else removes only the ids of
+     * `universe`: ids outside it stay selected. It does nothing in `single` mode.
+     */
+    toggleAll(universe: readonly string[], event?: Event): void;
+    /** Empties the selection, ids outside any universe included. */
+    clear(event?: Event): void;
+}
+
+/**
+ * The column sizing plugin of `useTableFeatures`: the width of every column, held at or above its
+ * minimum, and the props that lay a static `Table` out with them. Fills `state.columnSizing`.
+ * Spread `getTableProps()` on the `Table`, render a `<colgroup>` with a `<col>` per column and
+ * spread `getColumnProps(columnId)` on it, and give each `Table.ResizeHandle` the
+ * `getResizeHandleProps(columnId)`. The widths are controlled with `columnWidths` or uncontrolled
+ * with `defaultColumnWidths`. Until a width is state (a resize, or `columnWidths` or
+ * `defaultColumnWidths` is given) the table is 100% wide and at least as wide as the columns; from
+ * then on it is exactly as wide as they are, so a dragged edge follows the pointer. There is no
+ * maximum width, and no fitting of the columns to the container. Call it unconditionally and pass
+ * the plugin to `useTableFeatures`.
+ *
+ * @example
+ * const { columnSizing } = useTableFeatures({ items, columns }, [
+ *   useTableColumnSizing({ columnSizingOptions: { name: { minWidth: 120, defaultWidth: 240 } } }),
+ * ]);
+ * <Table {...columnSizing.getTableProps()}>
+ *   <colgroup>
+ *     {columns.map((c) => <col key={c.columnId} {...columnSizing.getColumnProps(c.columnId!)} />)}
+ *   </colgroup>
+ * </Table>
+ */
+export declare function useTableColumnSizing<T>(options?: UseTableColumnSizingOptions): TableFeaturePlugin<T>;
+
+/** Options of {@link useTableColumnSizing}. */
+export declare interface UseTableColumnSizingOptions {
+    /**
+     * Per column, by `columnId`: `minWidth` (`@default 80`), and the width the column starts at,
+     * `defaultWidth` or else `idealWidth` (else 150). Ids that are not columns are ignored. May be
+     * written inline.
+     */
+    columnSizingOptions?: Record<string, ColumnSizingOption>;
+    /**
+     * The column widths in pixels (controlled), by `columnId`: a column without an entry has its
+     * initial width. Pair it with `onColumnWidthsChange`.
+     */
+    columnWidths?: Record<string, number>;
+    /** The column widths at first render (uncontrolled). */
+    defaultColumnWidths?: Record<string, number>;
+    /**
+     * Called with the width of every column and the details whenever a width changes (every step of
+     * a drag or key press). The details are always passed; they are typed optional through 0.x, as
+     * every `details` argument. Setting the width a column already has does not call it, once a
+     * width is state.
+     */
+    onColumnWidthsChange?: (widths: Record<string, number>, details?: TableColumnWidthsChangeDetails) => void;
+}
+
+/**
+ * Headless table state for a table built from the static `Table` parts: the rows of `items`, and
+ * the features its plugins add (`useTableSort`, `useTableSelection`, `useTableColumnSizing`). Each
+ * plugin fills its own part of the state (`sort`, `selection`, `columnSizing`), so the order of
+ * the array does not matter. The state follows the data, not the rendered rows, so a table that
+ * renders a page or a window of its rows keeps select-all and the sort over every item.
+ *
+ * Call each plugin hook unconditionally, in the array or before it, and pass the same plugins on
+ * every render; to turn a feature off, change its options. Options may be written inline: a plugin
+ * whose options change identity on every render (an inline `isDisabled`) only makes the state be
+ * recomputed on every render, while `getRows()` keeps its array until `items`, `getRowId`,
+ * `columns` or the sort change. A feature given twice (the last plugin of it is used), a plugin
+ * count that changes between renders and repeated row ids are development warnings.
+ *
+ * @example
+ * const { getRows, sort, selection } = useTableFeatures({ items, columns, getRowId }, [
+ *   useTableSort({ defaultSort: { columnId: 'name', direction: 'ascending' } }),
+ *   useTableSelection({ selectionMode: 'multiple' }),
+ * ]);
+ */
+export declare function useTableFeatures<T>(options: UseTableFeaturesOptions<T>, plugins?: readonly TableFeaturePlugin<T>[]): TableFeaturesState<T>;
+
+/** Options of {@link useTableFeatures}. */
+export declare interface UseTableFeaturesOptions<T> {
+    /** The items, one row each. Every item counts for select-all, rendered or not. */
+    items: readonly T[];
+    /** The columns, from `createTableColumn`. The sort uses the `compare` of the sorted column. */
+    columns: readonly DataGridColumn<T>[];
+    /**
+     * The row id of an item: unique, and the same for an item across renders (selection and the
+     * selection callbacks use it). Pass a stable function (defined outside the component, or
+     * memoised): the rows are rebuilt when it changes.
+     * @default (item, index) => String(index)
+     */
+    getRowId?: (item: T, index: number) => string;
+}
+
+/**
+ * The selection plugin of `useTableFeatures`: a set of row ids (`selectedItems`, controlled, or
+ * `defaultSelectedItems`), and `state.selection` with select-all over every item of `items`,
+ * rendered or not. Select-all selects every selectable row and leaves the other ids as they are;
+ * deselecting all removes only the selectable ids of `items`, so a selected disabled row and ids
+ * selected on another page or filtered out stay selected (`clearRows` empties the selection).
+ * `onSelectedItemsChange` fires once per change with a new array of every selected id. Call it
+ * unconditionally and pass the plugin to `useTableFeatures`.
+ *
+ * @example
+ * const { selection } = useTableFeatures({ items, columns, getRowId }, [
+ *   useTableSelection({ selectionMode: 'multiple', onSelectedItemsChange: setSelected }),
+ * ]);
+ */
+export declare function useTableSelection<T>(options: UseTableSelectionOptions<T>): TableFeaturePlugin<T>;
+
+/** Options of {@link useTableSelection}: those of `useSelection`, plus the disabled rows. */
+export declare interface UseTableSelectionOptions<T> extends UseSelectionOptions {
+    /**
+     * Whether the selection of an item cannot change through select-all: `toggleAllRows` skips it,
+     * and `allRowsSelected` does not wait for it. A disabled row keeps its state. The single-row
+     * functions do not read it: disable the row's own control. Called for every item of `items`
+     * whenever `useTableFeatures` computes its state: when the selection, `items`, `getRowId`,
+     * `columns`, the sort or another plugin's state (the column widths) change, and when this
+     * function changes. A function written inline is a new one on every render, so the state is
+     * then computed, and this function called for every item, on every render (no more: no extra
+     * render, and `getRows()` keeps its array); define it outside the component or memoise it to
+     * call it only on those changes.
+     */
+    isDisabled?: (item: T, index: number) => boolean;
+}
+
+/**
+ * The sort plugin of `useTableFeatures`: sorts the rows by the `compare` of a column and fills
+ * `state.sort`. The sort is controlled with `sort` or uncontrolled with `defaultSort`;
+ * `toggleColumnSort` goes from ascending to descending as a sortable DataGrid header does. The
+ * sorted column is the one whose `columnId` is the sort's `columnId` (the deprecated `id` of a
+ * column is not read). Call it unconditionally and pass the plugin to `useTableFeatures`.
+ *
+ * @example
+ * const state = useTableFeatures({ items, columns }, [
+ *   useTableSort({ defaultSort: { columnId: 'name', direction: 'ascending' } }),
+ * ]);
+ * state.sort.toggleColumnSort('name');
+ */
+export declare function useTableSort<T>(options?: UseTableSortOptions): TableFeaturePlugin<T>;
+
+/** Options of {@link useTableSort}. */
+export declare interface UseTableSortOptions {
+    /**
+     * The sort (controlled): the sorted column and its direction, or `null` for the order of
+     * `items`. Pair it with `onSortChange`.
+     */
+    sort?: DataGridSort | null;
+    /**
+     * The sort at first render (uncontrolled).
+     * @default null
+     */
+    defaultSort?: DataGridSort | null;
+    /**
+     * Called with the new sort whenever it changes, and the event behind it when the change was
+     * given one. Setting the sort it already has does not call it.
+     */
+    onSortChange?: (sort: DataGridSort, details?: DataGridSortChangeDetails) => void;
+}
+
 /**
  * Returns the {@link ToastController} of the enclosing `<Toaster>`: `dispatchToast(content,
  * options?)` shows your content (usually a `<Toast>` with parts) and `dispatchToast(options)` a
@@ -19122,7 +20603,71 @@ export declare interface UseRovingTabIndexResult {
 export declare function useToastController(): ToastController;
 
 /**
- * Reads the theme, direction, theme classes and portal container of the nearest
+ * A window over a long list of fixed-height rows, for rendering only the rows in view. Give
+ * `scrollRef` to the scrolling element and render `layout(count)`: rows for the item entries and
+ * empty blocks of `size` pixels for the spacer entries.
+ *
+ * The window re-renders only when the first row in view or the viewport height changes, not on
+ * every scroll event: scrolling is read in a passive `scroll` listener once per animation frame,
+ * and the viewport height on attach, on scroll and from a `ResizeObserver` where one exists. The
+ * server and the first render lay out the top of the list in `initialViewportSize`, and read no
+ * DOM.
+ *
+ * Never write `ref={virtualWindow.scrollRef}` in JSX: the React Compiler's lint types a member
+ * read in the `ref` position as a ref, then reports that read and every call on the window during
+ * render (`virtualWindow.layout(count)` included). Merge the callback with the element's other
+ * refs through `useMergedRefs(ownRef, virtualWindow.scrollRef)`, or destructure it first
+ * (`const { scrollRef } = virtualWindow`); `virtualWindow.layout(count)` can then be called as is.
+ *
+ * @example
+ * const virtualWindow = useVirtualWindow({ itemSize: 32 });
+ * const { scrollRef } = virtualWindow;
+ * return (
+ *   <div ref={scrollRef} style={{ height: 320, overflowY: 'auto' }}>
+ *     {virtualWindow.layout(rows.length).map((entry) =>
+ *       entry.kind === 'item' ? (
+ *         <Row key={rows[entry.index].id} row={rows[entry.index]} />
+ *       ) : (
+ *         <div key={entry.key} aria-hidden="true" style={{ height: entry.size }} />
+ *       ),
+ *     )}
+ *   </div>
+ * );
+ */
+export declare function useVirtualWindow({ itemSize, overscan, initialViewportSize, scrollPaddingStart, }: UseVirtualWindowOptions): VirtualWindow;
+
+/** Options of {@link useVirtualWindow}. */
+export declare interface UseVirtualWindowOptions {
+    /**
+     * The height of every row, in pixels (all rows have the same height). A value that is not a
+     * positive finite number warns once in development and counts as 1.
+     */
+    itemSize: number;
+    /**
+     * Rows rendered beyond each edge of the viewport, so a fast scroll shows rows instead of blank
+     * space before the next window renders. A given number is a number of rows; the default covers
+     * at least 240 pixels, so small rows get more of them (9 rows of 28 pixels, 8 of 32).
+     * @default enough rows for 240 pixels, and at least 6
+     */
+    overscan?: number;
+    /**
+     * The viewport height, in pixels, assumed until the scroller is measured: on the server, in the
+     * first render, and while the scroller measures 0 (it has no layout, as in jsdom).
+     * @default 480
+     */
+    initialViewportSize?: number;
+    /**
+     * The height, in pixels, of content pinned over the top of the rows inside the scroller (a
+     * sticky header). `scrollToIndex` places rows in the area below it, and its content bound leaves
+     * it out; the rows' offsets and the layout do not change. A value that is not a finite number of
+     * 0 or more counts as 0.
+     * @default 0
+     */
+    scrollPaddingStart?: number;
+}
+
+/**
+ * Reads the theme, direction, theme classes, portal container and token overrides of the nearest
  * {@link WaveProvider}. Outside a provider it returns light/ltr defaults with `hasProvider: false`.
  *
  * @returns The {@link WaveContextValue} of the nearest provider.
@@ -19146,6 +20691,91 @@ export declare interface VirtualElement {
     contextElement?: Element;
 }
 
+/**
+ * One entry of a windowed list: a row to render, or the empty space that stands in for the rows
+ * that are not rendered. A spacer's `key` is stable for React: `spacer-<index of the next item>`,
+ * or `spacer-end` for the one after the last item.
+ */
+export declare type VirtualEntry = {
+    kind: 'item';
+    index: number;
+} | {
+    kind: 'spacer';
+    size: number;
+    key: string;
+};
+
+/**
+ * A window over a long list of fixed-height rows: which rows to render for the scroll position,
+ * and the space that stands in for the others. {@link useVirtualWindow} returns one; a component
+ * that takes a `virtualWindow` prop renders its rows through it, and an adapter over a
+ * virtualization library can implement the same interface.
+ */
+export declare interface VirtualWindow {
+    /** The row height the window lays out with, in pixels. */
+    itemSize: number;
+    /**
+     * The callback ref of the scrolling element (the element with a bounded height and its own
+     * scrollbar). It attaches once per element and detaches when called with `null`.
+     */
+    scrollRef: React_2.RefCallback<HTMLElement>;
+    /**
+     * The entries to render, in order, for a list of `count` rows: the rows in view plus the
+     * overscan, every `keep` index outside them as a row of its own (the focused row, a row about
+     * to be focused), and spacers for the rows in between. The sizes add up to `count * itemSize`.
+     * A pure function of the window's state and its arguments, called during render; it reads no
+     * DOM.
+     */
+    layout(count: number, options?: {
+        keep?: readonly number[];
+    }): readonly VirtualEntry[];
+    /**
+     * Scrolls the row at `index` into view and moves the window to it in the same update, so the
+     * row is rendered once that update commits. `align` places it at the `start`, `center` or `end`
+     * of the viewport; `auto` (the default) scrolls the least that shows it whole. The offset is
+     * bounded by the rendered content. Before the scroller attaches, the last request is kept and
+     * applied when it does, and once more when the scroller first changes height after that (a
+     * popup that positioning shrinks once it is shown), unless it was scrolled or another request
+     * came in between. Call it from an event handler or an effect, never during render.
+     */
+    scrollToIndex(index: number, options?: {
+        align?: 'auto' | 'start' | 'center' | 'end';
+    }): void;
+}
+
+/**
+ * One row of the visible list: an item under expanded branches only, with the facts a row needs
+ * for its tree semantics. A row is a branch when `hasChildren` is true or when
+ * `item.itemType === 'branch'`; `expanded` is true only for a branch whose value is in the
+ * expanded set (so a childless `'branch'` item can be expanded).
+ */
+export declare interface VisibleFlatItem {
+    /** The item data, as passed in. */
+    item: FlatTreeItemData;
+    /** The depth, 1 for a root (`aria-level`). */
+    level: number;
+    /** The 1-based place among its siblings, in the order of `items` (`aria-posinset`). */
+    position: number;
+    /** The number of siblings, itself included (`aria-setsize`). */
+    setSize: number;
+    /** The value of the parent as indexed (`undefined` for a root, an unknown parent included). */
+    parentValue: string | undefined;
+    /** Whether other items are nested in it. */
+    hasChildren: boolean;
+    /** Whether it can expand: `hasChildren`, or `item.itemType === 'branch'` (`aria-expanded` is set for these). */
+    isBranch: boolean;
+    /** Whether it is a branch in the expanded set. */
+    expanded: boolean;
+    /** The place in the visible list, 0-based. */
+    index: number;
+}
+
+/**
+ * The name of every `--wave-*` variable of `tokens.css`, in camelCase, in the file's groups and
+ * order. A test parses `tokens.css` and fails when a variable is missing here or a name has none.
+ */
+declare const WAVE_TOKEN_NAMES: readonly ["fontFamily", "fontFamilyMonospace", "fontFamilyNumeric", "zOverlay", "zToast", "zTooltip", "durationUltraFast", "durationFaster", "durationFast", "durationNormal", "durationGentle", "durationSlow", "durationSlower", "durationUltraSlow", "curveAccelerateMax", "curveAccelerateMid", "curveAccelerateMin", "curveDecelerateMax", "curveDecelerateMid", "curveDecelerateMin", "curveEasyEaseMax", "curveEasyEase", "curveLinear", "brand10", "brand20", "brand30", "brand40", "brand50", "brand60", "brand70", "brand80", "brand90", "brand100", "brand110", "brand120", "brand130", "brand140", "brand150", "brand160", "grey2", "grey4", "grey6", "grey8", "grey10", "grey12", "grey14", "grey16", "grey20", "grey24", "grey26", "grey30", "grey34", "grey38", "grey40", "grey44", "grey50", "grey60", "grey68", "grey74", "grey78", "grey82", "grey86", "grey88", "grey90", "grey92", "grey94", "grey96", "grey98", "background", "foreground", "card", "secondary", "muted", "mutedForeground", "mutedHover", "mutedPressed", "primary", "primaryForeground", "primaryHover", "primaryPressed", "destructive", "destructiveForeground", "error", "errorForeground", "subtle", "subtleHover", "subtlePressed", "subtleSelected", "selected", "selectedForeground", "selectedHover", "selectedPressed", "border", "stroke", "strokeHover", "strokeAccessible", "input", "inputFilledDarker", "inputFilledStroke", "ring", "success", "successForeground", "successTint", "successTintForeground", "warning", "warningForeground", "warningTint", "warningTintForeground", "errorTint", "errorTintForeground", "severe", "severeForeground", "severeTint", "severeTintForeground", "info", "infoForeground", "infoTint", "infoTintForeground", "inverted", "invertedForeground", "invertedBorder", "track", "skeleton", "rating", "presenceAvailable", "presenceBusy", "presenceAway", "presenceOffline", "presenceOof", "presenceGlyph", "backdrop", "paletteRed", "paletteRedForeground", "paletteRedTint", "paletteRedTintForeground", "paletteRedBorder", "palettePumpkin", "palettePumpkinForeground", "palettePumpkinTint", "palettePumpkinTintForeground", "palettePumpkinBorder", "paletteGold", "paletteGoldForeground", "paletteGoldTint", "paletteGoldTintForeground", "paletteGoldBorder", "paletteForest", "paletteForestForeground", "paletteForestTint", "paletteForestTintForeground", "paletteForestBorder", "paletteTeal", "paletteTealForeground", "paletteTealTint", "paletteTealTintForeground", "paletteTealBorder", "paletteBlue", "paletteBlueForeground", "paletteBlueTint", "paletteBlueTintForeground", "paletteBlueBorder", "paletteNavy", "paletteNavyForeground", "paletteNavyTint", "paletteNavyTintForeground", "paletteNavyBorder", "paletteLavender", "paletteLavenderForeground", "paletteLavenderTint", "paletteLavenderTintForeground", "paletteLavenderBorder", "palettePurple", "palettePurpleForeground", "palettePurpleTint", "palettePurpleTintForeground", "palettePurpleBorder", "paletteMagenta", "paletteMagentaForeground", "paletteMagentaTint", "paletteMagentaTintForeground", "paletteMagentaBorder", "paletteBrown", "paletteBrownForeground", "paletteBrownTint", "paletteBrownTintForeground", "paletteBrownBorder", "paletteSteel", "paletteSteelForeground", "paletteSteelTint", "paletteSteelTintForeground", "paletteSteelBorder", "shadow2", "shadow4", "shadow8", "shadow16", "shadow28", "shadow64", "cardForeground", "secondaryForeground", "accent", "accentForeground", "inputFilledLighter"];
+
 /** Value provided by {@link WaveProvider} and returned by {@link useWaveTheme}. */
 export declare interface WaveContextValue {
     /** The active theme. */
@@ -19163,6 +20793,19 @@ export declare interface WaveContextValue {
     inputDefaults: InputDefaults;
     /** The motion preference of the providers above (`'default'` outside a provider). */
     motion: MotionPreference;
+    /**
+     * The merged token overrides of the providers above (`{}` outside a provider), as given: an
+     * entry skipped for a malformed key or value stays in it, and only `tokenStyle` leaves it out.
+     */
+    tokens: WaveTokenOverrides;
+    /**
+     * The inline style that applies `tokens`, as the provider's root and, unless
+     * `applyStylesToPortals` is `false`, its portals carry it; `undefined` when there is nothing to
+     * set (also outside a provider).
+     */
+    tokenStyle: TokenStyle | undefined;
+    /** Whether portals carry `tokenStyle` (`true` outside a provider). */
+    applyStylesToPortals: boolean;
     /** `false` when no {@link WaveProvider} is above the caller (the defaults are returned). */
     hasProvider: boolean;
 }
@@ -19193,9 +20836,18 @@ export declare type WaveDir = 'ltr' | 'rtl';
  *   slots, Carousel's slide, TabList's sliding line, the reveal of Nav item actions; a part's own
  *   `motion` still wins), while transitions without a slot keep running (Accordion's and Tree's
  *   chevron turns, colour changes); a nested provider inherits an omitted `motion` like `theme`.
+ * - `tokens` overrides design tokens in the subtree with inline custom properties on the root
+ *   (rendered on the server too) and on every portal of the subtree, unless
+ *   `applyStylesToPortals` is `false`. A nested provider merges its overrides over the enclosing
+ *   provider's key by key, also when it sets another `theme`; `tokens={null}` clears them for the
+ *   tokens the theme declares and for the overlays, while the theme-independent ones of an
+ *   enclosing provider still reach the subtree through the CSS cascade. An override whose key is
+ *   not a camelCase identifier, or whose value is neither a finite number nor a string without
+ *   `;`, `{` or `}`, is skipped with a development warning. Without overrides the root renders no
+ *   `style` attribute unless you pass `style`.
  */
 export declare const WaveProvider: {
-    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, motion: motionProp, children, className, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
+    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, motion: motionProp, tokens: tokensProp, applyStylesToPortals: applyStylesToPortalsProp, children, className, style, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -19243,6 +20895,52 @@ export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDi
      * @default the enclosing WaveProvider's motion, else 'default'
      */
     motion?: MotionPreference;
+    /**
+     * Design token overrides for the subtree: CSS values by token name, the CSS variable in camelCase
+     * without its `--wave-` prefix (`brand80` for `--wave-brand-80`, `primaryForeground` for
+     * `--wave-primary-foreground`; a number is written as its string). `theme` still names one of
+     * the three themes, and the overrides apply over it as inline custom properties on the root and
+     * on every portal of the subtree (see `applyStylesToPortals`), so its dialogs, menus, popovers,
+     * tooltips and toasts take them too. Fluent's `theme` prop with a partial theme is the
+     * counterpart.
+     *
+     * A nested provider merges its overrides over the enclosing provider's, key by key: an omitted
+     * `tokens` inherits them all, and a key whose value is `undefined` inherits that key. `null`
+     * clears the inherited overrides of the tokens the theme declares (the semantic colours, shadows,
+     * palette) and of the subtree's overlays; theme-independent tokens (the brand and grey ramps,
+     * font families, stacking order, motion durations and curves) of an enclosing provider still
+     * reach the subtree's own elements through the CSS cascade, and the theme's colours built on the
+     * brand ramp follow them there. A nested provider that sets another `theme` inherits the
+     * overrides too, so set an override of a semantic colour (`primary`) in the provider that sets
+     * the theme it was chosen for. A whole brand ramp is better made with `createBrandTokens` than
+     * written by hand.
+     * A key that is not a camelCase identifier, or a value that is neither a finite number nor a
+     * string without `;`, `{` or `}` (such a value could add a declaration of its own to the
+     * server-rendered `style` attribute), is skipped with a development warning; a well-formed name
+     * is not checked against the list of tokens (TypeScript refuses a misspelled one).
+     *
+     * The overrides are rendered on the server too. Under a Content Security Policy that blocks
+     * inline style attributes (`style-src` without `'unsafe-inline'`), the server-rendered overrides
+     * do not apply and hydration does not apply them again: ship them in a stylesheet there, and pass
+     * no `tokens` (nor `getTokenStyle`), since the overlays and the subtrees rendered in the client
+     * would still take them and leave the page half branded.
+     *
+     * @example
+     * <WaveProvider tokens={{ fontFamily: 'Inter, sans-serif', zOverlay: 2000 }}>
+     * @default the enclosing WaveProvider's overrides, else none
+     */
+    tokens?: WaveTokenOverrides | null;
+    /**
+     * Whether the portals of the subtree (dialogs, popovers, menus, tooltips, toasts) carry the
+     * overrides of `tokens`. `false` leaves them out: an overlay then shows its theme's own values
+     * for the tokens the theme declares, and keeps the surrounding cascade (that of the element it
+     * renders into) for the theme-independent ones. The theme classes and the direction are set on
+     * every portal either way, so an overlay of a dark provider is still dark. Fluent's
+     * `applyStylesToPortals` is the counterpart; unlike Fluent's, a nested provider inherits an
+     * omitted value, like `theme`.
+     * @default the enclosing WaveProvider's value, else true
+     */
+    applyStylesToPortals?: boolean;
     /** Content rendered inside the themed container. */
     children: React_2.ReactNode;
     /** Ref to the themed root `<div>`. */
@@ -19258,4 +20956,42 @@ export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDi
 /** Supported visual themes for the Wave design system. */
 export declare type WaveTheme = 'light' | 'dark' | 'high-contrast';
 
+/**
+ * The name of a design token: its CSS custom property without the `--wave-` prefix, in camelCase.
+ * `--wave-primary-foreground` is `primaryForeground`, `--wave-brand-80` is `brand80` and
+ * `--wave-palette-red-tint` is `paletteRedTint`.
+ */
+export declare type WaveTokenName = (typeof WAVE_TOKEN_NAMES)[number];
+
+/**
+ * Token overrides: CSS values by token name, as `WaveProvider tokens` and `getTokenStyle` take
+ * them. A number is written as its string (`zOverlay: 2000`); a key whose value is `undefined`
+ * sets nothing.
+ */
+export declare type WaveTokenOverrides = {
+    [K in WaveTokenName]?: string | number;
+};
+
+/** The shape of `waveTokens`: every token name mapped to the CSS value that reads the token. */
+export declare type WaveTokens = {
+    readonly [K in WaveTokenName]: string;
+};
+
+/**
+ * Every design token as the CSS value that reads it: `waveTokens.primary` is
+ * `'var(--wave-primary)'`, typed as that literal. Use it where a style is written in JavaScript
+ * (an inline style, a CSS-in-JS rule, the colours of an SVG chart), so the value follows the theme
+ * and the provider's token overrides. The counterpart of Fluent's `tokens` object
+ * (`tokens.colorBrandBackground`), with Wave's names: the CSS variable in camelCase without its
+ * `--wave-` prefix. A canvas library cannot read a CSS variable: resolve the value with
+ * `getComputedStyle` on an element inside the provider, and again when the theme changes.
+ * Frozen and server-safe; no component imports it.
+ *
+ * @example
+ * <span style={{ color: waveTokens.primary, boxShadow: waveTokens.shadow8 }} />
+ */
+export declare const waveTokens: {
+    readonly [K in WaveTokenName]: `var(${TokenVariable<K>})`;
+};
+
 export { }