@mortenbrudvik/waveui 0.12.0 → 0.14.0

package/dist/index.d.cts

@@ -306,7 +306,7 @@ export declare type Appearance = 'primary' | 'outline' | 'subtle' | 'transparent
  * <Avatar name="Jane Doe" src="/jane.jpg" badge={<PresenceBadge status="available" />} />
  */
 export declare const Avatar: {
-    ({ src, name, size: sizeProp, icon, image, badge, decorative, className, ref, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-description": ariaDescription, "aria-details": ariaDetails, ...rest }: AvatarProps): React_2.JSX.Element;
+    ({ src, name, size: sizeProp, shape: shapeProp, color: colorProp, idForColor, active, activeAppearance, initials: initialsSlot, icon, image, badge, decorative, className, ref, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-description": ariaDescription, "aria-details": ariaDetails, ...rest }: AvatarProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -325,30 +325,48 @@ export declare const avatarClassNames: {
     readonly badge: "wave-avatar__badge";
 };
 
+/** The color of an Avatar that shows initials: a look, `colorful` (hashed), or a named color. */
+export declare type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+
 /**
- * A row of overlapping avatars (`role="group"`; name it with `aria-label`).
+ * A row of avatars (`role="group"`; name it with `aria-label`), laid out as a `stack` (overlapping),
+ * `spread` or `pie` (`layout`). `size` reaches the members.
  *
  * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` ("+3", named
- * "3 more", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an
- * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`
- * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or
- * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.
- * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to
- * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered
+ * "3 more", see `overflowLabel`; `overflowIndicator="icon"` shows an icon, and a count above 99
+ * reads "99+"). It toggles a popup that lists the hidden members: an `AvatarGroup.Item` as a row
+ * with its avatar and name, an `Avatar` by its `aria-label` or `name` prop, text as it is. Other
+ * members, such as an `Avatar` inside a link or one labelled by `aria-labelledby`, are rendered as
+ * they are, and an `Avatar` or text with no accessible name is listed as `unnamedMemberLabel` with
+ * a development warning. Focus moves into the popup; Escape, a press outside or the button close
+ * it and focus returns to the button (`open`, `defaultOpen` and `onOpenChange(open, details)`
+ * control it). Tab and Shift+Tab move through the popup's own tab stops (links in rendered
  * members); Tab from the last one closes the popup and moves on to the element after the button,
  * Shift+Tab from the first one closes it and returns to the button. When the button is the last
  * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to
  * the browser or the enclosing focus trap.
  *
+ * To split the members yourself, render `AvatarGroup.Item`s and an `AvatarGroup.Popover` holding
+ * the overflow items (see `partitionAvatarGroupItems`).
+ *
  * @example
  * <AvatarGroup aria-label="Project team" max={3}>
- *   <Avatar name="Ada Lovelace" />
- *   <Avatar name="Alan Turing" />
+ *   <AvatarGroup.Item name="Ada Lovelace" />
+ *   <AvatarGroup.Item name="Alan Turing" />
  * </AvatarGroup>
  */
 export declare const AvatarGroup: {
-    ({ max, size, overflowLabel, unnamedMemberLabel, className, children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: AvatarGroupProps): React_2.JSX.Element;
+    ({ max, size, layout, overflowIndicator, overflowLabel, unnamedMemberLabel, open, defaultOpen, onOpenChange, className, children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: AvatarGroupProps): React_2.JSX.Element;
     displayName: string;
+} & {
+    Item: {
+        ({ className, ...props }: AvatarGroupItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Popover: {
+        ({ children, indicator, count, label: labelProp, unnamedMemberLabel, open: openProp, defaultOpen, onOpenChange, className, ref, }: AvatarGroupPopoverProps): React_2.JSX.Element;
+        displayName: string;
+    };
 };
 
 /**
@@ -360,24 +378,120 @@ export declare const avatarGroupClassNames: {
     readonly root: "wave-avatar-group";
     readonly item: "wave-avatar-group__item";
     readonly overflowButton: "wave-avatar-group__overflow-button";
+    readonly pie: "wave-avatar-group__pie";
     readonly surface: "wave-avatar-group__surface";
     readonly list: "wave-avatar-group__list";
     readonly listItem: "wave-avatar-group__list-item";
 };
 
+/**
+ * A member of an AvatarGroup. In the group it renders as an `Avatar`; in the overflow list of the
+ * popup it renders as a row with the avatar and the name. It takes the props of an `Avatar`.
+ */
+export declare const AvatarGroupItem: {
+    ({ className, ...props }: AvatarGroupItemProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * AvatarGroup.Item: `root` on the avatar it renders in the group, and on the row (avatar and name)
+ * it renders in the overflow list; `name` on the name text of that row.
+ */
+export declare const avatarGroupItemClassNames: {
+    readonly root: "wave-avatar-group-item";
+    readonly name: "wave-avatar-group-item__name";
+};
+
+/** Properties for the AvatarGroup.Item sub-component: the props of an Avatar. */
+export declare type AvatarGroupItemProps = AvatarProps;
+
+/** The layouts of an AvatarGroup. */
+export declare type AvatarGroupLayout = 'stack' | 'spread' | 'pie';
+
+/** Why the popup of an AvatarGroup opens or closes: its trigger, or a dismissal. */
+export declare type AvatarGroupOpenChangeDetails = OpenChangeDetails<DismissReason | 'trigger'>;
+
+/**
+ * The overflow of an AvatarGroup, written by hand: a "+N" button that opens a popup listing its
+ * children (`AvatarGroup.Item`s, `Avatar`s, text or other elements). Write it as a child of the
+ * group to replace the overflow that `max` makes; its `count`, `indicator`, `label`, `open` and
+ * `onOpenChange` take over what `max` would have derived. Tab leaves the popup from the button.
+ */
+export declare const AvatarGroupPopover: {
+    ({ children, indicator, count, label: labelProp, unnamedMemberLabel, open: openProp, defaultOpen, onOpenChange, className, ref, }: AvatarGroupPopoverProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** AvatarGroup.Popover: `root` on the overflow button (which also carries the group's button class). */
+export declare const avatarGroupPopoverClassNames: {
+    readonly root: "wave-avatar-group-popover";
+};
+
+/** Properties for the AvatarGroup.Popover sub-component. */
+export declare interface AvatarGroupPopoverProps {
+    /** The overflow members: `AvatarGroup.Item`s, `Avatar`s, text or other elements. */
+    children?: React_2.ReactNode;
+    /**
+     * What the overflow button shows: the number of hidden members (`+3`, capped at `99+`), or an
+     * icon.
+     * @default 'count'
+     */
+    indicator?: 'count' | 'icon';
+    /** The number of hidden members. @default the number of `children` */
+    count?: number;
+    /**
+     * Accessible name of the overflow button and its popup. A function receives the number of hidden
+     * members.
+     * @default (count) => `${count} more`
+     */
+    label?: string | ((count: number) => string);
+    /**
+     * Text listed in the overflow popup for a hidden member that has no accessible name.
+     * @default 'Unnamed member'
+     */
+    unnamedMemberLabel?: string;
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    /**
+     * Whether the popup starts open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the popup asks to open or close, with the reason (`trigger`, `escape`, …). */
+    onOpenChange?: (open: boolean, details?: AvatarGroupOpenChangeDetails) => void;
+    /** Extra classes for the overflow button. */
+    className?: string;
+    /** Ref to the overflow `<button>`. */
+    ref?: React_2.Ref<HTMLButtonElement>;
+}
+
 /** Properties for the AvatarGroup component. */
 export declare interface AvatarGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
      * Maximum number of avatars to display. The others are replaced by an overflow button that
      * lists their names. `0` or a negative value shows only the overflow button, a fraction is
      * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment
-     * count one by one.
+     * count one by one. A `pie` shows at most three.
      */
     max?: number;
-    /** Size of the overflow button (match it to the avatars).
-     * @default 'medium'
+    /**
+     * Size of the avatars. It reaches the members that set no `size` of their own, and the overflow
+     * button.
+     * @default 'medium' ('large' in a `pie`)
      */
-    size?: Size;
+    size?: AvatarSize;
+    /**
+     * How the members are laid out: `stack` overlaps them, `spread` puts them side by side, `pie`
+     * draws up to three of them as the wedges of one circle (the group's name is then the only name).
+     * @default 'stack'
+     */
+    layout?: AvatarGroupLayout;
+    /**
+     * What the overflow button shows: the number of hidden members (`+3`, capped at `99+`), or an
+     * icon.
+     * @default 'count'
+     */
+    overflowIndicator?: 'count' | 'icon';
     /**
      * Accessible name of the overflow button (and its popup). A function receives the number of
      * hidden members. Localise it here.
@@ -391,10 +505,31 @@ export declare interface AvatarGroupProps extends React_2.HTMLAttributes<HTMLDiv
      * @default 'Unnamed member'
      */
     unnamedMemberLabel?: string;
+    /** Whether the overflow popup is open (controlled). */
+    open?: boolean;
+    /**
+     * Whether the overflow popup starts open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the overflow popup asks to open or close, with the reason: `trigger` (the button),
+     * `escape`, `outside-press` or `focus-outside`.
+     */
+    onOpenChange?: (open: boolean, details?: AvatarGroupOpenChangeDetails) => void;
     /** Ref to the root `<div>`. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** The named colors of an Avatar: the persona palette (`--wave-palette-<name>` tokens). */
+export declare type AvatarNamedColor = 'red' | 'pumpkin' | 'gold' | 'forest' | 'teal' | 'blue' | 'navy' | 'lavender' | 'purple' | 'magenta' | 'brown' | 'steel';
+
+/**
+ * The numeric sizes of an Avatar, in pixels (Fluent's 14 sizes). A literal union: Tailwind can only
+ * generate the classes of {@link avatarBoxClasses}.
+ */
+export declare type AvatarNumericSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
 /** Properties for the Avatar component. */
 export declare interface AvatarProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     /**
@@ -409,11 +544,49 @@ export declare interface AvatarProps extends React_2.HTMLAttributes<HTMLSpanElem
      */
     name?: string;
     /**
-     * Size of the avatar. Without it, an Avatar in the `media` of a tag (Tag, InteractionTag) takes
-     * the tag's media box instead: 24, 20 or 16px by the tag's size.
+     * Size of the avatar: a named size (`extra-small` 24px to `extra-large` 56px) or a pixel size from
+     * 16 to 128. Without it, an Avatar in the `media` of a tag (Tag, InteractionTag) takes the tag's
+     * media box instead: 24, 20 or 16px by the tag's size.
      * @default 'medium'
      */
-    size?: Size;
+    size?: AvatarSize;
+    /**
+     * Shape of the avatar. Without it, an Avatar in the `media` of a rounded tag is square.
+     * @default 'circular'
+     */
+    shape?: 'circular' | 'square';
+    /**
+     * Color of the avatar when it shows initials: `brand` (the primary color), `neutral` (muted),
+     * `colorful` (one of the named colors, chosen from `idForColor`, else from `name`; `brand`
+     * without either) or a named color of the persona palette. An image, or an icon, keeps its own
+     * look.
+     * @default 'brand'
+     */
+    color?: AvatarColor;
+    /**
+     * Whether the person is active: `active` draws the `activeAppearance` around the avatar, `inactive`
+     * dims it, `unset` shows neither.
+     * @default 'unset'
+     */
+    active?: 'active' | 'inactive' | 'unset';
+    /**
+     * How an `active` avatar is marked: a `ring`, a `shadow`, both (`ring-shadow`) or a `glow` in the
+     * primary color.
+     * @default 'ring'
+     */
+    activeAppearance?: 'ring' | 'ring-shadow' | 'shadow' | 'glow';
+    /**
+     * A stable id (a user id, say) that picks the color of `color="colorful"`, so the same person has
+     * the same color wherever they are shown, whatever their name looks like.
+     */
+    idForColor?: string;
+    /**
+     * The initials shown when there is no image and no icon, instead of the ones computed from
+     * `name` (see `getInitials`): a string, an element or an object of `<span>` attributes. A value
+     * that renders nothing (`''`, `[]`) keeps the computed initials. Rendered in an `aria-hidden`
+     * `<span>`.
+     */
+    initials?: Slot<'span'>;
     /**
      * Icon shown instead of the initials when there is no image. Rendered in an `aria-hidden`
      * `<span>` (a slot object can override its attributes). A falsy value (`null`, `false`, `''`,
@@ -455,6 +628,9 @@ export declare interface AvatarProps extends React_2.HTMLAttributes<HTMLSpanElem
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/** The size of an Avatar: a named size (24 to 56px) or one of the {@link AvatarNumericSize}s. */
+export declare type AvatarSize = Size | AvatarNumericSize;
+
 /** How a modal surface's backdrop paints the page: `dimmed`, or `transparent` (a modal over another). */
 export declare type BackdropAppearance = 'dimmed' | 'transparent';
 
@@ -515,7 +691,12 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanEleme
  * 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
  * the second one on, the item begins with a decorative separator chevron that is mirrored in
- * right-to-left layouts.
+ * right-to-left layouts (`divider` replaces or hides it).
+ *
+ * `maxDisplayedItems` collapses the middle of a long trail into a "…" menu button, and
+ * `overflow="auto"` collapses it to the room it has instead (a "…" menu button stands in for the
+ * hidden middle items); `size` sets the text step and `focusMode="arrow"` makes the trail one Tab
+ * stop with arrow-key navigation.
  *
  * `Breadcrumb.Item` is also exported as `BreadcrumbItem`: React Server Components import the flat
  * name, because dotted access needs a client file.
@@ -527,21 +708,26 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanEleme
  * </Breadcrumb>
  */
 export declare const Breadcrumb: {
-    ({ children, className, ref, ...rest }: BreadcrumbProps): React_2.JSX.Element;
+    ({ children, maxDisplayedItems, overflowIndex, overflow, overflowLabel, size, focusMode, divider, className, onKeyDown, onFocus, ref, ...rest }: BreadcrumbProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Item: typeof BreadcrumbItem;
 };
 
 /**
- * Breadcrumb: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`; `divider`
- * on each separator `<svg>`.
+ * Breadcrumb: `root` on the `<nav>`; `list` on the trail's list element (its `<ol>`, or with
+ * `overflow="auto"` the Overflow's `role="list"` element); `listItem` on each `<li>`; `divider` on
+ * each separator (the default chevron `<svg>`, or the `<span>` of a custom `divider`);
+ * `overflowButton` on the "…" `<button>` that opens the menu of the collapsed items, with
+ * `maxDisplayedItems` and with `overflow="auto"`. With `overflow="auto"` the "…" list item is the
+ * Overflow's button wrapper, not an `<li>`, so it carries no `listItem` class.
  */
 export declare const breadcrumbClassNames: {
     readonly root: "wave-breadcrumb";
     readonly list: "wave-breadcrumb__list";
     readonly listItem: "wave-breadcrumb__list-item";
     readonly divider: "wave-breadcrumb__divider";
+    readonly overflowButton: "wave-breadcrumb__overflow-button";
 };
 
 /**
@@ -676,6 +862,58 @@ export declare interface BreadcrumbProps extends React_2.HTMLAttributes<HTMLElem
      * the items of a conditional group (`{isAdmin && <>…</>}`) each get their own list item too.
      */
     children: React_2.ReactNode;
+    /**
+     * The most items the trail shows, the overflow button not counted. A longer trail collapses its
+     * middle items, from `overflowIndex`, into a "…" button that opens a menu of them (a link item
+     * becomes a `Menu.ItemLink`, an `asChild` element of a component (a router link) a
+     * `Menu.ItemLink` rendered by that component with the element's own props, its `as` included,
+     * a button item a `Menu.Item`). The first item and the last `current` item are never hidden.
+     * Without it the whole trail is shown.
+     * A value below 1 means 6, as in `partitionBreadcrumbItems`. Ignored with `overflow="auto"`.
+     */
+    maxDisplayedItems?: number;
+    /**
+     * The index of the first collapsed item (with `maxDisplayedItems`). It is at least 1, so the
+     * first item stays, and at most `maxDisplayedItems - 1`. Ignored with `overflow="auto"`.
+     * @default 1
+     */
+    overflowIndex?: number;
+    /**
+     * `'auto'` fits the trail to its room: the middle items that do not fit are hidden, from the
+     * start of the trail; the first item and the last `current` item never are. A "…" list item
+     * with its own separator then stands just before the first hidden item (so the trail reads
+     * "Home › … › Parent › Page"), and its button (`overflowLabel`) opens a menu of the hidden
+     * items, in trail order. When even the first and the current item do not fit, the button covers
+     * the end of the trail. The room decides alone: `maxDisplayedItems` and `overflowIndex` do not
+     * apply. The trail list is then an `Overflow` (a `role="list"` element with the `wave-overflow`
+     * class and 4px of padding) that measures with `ResizeObserver`. `'none'` shows the trail as
+     * the other props say.
+     * @default 'none'
+     */
+    overflow?: 'none' | 'auto';
+    /**
+     * Accessible name of the overflow button (with `maxDisplayedItems` or `overflow="auto"`).
+     * @default "More items"
+     */
+    overflowLabel?: string;
+    /**
+     * Text and divider size.
+     * @default 'medium'
+     */
+    size?: CoreSize;
+    /**
+     * `'tab'`: every link is a Tab stop. `'arrow'`: the trail is one Tab stop (the last focused link
+     * or button, at first the first one) and the arrow keys (mirrored in right-to-left layouts),
+     * Home and End move between its links and the overflow button.
+     * @default 'tab'
+     */
+    focusMode?: FocusMode;
+    /**
+     * The separator between items; a decorative `<span>`. `null` or `undefined` keep the chevron
+     * (mirrored in right-to-left layouts); `false`, or content that renders nothing, hides the
+     * separators. A custom divider is not mirrored.
+     */
+    divider?: Slot<'span'>;
     /** Ref to the `<nav>` element. */
     ref?: React_2.Ref<HTMLElement>;
 }
@@ -1071,7 +1309,8 @@ export declare interface CalendarValueChangeDetails {
 }
 
 /**
- * A surface that groups related content, with `Card.Header`, `Card.Body` and `Card.Footer`.
+ * A surface that groups related content, with `Card.Header`, `Card.Preview`, `Card.Body` and
+ * `Card.Footer`.
  *
  * **Selectable cards** (`onSelect`) come in two patterns:
  * - A card without interactive content is itself the control (`selectionControl="card"`, the
@@ -1088,7 +1327,7 @@ export declare interface CalendarValueChangeDetails {
  * the selected look only; its state is not exposed to assistive technology.
  *
  * React Server Components cannot dot into a client module: import the flat names `CardHeader`,
- * `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.
+ * `CardPreview`, `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.
  *
  * @example
  * <Card onSelect={toggle} selected={selected}>
@@ -1102,10 +1341,14 @@ export declare interface CalendarValueChangeDetails {
  */
 export declare const Card: PolymorphicComponent<"div", CardOwnProps> & {
     Header: PolymorphicComponent<"div", CardHeaderOwnProps>;
+    Preview: PolymorphicComponent<"div", CardPreviewOwnProps>;
     Body: PolymorphicComponent<"div", CardBodyOwnProps>;
     Footer: PolymorphicComponent<"div", CardFooterOwnProps>;
 };
 
+/** The look of a Card: a filled surface with a shadow, a muted fill, an outline, or no surface. */
+export declare type CardAppearance = 'filled' | 'filled-alternative' | 'outline' | 'subtle';
+
 /**
  * The main content of a {@link Card}. Flat export for React Server Components (`Card.Body` in
  * client files).
@@ -1131,6 +1374,7 @@ export declare const cardClassNames: {
     readonly root: "wave-card";
     readonly checkbox: "wave-card__checkbox";
     readonly checkmark: "wave-card__checkmark";
+    readonly floatingAction: "wave-card__floating-action";
 };
 
 /**
@@ -1160,8 +1404,11 @@ export declare const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps>
 /** Card.Header: `root` on the rendered element; `title` on the title; `subtitle` on the subtitle. */
 export declare const cardHeaderClassNames: {
     readonly root: "wave-card-header";
+    readonly image: "wave-card-header__image";
+    readonly text: "wave-card-header__text";
     readonly title: "wave-card-header__title";
     readonly subtitle: "wave-card-header__subtitle";
+    readonly action: "wave-card-header__action";
 };
 
 /** The Card.Header's own props (component-specific props only). */
@@ -1174,6 +1421,16 @@ export declare interface CardHeaderOwnProps {
     title?: React_2.ReactNode;
     /** Subtitle content displayed below the title (none when it renders nothing, as `title`). */
     subtitle?: React_2.ReactNode;
+    /**
+     * An image beside the text, at the start: an `Avatar`, an icon, a logo. A value that renders
+     * nothing renders no element.
+     */
+    image?: Slot<'span'>;
+    /**
+     * An action beside the text, at the end: a menu button, say. A value that renders nothing
+     * renders no element.
+     */
+    action?: Slot<'span'>;
 }
 
 /** Props of {@link CardHeader} rendered as `C` (default `'div'`), including `ref`. */
@@ -1184,6 +1441,25 @@ export declare type CardHeaderProps<C extends React_2.ElementType = 'div'> = Pol
  * Every other prop comes from the rendered element (`as`).
  */
 export declare interface CardOwnProps {
+    /**
+     * Look of the card: `filled` (a surface with a border and a shadow), `filled-alternative` (a
+     * muted fill), `outline` (a border only) or `subtle` (no surface until hovered or selected). A
+     * selectable card gets a hover and pressed look for its appearance; the selected look is the
+     * same in every appearance.
+     * @default 'filled'
+     */
+    appearance?: CardAppearance;
+    /**
+     * Padding of the card's parts: `small` 0.75rem, `medium` 1rem, `large` 1.25rem.
+     * @default 'medium'
+     */
+    size?: CoreSize;
+    /**
+     * Layout of the card's parts: `vertical` stacks them, `horizontal` puts them in a row (put the
+     * text parts in one wrapper element to keep them stacked beside a `Card.Preview`).
+     * @default 'vertical'
+     */
+    orientation?: Orientation;
     /**
      * Whether the card is selected. Shown with the selected colors plus non-color cues: a 2px primary
      * border (a 1px border plus an inset 1px ring), a Highlight outline in forced-colors mode, and a
@@ -1225,8 +1501,54 @@ export declare interface CardOwnProps {
      * `Card.Header` title, which the checkbox references with `aria-labelledby`.
      */
     selectLabel?: string;
+    /**
+     * The built-in checkbox of `selectionControl="checkbox"`: an object of `<input>` attributes is
+     * merged onto it (a class, `aria-describedby`, `name`; its type, checked state and change
+     * handling stay the card's), an element replaces it (give that control its own name and call
+     * `onSelect` from it), and `null` or `false` removes it, for a control you render elsewhere.
+     * Ignored with the default `selectionControl`.
+     */
+    checkbox?: Slot<'input'>;
+    /**
+     * An action over the top end corner of the card (a menu button, say). A card with one is
+     * positioned; with `selectionControl="checkbox"` the built-in checkbox then moves to the top
+     * start corner. Content that renders nothing renders no element.
+     */
+    floatingAction?: Slot<'span'>;
+}
+
+/**
+ * Edge-to-edge media of a {@link Card} (an image, a video, a map), with an optional `logo` over its
+ * bottom start corner. It has no padding: in a vertical card it fills the width, in a horizontal
+ * one it is the full-height block at the start. Flat export for React Server Components
+ * (`Card.Preview` in client files).
+ *
+ * @example
+ * <Card>
+ *   <Card.Preview logo={<img alt="Contoso" src="/logo.svg" />}><img alt="" src="/cover.jpg" /></Card.Preview>
+ *   <Card.Header title="Contoso" />
+ * </Card>
+ */
+export declare const CardPreview: PolymorphicComponent<'div', CardPreviewOwnProps>;
+
+/** Card.Preview: `root` on the rendered element; `logo` on the logo over its bottom start corner. */
+export declare const cardPreviewClassNames: {
+    readonly root: "wave-card-preview";
+    readonly logo: "wave-card-preview__logo";
+};
+
+/** The Card.Preview's own props (component-specific props only). */
+export declare interface CardPreviewOwnProps {
+    /**
+     * A logo placed over the bottom start corner of the preview: a string, an element or an object
+     * of `<span>` attributes. A value that renders nothing renders no element.
+     */
+    logo?: Slot<'span'>;
 }
 
+/** Props of {@link CardPreview} rendered as `C` (default `'div'`), including `ref`. */
+export declare type CardPreviewProps<C extends React_2.ElementType = 'div'> = PolymorphicProps<C, CardPreviewOwnProps>;
+
 /**
  * Props of {@link Card} rendered as `C` (default `'div'`). `CardProps` without a type argument is
  * the 0.4 name: the props of a Card rendered as a `<div>`, including `ref`.
@@ -1261,19 +1583,32 @@ export declare type CardProps<C extends React_2.ElementType = 'div'> = Polymorph
  * - The controls are layered over the slides inside the carousel's own stacking context, so they
  *   never paint over page headers that stay in view while the page scrolls.
  *
- * Compound access (`Carousel.Item`) needs a client module; React Server Components import the
- * flat name `CarouselItem` instead.
+ * - `groupSize` shows several slides per page, `draggable` lets the pointer drag them, and a
+ *   `thumbnail` on a `Carousel.Item` turns the picker into a row of thumbnails.
+ * - `controlsLayout` places the Previous and Next buttons over the slides (`overlay`,
+ *   `overlay-wide`) or beside them (`inline`, `inline-wide`); `Carousel.Button` replaces the
+ *   built-in button of its `direction` with one of your own glyph.
+ *
+ * Compound access (`Carousel.Item`, `Carousel.Button`) needs a client module; React Server
+ * Components import the flat names `CarouselItem` and `CarouselButton` instead.
  */
 export declare const Carousel: {
-    ({ value: controlledValue, defaultValue, onValueChange, autoPlay, autoPlayInterval, autoPlayLabels, labels, loop, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: CarouselProps): React_2.JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, autoPlay, autoPlayInterval, autoPlayLabels, labels, loop, groupSize, align, draggable, controlsLayout, appearance, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: CarouselProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Item: {
-        ({ className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
+        ({ thumbnail: _thumbnail, className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        ({ direction, onClick, className, children, ref, ...rest }: CarouselButtonProps): React_2.JSX.Element;
         displayName: string;
     };
 };
 
+/** How a Carousel is drawn: `flat`, or `elevated` with rounded corners and a shadow. */
+export declare type CarouselAppearance = 'flat' | 'elevated';
+
 /** Accessible names of the rotation control shown while `autoPlay` is on. */
 export declare interface CarouselAutoPlayLabels {
     /** Name of the control while slides rotate (activating it stops the rotation).
@@ -1286,15 +1621,42 @@ export declare interface CarouselAutoPlayLabels {
     play?: string;
 }
 
+/**
+ * A Previous or Next button written in a {@link Carousel}, for a glyph or look of your own.
+ * Write it as a direct child of the Carousel: it replaces the built-in button of its
+ * `direction`, takes its place in the layout and is named, disabled and wired to the slides the
+ * same way (`labels.previous`/`labels.next`, `aria-controls`, `aria-disabled` at the ends
+ * without `loop`, which keeps it focusable). Its children replace the chevron, which mirrors in
+ * right-to-left layouts; `aria-label` replaces the name.
+ */
+export declare const CarouselButton: {
+    ({ direction, onClick, className, children, ref, ...rest }: CarouselButtonProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** Carousel.Button: `root` on the button element. */
+export declare const carouselButtonClassNames: {
+    readonly root: "wave-carousel-button";
+};
+
+/** Properties for the CarouselButton sub-component. */
+export declare interface CarouselButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Which way the button moves the carousel. */
+    direction: 'previous' | 'next';
+    ref?: React_2.Ref<HTMLButtonElement>;
+}
+
 /**
  * Carousel: `root` on the `role="region"` element; `autoPlayButton` on the pause and start
- * button; `track` on the moving element around the slides; `slide` on each slide wrapper;
+ * button; `viewport` on the clipping element around the track; `track` on the moving element
+ * around the slides; `slide` on each slide wrapper;
  * `previousButton` and `nextButton` on the arrow buttons; `picker` on the `role="group"` of
  * picker buttons; `pickerButton` on each of them; `pickerIndicator` on each button's dot.
  */
 export declare const carouselClassNames: {
     readonly root: "wave-carousel";
     readonly autoPlayButton: "wave-carousel__auto-play-button";
+    readonly viewport: "wave-carousel__viewport";
     readonly track: "wave-carousel__track";
     readonly slide: "wave-carousel__slide";
     readonly previousButton: "wave-carousel__previous-button";
@@ -1304,23 +1666,35 @@ export declare const carouselClassNames: {
     readonly pickerIndicator: "wave-carousel__picker-indicator";
 };
 
+/** Where a Carousel puts its Previous and Next buttons. */
+export declare type CarouselControlsLayout = 'overlay' | 'inline' | 'overlay-wide' | 'inline-wide';
+
 /**
  * One slide of a {@link Carousel}. Write it in the Carousel, directly or in a Fragment: a component
  * that renders `Carousel.Item` itself is not recognised as a slide (put that component inside the
  * `Carousel.Item` instead).
  */
 export declare const CarouselItem: {
-    ({ className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
+    ({ thumbnail: _thumbnail, className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
     displayName: string;
 };
 
-/** Carousel.Item: `root` on the item element. */
+/** Carousel.Item: `root` on the item element; `thumbnail` on the image in its picker button. */
 export declare const carouselItemClassNames: {
     readonly root: "wave-carousel-item";
+    readonly thumbnail: "wave-carousel-item__thumbnail";
 };
 
 /** Properties for the CarouselItem sub-component. */
 export declare interface CarouselItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * An image for this slide's button in the picker, in place of the dot. A string is the image
+     * `src`; an object sets the `<img>`'s attributes. The button keeps its slide-label name, so the
+     * image is decorative (`alt=""`). When any slide has one, the picker becomes a row of
+     * thumbnails below the slides; a slide without one keeps its dot. With `groupSize` above 1, a
+     * page shows the thumbnail of its first slide.
+     */
+    thumbnail?: Slot<'img'>;
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
@@ -1350,6 +1724,13 @@ export declare interface CarouselLabels {
      * @default (index, total) => `Slide ${index + 1} of ${total}`
      */
     slide?: (index: number, total: number) => string;
+    /**
+     * Name of a page of several slides, from the one-based number of its first and last slide, out
+     * of `total` slides (`groupSize` above 1). It names the page's picker button and is announced
+     * by the live region when the page is shown. A page of one slide uses `slide`.
+     * @default (start, end, total) => `Slides ${start} to ${end} of ${total}`
+     */
+    slides?: (start: number, end: number, total: number) => string;
     /** How assistive technology announces the carousel region (`aria-roledescription`).
      * @default 'carousel'
      */
@@ -1362,14 +1743,57 @@ export declare interface CarouselLabels {
 
 /** Properties for the Carousel component. */
 export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Controlled index of the currently active slide. Out-of-range values show the nearest slide. */
+    /**
+     * Controlled index of the active slide: with `groupSize` above 1, the first slide of the shown
+     * page. A value in the middle of a page shows that page and out-of-range values show the
+     * nearest one.
+     */
     value?: number;
     /** Default active slide index for uncontrolled usage.
      * @default 0
      */
     defaultValue?: number;
-    /** Called with the new index when the active slide changes (not when it stays the same). */
+    /**
+     * Called with the new index when the active slide changes (not when it stays the same): the
+     * first slide of the new page when `groupSize` is above 1.
+     */
     onValueChange?: (index: number) => void;
+    /**
+     * How many slides one page shows: a number, or `'auto'` to show as many as fit the width of the
+     * carousel (the slides keep their own width, which must be equal). Previous, Next, the picker
+     * (one button per page), looping and autoplay move by page, and the slides of the shown page
+     * form one arrow-key focus group. With `1` each slide fills the width, as before.
+     * @default 1
+     */
+    groupSize?: number | 'auto';
+    /**
+     * With `groupSize="auto"`, where the shown page sits when its slides do not fill the width.
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Lets the pointer drag the slides (mouse, touch and pen). The track follows the pointer and,
+     * on release, the page changes when the drag passed a quarter of the width or left fast, else
+     * it snaps back; the direction follows the carousel's. The click that ends a drag is not
+     * delivered to the slide, and a vertical swipe still scrolls the page. Dragging pauses
+     * autoplay like the pointer over the carousel does. The buttons and the keyboard stay the way
+     * to operate the carousel without a pointer.
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * Where the Previous and Next buttons go. `overlay` floats round buttons over the slides;
+     * `overlay-wide` makes them full-height strips at the edges; `inline` puts them in a row with
+     * the slides, outside them; `inline-wide` is `inline` with full-height buttons. The rotation
+     * control stays the first focusable element at the start corner in every layout.
+     * @default 'overlay'
+     */
+    controlsLayout?: CarouselControlsLayout;
+    /**
+     * `elevated` rounds the corners and adds a shadow.
+     * @default 'flat'
+     */
+    appearance?: CarouselAppearance;
     /**
      * Rotates the slides automatically. A Pause/Start control is rendered as the first focusable
      * element. Rotation pauses while focus is anywhere inside the carousel (the control included;
@@ -2677,6 +3101,46 @@ export declare interface CounterBadgeProps extends React_2.HTMLAttributes<HTMLSp
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/**
+ * 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
+ * with every member of {@link CreateTableColumnOptions}; the options are not changed. The
+ * function is pure and server-safe.
+ *
+ * @example
+ * const columns = [
+ *   createTableColumn<Person>({
+ *     columnId: 'name',
+ *     label: 'Name',
+ *     compare: (a, b) => a.name.localeCompare(b.name),
+ *     renderCell: (person) => person.name,
+ *   }),
+ * ];
+ */
+export declare function createTableColumn<T>(options: CreateTableColumnOptions<T>): DataGridColumn<T>;
+
+/** Options of {@link createTableColumn}: a DataGrid column, with `columnId` required. */
+export declare interface CreateTableColumnOptions<T> {
+    /** The column's id: the header cell's `columnId` and the `columnId` of the grid's sort. */
+    columnId: string;
+    /** The header content, unless `renderHeaderCell` is given. */
+    label?: React_2.ReactNode;
+    /**
+     * Orders two items of the column, as `Array.prototype.sort` does (negative: `a` first). Makes the
+     * column sortable unless `sortable` is `false`.
+     */
+    compare?: (a: T, b: T) => number;
+    /** Renders the column's cell content for one item. Without it, the column's cells are empty. */
+    renderCell?: (item: T) => React_2.ReactNode;
+    /** Renders the header content in place of `label`. */
+    renderHeaderCell?: () => React_2.ReactNode;
+    /**
+     * Whether the header is a sort button.
+     * @default compare !== undefined
+     */
+    sortable?: boolean;
+}
+
 /**
  * Creates a handle. It touches no DOM, so a module-scope handle is safe during server rendering;
  * a dispatch on the server does nothing (it returns the id), so no toast is carried from one
@@ -2702,49 +3166,71 @@ export declare function createToaster(): ToasterHandle;
  * the visual column, so a grouped header with spanning cells works), Enter/F2 to interact with a
  * cell's widgets and Escape to return to the cell. A composite widget in a cell (a Toolbar,
  * RadioGroup, TabList, …) is entered with Enter/F2 like a text field; it manages its own tab
- * indexes, so it keeps its own Tab stop. Supports sortable columns (controlled sorting:
- * `onSortChange` reports the new sort and the consumer reorders the rows) and single or multiple
- * row selection with a select-all header checkbox.
+ * indexes, so it keeps its own Tab stop. Supports sortable columns (`onSortChange` reports the new
+ * sort; a grid with `items` orders its rows by the sorted column's `compare`, otherwise the consumer
+ * orders them) and single or multiple row selection with a select-all header checkbox.
+ *
+ * Selection is made with the row's control, Space on a cell, and, with `selectOnRowClick`, a
+ * click on the row. `selectionAppearance` picks the fill of a selected row, `subtleSelection`
+ * hides the unchecked controls until their row (or, for select-all, the grid) is hovered or holds
+ * focus, and a row's `selectionCellProps` disables, hides or names its control. The selection
+ * column comes first; a `DataGrid.SelectionCell` places it elsewhere in a row.
+ *
+ * The grid is composed from its parts, or rendered from data: with `items` and typed `columns`
+ * (`DataGridColumn<T>`, see `createTableColumn`) it renders the header, the rows and the cells
+ * 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).
  *
  * Sub-components are available as `DataGrid.Header`, `DataGrid.HeaderCell`, `DataGrid.Body`,
- * `DataGrid.Row` and `DataGrid.Cell` in client components, and as the flat exports
- * `DataGridHeader`, `DataGridHeaderCell`, `DataGridBody`, `DataGridRow` and `DataGridCell` (the
- * form React Server Components can import).
+ * `DataGrid.Row`, `DataGrid.Cell` and `DataGrid.SelectionCell` in client components, and as the
+ * flat exports `DataGridHeader`, `DataGridHeaderCell`, `DataGridBody`, `DataGridRow`,
+ * `DataGridCell` and `DataGridSelectionCell` (the form React Server Components can import).
  */
-export declare const DataGrid: {
-    (props: DataGridProps): React_2.JSX.Element;
-    displayName: string;
-} & {
+export declare const DataGrid: typeof DataGridRoot & {
     Header: {
         ({ children, className, ref, ...rest }: DataGridHeaderProps): React_2.JSX.Element;
         displayName: string;
     };
     HeaderCell: {
-        ({ columnId, sortable, children, className, onClick, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
+        ({ columnId, sortable, sortIcon, children, className, onClick, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
         displayName: string;
     };
     Body: {
-        ({ children, className, ref, ...rest }: DataGridBodyProps): React_2.JSX.Element;
+        <T>({ children, className, ref, ...rest }: DataGridBodyProps<T>): React_2.JSX.Element;
         displayName: string;
     };
     Row: {
-        ({ rowId, selectionLabel, children, className, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
+        ({ rowId: rowIdProp, selectionLabel, selectionCellProps, children, className, onClick, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
         displayName: string;
     };
     Cell: {
         ({ children, className, ref, ...rest }: DataGridCellProps): React_2.JSX.Element;
         displayName: string;
     };
+    SelectionCell: {
+        ({ disabled, invisible, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, controlRef, ref, ...rest }: DataGridSelectionCellProps): React_2.JSX.Element | null;
+        displayName: string;
+    };
 };
 
-/** Props of every DataGrid, whatever sort API it uses. */
-export declare interface DataGridBaseProps extends React_2.HTMLAttributes<HTMLTableElement> {
+/** Props of every DataGrid, whatever sort API it uses. `T` is the type of its `items`. */
+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).
+     * @default the item's index in `items`, as a string
+     */
+    getRowId?: (item: T) => string;
     /**
      * Column definitions. When given and no `DataGrid.Header` child is present, the header row
-     * (including the selection column) is rendered from them: `id` becomes the header cell's
-     * `columnId`, `label` its content, `sortable` makes it a sort button.
+     * (including the selection column) is rendered from them: `columnId` becomes the header cell's
+     * `columnId`, `renderHeaderCell()` (else `label`) its content, and `sortable` (by default, having
+     * `compare`) makes it a sort button. With `items` and no `DataGrid.Body` child, the body rows are
+     * rendered from them too: one `DataGrid.Cell` per column, filled by `renderCell`. Those rows
+     * render again whenever the array changes, so keep it stable (defined outside the component, or
+     * memoised).
      */
-    columns?: readonly DataGridColumn[];
+    columns?: readonly DataGridColumn<T>[];
     /**
      * 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
@@ -2758,6 +3244,33 @@ export declare interface DataGridBaseProps extends React_2.HTMLAttributes<HTMLTa
      * `selectionLabel`.
      */
     labels?: DataGridLabels;
+    /**
+     * Whether a click on a body row toggles its selection in a selectable grid (single mode: selects
+     * the row alone, or clears it). The row's own `onClick` runs first; calling `preventDefault()`
+     * in it keeps the selection. A click never toggles when it lands on an interactive element in
+     * the row (a link, a button, an input, a label, an element with `tabindex` or a widget role, the
+     * selection control included), comes from a popup portaled from the row (a Menu, a Popover), or
+     * ends a text selection in the row (a drag across its text); nor does a click on a header row
+     * or on a row whose selection is disabled (`selectionCellProps.disabled`). Space on a cell
+     * toggles the row either way.
+     * @default false
+     */
+    selectOnRowClick?: boolean;
+    /**
+     * How a selected row is filled: `'brand'` with the selected token, `'neutral'` with the subtle
+     * selected token, `'none'` not at all (the selection control, `aria-selected` and, in forced
+     * colors, the row's outline still show it). Rendered as `data-selection-appearance` on the grid.
+     * @default 'brand'
+     */
+    selectionAppearance?: DataGridSelectionAppearance;
+    /**
+     * Subtle selection controls: a row's control is transparent while the row is not selected, until
+     * the row is hovered or holds focus, and the select-all checkbox while no row is selected, until
+     * the grid is hovered or holds focus. Forced colors and a coarse pointer (touch) always draw
+     * them; they stay focusable and named. Rendered as `data-subtle-selection` on the grid.
+     * @default false
+     */
+    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).
@@ -2766,12 +3279,13 @@ export declare interface DataGridBaseProps extends React_2.HTMLAttributes<HTMLTa
     /** 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. 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.
+     * 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.
      */
-    onSelectedItemsChange?: (selectedItems: string[]) => void;
+    onSelectedItemsChange?: (selectedItems: string[], details?: DataGridSelectedItemsChangeDetails) => void;
     /** @deprecated Use `selectedItems` (an array). A `Set` or an array is accepted. */
     selectedKeys?: ReadonlySet<string> | readonly string[];
     /** @deprecated Use `defaultSelectedItems` (an array). A `Set` or an array is accepted. */
@@ -2786,15 +3300,22 @@ export declare interface DataGridBaseProps extends React_2.HTMLAttributes<HTMLTa
      * without one they are dropped with a development warning. Name the grid with `aria-label`.
      */
     containerProps?: Omit<React_2.ComponentPropsWithRef<'div'>, 'children'>;
-    /** DataGrid header, body, and row elements. */
-    children: React_2.ReactNode;
+    /**
+     * DataGrid header, body, and row elements. Optional when `items` and `columns` render the grid;
+     * a generated body is placed after the header and before a `<tfoot>` child.
+     */
+    children?: React_2.ReactNode;
     /** Ref to the `<table role="grid">` element. */
     ref?: React_2.Ref<HTMLTableElement>;
 }
 
-/** The grid's `<tbody>`. */
+/**
+ * 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.
+ */
 export declare const DataGridBody: {
-    ({ children, className, ref, ...rest }: DataGridBodyProps): React_2.JSX.Element;
+    <T>({ children, className, ref, ...rest }: DataGridBodyProps<T>): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -2803,15 +3324,27 @@ export declare const dataGridBodyClassNames: {
     readonly root: "wave-data-grid-body";
 };
 
-/** Properties for the DataGridBody sub-component. */
-export declare interface DataGridBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
-    /** DataGrid row elements. */
-    children: React_2.ReactNode;
+/** Properties for the DataGridBody sub-component, in a grid whose `items` are of type `T`. */
+export declare interface DataGridBodyProps<T = unknown> extends Omit<React_2.HTMLAttributes<HTMLTableSectionElement>, 'children'> {
+    /**
+     * The body rows: `DataGrid.Row` elements, or a render function called with each item of the
+     * grid's `items` (in the grid's sort order) and the item's index in `items` (its position there,
+     * whatever the sort), which returns the item's `DataGrid.Row`. The grid keys each returned row
+     * by its row id and gives it that id as `rowId` (from `getRowId`), and renders it again only
+     * when its item, its index or the function change (a sort moves the rows). Type the function
+     * by annotating its item parameter (`(person: Person) => …`) or with `DataGrid.Body<Person>`.
+     * Without children, a grid with `items` and `columns` renders the rows from the columns; empty
+     * children are no rows.
+     */
+    children?: React_2.ReactNode | ((item: T, index: number) => React_2.ReactNode);
     /** Ref to the `<tbody>` element. */
     ref?: React_2.Ref<HTMLTableSectionElement>;
 }
 
-/** A grid cell (`<td>`), focusable through the grid's keyboard navigation. */
+/**
+ * A grid cell (`<td>`), focusable through the grid's keyboard navigation. It is the positioning
+ * box of a `Table.CellActions` inside it.
+ */
 export declare const DataGridCell: {
     ({ children, className, ref, ...rest }: DataGridCellProps): React_2.JSX.Element;
     displayName: string;
@@ -2836,36 +3369,71 @@ export declare const dataGridClassNames: {
     readonly container: "wave-data-grid__container";
 };
 
-/** Defines a column in the DataGrid. */
-export declare interface DataGridColumn {
-    /** Unique identifier for the column (the header cell's `columnId`). */
-    id: string;
-    /** Display label for the column header. */
-    label: string;
-    /** Whether the column supports sorting. */
+/**
+ * Defines a column of the DataGrid, typed by the grid's items (`T`): the header cell it renders
+ * and, with `items`, the cell of each row. `createTableColumn` builds one with `sortable` resolved.
+ * A column with functions (`compare`, `renderCell`, `renderHeaderCell`) cannot be passed from a
+ * Server Component to the DataGrid, since functions are not serializable: define such columns in a
+ * client component.
+ */
+export declare interface DataGridColumn<T = unknown> {
+    /**
+     * Unique identifier of the column: the `columnId` of its header cell (and of the grid's sort) and
+     * the React key of its cells. Required in practice: a column without it (and without the
+     * deprecated `id`) cannot sort, with a development warning.
+     */
+    columnId?: string;
+    /**
+     * @deprecated Use `columnId`. Read only when `columnId` is not given, with a development
+     * warning.
+     */
+    id?: string;
+    /** The header content (text or any React node), unless `renderHeaderCell` is given. */
+    label: React_2.ReactNode;
+    /**
+     * Orders two items of the column, as for `Array.prototype.sort` (negative: `a` first). A column
+     * with `compare` is sortable unless `sortable` is `false`. While the grid's sort names the column
+     * (its own sort, or a controlled `sort`), a grid with `items` renders its rows in this order: a
+     * stable sort of a copy of `items`, so items that compare equal keep their order in `items`,
+     * in both directions (descending negates `compare`). Without `compare` the grid never reorders
+     * the rows: leave it out when the rows arrive sorted (a server-sorted grid).
+     */
+    compare?: (a: T, b: T) => number;
+    /**
+     * Renders the content of the column's cell for one item (rows rendered from `items`). Without
+     * it, the column's cells are empty.
+     */
+    renderCell?: (item: T) => React_2.ReactNode;
+    /** Renders the header content, in place of `label`. */
+    renderHeaderCell?: () => React_2.ReactNode;
+    /**
+     * Whether the column's header is a sort button (the header cell carries `aria-sort`).
+     * @default compare !== undefined
+     */
     sortable?: boolean;
 }
 
-/** The 0.5 sort API, controlled: `sort` + `onSortChange(sort)`. */
+/** The 0.5 sort API, controlled: `sort` + `onSortChange(sort, details)`. */
 export declare interface DataGridControlledSortProps extends NoDeprecatedSortProps {
     /** The controlled sort, or `null` for an unsorted grid. */
     sort: DataGridSort | null;
     /** Initial sort while `sort` is not given yet. */
     defaultSort?: DataGridSort | null;
     /**
-     * Called with the new sort when a sortable header is activated. Sorting is controlled: the
-     * consumer reorders the rows.
+     * Called with the new sort when a sortable header is activated, then `details` (`{ event }`).
+     * With `items`, the grid orders its rows by the sorted column's `compare` (see
+     * `DataGridColumn.compare`), also while `sort` is controlled; otherwise the consumer orders them.
      */
-    onSortChange?: (sort: DataGridSort) => void;
+    onSortChange?: (sort: DataGridSort, details?: DataGridSortChangeDetails) => void;
 }
 
 /**
  * The grid's `<thead>`. When the grid is selectable, it prepends the selection column's header
- * cell to each `<tr>` child, also inside a Fragment: the first header row gets the "Select all
- * rows" checkbox (multiple 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.
+ * cell to each `<tr>` child, also inside a Fragment, unless the row holds a
+ * `DataGrid.SelectionCell`: the first header row gets the "Select all rows" checkbox (multiple
+ * 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.
  */
 export declare const DataGridHeader: {
     ({ children, className, ref, ...rest }: DataGridHeaderProps): React_2.JSX.Element;
@@ -2874,18 +3442,19 @@ export declare const DataGridHeader: {
 
 /**
  * A column header cell. A `sortable` header (with a `columnId`) renders its content inside a
- * `<button type="button">` that toggles the sort; 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).
+ * `<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).
  */
 export declare const DataGridHeaderCell: {
-    ({ columnId, sortable, children, className, onClick, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
+    ({ columnId, sortable, sortIcon, children, className, onClick, ref, ...rest }: DataGridHeaderCellProps): React_2.JSX.Element;
     displayName: string;
 };
 
 /**
  * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its
- * direction `<svg>`.
+ * direction glyph (the default arrow `<svg>`, or the `<span>` of a `sortIcon` slot).
  */
 export declare const dataGridHeaderCellClassNames: {
     readonly root: "wave-data-grid-header-cell";
@@ -2903,6 +3472,16 @@ export declare interface DataGridHeaderCellProps extends React_2.ThHTMLAttribute
      * @default false
      */
     sortable?: boolean;
+    /**
+     * The glyph a sortable header shows after its content while its column is sorted, in place of
+     * the default arrow (up for ascending, down for descending). It is decorative (`aria-hidden`:
+     * `aria-sort` on the header tells the direction) and carries `data-direction` (`ascending` or
+     * `descending`), so one glyph can be turned by a selector on it. `null` and `undefined` keep the
+     * arrow; `false`, or any value that renders nothing, shows no glyph. A `<button>` or `Button`
+     * element (or a slot object whose `as` is one) is not nested in the sort button: its children
+     * become the glyph and its props are dropped, with a development warning.
+     */
+    sortIcon?: Slot<'span'>;
     /** Header cell content. */
     children: React_2.ReactNode;
     /** Ref to the `<th>` element. */
@@ -2923,15 +3502,53 @@ export declare const dataGridHeaderClassNames: {
 export declare interface DataGridHeaderProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
     /**
      * Header row elements. Each `<tr>` child (also inside a Fragment) gets the selection column's
-     * header cell prepended when the grid is selectable; a header row rendered by another component
-     * should be a `DataGrid.Row`, which adds the cell itself. With several header rows (a grouped
-     * header), only the first one gets the "Select all rows" control; later rows get an empty cell.
+     * header cell prepended when the grid is selectable, unless the row holds a
+     * `DataGrid.SelectionCell` (which then is that cell, where it stands); a header row rendered by
+     * another component should be a `DataGrid.Row`, which adds the cell itself. With several header
+     * rows (a grouped header), only the first one gets the "Select all rows" control; later rows get
+     * an empty cell.
      */
     children: React_2.ReactNode;
     /** Ref to the `<thead>` element. */
     ref?: React_2.Ref<HTMLTableSectionElement>;
 }
 
+/**
+ * The `items` prop of a DataGrid that renders its rows from data, part of every sort form of
+ * `DataGridProps` but the 0.4 one. `T` is the type of the items.
+ */
+export declare interface DataGridItemsProps<T = unknown> {
+    /**
+     * The grid's data, one body row per item, in this order unless the sorted column has `compare`
+     * (see `DataGridColumn.compare`). With `columns` and no `DataGrid.Body` child (or one without
+     * children), the grid renders the rows and cells from the columns; a `DataGrid.Body` whose child
+     * is a render function renders the row of each item. Each row's `rowId` comes from `getRowId`.
+     * The grid reads the array and never changes it. With `items`, `onSortChange` receives a
+     * `DataGridSort` object and `details`, never the 0.4 arguments. `items` may not be `undefined`
+     * unless `sort` or `defaultSort` is given; pass `items={data ?? []}` while loading.
+     */
+    items?: readonly T[];
+}
+
+/**
+ * The sort props of a grid with `items`: the 0.5 sort API, whether or not `sort` or `defaultSort`
+ * is given (unsorted at first without them). The 0.4 positional `onSortChange` and the deprecated
+ * sort props do not apply to such a grid.
+ */
+export declare interface DataGridItemsSortProps<T = unknown> extends DataGridItemsProps<T>, NoDeprecatedSortProps {
+    /** The grid's data (see `DataGridItemsProps.items`). */
+    items: readonly T[];
+    /** The controlled sort, or `null` for an unsorted grid; `undefined` leaves the sort to the grid. */
+    sort?: DataGridSort | null;
+    /** The initial sort while `sort` is not given. */
+    defaultSort?: DataGridSort | null;
+    /**
+     * Called with the new sort when a sortable header is activated, then `details` (`{ event }`).
+     * The grid orders its rows by the sorted column's `compare` (see `DataGridColumn.compare`).
+     */
+    onSortChange?: (sort: DataGridSort, details?: DataGridSortChangeDetails) => void;
+}
+
 /** The built-in text of a DataGrid, for localization (see `DataGridBaseProps.labels`). */
 export declare interface DataGridLabels {
     /** Accessible name of the select-all checkbox in the header (`selectionMode="multiple"`).
@@ -2948,11 +3565,14 @@ export declare interface DataGridLabels {
 
 /**
  * The 0.4 sort API: `onSortChange(columnId, direction)` and the deprecated `sortColumn`/
- * `sortDirection` props. It applies whenever neither `sort` nor `defaultSort` is given. As in 0.4,
- * the column and the direction can be controlled independently: the half that is not controlled is
- * kept internally and follows every sort request (mixed control, warned in development).
+ * `sortDirection` props. It applies whenever none of `items`, `sort` and `defaultSort` is given.
+ * As in 0.4, the column and the direction can be controlled independently: the half that is not
+ * controlled is kept internally and follows every sort request (mixed control, warned in
+ * development).
  */
 export declare interface DataGridLegacySortProps {
+    /** A grid with `items` uses the 0.5 sort API (`DataGridItemsSortProps`). */
+    items?: undefined;
     sort?: undefined;
     defaultSort?: undefined;
     /**
@@ -2970,10 +3590,10 @@ export declare interface DataGridLegacySortProps {
     /** @deprecated Use `defaultSort`. */
     defaultSortDirection?: SortDirection;
     /**
-     * Called when a sortable header is activated, with the 0.4 arguments. Pass `sort` or
-     * `defaultSort` to receive a `DataGridSort` object instead: `defaultSort={null}` turns the
-     * object form on for an initially unsorted grid. A `sort` that is still `undefined` (e.g. while
-     * data loads) does not: pass `sort={sort ?? null}`.
+     * Called when a sortable header is activated, with the 0.4 arguments. Pass `items`, `sort` or
+     * `defaultSort` to receive a `DataGridSort` object (and `details`) instead:
+     * `defaultSort={null}` turns the object form on for an initially unsorted grid. A `sort` that is
+     * still `undefined` (e.g. while data loads) does not: pass `sort={sort ?? null}`.
      *
      * @example
      * <DataGrid defaultSort={null} onSortChange={(sort) => setSort(sort)}>…</DataGrid>
@@ -2982,19 +3602,36 @@ export declare interface DataGridLegacySortProps {
 }
 
 /**
- * Properties for the DataGrid component. The sort props form a union: `sort`/`defaultSort` with
- * `onSortChange(sort)` (0.5), or the 0.4 form `onSortChange(columnId, direction)` with the
- * deprecated `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection`. The two
- * cannot be mixed.
+ * Properties for the DataGrid component, whose `items` are of type `T`. The sort props form a
+ * union: `sort`/`defaultSort` with `onSortChange(sort, details)` (0.5, also the form of every grid
+ * with `items`), or the 0.4 form `onSortChange(columnId, direction)` with the deprecated
+ * `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection`, for a grid without
+ * `items`. The two cannot be mixed.
  */
-export declare type DataGridProps = DataGridBaseProps & (DataGridControlledSortProps | DataGridUncontrolledSortProps | DataGridLegacySortProps);
+export declare type DataGridProps<T = unknown> = DataGridBaseProps<T> & ((DataGridItemsProps<T> & DataGridControlledSortProps) | (DataGridItemsProps<T> & DataGridUncontrolledSortProps) | DataGridItemsSortProps<T> | DataGridLegacySortProps);
+
+declare function DataGridRoot<T>(props: DataGridBaseProps<T> & DataGridItemsSortProps<T>): React_2.JSX.Element;
+
+declare function DataGridRoot<T = unknown>(props: DataGridProps<T>): React_2.JSX.Element;
+
+declare namespace DataGridRoot {
+    var displayName: string;
+}
 
 /**
  * A grid row. In a selectable grid it starts with a selection cell (checkbox or radio) named
- * after the row's first cell (or `selectionLabel`); Space on one of its cells toggles the row.
+ * after the row's first cell (or `selectionLabel`), unless a `DataGrid.SelectionCell` child is
+ * its selection cell; Space on one of its cells toggles the row, and so does a click on the row
+ * with the grid's `selectOnRowClick`.
+ *
+ * The row is the `group/table-row` group whose hover or focus draws a subtle selection control
+ * (`subtleSelection`) and the `Table.CellActions` of its cells. A group is matched by any
+ * 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.
  */
 export declare const DataGridRow: {
-    ({ rowId, selectionLabel, children, className, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
+    ({ rowId: rowIdProp, selectionLabel, selectionCellProps, children, className, onClick, onKeyDown, ref, ...rest }: DataGridRowProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -3013,22 +3650,119 @@ export declare interface DataGridRowProps extends React_2.HTMLAttributes<HTMLTab
     /**
      * Unique identifier for this row, used for selection (rows that share one are selected together;
      * a duplicate warns in development). A selectable grid renders no selection control (and warns
-     * in development) for a row without it.
+     * 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`).
      */
     rowId?: string;
     /**
      * Accessible name of the row's selection control. Defaults to the row's first child that is a
      * `DataGrid.Cell`, `<td>` or `<th>` element (`aria-labelledby`); a cell that another component
      * renders is not seen, so pass `selectionLabel` when the row's first cell is one. Without such a
-     * child the control is named "Select row" (with a development warning).
+     * child the control is named "Select row" (with a development warning). The selection cell's
+     * `aria-label` (`selectionCellProps`, or a `DataGrid.SelectionCell` child's) wins over it.
      */
     selectionLabel?: string;
-    /** DataGrid cell elements. */
+    /**
+     * Props of the row's selection cell (`disabled`, `invisible`, `className`, `aria-label`): the
+     * cell the row adds first in a selectable grid, or a `DataGrid.SelectionCell` child, whose own
+     * props win (their classes are merged). In a header row they apply to the select-all cell.
+     */
+    selectionCellProps?: DataGridRowSelectionCellProps;
+    /**
+     * DataGrid cell elements. A `DataGrid.SelectionCell` child (also inside a Fragment) is the row's
+     * selection cell, where it stands: the row then adds none.
+     */
     children: React_2.ReactNode;
     /** Ref to the `<tr>` element. */
     ref?: React_2.Ref<HTMLTableRowElement>;
 }
 
+/**
+ * The props of a row's selection cell (`DataGrid.Row` `selectionCellProps`), the automatic cell or
+ * a `DataGrid.SelectionCell` child (whose own props win).
+ */
+export declare interface DataGridRowSelectionCellProps {
+    /**
+     * Disables the row's selection control natively. The control is then no focus target of the grid
+     * (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
+     */
+    disabled?: boolean;
+    /**
+     * Hides the selection control (it keeps its space and cannot be focused). The row is still
+     * selected by a row click and Space, and tells its state with `aria-selected`.
+     * @default false
+     */
+    invisible?: boolean;
+    /** Class of the selection cell (`<td>`, or the `<th>` of a header row). */
+    className?: string;
+    /**
+     * Accessible name of the selection control, in place of `selectionLabel` and the name taken from
+     * the row's first cell; in a header row, the name of the select-all checkbox.
+     */
+    'aria-label'?: string;
+}
+
+/** Second argument of `onSelectedItemsChange`: the event behind the change. */
+export declare interface DataGridSelectedItemsChangeDetails {
+    /**
+     * The DOM event behind the change: the click of a selection control (the select-all checkbox
+     * included), or the key press of Space on a row.
+     */
+    event: Event;
+}
+
+/**
+ * How a selected row of a DataGrid is filled (`selectionAppearance`): `'brand'` with the selected
+ * token, `'neutral'` with the subtle selected token, `'none'` not at all.
+ */
+export declare type DataGridSelectionAppearance = 'brand' | 'neutral' | 'none';
+
+/**
+ * The selection cell of a row, rendered where it stands among the row's cells (the row and the
+ * header then add none of their own). In a header row it is the select-all checkbox (multiple
+ * mode; the "Selection" header text in single mode), the first header row's only, as the
+ * automatic cell; in a body row (a `DataGrid.Row`) the row's checkbox or radio. It takes the
+ * 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).
+ */
+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;
+    displayName: string;
+};
+
+/**
+ * DataGrid.SelectionCell: `root` on the cell, which also carries the selection cell part of its
+ * row (`dataGridRowClassNames.selectionCell`) or header (`dataGridHeaderClassNames.selectionCell`);
+ * its control carries `dataGridRowClassNames.selectionControl` or
+ * `dataGridHeaderClassNames.selectAllCheckbox`.
+ */
+export declare const dataGridSelectionCellClassNames: {
+    readonly root: "wave-data-grid-selection-cell";
+};
+
+/** Properties for the DataGridSelectionCell sub-component. */
+export declare interface DataGridSelectionCellProps extends Omit<React_2.TdHTMLAttributes<HTMLTableCellElement>, 'children'>, DataGridRowSelectionCellProps {
+    /**
+     * The cell holds no content of its own: the grid renders the selection control (or, in a
+     * single-mode header row, the hidden "Selection" header text).
+     */
+    children?: never;
+    /**
+     * Accessible name of the control, in place of `aria-label` and the row's `selectionLabel`.
+     * Routed to the control, as `aria-label` and `aria-describedby` are.
+     */
+    'aria-labelledby'?: string;
+    /** Ref to the selection control (`<input type="checkbox">` or `<input type="radio">`). */
+    controlRef?: React_2.Ref<HTMLInputElement>;
+    /** Ref to the cell element (`<td>`, or the `<th>` of a header row's select-all). */
+    ref?: React_2.Ref<HTMLTableCellElement>;
+}
+
 /** The sort state of a DataGrid: the sorted column and its direction. */
 export declare interface DataGridSort {
     /** The `columnId` of the sorted column. */
@@ -3037,16 +3771,23 @@ export declare interface DataGridSort {
     direction: SortDirection;
 }
 
-/** The 0.5 sort API, uncontrolled: `defaultSort` (`null` for none) + `onSortChange(sort)`. */
+/** Second argument of `onSortChange` (the `DataGridSort` form): the event behind the sort. */
+export declare interface DataGridSortChangeDetails {
+    /** The DOM event behind the sort: the click of the sort button (Enter and Space click it). */
+    event: Event;
+}
+
+/** The 0.5 sort API, uncontrolled: `defaultSort` (`null` for none) + `onSortChange(sort, details)`. */
 export declare interface DataGridUncontrolledSortProps extends NoDeprecatedSortProps {
     sort?: undefined;
     /** The initial sort, or `null` for an initially unsorted grid. */
     defaultSort: DataGridSort | null;
     /**
-     * Called with the new sort when a sortable header is activated. Sorting is controlled: the
-     * consumer reorders the rows.
+     * Called with the new sort when a sortable header is activated, then `details` (`{ event }`).
+     * With `items`, the grid orders its rows by the sorted column's `compare` (see
+     * `DataGridColumn.compare`); otherwise the consumer orders them.
      */
-    onSortChange?: (sort: DataGridSort) => void;
+    onSortChange?: (sort: DataGridSort, details?: DataGridSortChangeDetails) => void;
 }
 
 /**
@@ -3387,6 +4128,12 @@ export declare interface DatePickerProps extends Omit<React_2.HTMLAttributes<HTM
 /** A day of the week, as `Date.prototype.getDay()` numbers them: 0 is Sunday, 6 is Saturday. */
 export declare type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
+/**
+ * The 0.5 spellings of two presence statuses. They still work and warn once in development; use
+ * `'do-not-disturb'` and `'out-of-office'` instead. Removed in 1.0.
+ */
+export declare type DeprecatedPresenceStatus = 'dnd' | 'oof';
+
 /**
  * A dialog (Fluent UI v2 style), modal by default: `Dialog` holds the open state; `Dialog.Trigger`
  * opens and closes it and `Dialog.Content` renders the surface in a portal while open (and, with
@@ -5258,6 +6005,38 @@ export declare function getFirstTabbable(container: Element, options?: {
     includeContainer?: boolean;
 }): HTMLElement | null;
 
+/**
+ * The initials of a person's name, for an avatar: the first letter of the first and, with two or
+ * more words, of the last word, upper-cased.
+ *
+ * Text in `()`, `[]`, `{}` and `<>` and all punctuation are ignored (`'Jane Doe (Contoso)'` gives
+ * `'JD'`). A name with no letters (a phone number, an emoji) or with letters of a script without
+ * letter initials (Han, Hiragana, Katakana, Hangul, Thai, Lao, Khmer, Myanmar, Tibetan) gives
+ * `''`, so an avatar falls back to its person glyph. Server-safe.
+ *
+ * @example
+ * getInitials('Jane Doe (Contoso)'); // 'JD'
+ * getInitials('Jane Doe', { dir: 'rtl' }); // 'DJ'
+ * getInitials('+1 (555) 010-0000'); // ''
+ */
+export declare function getInitials(name: string, options?: GetInitialsOptions): string;
+
+/** Options of {@link getInitials}. */
+export declare interface GetInitialsOptions {
+    /**
+     * Text direction of the place the initials are shown. In `'rtl'` the first and last initial of a
+     * left-to-right script swap, so they read in the order of the name on screen; a Hebrew or Arabic
+     * name keeps its order, which the text direction already mirrors.
+     * @default 'ltr'
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Keep only the first initial, also for a name of several words.
+     * @default false
+     */
+    firstInitialOnly?: boolean;
+}
+
 /** The last tabbable element inside `container`, or `null`. */
 export declare function getLastTabbable(container: Element, options?: {
     includeContainer?: boolean;
@@ -6092,6 +6871,13 @@ export declare interface InteractionTagSecondaryProps extends React_2.ButtonHTML
 /** Whether both dates are on the same calendar day (time of day ignored); `false` when either is missing. */
 export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
 
+/**
+ * Whether breadcrumb text is longer than `maxLength` characters, so that
+ * {@link truncateBreadcrumbLongName} or {@link truncateBreadcrumbLongTooltip} would cut it. Text of
+ * exactly `maxLength` characters is not truncatable.
+ */
+export declare function isTruncatableBreadcrumbContent(content: string, maxLength: number): boolean;
+
 /**
  * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required
  * indicator is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom
@@ -6246,16 +7032,28 @@ export declare type LinkVariant = LinkAppearance;
  *   a text-entry widget takes focus itself: Enter/F2 enter the widget, Escape returns to the cell.
  *   Clicks and keys that start inside an action, or inside a popup it opens (a Popover, a Menu),
  *   never toggle selection.
+ * - **Navigation without selection** (`navigationMode`): `'items'` makes the items of a plain list
+ *   one Tab stop (the item that last had focus) with the listbox's arrow keys, Home/End and
+ *   typeahead, keeping `role="list"`; `'composite'` renders the grid above from the first render,
+ *   for a selectable list too, so the items never remount when actions appear. The items of a
+ *   list without selection carry no `aria-selected`. The resolved mode is `data-navigation-mode`.
+ * - **Actions on the item itself** (`List.Item onAction`): clicks and Enter run it, and Space on
+ *   an item that cannot be selected; in a selectable item it runs before the selection toggles,
+ *   and its `preventDefault()` keeps the selection. `List.Item disabledSelection` keeps an item's
+ *   selection as it is while the item stays focusable and in the arrow-key order.
+ * - **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` changes while items have actions, 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), 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 keep an action on at least one item).
+ *   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.
@@ -6266,13 +7064,19 @@ export declare type LinkVariant = LinkAppearance;
  *   <List.Item value="apple">Apple</List.Item>
  *   <List.Item value="banana">Banana</List.Item>
  * </List>
+ *
+ * @example
+ * <List navigationMode="items" aria-label="Recent files">
+ *   <List.Item value="report" onAction={() => open('report')}>Report</List.Item>
+ *   <List.Item value="budget" onAction={() => open('budget')}>Budget</List.Item>
+ * </List>
  */
 export declare const List: {
     <M extends ListSelectionMode = "single">(props: ListProps<M>): React_2.ReactNode;
     displayName: string;
 } & {
     Item: {
-        ({ value, action, className, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
+        ({ value, action, onAction, disabledSelection, checkmark, className, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
         displayName: string;
     };
 };
@@ -6770,26 +7574,32 @@ export declare const listClassNames: {
 
 /**
  * An item of a {@link List} (also available as `List.Item`). Renders an `<li>` (`listitem`, or
- * `option` in a selectable list), or a `<div role="row">` in a selectable list with actions. In a
- * selectable list, Enter and Space toggle the selection without calling `onClick`, which receives
- * pointer clicks.
+ * `option` in a selectable list), or a `<div role="row">` in a grid (a selectable list with
+ * actions, or `navigationMode="composite"`). In a selectable list, Enter and Space toggle the
+ * 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.
  *
  * 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, className, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
+    ({ value, action, onAction, disabledSelection, checkmark, className, children, onClick, onKeyDown, ref, ...rest }: ListItemProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/** The event that activated a list item: a click, or Enter or Space on the focused item. */
+export declare type ListItemActionEvent = React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>;
+
 /**
- * List.Item: `root` on the `<li>` (the `role="row"` element of a list with actions); `content` on
- * the content element; `action` on the action cell.
+ * List.Item: `root` on the `<li>` (the `role="row"` element of a grid list); `content` on the
+ * content element; `action` on the action cell; `checkmark` on the check mark element of an item
+ * of a selectable list (the List's `checkmark`, or the item's own).
  */
 export declare const listItemClassNames: {
     readonly root: "wave-list-item";
     readonly content: "wave-list-item__content";
     readonly action: "wave-list-item__action";
+    readonly checkmark: "wave-list-item__checkmark";
 };
 
 /** Properties for the ListItem component. */
@@ -6808,13 +7618,47 @@ export declare interface ListItemProps extends React_2.HTMLAttributes<HTMLLIElem
      * with the arrow keys, and their focusable elements (also ones added later) get
      * `tabindex="-1"`, except inside a nested composite widget such as a Toolbar, which keeps its own
      * Tab stop. When the first action appears or the last one disappears, the items remount (see
-     * {@link List}).
+     * {@link List}), unless the List's `navigationMode="composite"` keeps the grid.
      */
     action?: React_2.ReactNode;
+    /**
+     * Called when the item is activated: a click on it, or Enter on the focused item, and Space on
+     * an item that cannot be selected (in a list without selection, or without a `value`); in a
+     * selectable item Space only toggles the selection. Clicks and keys that start in an action or
+     * in interactive content never run it. It runs after the item's `onClick` (whose
+     * `preventDefault()` skips it) and before the selection toggles: call `event.preventDefault()`
+     * to keep the selection as it is. Fires on every activation. The items of a list that does not
+     * navigate them (`navigationMode` `'none'`, not selectable) cannot be reached with the keyboard:
+     * there it runs on clicks only, and a development warning says so.
+     */
+    onAction?: (event: ListItemActionEvent) => void;
+    /**
+     * In a selectable list: the item's selection cannot be toggled (click, Enter or Space; a
+     * selected item stays selected). The item stays focusable and in the arrow-key order and renders
+     * `data-disabled-selection`. Without `onAction` it is also `aria-disabled` (with `data-disabled`
+     * and `data-disabled-focusable`); with `onAction`, clicks and Enter still run the action, while
+     * Space, the selection key, does nothing. The item's `onClick` runs either way.
+     * @default false
+     */
+    disabledSelection?: boolean;
+    /**
+     * The item's check mark in a selectable list, a decorative `<span>` at the start of the item
+     * shown while it is selected. `null` and `undefined` follow the List's `checkmark` (the default
+     * check, or none); content replaces the glyph, also when the List draws none; `false`, or
+     * content that renders nothing, hides it.
+     */
+    checkmark?: Slot<'span'>;
     /** Ref to the item element: an `<li>`, or a `<div role="row">` in grid mode. */
     ref?: React_2.Ref<HTMLLIElement | HTMLDivElement>;
 }
 
+/**
+ * How the keyboard reaches the items of a {@link List} (Fluent's `navigationMode`): `'none'`, no
+ * item is a Tab stop; `'items'`, the items are one Tab stop moved with the arrow keys; `'composite'`,
+ * a grid whose rows are moved with Up/Down and whose actions are reached with Right/Left.
+ */
+export declare type ListNavigationMode = 'none' | 'items' | 'composite';
+
 /**
  * Properties for the List component.
  *
@@ -6850,9 +7694,39 @@ export declare interface ListProps<M extends ListSelectionMode = ListSelectionMo
     defaultSelectedItem?: M extends 'single' ? string | null : never;
     /** Single mode: called with the newly selected value, or `null` when it was deselected. */
     onSelectedItemChange?: M extends 'single' ? (item: string | null) => void : never;
+    /**
+     * How the keyboard reaches the items. Unset, the list picks the mode itself: `'none'` for a plain
+     * list, `'items'` for a selectable one (a listbox) and `'composite'` (a grid) for a selectable
+     * list whose items have actions, which remounts the items when the first action appears or the
+     * last one disappears. An explicit value pins the structure:
+     *
+     * - `'none'`: a plain list; its items are no Tab stops (their actions stay in the Tab order). A
+     *   selectable list always navigates its items: there `'none'` is ignored, with a development
+     *   warning.
+     * - `'items'`: the items are one Tab stop (the first selected item, else the first item; in a
+     *   list without selection the item that last had focus), moved with ArrowUp/ArrowDown (wrapping)
+     *   and Home/End, with typeahead for more than 7 items. A plain list keeps `role="list"` and its
+     *   items carry no `aria-selected`; their actions stay in the Tab order. A selectable list whose
+     *   items have actions acts as `'composite'`, with a development warning.
+     * - `'composite'`: a grid (`role="grid"`, `row`s and `gridcell`s) from the first render, so the
+     *   items never remount when actions appear. One Tab stop; Up/Down move between the rows and
+     *   Right/Left (mirrored in right-to-left layouts) into and out of their actions, which leave
+     *   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}).
+     */
+    navigationMode?: ListNavigationMode;
+    /**
+     * Draws a check mark at the start of every item of a selectable list, shown while the item is
+     * selected (decorative: `aria-selected` carries the state). An item's own `checkmark` replaces
+     * or hides it. Renders `data-checkmark` on the list while it draws them.
+     * @default false
+     */
+    checkmark?: boolean;
     /**
      * Ref to the root element: a `<ul>`, or a `<div role="grid">` for a selectable list whose items
-     * have actions.
+     * have actions and for `navigationMode="composite"`.
      */
     ref?: React_2.Ref<HTMLUListElement | HTMLDivElement>;
 }
@@ -8959,19 +9833,36 @@ export declare interface OptionProps extends Omit<React_2.LiHTMLAttributes<HTMLL
 export declare type Orientation = 'horizontal' | 'vertical';
 
 /**
- * A single row that hides the items which do not fit and shows an overflow button instead.
- *
- * Wrap each entry in {@link OverflowItem} with a unique `itemId`; the row holds only items (other
- * content is not measured, see `children`). Items are measured while visible, hidden from the end
- * (in DOM order; the first item always stays) and hidden items get `data-overflow-hidden`, an
- * inline `display: none`, `aria-hidden` and `inert`. Reordered items (for example a keyed sort) are
- * re-measured in their new order. `overflowButton(count, hiddenIds)` renders the button after the
- * visible items (its measured width is reserved); components inside it can use
- * {@link useOverflowMenu} to list the hidden items (e.g. in a Menu), and
- * {@link useIsOverflowItemVisible} reports a single item. The button sticks to the inline end of
- * the row, so a first item wider than the room beside it cannot push it out of view: it then covers
- * the end of that item and gets `data-overflow-pinned`, with the `background` token behind it. (In
- * a right-to-left row, WebKit stops the pinned button short of the end, still inside the row.)
+ * A single row (or column) that hides the items which do not fit and shows an overflow button
+ * instead.
+ *
+ * Wrap each entry in {@link OverflowItem} with a unique `itemId`; the row holds only items and
+ * {@link OverflowDivider}s (other content is not measured, see `children`). Items are measured
+ * while visible and hidden while they do not fit: by ascending `priority` (equal priorities from
+ * the end of the DOM order, or from its start with `overflowDirection="start"`), never a `pinned`
+ * item and never below `minimumVisible`. Until an item sets `priority` or `pinned`, the first item
+ * (`end`) or the last one (`start`) always stays, as in 0.13. `orientation="vertical"` lays the
+ * items out in a column and measures heights; the column needs a definite height. The room is the
+ * row's own box, so it must not depend on the items shown: in a container as wide as its content,
+ * such as a Toolbar at its default width, the row narrows as items hide and never gets the room
+ * back to show them again; give the Overflow a width of its own, or put it in a row that takes its
+ * width from its parent and let it fill that row.
+ *
+ * Items with the same `groupId` form a group that is `'visible'`, `'hidden'` or `'overflow'` (some
+ * members hidden): a divider with that `groupId` hides with a hidden group,
+ * {@link useIsOverflowGroupVisible} reads a group and {@link useHasHiddenItems} whether anything
+ * is hidden. `onOverflowChange` reports the hidden `itemId`s and the group visibility when the
+ * hidden items change. Hidden items get `data-overflow-hidden`, an inline `display: none`,
+ * `aria-hidden` and `inert`. Reordered items (for example a keyed sort) are re-measured in their
+ * new order. `overflowButton(count, hiddenIds)` renders the button after the visible items, or
+ * just before the first hidden item with `buttonPosition="before-hidden"` (its measured size is
+ * reserved); components inside it can use {@link useOverflowMenu} to list the
+ * hidden items (e.g. in a Menu), and {@link useIsOverflowItemVisible} reports a single item. In a
+ * horizontal row the button sticks to the inline end, so a first item wider than the room beside
+ * it cannot push it out of view: it then covers the end of that item and gets
+ * `data-overflow-pinned`, with the `background` token behind it (a vertical column sticks it to
+ * the bottom). (In a right-to-left row, WebKit stops the pinned button short of the end, still
+ * inside the row.)
  *
  * The row clips what does not fit. So that the focus indicators of its items are not cut off, it
  * has a 4px padding: the items sit 4px in from its edges, and the row is 8px taller than they are.
@@ -8985,19 +9876,36 @@ export declare type Orientation = 'horizontal' | 'vertical';
  * Works without `ResizeObserver` (jsdom, old browsers): it then re-measures on window resize and
  * when items mount, unmount or move.
  *
- * The item is also `Overflow.Item`. The same component is exported as `OverflowItem`; React Server
- * Components import that flat name (dotted access needs a client file).
+ * The item is also `Overflow.Item` and the divider `Overflow.Divider`. The same components are
+ * exported as `OverflowItem` and `OverflowDivider`; React Server Components import those flat names
+ * (dotted access needs a client file).
  */
 export declare const Overflow: {
-    ({ overflowButton, children, className, ref, ...rest }: OverflowProps): React_2.JSX.Element;
+    ({ overflowButton, buttonPosition, overflowDirection, orientation, minimumVisible, hasHiddenItems, onOverflowChange, children, className, ref, ...rest }: OverflowProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Item: {
-        ({ itemId, children, className, style, ref, "aria-hidden": ariaHidden, inert, ...rest }: OverflowItemProps): React_2.JSX.Element;
+        ({ itemId, priority, pinned, groupId, asChild, children, className, style, ref, "aria-hidden": ariaHidden, inert, ...rest }: OverflowItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Divider: {
+        ({ groupId, children, className, style, ref, "aria-hidden": ariaHidden, inert, ...rest }: OverflowDividerProps): React_2.JSX.Element;
         displayName: string;
     };
 };
 
+/** What {@link OverflowProps.onOverflowChange} reports besides the hidden ids. */
+export declare interface OverflowChangeDetails {
+    /** `itemId`s of the shown items, in DOM order. */
+    visibleItems: string[];
+    /**
+     * The visibility of each item group, by `groupId` (only groups with an item; a record without a
+     * prototype): `'visible'` when every member is shown, `'hidden'` when none is, `'overflow'` for
+     * a mix.
+     */
+    groupVisibility: Record<string, OverflowGroupVisibility>;
+}
+
 /**
  * Overflow: `root` on the overflow element; `overflowButton` on the element around what
  * `overflowButton` renders.
@@ -9008,52 +9916,186 @@ export declare const overflowClassNames: {
 };
 
 /**
- * One entry of an {@link Overflow}. While it does not fit it stays mounted but is hidden
- * (`data-overflow-hidden` and an inline `display: none` placed after the consumer's own `style`),
- * `aria-hidden` and `inert`. The inline style wins over the consumer's `style.display` and over
- * display utilities in any cascade layer (a prefixed Tailwind app's `tw:flex` included), so a
- * hidden item is never shown while it is counted in "+N". Must be rendered inside `Overflow`.
+ * Which end of the row overflows first: `'end'` hides the last items in DOM order first, `'start'`
+ * the first ones. Equal priorities follow it.
  */
-export declare const OverflowItem: {
-    ({ itemId, children, className, style, ref, "aria-hidden": ariaHidden, inert, ...rest }: OverflowItemProps): React_2.JSX.Element;
+export declare type OverflowDirection = 'end' | 'start';
+
+/**
+ * A divider between item groups of an {@link Overflow}, drawn by its children (for example a
+ * vertical `Divider` or a `Toolbar.Divider`). It renders a `<div>` that stretches across the row
+ * (to the row's height, or to a vertical column's width) and lays out its child on that axis, so
+ * a child that stretches itself, such as `Toolbar.Divider`, spans the row; an explicitly sized
+ * child is centred in a row and kept at the start of a column. It is measured like an item and
+ * hidden, with `data-overflow-hidden`, an inline `display: none`, `aria-hidden` and `inert`, while
+ * the group `groupId` is `'hidden'` (none of its items is shown). Must be rendered inside
+ * `Overflow`.
+ */
+export declare const OverflowDivider: {
+    ({ groupId, children, className, style, ref, "aria-hidden": ariaHidden, inert, ...rest }: OverflowDividerProps): React_2.JSX.Element;
     displayName: string;
 };
 
-/** Overflow.Item: `root` on the item element. */
-export declare const overflowItemClassNames: {
-    readonly root: "wave-overflow-item";
+/** Overflow.Divider: `root` on the divider element. */
+export declare const overflowDividerClassNames: {
+    readonly root: "wave-overflow-divider";
 };
 
-/** Properties for the OverflowItem sub-component. */
-export declare interface OverflowItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
+/** Properties for the OverflowDivider sub-component. */
+export declare interface OverflowDividerProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The group the divider belongs to: it is hidden while that group is `'hidden'` and takes room
+     * in the row otherwise. A group without items counts as visible.
+     */
+    groupId: string;
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * How much of an item group is shown: `'visible'` (every member), `'hidden'` (none) or `'overflow'`
+ * (some).
+ */
+export declare type OverflowGroupVisibility = 'visible' | 'hidden' | 'overflow';
+
+/**
+ * One entry of an {@link Overflow}. `priority` (higher overflows later, default 0) or `pinned`
+ * (never overflows) decide when it hides; setting either on any item makes every item without
+ * `pinned` hidable, the first one included. `groupId` puts it in a group that an
+ * {@link OverflowDivider} and {@link useIsOverflowGroupVisible} follow. While it does not fit it
+ * stays mounted but is hidden (`data-overflow-hidden` and an inline `display: none` placed after
+ * the consumer's own `style`), `aria-hidden` and `inert`. The inline style wins over the
+ * consumer's `style.display` and over display utilities in any cascade layer (a prefixed Tailwind
+ * app's `tw:flex` included), so a hidden item is never shown while it is counted in "+N". With
+ * `asChild` the item renders no wrapper: its props are merged onto its single element child.
+ * Must be rendered inside `Overflow`.
+ */
+export declare const OverflowItem: {
+    ({ itemId, priority, pinned, groupId, asChild, children, className, style, ref, "aria-hidden": ariaHidden, inert, ...rest }: OverflowItemProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** The props of an {@link OverflowItem} besides `priority` and `pinned`. */
+export declare interface OverflowItemBaseProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
      * Identifier for tracking this item's overflow visibility, unique within the Overflow (a
      * duplicate warns in development: items that share one are hidden and shown together).
      */
     itemId: string;
-    /** Content of the overflow item. */
+    /**
+     * The group the item belongs to. A group is `'visible'`, `'hidden'` or `'overflow'` (some members
+     * hidden); an {@link OverflowDivider} with the same `groupId` hides with a hidden group, and
+     * {@link useIsOverflowGroupVisible} reads it.
+     */
+    groupId?: string;
+    /**
+     * Puts the item's props on its single element child (an `<li>`, a Toolbar button) instead of on
+     * a wrapper `<div>`: handlers and refs are composed with the child's, classes and styles merged,
+     * and the hidden state (`data-overflow-hidden`, `display: none`, `aria-hidden`, `inert`) wins
+     * over the child's own. A child that is not a single element (text, several elements) renders in
+     * the wrapper `<div>` and warns in development.
+     * @default false
+     */
+    asChild?: boolean;
+    /** Content of the overflow item: with `asChild`, the single element that takes its props. */
     children: React_2.ReactNode;
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** Overflow.Item: `root` on the item element. */
+export declare const overflowItemClassNames: {
+    readonly root: "wave-overflow-item";
+};
+
+/**
+ * An item hides in ascending `priority` (higher overflows later, default 0), or it is `pinned` and
+ * never hides: `priority` or `pinned`, never both.
+ */
+export declare type OverflowItemPriorityProps = {
+    /**
+     * Items with a lower priority overflow first; equal priorities follow the direction.
+     * @default 0
+     */
+    priority?: number;
+    pinned?: never;
+} | {
+    /**
+     * The item never overflows. Pinning any item drops the 0.13 protection of the first item for
+     * the whole row; `pinned={false}` alone keeps it.
+     * @default false
+     */
+    pinned?: boolean;
+    priority?: never;
+};
+
+/** Properties for the OverflowItem sub-component. */
+export declare type OverflowItemProps = OverflowItemBaseProps & OverflowItemPriorityProps;
+
 /** Properties for the Overflow component. */
 export declare interface OverflowProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
      * Renders the overflow button (for example a "+3" menu trigger) while at least one item is
      * hidden. Receives the number of hidden items and their `itemId`s in DOM order, so the button
      * can open a menu of the hidden items. `hiddenIds` is the button's own array (sorting it in
-     * place affects nobody else). Its width is measured and reserved when items overflow.
+     * place affects nobody else). Its size on the row's axis (width, or height for a vertical row)
+     * is measured and reserved when items overflow. In a list row (`role="list"`, with `asChild`
+     * `<li>` items) the button's wrapper is a list item (`role="listitem"`).
      * Components rendered by it can also read the hidden items with {@link useOverflowMenu}.
      */
     overflowButton?: (count: number, hiddenIds: string[]) => React_2.ReactNode;
     /**
-     * The {@link OverflowItem}s to lay out in one row. Only items and the overflow button are
-     * measured: the container's whole content box is the room for them, so other content placed in
-     * the row is not accounted for and could clip items that still count as visible. Keep fixed
-     * content outside the Overflow (for example in a surrounding flex row), or wrap it in an
-     * `OverflowItem` (the first item is never hidden).
+     * The {@link OverflowItem}s (and {@link OverflowDivider}s) to lay out in one row or column.
+     * Only items, dividers and the overflow button are measured: the container's whole content box
+     * is the room for them, so other content placed in the row is not accounted for and could clip
+     * items that still count as visible. Keep fixed content outside the Overflow (for example in a
+     * surrounding flex row), or wrap it in an `OverflowItem` and pin it with `pinned`.
      */
     children: React_2.ReactNode;
+    /**
+     * Which end of the row overflows first (`start` is the start of the DOM order, so the right side
+     * of a right-to-left row). While no item sets `priority` or `pinned` (`pinned={false}` does not
+     * count) the first item (`end`) or the last one (`start`) is never hidden, as in 0.13; once any
+     * item pins itself or sets a priority, only `pinned` items are protected, the first one included.
+     * @default 'end'
+     */
+    overflowDirection?: OverflowDirection;
+    /**
+     * Where the overflow button goes while items are hidden: `'end'` after every item, sticking to
+     * the end of the axis; `'before-hidden'` just before the first hidden item in DOM order, so it
+     * stands in for the hidden items (a breadcrumb trail), and takes the row's gap as the items do.
+     * With `'before-hidden'` the items must be children of the Overflow (Fragments and arrays are
+     * opened): when the first hidden item is rendered by another component the button stays at the
+     * end, with a development warning. The button moves without remounting. While nothing is
+     * hidden there is no button, except the one `hasHiddenItems` reserves, at the end.
+     * @default 'end'
+     */
+    buttonPosition?: 'end' | 'before-hidden';
+    /**
+     * The axis items are laid out on. `'vertical'` stacks them in a column and measures heights
+     * (Fluent's `overflowAxis`); the column needs a definite height (a `height`, or a flex or grid
+     * cell with one), since it has no room to measure otherwise.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * The number of items that stay visible however little room there is (pinned items count).
+     * @default 0
+     */
+    minimumVisible?: number;
+    /**
+     * Renders the overflow button before the first measurement (for example in the server HTML) so
+     * the row reserves its room; `overflowButton` then receives `0` and `[]`. It goes away after the
+     * first measurement when every item fits.
+     * @default false
+     */
+    hasHiddenItems?: boolean;
+    /**
+     * Called, from an effect, when the set of hidden items changes (not for the initial, empty set),
+     * with the hidden `itemId`s in DOM order and the {@link OverflowChangeDetails}. Called once per
+     * change in StrictMode, and only for a set that has been rendered. The Overflow always passes
+     * `details`; it is typed optional until 1.0, as the second argument of every callback is, so a
+     * handler of the hidden ids alone fits.
+     */
+    onOverflowChange?: (hiddenItems: string[], details?: OverflowChangeDetails) => void;
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
@@ -9157,17 +10199,96 @@ export declare interface PaginationProps extends Omit<React_2.HTMLAttributes<HTM
 }
 
 /**
- * A person's avatar next to their name and optional secondary text (job title, email), with an
- * optional presence badge.
+ * Splits the items of an AvatarGroup into the ones shown inline and the ones in the overflow list.
+ * `AvatarGroup` uses it for `max`; use it yourself to render `AvatarGroup.Item`s and
+ * `AvatarGroup.Popover` from your own list. Server-safe: it imports nothing.
+ *
+ * @example
+ * const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: people, maxInlineItems: 4 });
+ */
+export declare function partitionAvatarGroupItems<T>({ items, maxInlineItems, layout, }: PartitionAvatarGroupItemsOptions<T>): PartitionAvatarGroupItemsResult<T>;
+
+/** Options of {@link partitionAvatarGroupItems}. */
+export declare interface PartitionAvatarGroupItemsOptions<T> {
+    /** All the items of the group. */
+    items: readonly T[];
+    /**
+     * How many items are shown inline; the rest go to the overflow. A fraction is rounded down, `0`
+     * or a negative value shows none, and `undefined` or `NaN` shows all (up to the layout's cap).
+     */
+    maxInlineItems?: number;
+    /**
+     * The layout of the group. A `pie` shows at most three items inline.
+     * @default 'stack'
+     */
+    layout?: AvatarGroupLayout;
+}
+
+/** Result of {@link partitionAvatarGroupItems}. */
+export declare interface PartitionAvatarGroupItemsResult<T> {
+    /** The items shown inline, in order. */
+    inlineItems: T[];
+    /** The items in the overflow list, in order; `undefined` when nothing overflows. */
+    overflowItems: T[] | undefined;
+}
+
+/**
+ * Splits a breadcrumb trail into the items shown before a collapse button, the items it hides and
+ * the items shown after it, with the rules of Fluent UI's `partitionBreadcrumbItems`: it hides
+ * `items.length - maxDisplayedItems` items starting at `overflowIndex`. A trail with no more items
+ * than `maxDisplayedItems` is not split: all items are in `startDisplayedItems`, and the other two
+ * lists are absent. The function is pure and server-safe.
+ *
+ * @example
+ * const { startDisplayedItems, overflowItems, endDisplayedItems } = partitionBreadcrumbItems({
+ *   items: crumbs,
+ *   maxDisplayedItems: 4,
+ * });
+ */
+export declare function partitionBreadcrumbItems<T>(options: PartitionBreadcrumbItemsOptions<T>): PartitionBreadcrumbItemsResult<T>;
+
+/** Options of {@link partitionBreadcrumbItems}. */
+export declare interface PartitionBreadcrumbItemsOptions<T> {
+    /** The trail, in order. Not changed. */
+    items: readonly T[];
+    /**
+     * The most items shown, the collapse button not counted. A missing, zero, negative or non-numeric
+     * value falls back to 6.
+     * @default 6
+     */
+    maxDisplayedItems?: number;
+    /**
+     * The index of the first hidden item. An index at or past `maxDisplayedItems` becomes
+     * `maxDisplayedItems - 1`; a negative index becomes 0.
+     * @default 1
+     */
+    overflowIndex?: number;
+}
+
+/** The result of {@link partitionBreadcrumbItems}. */
+export declare interface PartitionBreadcrumbItemsResult<T> {
+    /** The items before the collapsed ones; the whole trail when nothing is hidden. */
+    startDisplayedItems: T[];
+    /** The hidden items, in order. Absent when the trail fits. */
+    overflowItems?: T[];
+    /** The items after the collapsed ones. Absent when the trail fits. */
+    endDisplayedItems?: T[];
+}
+
+/**
+ * A person's avatar next to their name and up to three more text lines (job title, location,
+ * status), with an optional presence badge. The text can sit after, before or below the avatar
+ * (`textPosition`), `presenceOnly` swaps the avatar for the presence badge, and the text scales with
+ * `size` up to `huge`.
  *
  * The built-in avatar is decorative (`<Avatar decorative>`): the visible name is announced once,
  * not a second time as the avatar's image name. The presence badge stays exposed as a named image.
  *
  * @example
- * <Persona name="Jane Doe" secondaryText="Designer" status="available" />
+ * <Persona name="Jane Doe" secondaryText="Designer" tertiaryText="Oslo" status="available" />
  */
 export declare const Persona: {
-    ({ name, secondaryText, src, size, status, avatar, badge, className, ref, ...props }: PersonaProps): React_2.JSX.Element;
+    ({ name, primaryText, secondaryText, tertiaryText, quaternaryText, textPosition, textAlignment, presenceOnly, src, size, status, avatar, badge, className, ref, ...props }: PersonaProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -9182,20 +10303,52 @@ export declare const personaClassNames: {
     readonly badge: "wave-persona__badge";
     readonly primaryText: "wave-persona__primary-text";
     readonly secondaryText: "wave-persona__secondary-text";
+    readonly tertiaryText: "wave-persona__tertiary-text";
+    readonly quaternaryText: "wave-persona__quaternary-text";
 };
 
 /** Properties for the Persona component. */
 export declare interface PersonaProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Display name of the person. */
-    name: string;
-    /** Secondary text such as job title or email. */
-    secondaryText?: string;
+    /**
+     * Display name of the person. It gives the avatar its initials and the first text line its text
+     * (unless `primaryText` is given). A persona with neither `name` nor `primaryText` warns in
+     * development.
+     */
+    name?: string;
+    /**
+     * The first text line (the name). A string, an element or an object of `<span>` attributes.
+     * @default the `name`
+     */
+    primaryText?: Slot<'span'>;
+    /** The second text line, such as a job title or email. */
+    secondaryText?: Slot<'span'>;
+    /** The third text line, such as a location. */
+    tertiaryText?: Slot<'span'>;
+    /** The fourth text line, such as a status message. */
+    quaternaryText?: Slot<'span'>;
+    /**
+     * Where the text sits relative to the avatar, in reading order: after it, before it, or below it.
+     * @default 'after'
+     */
+    textPosition?: 'after' | 'before' | 'below';
+    /**
+     * How the text lines align with each other.
+     * @default 'start' ('center' when the text is below the avatar)
+     */
+    textAlignment?: 'start' | 'center';
+    /**
+     * Shows only the presence badge (from `status` or `badge`) in place of the avatar. The text
+     * stays.
+     * @default false
+     */
+    presenceOnly?: boolean;
     /** URL of the person's avatar image. */
     src?: string;
-    /** Size of the persona avatar.
+    /**
+     * Size of the persona: its avatar and its text.
      * @default 'medium'
      */
-    size?: Size;
+    size?: PersonaSize;
     /** Presence status shown as a badge on the avatar. Ignored when a `badge` is given. */
     status?: PresenceStatus;
     /**
@@ -9215,6 +10368,9 @@ export declare interface PersonaProps extends React_2.HTMLAttributes<HTMLDivElem
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** The size of a Persona: the Avatar sizes, and `huge` (a 72px avatar). */
+export declare type PersonaSize = Size | 'huge';
+
 /** How urgently assistive technology should read a message. */
 export declare type Politeness = 'polite' | 'assertive';
 
@@ -9737,9 +10893,10 @@ export declare interface PresenceAttributes {
  *
  * @example
  * <PresenceBadge status="busy" />
+ * <PresenceBadge status="do-not-disturb" />
  */
 export declare const PresenceBadge: {
-    ({ status, size, className, ref, ...props }: PresenceBadgeProps): React_2.JSX.Element;
+    ({ status: statusProp, size: sizeProp, className, ref, ...props }: PresenceBadgeProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -9751,9 +10908,14 @@ export declare const presenceBadgeClassNames: {
 
 /** Properties for the PresenceBadge component. */
 export declare interface PresenceBadgeProps extends React_2.HTMLAttributes<HTMLSpanElement> {
-    /** Presence status to display. */
-    status: PresenceStatus;
-    /** Size of the presence indicator.
+    /**
+     * Presence status to display. `'dnd'` and `'oof'` are deprecated aliases of `'do-not-disturb'`
+     * and `'out-of-office'`: they render the same and warn once in development (removed in 1.0).
+     * @default 'available'
+     */
+    status?: PresenceStatus;
+    /**
+     * Size of the presence indicator. In the `badge` slot of an Avatar it is sized from the avatar.
      * @default 'medium'
      */
     size?: Size;
@@ -9779,8 +10941,11 @@ export declare interface PresenceProps extends UsePresenceOptions {
     children: React_2.ReactElement | ((presence: UsePresenceResult) => React_2.ReactNode);
 }
 
-/** User presence status for Avatar and Persona components. */
-export declare type PresenceStatus = 'available' | 'busy' | 'away' | 'offline' | 'dnd' | 'oof';
+/**
+ * User presence status for Avatar and Persona components. `'dnd'` and `'oof'` are deprecated
+ * aliases of `'do-not-disturb'` and `'out-of-office'` ({@link DeprecatedPresenceStatus}).
+ */
+export declare type PresenceStatus = 'available' | 'busy' | 'away' | 'offline' | 'do-not-disturb' | 'out-of-office' | DeprecatedPresenceStatus;
 
 /**
  * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).
@@ -10836,6 +12001,7 @@ export declare type SlotObject<T extends React_2.ElementType = 'span'> = {
     [dataAttribute: `data-${string}`]: unknown;
 } & Omit<React_2.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'style'>;
 
+/** The direction of a sorted column. */
 export declare type SortDirection = 'ascending' | 'descending';
 
 /**
@@ -11815,10 +12981,17 @@ export declare type SwitchSize = Extract<Size, 'small' | 'medium'>;
  * scrollable wrapper; while it scrolls, the wrapper is a focusable region (named by
  * `containerProps` or the `<caption>`) so keyboard users can scroll it.
  *
- * Sub-components are available as `Table.Header`, `Table.HeaderCell`, `Table.Body`, `Table.Row`
- * and `Table.Cell` in client components, and as the flat exports `TableHeader`,
- * `TableHeaderCell`, `TableBody`, `TableRow` and `TableCell` (the form React Server Components
- * can import). `Table.Head`/`Table.HeadCell` (`TableHead`/`TableHeadCell`) are deprecated aliases.
+ * The table keeps no state: a sortable `Table.HeaderCell` reports its clicks, and a
+ * `Table.SelectionCell` (a native checkbox or radio) its changes, for your state to sort and
+ * select the rows. `Table.CellLayout` lays out a cell's media, text and description, and
+ * `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
+ * 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.
  */
 export declare const Table: {
     ({ striped, containerProps, children, className, ref, ...props }: TableProps): React_2.JSX.Element;
@@ -11829,7 +13002,7 @@ export declare const Table: {
         displayName: string;
     };
     HeaderCell: {
-        ({ children, className, ref, ...props }: TableHeaderCellProps): React_2.JSX.Element;
+        ({ sortable, sortDirection, onSortClick, sortIcon, aside, children, className, ref, ...props }: TableHeaderCellProps): React_2.JSX.Element;
         displayName: string;
     };
     /** @deprecated Use `Table.Header`. */
@@ -11854,6 +13027,18 @@ export declare const Table: {
         ({ children, className, ref, ...props }: TableCellProps): React_2.JSX.Element;
         displayName: string;
     };
+    SelectionCell: {
+        ({ type, checked: checkedProp, defaultChecked, onCheckedChange, onChange, name, value, form, disabled, required, subtle, invisible, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, autoFocus, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, controlRef, className, ref, ...rest }: TableSelectionCellProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    CellLayout: {
+        ({ media, description, truncate, appearance, children, className, ref, ...rest }: TableCellLayoutProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    CellActions: {
+        ({ visible, className, ref, ...rest }: TableCellActionsProps): React_2.JSX.Element;
+        displayName: string;
+    };
 };
 
 /** The table's `<tbody>`. */
@@ -11875,17 +13060,100 @@ export declare interface TableBodyProps extends React_2.HTMLAttributes<HTMLTable
     ref?: React_2.Ref<HTMLTableSectionElement>;
 }
 
-/** A data cell (`<td>`). */
+/** A data cell (`<td>`), the positioning box of a `Table.CellActions` inside it. */
 export declare const TableCell: {
     ({ children, className, ref, ...props }: TableCellProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * Actions of a cell (buttons, a menu button), shown over the end of the cell while its row is
+ * hovered or holds focus, and always in forced colors and on a coarse pointer (touch); `visible`
+ * keeps them shown. They stay in the tab order while hidden, and Tab into them shows them. Place
+ * them in a `Table.Cell` or `DataGrid.Cell`, whose row (`Table.Row`, `DataGrid.Row`) is the group
+ * that shows them. Their opaque background follows the row's (hover, a striped table's stripe, a
+ * DataGrid's selected row); a row with a background of its own needs the same class on its
+ * actions. The element carries `data-visible` while `visible` is set.
+ */
+export declare const TableCellActions: {
+    ({ visible, className, ref, ...rest }: TableCellActionsProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** Table.CellActions: `root` on the element that holds the actions. */
+export declare const tableCellActionsClassNames: {
+    readonly root: "wave-table-cell-actions";
+};
+
+/** Properties for the TableCellActions sub-component. */
+export declare interface TableCellActionsProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Keeps the actions shown, also while the row is neither hovered nor focused: for example while
+     * a menu opened from one of them is open.
+     * @default false
+     */
+    visible?: boolean;
+    /** The actions: buttons, a menu button. */
+    children?: React_2.ReactNode;
+    /** Ref to the `<div>` that holds the actions. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /** Table.Cell: `root` on the `<td>`. */
 export declare const tableCellClassNames: {
     readonly root: "wave-table-cell";
 };
 
+/**
+ * Lays out a cell's content: `media` (an icon or an Avatar), then the main text (children) with
+ * an optional `description` under it. `truncate` keeps both lines to one line each with an
+ * ellipsis; `appearance="primary"` draws the main text semibold, for the cell that names the row.
+ */
+export declare const TableCellLayout: {
+    ({ media, description, truncate, appearance, children, className, ref, ...rest }: TableCellLayoutProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Table.CellLayout: `root` on the layout element; `media` on the media `<span>`; `content` on the
+ * column that holds the text; `main` on the main text; `description` on the description line.
+ */
+export declare const tableCellLayoutClassNames: {
+    readonly root: "wave-table-cell-layout";
+    readonly media: "wave-table-cell-layout__media";
+    readonly content: "wave-table-cell-layout__content";
+    readonly main: "wave-table-cell-layout__main";
+    readonly description: "wave-table-cell-layout__description";
+};
+
+/** Properties for the TableCellLayout sub-component. */
+export declare interface TableCellLayoutProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A picture before the text: an icon (drawn at 20px, 24px with the primary appearance) or an
+     * Avatar, which takes a 32px box when it sets no `size` of its own. It is content, not hidden
+     * from assistive technology: make an Avatar beside the person's name decorative.
+     */
+    media?: Slot<'span'>;
+    /** A second line under the main text, in the caption size and the muted color. */
+    description?: Slot<'span'>;
+    /**
+     * Keeps the main text and the description on one line each, ending in an ellipsis where they do
+     * not fit. It takes effect where the column's width is bounded (a width on the column, or a
+     * table layout that does not widen columns to fit their content).
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * `'primary'` draws the main text semibold and the media icon larger: the cell that names the
+     * row. Rendered as `data-appearance` while set.
+     */
+    appearance?: 'primary';
+    /** The main text. */
+    children?: React_2.ReactNode;
+    /** Ref to the layout `<div>`. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /** Properties for the TableCell sub-component. */
 export declare interface TableCellProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
     /** Cell content. */
@@ -11923,24 +13191,62 @@ export declare const TableHeader: {
 
 /** A column header cell (`<th scope="col">`). */
 export declare const TableHeaderCell: {
-    ({ children, className, ref, ...props }: TableHeaderCellProps): React_2.JSX.Element;
+    ({ sortable, sortDirection, onSortClick, sortIcon, aside, children, className, ref, ...props }: TableHeaderCellProps): React_2.JSX.Element;
     displayName: string;
 };
 
-/** Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`. */
+/**
+ * Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`; `button` on the sort
+ * button of a sortable header; `sortIcon` on its direction glyph (the default arrow `<svg>`, or the
+ * `<span>` of a `sortIcon` slot); `aside` on the aside `<span>`, outside the button.
+ */
 export declare const tableHeaderCellClassNames: {
     readonly root: "wave-table-header-cell";
+    readonly button: "wave-table-header-cell__button";
+    readonly sortIcon: "wave-table-header-cell__sort-icon";
+    readonly aside: "wave-table-header-cell__aside";
 };
 
 /** Properties for the TableHeaderCell sub-component. */
 export declare interface TableHeaderCellProps extends React_2.ThHTMLAttributes<HTMLTableCellElement> {
-    /** Header cell content. */
-    children: React_2.ReactNode;
-    /** Ref to the `<th>` element. */
-    ref?: React_2.Ref<HTMLTableCellElement>;
-}
-
-/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */
+    /**
+     * Makes the column header a sort control: the content is wrapped in a `<button>` that fills the
+     * cell, and the cell carries `aria-sort` (`"none"` while `sortDirection` is not set). The table
+     * does not sort or track the direction; keep it in your state, set `sortDirection` and sort the
+     * rows in `onSortClick`. The table keeps no grid semantics.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * The direction the column is sorted in, shown as `aria-sort` and as the glyph of a sortable
+     * header. Absent means the column is not sorted. Without `sortable` it has no effect.
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Called with the click event when the sort button is activated (click, Enter or Space).
+     * Fluent's `onSortClick`.
+     */
+    onSortClick?: React_2.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The glyph that shows the direction, only while `sortDirection` is set. It is decorative
+     * (`aria-hidden`) and carries `data-direction`. `null` and `undefined` keep the default arrow
+     * (up for ascending, down for descending); `false` or anything that renders nothing hides it. A
+     * `<button>` or `Button` passed here is not nested: its children become the glyph.
+     */
+    sortIcon?: Slot<'span'>;
+    /**
+     * Content beside the header content, outside the sort button (a filter button, an info
+     * button), so it is not part of the button's name. Nothing renders for content that renders
+     * nothing.
+     */
+    aside?: Slot<'span'>;
+    /** Header cell content. */
+    children: React_2.ReactNode;
+    /** Ref to the `<th>` element. */
+    ref?: React_2.Ref<HTMLTableCellElement>;
+}
+
+/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */
 export declare const tableHeaderClassNames: {
     readonly root: "wave-table-header";
 };
@@ -11980,7 +13286,11 @@ export declare interface TableProps extends React_2.HTMLAttributes<HTMLTableElem
     ref?: React_2.Ref<HTMLTableElement>;
 }
 
-/** A table row. Striping comes from the table (`striped`), so rows need no context. */
+/**
+ * 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
+ * actions inside it (Tree's rows keep their own group).
+ */
 export declare const TableRow: {
     ({ children, className, ref, ...props }: TableRowProps): React_2.JSX.Element;
     displayName: string;
@@ -11999,6 +13309,111 @@ export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableR
     ref?: React_2.Ref<HTMLTableRowElement>;
 }
 
+/**
+ * A selection cell: a `<td>` with a native checkbox or radio (`type`), drawn as the DataGrid's.
+ * The table keeps no selection, so the cell is usually controlled (`checked`, `onCheckedChange`)
+ * from your rows' state; `checked="mixed"` draws a header select-all whose rows are partly
+ * selected. `id`, `aria-label`, `aria-labelledby`, `aria-describedby`, the other ARIA state
+ * props, `autoFocus`, `tabIndex`, the focus, key and change handlers and `name`, `value`, `form`,
+ * `disabled` and `required` go to the control (`controlRef`); `className`, `style`, `data-*`, the
+ * other handlers and `ref` stay on the cell, which carries `data-type`. Name the control with
+ * `aria-label` or `aria-labelledby` (the row's first cell); a development warning reports a
+ * control without a name.
+ */
+export declare const TableSelectionCell: {
+    ({ type, checked: checkedProp, defaultChecked, onCheckedChange, onChange, name, value, form, disabled, required, subtle, invisible, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, autoFocus, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, controlRef, className, ref, ...rest }: TableSelectionCellProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** Second argument of `Table.SelectionCell`'s `onCheckedChange`: the event behind the change. */
+export declare interface TableSelectionCellCheckedChangeDetails {
+    /**
+     * The DOM event behind the change: the click of the control (Space clicks it too), or, for an
+     * uncontrolled radio, the click that checked another radio of its group.
+     */
+    event: Event;
+}
+
+/** Table.SelectionCell: `root` on the `<td>`; `control` on its checkbox or radio. */
+export declare const tableSelectionCellClassNames: {
+    readonly root: "wave-table-selection-cell";
+    readonly control: "wave-table-selection-cell__control";
+};
+
+/**
+ * Properties for the TableSelectionCell sub-component. The focus, key and change handlers are the
+ * control's (C-ROUTING), so they replace the cell's.
+ */
+export declare interface TableSelectionCellProps extends Omit<React_2.TdHTMLAttributes<HTMLTableCellElement>, 'children' | 'defaultChecked' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp'> {
+    /**
+     * The control: a checkbox (multiple selection, or a select-all in the header) or a radio (single
+     * selection).
+     * @default 'checkbox'
+     */
+    type?: 'checkbox' | 'radio';
+    /**
+     * Controlled checked state. `'mixed'` draws an indeterminate checkbox (a select-all whose rows
+     * are partly selected); a click on it checks it. `'mixed'` is for checkboxes only: on a radio it
+     * has no effect (the radio is drawn unchecked).
+     */
+    checked?: boolean | 'mixed';
+    /**
+     * Initial checked state for uncontrolled usage, also the state a form reset restores.
+     * Uncontrolled radios that share a `name` uncheck each other, as a native radio group does.
+     * @default false
+     */
+    defaultChecked?: boolean | 'mixed';
+    /**
+     * Called with the new checked state when the user checks or unchecks the control (not for no-op
+     * updates), and when a form reset restores a `true` or `false` `defaultChecked`. The second
+     * argument holds the event. The table keeps no selection: update your rows' state here.
+     */
+    onCheckedChange?: (checked: boolean, details?: TableSelectionCellCheckedChangeDetails) => void;
+    /**
+     * The native change event of the control, called before `onCheckedChange`;
+     * `event.preventDefault()` in it cancels the change.
+     */
+    onChange?: React_2.ChangeEventHandler<HTMLInputElement>;
+    /** Form field name of the control. With a name, the control submits `name=value` while checked. */
+    name?: string;
+    /**
+     * Value the control submits while checked.
+     * @default 'on'
+     */
+    value?: string;
+    /** Id of the form the control belongs to, when the table is rendered outside that form. */
+    form?: string;
+    /** Natively disables the control: it cannot be checked or focused. */
+    disabled?: boolean;
+    /** The form must not be submitted while the control is unchecked (native validation). */
+    required?: boolean;
+    /**
+     * Draws an unchecked control only while its row (a `Table.Row`) is hovered or holds focus; its
+     * own keyboard focus, forced colors and a coarse pointer (touch) always draw it. It stays
+     * focusable and named.
+     * @default false
+     */
+    subtle?: boolean;
+    /**
+     * Hides the control and takes it out of the tab order, while the cell keeps its box (a row that
+     * cannot be selected keeps the column aligned).
+     * @default false
+     */
+    invisible?: boolean;
+    /** Focus handler of the control. */
+    onFocus?: React_2.FocusEventHandler<HTMLInputElement>;
+    /** Blur handler of the control. */
+    onBlur?: React_2.FocusEventHandler<HTMLInputElement>;
+    /** Keydown handler of the control. */
+    onKeyDown?: React_2.KeyboardEventHandler<HTMLInputElement>;
+    /** Keyup handler of the control. */
+    onKeyUp?: React_2.KeyboardEventHandler<HTMLInputElement>;
+    /** Ref to the `<input>` element. */
+    controlRef?: React_2.Ref<HTMLInputElement>;
+    /** Ref to the `<td>` element. */
+    ref?: React_2.Ref<HTMLTableCellElement>;
+}
+
 /**
  * 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
@@ -12019,11 +13434,11 @@ export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableR
  * `TabListPanels`) for React Server Components, which cannot use the dotted form.
  */
 export declare const TabList: {
-    ({ value: valueProp, defaultValue: defaultValueProp, onValueChange, orientation: orientationProp, selectTabOnFocus, selectedValue, defaultSelectedValue, onTabSelect, vertical, className, children, onKeyDown, onFocus, ref, ...rest }: TabListProps): React_2.JSX.Element;
+    ({ value: valueProp, defaultValue: defaultValueProp, onValueChange, orientation: orientationProp, appearance, size, selectTabOnFocus, selectedValue, defaultSelectedValue, onTabSelect, vertical, className, children, onKeyDown, onFocus, ref, ...rest }: TabListProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Tab: {
-        ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
+        ({ value, id: idProp, icon, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
         displayName: string;
     };
     Panel: {
@@ -12036,6 +13451,9 @@ export declare const TabList: {
     };
 };
 
+/** The look of a TabList: an underline, subtle fills, or circular subtle or filled tabs. */
+export declare type TabListAppearance = 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
+
 /** TabList: `root` on the `role="tablist"` element. */
 export declare const tabListClassNames: {
     readonly root: "wave-tab-list";
@@ -12098,6 +13516,19 @@ export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDi
      * @default 'horizontal'
      */
     orientation?: Orientation;
+    /**
+     * Look of the tabs: `transparent` underlines the selected tab, `subtle` and `subtle-circular`
+     * fill it with a subtle color (square or fully rounded), `filled-circular` fills it with the
+     * primary color. In forced colors the selected tab keeps a Highlight outline (or underline) in
+     * every appearance.
+     * @default 'transparent'
+     */
+    appearance?: TabListAppearance;
+    /**
+     * Size of the tabs: their padding and type (`medium` is 14px text on 16 by 8px padding).
+     * @default 'medium'
+     */
+    size?: CoreSize;
     /**
      * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic
      * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click
@@ -12129,13 +13560,14 @@ export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDi
  * with its value is mounted.
  */
 export declare const TabListTab: {
-    ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
+    ({ value, id: idProp, icon, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
     displayName: string;
 };
 
 /** TabList.Tab: `root` on the `role="tab"` button. */
 export declare const tabListTabClassNames: {
     readonly root: "wave-tab-list-tab";
+    readonly icon: "wave-tab-list-tab__icon";
 };
 
 /** Properties for the TabPanel sub-component. */
@@ -12156,6 +13588,11 @@ export declare interface TabPanelsProps extends React_2.HTMLAttributes<HTMLDivEl
 export declare interface TabProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Unique value identifying this tab (and its panel). */
     value: string;
+    /**
+     * An icon before the text, hidden from assistive technology. A tab with an icon and no text is
+     * icon-only (a square hit area): name it with `aria-label`, or a development warning asks for it.
+     */
+    icon?: Slot<'span'>;
     /** Ref to the tab `<button>`. */
     ref?: React_2.Ref<HTMLButtonElement>;
 }
@@ -13169,11 +14606,16 @@ export declare type TagSize = Extract<Size, 'extra-small' | 'small' | 'medium'>;
  * A step-by-step onboarding popover (a non-modal `role="dialog"`) with Back/Next (Done on the
  * last step) and Close.
  *
- * - Visibility is controllable: `open`/`defaultOpen` (default `true`)/`onOpenChange`; Close, Done
- *   and Escape (anywhere in the document) dismiss it and call `onDismiss`.
+ * - Visibility is controllable: `open`/`defaultOpen` (default `true`, or `false` with a direct
+ *   `TeachingPopover.Trigger`)/`onOpenChange`; Close, Done, Escape (anywhere in the document) and
+ *   the Trigger dismiss it and call `onDismiss`.
  * - The step is controllable with `activeStep`/`defaultActiveStep`/`onStepChange` and clamped to
  *   the available steps. The heading carries a visually hidden “step n of m”, the new step is
  *   announced politely, and Back stays focusable (`aria-disabled`) on the first step.
+ * - `primaryAction` and `secondaryAction` (on the popover, or on a step, which wins) replace Next/Done
+ *   and Back: a label, a Button-like element or a slot object. The consumer's `onClick` runs first,
+ *   then the step's normal action unless it called `preventDefault()`. Done calls `onFinish`
+ *   (and, in 0.x, `onDismiss`); `footerLayout` stacks the buttons.
  * - The built-in text is English: `labels` localizes Back, Next, Done and the step position, and
  *   `closeLabel` the Close button.
  * - Focus moves to the popover when it opens and returns to the element that had it when it
@@ -13193,16 +14635,327 @@ export declare type TagSize = Extract<Size, 'extra-small' | 'small' | 'medium'>;
  *   With no control at or before the target, the popover is reached where it is portaled, at the
  *   end of the page: Tab from the page's last control and Shift+Tab from outside the page enter
  *   it.
+ * - **Parts** (Fluent's composition): `TeachingPopover.Trigger` opens and closes the popover, gets
+ *   focus back when it closes and, without a `target`, is what it points at; written directly
+ *   inside TeachingPopover (a Fragment is fine), it makes the popover start closed (`defaultOpen`
+ *   `false`). `TeachingPopover.Surface` is the surface itself: it takes the `className`, `style`,
+ *   `ref` and other element props that the `steps` form takes on TeachingPopover. Inside it,
+ *   `TeachingPopover.Header` (the Close button, with an optional caption and `icon`),
+ *   `TeachingPopover.Title` (the step title with the hidden step position; it names the popover),
+ *   `TeachingPopover.Body` (the step body, after an optional `media`) and
+ *   `TeachingPopover.Footer` (the step dots and the buttons) each show their share of the current
+ *   step unless given children; a Surface without children shows all four, which is what the
+ *   `steps` form renders. Both forms share one state: the steps, the labels, the actions and the
+ *   callbacks stay on TeachingPopover. A part outside a TeachingPopover throws in development.
+ * - **Carousel parts**: `TeachingPopover.Carousel` holds the current step's page (the title and
+ *   body) and `TeachingPopover.CarouselFooter`, the bottom row with the step buttons:
+ *   `initialStepText` turns the first step's Back into a button that dismisses the popover (“Not
+ *   now”), `finalStepText` relabels Done, and `layout` (`'offset'` or `'centered'`) places the
+ *   indicator. The indicator is the decorative step dots unless you place
+ *   `TeachingPopover.CarouselNav` (interactive step buttons, named by `labels.navButton`, each a
+ *   Tab stop, the current one with `aria-current="step"`) or `TeachingPopover.CarouselPageCount`
+ *   (a visible “2 of 3”, worded by a render function) there. `steps` stays the only source of
+ *   the pages, so there is no card part.
+ *
+ * The parts are also exported under flat names (`TeachingPopoverTrigger`,
+ * `TeachingPopoverSurface`, `TeachingPopoverHeader`, `TeachingPopoverTitle`,
+ * `TeachingPopoverBody`, `TeachingPopoverFooter`, `TeachingPopoverCarousel`,
+ * `TeachingPopoverCarouselNav`, `TeachingPopoverCarouselPageCount`,
+ * `TeachingPopoverCarouselFooter`) for React Server Components, which cannot use the dotted form;
+ * dotted access (`TeachingPopover.Trigger`) needs a client file.
+ *
+ * @example
+ * <TeachingPopover steps={steps} onFinish={markTourSeen}>
+ *   <TeachingPopover.Trigger>
+ *     <Button>Take the tour</Button>
+ *   </TeachingPopover.Trigger>
+ *   <TeachingPopover.Surface>
+ *     <TeachingPopover.Header icon={<LightbulbIcon />}>Tip</TeachingPopover.Header>
+ *     <TeachingPopover.Title />
+ *     <TeachingPopover.Body media={<img src="/tour/search.png" alt="" />} />
+ *     <TeachingPopover.Footer />
+ *   </TeachingPopover.Surface>
+ * </TeachingPopover>
+ *
+ * @example
+ * <TeachingPopover steps={steps} onFinish={markTourSeen}>
+ *   <TeachingPopover.Surface>
+ *     <TeachingPopover.Header>Tip</TeachingPopover.Header>
+ *     <TeachingPopover.Carousel>
+ *       <TeachingPopover.Title />
+ *       <TeachingPopover.Body />
+ *       <TeachingPopover.CarouselFooter initialStepText="Not now" finalStepText="Got it">
+ *         <TeachingPopover.CarouselNav />
+ *       </TeachingPopover.CarouselFooter>
+ *     </TeachingPopover.Carousel>
+ *   </TeachingPopover.Surface>
+ * </TeachingPopover>
  */
 export declare const TeachingPopover: {
-    ({ steps, activeStep: activeStepProp, defaultActiveStep, currentStep, defaultCurrentStep, onStepChange, onDismiss, open: openProp, defaultOpen, onOpenChange, closeLabel, labels, target: targetProp, positioning, side, align, className, style, onKeyDown, ref, ...rest }: TeachingPopoverProps): React_2.JSX.Element | null;
+    ({ steps, activeStep: activeStepProp, defaultActiveStep, currentStep, defaultCurrentStep, onStepChange, onDismiss, onFinish, primaryAction: primaryActionProp, secondaryAction: secondaryActionProp, footerLayout, open: openProp, defaultOpen, onOpenChange, closeLabel, labels, target: targetProp, positioning, side, align, children, id, className, style, onKeyDown, ref, ...rest }: TeachingPopoverProps): JSX.Element;
+    displayName: string;
+} & {
+    Trigger: {
+        ({ children, asChild, onClick, ref, ...rest }: TeachingPopoverTriggerProps): ReactNode;
+        displayName: string;
+    };
+    Surface: {
+        ({ id, ref, ...rest }: TeachingPopoverSurfaceProps): JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ icon, dismissButton, className, children, ref, ...rest }: TeachingPopoverHeaderProps): JSX.Element | null;
+        displayName: string;
+    };
+    Title: PolymorphicComponent<"h3", TeachingPopoverTitleOwnProps>;
+    Body: {
+        ({ media, className, children, ref, ...rest }: TeachingPopoverBodyProps): JSX.Element | null;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, children, ref, ...rest }: TeachingPopoverFooterProps): JSX.Element | null;
+        displayName: string;
+    };
+    Carousel: {
+        ({ className, children, ref, ...rest }: TeachingPopoverCarouselProps): JSX.Element | null;
+        displayName: string;
+    };
+    CarouselNav: {
+        ({ className, ref, ...rest }: TeachingPopoverCarouselNavProps): JSX.Element | null;
+        displayName: string;
+    };
+    CarouselPageCount: {
+        ({ className, children, ref, ...rest }: TeachingPopoverCarouselPageCountProps): JSX.Element | null;
+        displayName: string;
+    };
+    CarouselFooter: {
+        ({ layout, initialStepText, finalStepText, className, children, ref, ...rest }: TeachingPopoverCarouselFooterProps): JSX.Element | null;
+        displayName: string;
+    };
+};
+
+/**
+ * A footer action of a TeachingPopover (`primaryAction`, `secondaryAction`): the label content, or
+ * a Button-like slot (a `Button`, `<button>` or `<a>` element, or a slot object such as
+ * `{ as: 'a', href, children }`; `as` changes the element, which stays a Wave Button).
+ *
+ * The consumer's `onClick` runs first; then the step's normal action runs (Next or Done for the
+ * primary action, Back for the secondary one) unless the handler called `event.preventDefault()`.
+ */
+export declare type TeachingPopoverAction = React_2.ReactNode | (SlotObject<'button'> & Pick<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'>);
+
+/**
+ * The step body (Fluent's `TeachingPopoverBody`): the current step's `body`, or your children,
+ * after an optional `media` element.
+ *
+ * Also exported as `TeachingPopoverBody` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Body` (that needs a client file).
+ */
+export declare const TeachingPopoverBody: {
+    ({ media, className, children, ref, ...rest }: TeachingPopoverBodyProps): React_2.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * TeachingPopover.Body: `root` on the body element (also the one the `steps` form renders), which
+ * also carries TeachingPopover's `body`; `media` on the element of its `media` slot.
+ */
+export declare const teachingPopoverBodyClassNames: {
+    readonly root: "wave-teaching-popover-body";
+    readonly media: "wave-teaching-popover-body__media";
+};
+
+/** Properties for the TeachingPopoverBody sub-component. */
+export declare interface TeachingPopoverBodyProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The body content: the current step's `body` without children (or with children that render
+     * nothing).
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Media above the content, such as a picture or a short video of the feature, inside a `<span>`
+     * (`media={<img src="…" alt="…" />}`; a slot object sets the span's own attributes). It is
+     * content, not decoration: give a picture its `alt` (`alt=""` when the text says it all). A
+     * value that renders nothing renders no element.
+     */
+    media?: Slot<'span'>;
+    /** Ref to the body element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * The tour as a carousel (Fluent's `TeachingPopoverCarousel`): it holds the current step's page
+ * and the carousel footer. The steps stay on TeachingPopover (its `steps` are the pages, so there
+ * is no card part), and so do the step state and the callbacks: the carousel parts read them
+ * wherever they are in the popover. Without children it shows the step title and body and a
+ * `TeachingPopover.CarouselFooter`.
+ *
+ * Also exported as `TeachingPopoverCarousel` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Carousel` (that needs a client file).
+ */
+export declare const TeachingPopoverCarousel: {
+    ({ className, children, ref, ...rest }: TeachingPopoverCarouselProps): React_2.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * TeachingPopover.Carousel: `root` on the element that holds the step content and the carousel
+ * footer.
+ */
+export declare const teachingPopoverCarouselClassNames: {
+    readonly root: "wave-teaching-popover-carousel";
+};
+
+/**
+ * The carousel's bottom row (Fluent's `TeachingPopoverCarouselFooter`): an indicator (the
+ * decorative step dots, or your children) and the buttons of the current step, as in
+ * `TeachingPopover.Footer`: Back and Next (Done on the last step), or the `secondaryAction` and
+ * `primaryAction` that replace them. `initialStepText` turns the first step's Back into a button
+ * that dismisses the popover (“Not now”), `finalStepText` relabels Done, and `layout` places the
+ * indicator; the footer wraps instead of letting the indicator and the buttons overlap. The steps,
+ * the actions and the callbacks stay on TeachingPopover.
+ *
+ * Also exported as `TeachingPopoverCarouselFooter` for React Server Components, which cannot use
+ * the dotted `TeachingPopover.CarouselFooter` (that needs a client file).
+ */
+export declare const TeachingPopoverCarouselFooter: {
+    ({ layout, initialStepText, finalStepText, className, children, ref, ...rest }: TeachingPopoverCarouselFooterProps): React_2.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * TeachingPopover.CarouselFooter: `root` on the footer element, which also carries
+ * TeachingPopover's `footer`. Its buttons carry TeachingPopover's button classes, and its
+ * decorative step dots TeachingPopover's `dot`.
+ */
+export declare const teachingPopoverCarouselFooterClassNames: {
+    readonly root: "wave-teaching-popover-carousel-footer";
+};
+
+/** Properties for the TeachingPopoverCarouselFooter sub-component. */
+export declare interface TeachingPopoverCarouselFooterProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Where the indicator sits: `'offset'` puts it at the start and the buttons together at the
+     * end, as `TeachingPopover.Footer` does, and the buttons wrap to a row of their own (at the end)
+     * when both do not fit in one row; `'centered'` puts it between the secondary button at the
+     * start and the primary button at the end, in the middle of the footer whatever the buttons'
+     * widths (also without a secondary button), and when that row does not fit, the indicator takes
+     * a row of its own above the buttons and the footer gets `data-stacked`. While stacked, the
+     * visual order differs from the Tab order, which stays the secondary button, the indicator's
+     * step buttons, then the primary button. The indicator never shrinks below its content.
+     * Rendered as `data-carousel-layout`. (Fluent's default is `'centered'`; WaveUI keeps its own
+     * footer's arrangement.) TeachingPopover's `footerLayout` applies to `TeachingPopover.Footer`
+     * only.
+     * @default 'offset'
+     */
+    layout?: 'offset' | 'centered';
+    /**
+     * The text of the first step's secondary button (“Not now”). Given, that button is enabled and
+     * dismisses the popover as Close does (`onOpenChange(false)`, then `onDismiss`; not
+     * `onFinish`), also on a single step. Without it the first step keeps Back, focusable and
+     * `aria-disabled`, and a single step has none. A `secondaryAction` replaces the button.
+     */
+    initialStepText?: string;
+    /**
+     * The text of the primary button on the last step (“Got it”), which finishes the tour as Done
+     * does. A `primaryAction` replaces the button.
+     * @default TeachingPopover's `labels.done` ('Done')
+     */
+    finalStepText?: string;
+    /**
+     * The indicator: without children (or with children that render nothing) the decorative step
+     * dots; give it `TeachingPopover.CarouselNav` for interactive step buttons, or
+     * `TeachingPopover.CarouselPageCount` for a visible count. The buttons always render.
+     */
+    children?: React_2.ReactNode;
+    /** Ref to the footer element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * Interactive step buttons (Fluent's `TeachingPopoverCarouselNav`): a group named by
+ * `labels.nav` (“Choose step”) with one button per step, each named by `labels.navButton`
+ * (“Step 2 of 3”) and a Tab stop. The current step's button has `aria-current="step"`; activating
+ * another one shows its step (`onStepChange`, then the step announcement), and focus stays on it.
+ * Opt-in: the footers show decorative dots unless you place it, for example as the children of
+ * `TeachingPopover.CarouselFooter`.
+ *
+ * Also exported as `TeachingPopoverCarouselNav` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.CarouselNav` (that needs a client file).
+ */
+export declare const TeachingPopoverCarouselNav: {
+    ({ className, ref, ...rest }: TeachingPopoverCarouselNavProps): React_2.JSX.Element | null;
     displayName: string;
 };
 
 /**
- * TeachingPopover: `root` on the `role="dialog"` surface; `beak` on the arrow; `closeButton`,
- * `backButton` and `nextButton` on its buttons (which also carry Button's root); `title` on the
- * `<h3>`; `body` on the step body; `footer` on the bottom row; `dot` on each step dot.
+ * TeachingPopover.CarouselNav: `root` on the `role="group"` element of the step buttons; `button`
+ * on each step button; `indicator` on the dot inside it.
+ */
+export declare const teachingPopoverCarouselNavClassNames: {
+    readonly root: "wave-teaching-popover-carousel-nav";
+    readonly button: "wave-teaching-popover-carousel-nav__button";
+    readonly indicator: "wave-teaching-popover-carousel-nav__indicator";
+};
+
+/** Properties for the TeachingPopoverCarouselNav sub-component. */
+export declare interface TeachingPopoverCarouselNavProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Ref to the element of the step buttons. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * The visible step count (Fluent's `TeachingPopoverCarouselPageCount`), such as “2 of 3”: the
+ * current step and the step count, worded by a render function child. Place it in a footer,
+ * for example in `TeachingPopover.CarouselFooter` next to or instead of `TeachingPopover.CarouselNav`.
+ *
+ * Also exported as `TeachingPopoverCarouselPageCount` for React Server Components, which cannot
+ * use the dotted `TeachingPopover.CarouselPageCount` (that needs a client file).
+ */
+export declare const TeachingPopoverCarouselPageCount: {
+    ({ className, children, ref, ...rest }: TeachingPopoverCarouselPageCountProps): React_2.JSX.Element | null;
+    displayName: string;
+};
+
+/** TeachingPopover.CarouselPageCount: `root` on the element of the visible step count. */
+export declare const teachingPopoverCarouselPageCountClassNames: {
+    readonly root: "wave-teaching-popover-carousel-page-count";
+};
+
+/** Properties for the TeachingPopoverCarouselPageCount sub-component. */
+export declare interface TeachingPopoverCarouselPageCountProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The text from the one-based number of the current step and the step count (Fluent's render
+     * function); it also localizes the text. A result that renders nothing keeps the default. A
+     * Server Component cannot pass a function: write the part with one in a client file.
+     * @default (current, total) => `${current} of ${total}`
+     */
+    children?: (current: number, total: number) => React_2.ReactNode;
+    /** Ref to the count element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/** Properties for the TeachingPopoverCarousel sub-component. */
+export declare interface TeachingPopoverCarouselProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The carousel's content. Without children (or with children that render nothing) the current
+     * step as a carousel page: `TeachingPopover.Title`, `TeachingPopover.Body` and
+     * `TeachingPopover.CarouselFooter` without children of their own.
+     */
+    children?: React_2.ReactNode;
+    /** Ref to the carousel element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * TeachingPopover: `root` on the `role="dialog"` surface (also when TeachingPopover.Surface
+ * renders it); `beak` on the arrow; `closeButton`, `backButton` and `nextButton` on its buttons
+ * (which also carry Button's root; `backButton` also on the first step's button that a
+ * TeachingPopover.CarouselFooter's `initialStepText` names); `primaryButton` and `secondaryButton`
+ * on the buttons that a `primaryAction` and a `secondaryAction` render in place of Next/Done and
+ * Back; `title` on the step title (an `<h3>`, or the element of TeachingPopover.Title's `as`);
+ * `body` on the step body; `footer` on the bottom row (TeachingPopover.Footer's, or
+ * TeachingPopover.CarouselFooter's); `dot` on each decorative step dot.
  */
 export declare const teachingPopoverClassNames: {
     readonly root: "wave-teaching-popover";
@@ -13214,8 +14967,94 @@ export declare const teachingPopoverClassNames: {
     readonly dot: "wave-teaching-popover__dot";
     readonly backButton: "wave-teaching-popover__back-button";
     readonly nextButton: "wave-teaching-popover__next-button";
+    readonly primaryButton: "wave-teaching-popover__primary-button";
+    readonly secondaryButton: "wave-teaching-popover__secondary-button";
+};
+
+/**
+ * The bottom row (Fluent's `TeachingPopoverFooter`): the step dots and the buttons of the current
+ * step, laid out by TeachingPopover's `footerLayout` (rendered as `data-layout` here too), or your
+ * children. The steps, the actions and their labels stay on TeachingPopover.
+ *
+ * Also exported as `TeachingPopoverFooter` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Footer` (that needs a client file).
+ */
+export declare const TeachingPopoverFooter: {
+    ({ className, children, ref, ...rest }: TeachingPopoverFooterProps): React_2.JSX.Element | null;
+    displayName: string;
 };
 
+/**
+ * TeachingPopover.Footer: `root` on the footer element (also the one the `steps` form renders),
+ * which also carries TeachingPopover's `footer`.
+ */
+export declare const teachingPopoverFooterClassNames: {
+    readonly root: "wave-teaching-popover-footer";
+};
+
+/** Properties for the TeachingPopoverFooter sub-component. */
+export declare interface TeachingPopoverFooterProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The footer content. Without children (or with children that render nothing) the step dots and
+     * the buttons of the current step: Back and Next (Done on the last step), or the
+     * `primaryAction` and `secondaryAction` that replace them.
+     */
+    children?: React_2.ReactNode;
+    /** Ref to the footer element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * The top of the popover (Fluent's `TeachingPopoverHeader`): the Close button, and an optional
+ * caption with a decorative `icon` before the title. Without children it holds only the Close
+ * button, as the `steps` form does. Place it first in a `TeachingPopover.Surface`.
+ *
+ * Also exported as `TeachingPopoverHeader` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Header` (that needs a client file).
+ */
+export declare const TeachingPopoverHeader: {
+    ({ icon, dismissButton, className, children, ref, ...rest }: TeachingPopoverHeaderProps): React_2.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * TeachingPopover.Header: `root` on the header element (also the one the `steps` form renders
+ * around its Close button); `icon` on the element of its `icon` slot. Its Close button carries
+ * TeachingPopover's `closeButton`.
+ */
+export declare const teachingPopoverHeaderClassNames: {
+    readonly root: "wave-teaching-popover-header";
+    readonly icon: "wave-teaching-popover-header__icon";
+};
+
+/** Properties for the TeachingPopoverHeader sub-component. */
+export declare interface TeachingPopoverHeaderProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A short caption above the title, such as “Tip” or “New”. Without it (and without `icon`) the
+     * header holds only the Close button, as the `steps` form's does; with either, they sit in a row
+     * at the top of the popover, next to the Close button.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * A decorative icon before the caption (`aria-hidden`), such as a light bulb. None by default
+     * (Fluent's header shows a light bulb). A value that renders nothing renders no element.
+     */
+    icon?: Slot<'span'>;
+    /**
+     * The Close button at the popover's top end, which dismisses it (`onOpenChange(false)`, then
+     * `onDismiss`) and is named by TeachingPopover's `closeLabel`. Content (an icon) replaces the
+     * dismiss glyph inside the built-in button. A `<button>` or a `Button`, or a slot object whose
+     * `as` is one, is merged into it, never nested: its props and handlers (called first) reach the
+     * built-in button, its content goes inside, and a development warning says so; a text label of
+     * two or more letters or digits in it names the button instead of `closeLabel` (WCAG 2.5.3,
+     * Label in Name), as does its own `aria-label`. `null` renders no Close button; `undefined` and
+     * booleans keep the default.
+     */
+    dismissButton?: Slot<'span'>;
+    /** Ref to the header element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */
 export declare interface TeachingPopoverLabels {
     /** Text of the Back button.
@@ -13237,6 +15076,16 @@ export declare interface TeachingPopoverLabels {
      * @default (index, count) => `step ${index + 1} of ${count}`
      */
     step?: (index: number, count: number) => string;
+    /** Name of the group of step buttons that `TeachingPopover.CarouselNav` renders.
+     * @default 'Choose step'
+     */
+    nav?: string;
+    /**
+     * Name of the `TeachingPopover.CarouselNav` button that shows the step at `index` (zero-based,
+     * like `activeStep`) out of `count` steps.
+     * @default (index, count) => `Step ${index + 1} of ${count}`
+     */
+    navButton?: (index: number, count: number) => string;
 }
 
 /** Properties for the TeachingPopover component. */
@@ -13256,17 +15105,54 @@ export declare interface TeachingPopoverProps extends React_2.HTMLAttributes<HTM
     currentStep?: number;
     /** @deprecated Use `defaultActiveStep`. */
     defaultCurrentStep?: number;
-    /** Called with the requested step index when Next or Back is activated. */
+    /**
+     * Called with the requested step index when Next, Back or a step button of
+     * `TeachingPopover.CarouselNav` is activated (the button of the current step requests nothing).
+     */
     onStepChange?: (step: number) => void;
-    /** Called when the popover is dismissed with Close, Done or Escape. */
+    /**
+     * Called when the popover is dismissed with Close, Done, Escape or a `TeachingPopover.Trigger`
+     * that closes it.
+     *
+     * Done also calls it in 0.x, after `onFinish`, so that code written before `onFinish` keeps
+     * working; from 1.0 only Close, Escape and the Trigger will.
+     */
     onDismiss?: () => void;
+    /**
+     * Called when the tour is finished: Done, the button that replaces Next on the last step, or a
+     * `primaryAction` on the last step whose click was not prevented. The popover closes first.
+     * Close, Escape and the Trigger call only `onDismiss`. Fires on every activation, like
+     * `onStepChange`.
+     */
+    onFinish?: () => void;
+    /**
+     * Replaces the Next (or Done) button on every step that sets no `primaryAction` of its own.
+     */
+    primaryAction?: TeachingPopoverAction;
+    /**
+     * Replaces the Back button on every step that sets no `secondaryAction` of its own.
+     */
+    secondaryAction?: TeachingPopoverAction;
+    /**
+     * How the footer lays out the step dots and the buttons: side by side, or the dots above
+     * buttons that fill the width. Rendered as `data-layout` on the popover and on its footer.
+     * `TeachingPopover.CarouselFooter` has its own `layout` instead.
+     * @default 'horizontal'
+     */
+    footerLayout?: 'horizontal' | 'vertical';
     /** Controlled visibility of the teaching popover. */
     open?: boolean;
-    /** Initial visibility for uncontrolled usage.
-     * @default true
+    /**
+     * Initial visibility for uncontrolled usage: `true` (a tour that shows on page load), or
+     * `false` when a `TeachingPopover.Trigger` is a direct child (a Fragment is fine), which then
+     * opens it.
+     * @default true (false with a direct TeachingPopover.Trigger)
      */
     defaultOpen?: boolean;
-    /** Called with `false` when Close, Done or Escape dismisses the popover. */
+    /**
+     * Called with `false` when Close, Done or Escape dismisses the popover, and with the new state
+     * when a `TeachingPopover.Trigger` opens or closes it.
+     */
     onOpenChange?: (open: boolean) => void;
     /**
      * Accessible name of the built-in Close button (an icon-only button). Localize it with the
@@ -13275,15 +15161,17 @@ export declare interface TeachingPopoverProps extends React_2.HTMLAttributes<HTM
      */
     closeLabel?: string;
     /**
-     * Text of the Back, Next and Done buttons and the wording of the step position (“step 2 of 3”),
-     * for localization. Unset members keep their English defaults.
+     * Text of the Back, Next and Done buttons, the wording of the step position (“step 2 of 3”) and
+     * the names of `TeachingPopover.CarouselNav`'s step buttons, for localization. Unset members keep
+     * their English defaults.
      */
     labels?: TeachingPopoverLabels;
     /**
      * The element the popover points at (a ref, the element, or a `VirtualElement`: a rectangle such as a
      * point; an inline object is fine). When given, the popover is
      * rendered in a portal, positioned next to it with a beak, and flips or shifts to stay in view;
-     * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour).
+     * without it (`undefined`) the popover renders inline where it is placed (0.4 behaviour), or,
+     * with a `TeachingPopover.Trigger`, points at the trigger.
      * While the target is `null` or has not been positioned against yet (an element held in state
      * that is not set yet, a ref that is not attached), the popover stays hidden: it is not
      * shown, takes no focus, announces no step change and does not handle Escape until it can
@@ -13318,7 +15206,18 @@ export declare interface TeachingPopoverProps extends React_2.HTMLAttributes<HTM
      * @default `{ offset: 12 }`
      */
     positioning?: PopupPositioning;
-    /** Ref to the popover surface (`role="dialog"`). */
+    /**
+     * `TeachingPopover.Trigger` and `TeachingPopover.Surface` (Fluent's composition), rendered where
+     * they are written. Without a `TeachingPopover.Surface` among them, the popover renders its
+     * surface itself, after the children, with the element props given here (`className`, `style`,
+     * `ref`, …); with one (best written directly inside, a Fragment is fine: see
+     * `TeachingPopover.Surface`), the Surface takes them instead.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Ref to the popover surface (`role="dialog"`). Ignored next to a `TeachingPopover.Surface`
+     * (pass it to the Surface).
+     */
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
@@ -13328,6 +15227,164 @@ export declare interface TeachingPopoverStep {
     title: string;
     /** Body content for the step. */
     body: React_2.ReactNode;
+    /**
+     * Replaces the Next (or, on the last step, Done) button on this step; wins over the
+     * popover's `primaryAction`.
+     */
+    primaryAction?: TeachingPopoverAction;
+    /**
+     * Replaces the Back button on this step (also on a single-step popover, which has no Back);
+     * wins over the popover's `secondaryAction`.
+     */
+    secondaryAction?: TeachingPopoverAction;
+}
+
+/**
+ * The popover surface (Fluent's `TeachingPopoverSurface`): the non-modal `role="dialog"` element
+ * that the `steps` form renders, with the same behaviour (in place, or portaled next to the
+ * target with a beak; focus, dismissal, keyboard order and step announcements), so your
+ * `className`, `style`, `ref` and other props reach the element the `steps` form gives
+ * TeachingPopover's own. Without children it shows the current step as the `steps` form does;
+ * children replace that content: build it from `TeachingPopover.Header`, `Title`, `Body` and
+ * `Footer`, or from your own (then name the surface with `aria-label` or `aria-labelledby`).
+ *
+ * Render one inside TeachingPopover; TeachingPopover then renders no surface of its own, and its
+ * own `className`, `style`, `ref` and other element props are ignored (a development warning says
+ * so). Write it directly inside TeachingPopover (a Fragment is fine) where you can: there it is
+ * found while rendering. One inside an element or a component of yours is found once it has
+ * mounted, so until then TeachingPopover's own surface renders next to it: in the server HTML, and
+ * in the browser's first commit (before anything is painted or focused). A second Surface renders
+ * a second popover (a development warning says so).
+ *
+ * Also exported as `TeachingPopoverSurface` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Surface` (that needs a client file).
+ */
+export declare const TeachingPopoverSurface: {
+    ({ id, ref, ...rest }: TeachingPopoverSurfaceProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * TeachingPopover.Surface: `root` on the `role="dialog"` surface it renders, which also carries
+ * TeachingPopover's `root`; the content of the current step it shows without children carries
+ * TeachingPopover's part classes.
+ */
+export declare const teachingPopoverSurfaceClassNames: {
+    readonly root: "wave-teaching-popover-surface";
+};
+
+/** Properties for the TeachingPopoverSurface sub-component. */
+export declare interface TeachingPopoverSurfaceProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The popover's content. Without children (or with children that render nothing) the surface
+     * shows the current step as the `steps` form does: `TeachingPopover.Header`, `Title`, `Body` and
+     * `Footer` without children of their own (the Close button, the step title, its body, and the
+     * footer with the step dots and the buttons). Children replace all of that: build it from those
+     * parts, each showing its share of the current step unless you give it children, or from your
+     * own content. A `TeachingPopover.Title` among the children (at any depth) names the surface;
+     * without one, name it with `aria-label` or `aria-labelledby`.
+     */
+    children?: React_2.ReactNode;
+    /** Ref to the popover surface (`role="dialog"`). */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * The step title (Fluent's `TeachingPopoverTitle`): an `<h3>` (another level, or any element,
+ * with `as`) holding the current step's `title`, or your children, and a visually hidden step
+ * position. It names the surface: the surface's `aria-labelledby` points at its `id` (yours, or a
+ * generated one), wherever it is among the Surface's children (inside `TeachingPopover.Body`, as
+ * in Fluent, works too).
+ *
+ * Also exported as `TeachingPopoverTitle` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Title` (that needs a client file).
+ */
+export declare const TeachingPopoverTitle: PolymorphicComponent<'h3', TeachingPopoverTitleOwnProps>;
+
+/**
+ * TeachingPopover.Title: `root` on the heading (also the one the `steps` form renders), which
+ * also carries TeachingPopover's `title`.
+ */
+export declare const teachingPopoverTitleClassNames: {
+    readonly root: "wave-teaching-popover-title";
+};
+
+/** The TeachingPopover.Title's own props (component-specific props only). */
+export declare interface TeachingPopoverTitleOwnProps {
+    /**
+     * The title text: the current step's `title` without children (or with children that render
+     * nothing). A visually hidden step position (“, step 2 of 3”, worded by `labels.step`) follows
+     * either, so the heading, which names the popover, says where the tour is.
+     */
+    children?: React_2.ReactNode;
+}
+
+/** Props of {@link TeachingPopoverTitle} rendered as `C` (default `'h3'`), including `ref`. */
+export declare type TeachingPopoverTitleProps<C extends React_2.ElementType = 'h3'> = PolymorphicProps<C, TeachingPopoverTitleOwnProps>;
+
+/**
+ * The element that opens and closes the popover (Fluent's `TeachingPopoverTrigger`, as
+ * `Popover.Trigger`). Its props are merged onto the single child (no wrapper element):
+ * `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` (while open), a composed `onClick`
+ * that opens the popover, or dismisses it while it is open (as Close does: `onOpenChange(false)`,
+ * then `onDismiss`), and a ref. The child's own handlers and classes are kept; the live state ARIA
+ * always wins. A render function receives the props instead; `asChild={false}` renders a wrapper
+ * span, and a custom child that neither forwards `ref` nor spreads its props falls back to that
+ * span automatically (with a development warning). On the span, the state ARIA goes to the first
+ * element in the tab order inside it.
+ *
+ * When TeachingPopover has no `target` (and no `positioning.target`), the popover points at the
+ * trigger: it is portaled next to it with a beak and takes its place in the keyboard order right
+ * after it. Focus returns to the trigger when the popover closes, with a `target` too (as with
+ * `Popover.Trigger`). Place it directly inside TeachingPopover (a Fragment is fine): the popover
+ * then starts closed unless `defaultOpen` says otherwise. A trigger nested deeper still works, but
+ * leaves `defaultOpen` at `true` and becomes the target once it has mounted.
+ *
+ * @example
+ * <TeachingPopover steps={steps}>
+ *   <TeachingPopover.Trigger>
+ *     <Button>Take the tour</Button>
+ *   </TeachingPopover.Trigger>
+ * </TeachingPopover>
+ *
+ * Also exported as `TeachingPopoverTrigger` for React Server Components, which cannot use the
+ * dotted `TeachingPopover.Trigger` (that needs a client file).
+ */
+export declare const TeachingPopoverTrigger: {
+    ({ children, asChild, onClick, ref, ...rest }: TeachingPopoverTriggerProps): React_2.ReactNode;
+    displayName: string;
+};
+
+/**
+ * Props a `TeachingPopover.Trigger` puts on its element; a render-prop child receives them (spread
+ * them onto the element that opens the popover).
+ */
+export declare type TeachingPopoverTriggerChildProps = Omit<React_2.HTMLAttributes<HTMLElement>, 'children'> & {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    /** The surface's id, only while the popover is open. */
+    'aria-controls': string | undefined;
+    onClick: React_2.MouseEventHandler<HTMLElement>;
+    ref: React_2.RefCallback<HTMLElement>;
+};
+
+/** Properties for the TeachingPopoverTrigger sub-component. */
+export declare interface TeachingPopoverTriggerProps extends Omit<React_2.HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * The element that opens and closes the popover (its props are merged onto it), or a render
+     * function that receives the trigger props.
+     */
+    children: React_2.ReactNode | ((props: TeachingPopoverTriggerChildProps) => React_2.ReactNode);
+    /**
+     * `false` renders a wrapper `<span>` carrying the trigger props around the children instead of
+     * merging them onto the child. `aria-haspopup`, `aria-expanded` and `aria-controls`, which a
+     * generic element cannot carry, go to the first element in the tab order inside the span. A
+     * render-prop child ignores `asChild` and receives every prop.
+     * @default true
+     */
+    asChild?: boolean;
+    /** Ref to the trigger element (the child, or the wrapper span). */
+    ref?: React_2.Ref<HTMLElement>;
 }
 
 /**
@@ -14900,6 +16957,23 @@ export declare interface TreeProps extends React_2.HTMLAttributes<HTMLDivElement
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/**
+ * Shortens the text of a breadcrumb item that is longer than `maxLength` characters: it trims the
+ * text, keeps the first `maxLength` characters and adds `...`. Shorter text, and text of exactly
+ * `maxLength` characters, is returned unchanged. Show the full text in a tooltip when
+ * {@link isTruncatableBreadcrumbContent} is true.
+ * @default maxLength 30
+ */
+export declare function truncateBreadcrumbLongName(content: string, maxLength?: number): string;
+
+/**
+ * Shortens the text of a breadcrumb item's tooltip that is longer than `maxLength` characters, the
+ * same way as {@link truncateBreadcrumbLongName}. Fluent UI spells this function
+ * `truncateBreadcrumLongTooltip`; WaveUI spells it correctly and keeps no alias.
+ * @default maxLength 80
+ */
+export declare function truncateBreadcrumbLongTooltip(content: string, maxLength?: number): string;
+
 /** Typography scale variant mapping to Fluent UI type ramp tokens. */
 export declare type TypographyVariant = 'caption-2' | 'caption-1' | 'body-1' | 'body-2' | 'subtitle-2' | 'subtitle-1' | 'title-3' | 'title-2' | 'title-1' | 'large-title' | 'display';
 
@@ -15364,6 +17438,12 @@ export declare interface UseGridNavigationResult {
     gridProps: GridNavigationHandlers;
 }
 
+/**
+ * Whether the enclosing {@link Overflow} currently hides at least one item (the button that the
+ * `hasHiddenItems` prop reserves does not count). Must be called inside `Overflow`.
+ */
+export declare function useHasHiddenItems(): boolean;
+
 /**
  * Generates a stable, SSR-safe unique id, optionally with a prefix. Wraps React's `useId` so every
  * component builds DOM ids the same way (C-IDS).
@@ -15408,6 +17488,12 @@ export declare interface UseInitialFocusOptions {
  */
 export declare function useIsClient(): boolean;
 
+/**
+ * How much of the item group `groupId` is shown: `'visible'` (every member, and also a group
+ * without items), `'hidden'` (none) or `'overflow'` (some). Must be called inside `Overflow`.
+ */
+export declare function useIsOverflowGroupVisible(groupId: string): OverflowGroupVisibility;
+
 /**
  * Whether `target`'s content is wider than the element (`scrollWidth > clientWidth`).
  *