@mortenbrudvik/waveui 0.14.0 → 0.15.0

package/dist/index.d.ts

@@ -11,7 +11,9 @@ import { ReactPortal } from 'react';
 /**
  * A vertically stacked set of disclosure sections (WAI-ARIA Accordion pattern). Each
  * `Accordion.Item` renders an `Accordion.Trigger` button inside a heading (`headingLevel`) and an
- * `Accordion.Panel` region that is shown while the item is open.
+ * `Accordion.Panel` region that is shown while the item is open. A panel opens and closes its
+ * space with a short collapse and fade (`Accordion.Panel`'s `motion`; none under reduced motion or
+ * a `WaveProvider` with `motion="none"`), and focus inside a closing panel moves to its trigger.
  *
  * Single mode (the default) keeps at most one item open (`openItem`, `defaultOpenItem`,
  * `onOpenItemChange`); `type="multiple"` lets any number of items open (`openItems`,
@@ -34,7 +36,7 @@ export declare const Accordion: {
         displayName: string;
     };
     Panel: {
-        ({ id: idProp, className, children, ref, ...rest }: AccordionPanelProps): React_2.JSX.Element | null;
+        ({ id: idProp, className, children, motion, ref, ...rest }: AccordionPanelProps): React_2.JSX.Element | null;
         displayName: string;
     };
 };
@@ -113,22 +115,46 @@ export declare interface AccordionMultipleProps extends AccordionBaseProps {
 }
 
 /**
- * The content region of an Accordion.Item, rendered only while the item is open and labelled by
- * its trigger. Its props (className merged, `ref`, `data-*`, handlers) land on the region, and a
- * non-empty `id` replaces the generated one (the trigger's `aria-controls` follows it).
+ * The content region of an Accordion.Item, labelled by its trigger and rendered while the item is
+ * open and while it collapses after a close. Its props (className merged, `ref`, `data-*`,
+ * handlers) land on the region, and a non-empty `id` replaces the generated one (the trigger's
+ * `aria-controls` follows it).
+ *
+ * The region renders as the only child of a collapse element (its stable class
+ * `wave-accordion-panel__collapse`), which opens and closes the region's space (`motion`) and has
+ * no box of its own while the item is open, so the region lays out in the Item as before. An item
+ * opened by default appears without motion. After a close the region stays in the document until
+ * the collapse ends, `inert` and with `data-state="closed"`, while its trigger already reports the
+ * item collapsed; opening the item again during the collapse keeps the same region and the state
+ * of its content. Focus inside the region when the item closes moves to the item's trigger.
  */
 export declare const AccordionPanel: {
-    ({ id: idProp, className, children, ref, ...rest }: AccordionPanelProps): React_2.JSX.Element | null;
+    ({ id: idProp, className, children, motion, ref, ...rest }: AccordionPanelProps): React_2.JSX.Element | null;
     displayName: string;
 };
 
-/** Accordion.Panel: `root` on the `role="region"` element. */
+/**
+ * Accordion.Panel: `root` on the `role="region"` element; `collapse` on the element around it
+ * (the element that opens and closes the region's space, 0.15).
+ */
 export declare const accordionPanelClassNames: {
     readonly root: "wave-accordion-panel";
+    readonly collapse: "wave-accordion-panel__collapse";
 };
 
 /** Properties for the AccordionPanel sub-component (merged onto the `role="region"` element). */
 export declare interface AccordionPanelProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Replaces the panel's collapse (Fluent's `AccordionPanel collapseMotion`), on the element
+     * around the region: by default the space the region takes opens from nothing and closes back
+     * to it, with a fade, over the normal duration (200 ms) with the max easy-ease curve, both ways.
+     * `null` turns it off (the region appears and disappears at once); a class string or
+     * `{ className }` replaces it, written as `MotionSlot` describes. A `WaveProvider` with
+     * `motion="none"` turns the default off, and a value here still applies under it. A panel
+     * rendered inside another panel has no motion of its own.
+     * @default the collapse described above
+     */
+    motion?: MotionSlot | null;
     /** Ref to the panel `<div role="region">`. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -1588,12 +1614,16 @@ export declare type CardProps<C extends React_2.ElementType = 'div'> = Polymorph
  * - `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.
+ * - The slides glide to the new page over 300 ms; `motion="fade"` cross-fades them instead (one
+ *   slide per page), `motion={null}` turns the motion off and `motionDuration` times it. Under
+ *   reduced motion, or below a `WaveProvider` with `motion="none"` (unless `motion` is set), the
+ *   page changes at once.
  *
  * 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, groupSize, align, draggable, controlsLayout, appearance, 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, motion, motionDuration, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: CarouselProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Item: {
@@ -1741,6 +1771,12 @@ export declare interface CarouselLabels {
     slideRoleDescription?: string;
 }
 
+/**
+ * How a Carousel moves between pages: `slide` moves the slides in from the side of the page order,
+ * `fade` cross-fades them in place (one slide per page only).
+ */
+export declare type CarouselMotion = 'slide' | 'fade';
+
 /** Properties for the Carousel component. */
 export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
@@ -1774,10 +1810,12 @@ export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivEle
     /**
      * 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.
+     * it snaps back; the direction follows the carousel's. Under `motion="fade"` the slides do not
+     * follow the pointer (they share one place): the same drag still changes the page on release,
+     * and the slides cross-fade. 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;
@@ -1825,6 +1863,26 @@ export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivEle
      * @default false
      */
     loop?: boolean;
+    /**
+     * How the carousel moves between pages: `slide` glides the slides in from the side of the page
+     * order (mirrored in right-to-left layouts), `fade` cross-fades them in place, and `null` turns
+     * the motion off (the page changes at once). Fluent's `motion`; its object form with a
+     * `duration` is not offered: use `motionDuration`. `fade` needs one slide per page: with
+     * `groupSize` above 1 or `'auto'` the slides slide, and a development warning says so. Under
+     * `fade` a drag still changes the page on release, but the slides do not follow the pointer.
+     * Below a `WaveProvider` with `motion="none"` the carousel does not move unless this prop is
+     * set. Either motion is off while the user prefers reduced motion. The root renders the motion
+     * it resolves from this prop, `groupSize` and the provider as `data-motion` (`slide`, `fade` or
+     * `none`); reduced motion leaves it unchanged.
+     * @default 'slide'
+     */
+    motion?: CarouselMotion | null;
+    /**
+     * How long the slide or the fade takes, in milliseconds. Fluent's `duration` is a different
+     * unit (Embla's unitless speed, 20 to 60), so a value ported from Fluent is far too short.
+     * @default 300
+     */
+    motionDuration?: number;
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
@@ -4173,8 +4231,11 @@ export declare type DeprecatedPresenceStatus = 'dnd' | 'oof';
  *   closed, so a form keeps what was typed and the components inside keep their state; each open
  *   focuses the first focusable element again (an `autoFocus` inside never applies), and a kept
  *   dialog opened while another overlay is open stacks above it.
- * - **Presence**: the surface mounts through the presence core and renders `data-presence`; no
- *   motion ships, and `data-[presence=…]:` classes on `Dialog.Content` animate it.
+ * - **Motion**: the surface scales and fades in and out and the backdrop fades with it (none under
+ *   reduced motion); `Dialog.Content`'s `motion` and `backdropMotion` turn each off (`null`) or
+ *   replace it, and `WaveProvider motion="none"` turns both off. The surface mounts through the
+ *   presence core and renders `data-presence`; while it exits it stays on screen, `inert`, and
+ *   focus, the trap and the scroll lock are already released.
  * - **Naming**: give `Dialog.Content` a `title`, a `Dialog.Title`, or `aria-label`.
  *
  * The sub-components are also exported under flat names (`DialogTrigger`, `DialogContent`,
@@ -4202,7 +4263,7 @@ export declare const Dialog: {
         displayName: string;
     };
     Content: {
-        ({ title, size, backdrop, closeButton, titleAction, closeLabel, children, className, style, id, onKeyDown, ref, ...rest }: DialogContentProps): React_2.JSX.Element | null;
+        ({ title, size, backdrop, motion, backdropMotion, closeButton, titleAction, closeLabel, children, className, style, id, onKeyDown, ref, ...rest }: DialogContentProps): React_2.JSX.Element | null;
         displayName: string;
     };
     Footer: {
@@ -4267,17 +4328,22 @@ export declare interface DialogCloseRenderProps extends React_2.HTMLAttributes<H
  * centres the surface and lets presses through to the page. The titles' end padding follows the
  * width of the title-actions area (`--wave-dialog-title-end-padding`, 2rem until it is measured).
  *
- * It mounts through the presence core: the backdrop, the positioner and the surface render
- * `data-presence` (`entered` while open, `exited` while kept closed; `entering` and `exiting`
- * only while a motion of yours runs on the surface), and the backdrop and the positioner are
- * `inert` while exiting and `hidden` and `inert` while kept closed. No motion ships: animate the
- * surface with `data-[presence=…]:` classes in `className` (an enter's start as
- * `data-[presence=entering]:starting:`, each with a `motion-reduce:` counterpart); a closed
- * surface waits for that motion before it unmounts or hides, while focus, the trap and the
- * isolation follow the open state at once.
+ * It moves in and out: the surface scales up from 85% of its size and fades in over 250 ms, and
+ * scales down and fades out over 200 ms, while the backdrop fades in over 250 ms and out with the
+ * surface; a dialog open by default animates in when it mounts in the browser. Under reduced
+ * motion both appear and disappear at once. `motion` (the surface) and `backdropMotion` (the
+ * backdrop) turn each motion off (`null`) or replace its classes, and a `WaveProvider` with
+ * `motion="none"` turns both defaults off. It mounts through the presence core: the backdrop, the
+ * positioner and the surface render `data-presence` (`entering` and `exiting` while the surface's
+ * motion runs, `entered` while open, `exited` while kept closed), and the backdrop and the
+ * positioner are `inert` while exiting and `hidden` and `inert` while kept closed. A closed
+ * surface waits for its motion before it unmounts or hides, while focus, the trap, the isolation
+ * and the scroll lock follow the open state at once: an exiting dialog lets clicks through to the
+ * page (an `inert` element takes no pointer events), and the page's scrollbar comes back while the
+ * dialog still fades. Opened again during its exit, the same surface enters again.
  */
 export declare const DialogContent: {
-    ({ title, size, backdrop, closeButton, titleAction, closeLabel, children, className, style, id, onKeyDown, ref, ...rest }: DialogContentProps): React_2.JSX.Element | null;
+    ({ title, size, backdrop, motion, backdropMotion, closeButton, titleAction, closeLabel, children, className, style, id, onKeyDown, ref, ...rest }: DialogContentProps): React_2.JSX.Element | null;
     displayName: string;
 };
 
@@ -4328,6 +4394,29 @@ export declare interface DialogContentProps extends Omit<React_2.HTMLAttributes<
     backdrop?: Slot<'div'> | (SlotObject<'div'> & {
         appearance?: BackdropAppearance;
     });
+    /**
+     * The surface's motion. By default it scales up from 85% of its size and fades in over 250 ms
+     * with a decelerating curve, and scales down and fades out over 200 ms with an accelerating
+     * curve; under reduced motion it appears and disappears at once. `null` turns the motion off
+     * (the surface still renders its `data-presence` phases, which then end at once); a class string
+     * or `{ className }` replaces the default classes with yours (see `MotionSlot`), also under a
+     * `WaveProvider` with `motion="none"`, which otherwise turns the default off. A `className` that
+     * holds `data-[presence=…]` classes while `motion` is unset keeps 0.14's behaviour: no default
+     * motion, your classes animate the surface. Fluent's `Dialog` `surfaceMotion`.
+     * @default the scale and fade above
+     */
+    motion?: MotionSlot | null;
+    /**
+     * The backdrop's motion. By default it fades in over 250 ms and out over 200 ms, the surface's
+     * exit, with an easy-ease curve; under reduced motion it appears and disappears at once. `null`
+     * turns the motion off; a class string or `{ className }` replaces the default classes with yours
+     * (see `MotionSlot`), also under a `WaveProvider` with `motion="none"`, which otherwise turns the
+     * default off. The surface's motion decides when the dialog unmounts or hides: a replacement
+     * longer than the surface's exit is cut off there. Ignored with `modalType="non-modal"` (a
+     * development warning says so). Fluent's `DialogSurface` `backdropMotion`.
+     * @default the fade above
+     */
+    backdropMotion?: MotionSlot | null;
     /**
      * Content of the built-in Close button (the dismiss glyph by default). It renders inside the
      * button, decorative (`aria-hidden`), so the button keeps the name `closeLabel`; a slot object's
@@ -4456,13 +4545,13 @@ export declare interface DialogProps {
      */
     finalFocusRef?: React_2.RefObject<HTMLElement | null>;
     /**
-     * Removes `Dialog.Content` (the surface and everything in it) when the dialog closes. `false`
-     * keeps it mounted while closed, `hidden` and `inert`, so a form inside keeps what was typed and
-     * the components inside keep their state; the surface then mounts with the Dialog, closed (in
-     * the browser only, as an open one), and an `autoFocus` inside it never applies (each open
-     * focuses the first focusable element). A popup opened inside that is still open when the
-     * dialog closes stays open over the page (a development warning says so): close it first.
-     * Fluent's `unmountOnClose`.
+     * Removes `Dialog.Content` (the surface and everything in it) when the dialog closes, once its
+     * exit motion has ended. `false` keeps it mounted while closed, `hidden` and `inert`, so a form
+     * inside keeps what was typed and the components inside keep their state; the surface then
+     * mounts with the Dialog, closed (in the browser only, as an open one), and an `autoFocus`
+     * inside it never applies (each open focuses the first focusable element). A popup opened inside
+     * that is still open when the dialog closes stays open over the page (a development warning says
+     * so): close it first. Fluent's `unmountOnClose`.
      * @default true
      */
     unmountOnClose?: boolean;
@@ -4693,13 +4782,28 @@ export declare type DividerProps<C extends React_2.ElementType = 'hr'> = Polymor
  *   each open of an overlay focuses the first focusable element again (an `autoFocus` inside never
  *   applies), and a kept overlay opened while another overlay is open stacks above it. A kept
  *   inline drawer is in the server HTML, hidden.
+ * - **Motion**: an overlay panel slides in from its edge and fades in, and slides back and fades
+ *   out, over 250 ms (`small`), 300 ms (`medium`), 400 ms (`large`) or 500 ms (`full`), and its
+ *   backdrop fades with it; an overlay open by default animates in when it mounts in the browser.
+ *   An inline drawer opens and closes the space it takes in the layout over the same durations,
+ *   its panel held at its size and fading, so it reads as sliding out from its edge; one open by
+ *   default does not animate in, and one at `full` has no motion (a percentage width in
+ *   `className` resizes oddly during the motion: give it a length, or pass `motion={null}`).
+ *   Under reduced motion every drawer appears and disappears at once. `motion` (the panel, or an
+ *   inline drawer's space) and `backdropMotion` (the backdrop) turn each off (`null`) or replace
+ *   it, and `WaveProvider motion="none"` turns both defaults off. `data-[presence=…]:` classes in
+ *   `className` keep 0.14's behaviour: no default motion, they animate the panel.
  * - **Presence**: the panel and the backdrop mount through the presence core and render
- *   `data-presence` (`entered` while open, `exited` while kept closed); the backdrop and the
- *   panel (an inline drawer's `<aside>`) are `inert` while exiting and `hidden` and `inert` while
- *   kept closed. No motion ships:
- *   `data-[presence=…]:` classes in `className` animate the panel, whose motion a closed drawer
- *   waits for before it unmounts or hides (focus, the trap and the isolation follow the open
- *   state at once).
+ *   `data-presence` (`entering` and `exiting` while the drawer's motion runs, `entered` while
+ *   open, `exited` while kept closed). An inline drawer's `<aside>` is the only child of an
+ *   element of its own (`wave-drawer__collapse`), which renders the same phases, carries the
+ *   inline motion and has no box while open, so the `<aside>` lays out in your page as without
+ *   it. The backdrop and the panel (an inline drawer's `<aside>` and the element around it) are
+ *   `inert` while exiting and `hidden` and `inert` while kept closed. A closed drawer waits for
+ *   its motion (the panel's, an inline one's on the element around it) before it unmounts or
+ *   hides, while focus, the trap, the isolation and the scroll lock follow the open state at
+ *   once: an exiting overlay lets clicks through to the page (an `inert` element takes no pointer
+ *   events). Opened again during its exit, the same panel enters again.
  *
  * The sub-components are also exported under flat names (`DrawerTrigger`, `DrawerClose`,
  * `DrawerTitle`, `DrawerHeader`, `DrawerHeaderTitle`, `DrawerHeaderNavigation`, `DrawerBody`,
@@ -4720,7 +4824,7 @@ export declare type DividerProps<C extends React_2.ElementType = 'hr'> = Polymor
  * </Drawer>
  */
 export declare const Drawer: {
-    ({ open: openProp, defaultOpen, onOpenChange, type, separator, position, size, modalType, backdrop, closeButton, titleAction, title, closeLabel, finalFocusRef, unmountOnClose, children, id, ref, ...rest }: DrawerProps): JSX.Element;
+    ({ open: openProp, defaultOpen, onOpenChange, type, separator, position, size, modalType, backdrop, motion, backdropMotion, closeButton, titleAction, title, closeLabel, finalFocusRef, unmountOnClose, children, id, ref, ...rest }: DrawerProps): JSX.Element;
     displayName: string;
 } & {
     Trigger: {
@@ -4790,16 +4894,19 @@ export declare interface DrawerBodyProps extends React_2.HTMLAttributes<HTMLDivE
 /**
  * Drawer: `root` on the panel (the portaled `role="dialog"` element of an overlay drawer, while it
  * is open or kept mounted, or the `<aside>` of an inline one); `backdrop` on the backdrop of a
- * modal or alert overlay drawer; `header` on the built-in header row (absent with a
- * Drawer.Header); `titleAction` on the element of the `titleAction` slot in that row;
- * `closeButton` on every built-in Close button (which also carries Button's root), in the built-in
- * header and in each Drawer.HeaderTitle; `body` on the scrolling body. The heading of its `title`
- * prop carries Drawer.Title's class. The panel carries `data-type`, `data-position` and
- * `data-size`; the body, the header and the footer carry `data-scroll-state`.
+ * modal or alert overlay drawer; `collapse` on the element around an inline drawer's panel (its
+ * only child), which carries the presence phases and the motion of an inline drawer; `header` on
+ * the built-in header row (absent with a Drawer.Header); `titleAction` on the element of the
+ * `titleAction` slot in that row; `closeButton` on every built-in Close button (which also
+ * carries Button's root), in the built-in header and in each Drawer.HeaderTitle; `body` on the
+ * scrolling body. The heading of its `title` prop carries Drawer.Title's class. The panel carries
+ * `data-type`, `data-position` and `data-size`; the body, the header and the footer carry
+ * `data-scroll-state`.
  */
 export declare const drawerClassNames: {
     readonly root: "wave-drawer";
     readonly backdrop: "wave-drawer__backdrop";
+    readonly collapse: "wave-drawer__collapse";
     readonly header: "wave-drawer__header";
     readonly titleAction: "wave-drawer__title-action";
     readonly closeButton: "wave-drawer__close-button";
@@ -5057,7 +5164,10 @@ export declare interface DrawerProps extends Omit<React_2.HTMLAttributes<HTMLEle
      * viewport's width — or its height at the bottom (the same values; `full` the viewport's height).
      * It never exceeds the viewport. An inline panel takes the same sizes, where `full` is its
      * container's width (height), and never grows past its container. A width class in `className`
-     * (a height class for `bottom`) replaces it. Rendered as `data-size`. Fluent's `size`.
+     * (a height class for `bottom`) replaces it. It also times the motion, an overlay's slide and an
+     * inline drawer's collapse alike: 250 ms small, 300 ms medium, 400 ms large, 500 ms full (an
+     * inline drawer at `full` has no motion; see `motion`). Rendered as `data-size`. Fluent's
+     * `size`.
      * @default 'small'
      */
     size?: DrawerSize;
@@ -5091,6 +5201,43 @@ export declare interface DrawerProps extends Omit<React_2.HTMLAttributes<HTMLEle
     backdrop?: Slot<'div'> | (SlotObject<'div'> & {
         appearance?: BackdropAppearance;
     });
+    /**
+     * The drawer's motion. By default an overlay panel slides in from beyond its edge and fades in
+     * with a decelerating curve, and slides back out and fades out with an accelerating curve; the
+     * `start` and `end` edges follow the text direction, `left` and `right` do not mirror, and a
+     * `bottom` panel rises from below. An inline drawer by default opens the space it takes in your
+     * layout from nothing (its width at a side, its height at the bottom) while its panel fades in,
+     * held at its size against its inner edge, so it reads as sliding out from that edge, with a
+     * decelerating curve; closing runs the same backwards with an accelerating curve. Both take a
+     * duration that follows `size` both ways: 250 ms small, 300 ms medium, 400 ms large, 500 ms
+     * full. An inline drawer at `full` has no motion, as its size is its container's (a value here
+     * does not apply to it either), and an inline drawer whose width (height at the bottom) in
+     * `className` is a percentage resizes oddly during the motion, correctly once open: give it a
+     * length, or pass `null`. Under reduced motion the drawer appears and disappears at once.
+     * `null` turns the motion off (the drawer still renders its `data-presence` phases, which then
+     * end at once); a class string or `{ className }` replaces the default classes with yours (see
+     * `MotionSlot`), also under a `WaveProvider` with `motion="none"`, which otherwise turns the
+     * default off. They go on the overlay panel, or on the element around an inline drawer's
+     * `<aside>` (`wave-drawer__collapse`), whose phases the drawer waits for. A `className` that
+     * holds `data-[presence=…]` classes while `motion` is unset keeps 0.14's behaviour: no default
+     * motion, your classes animate the panel, and the drawer waits for the panel's motion (an
+     * inline one's `<aside>`, not the element around it). Fluent's `OverlayDrawer` and
+     * `InlineDrawer` `surfaceMotion`.
+     * @default the slide (overlay) or the collapse (inline) above
+     */
+    motion?: MotionSlot | null;
+    /**
+     * The backdrop's motion (a modal or alert overlay). By default it fades in and out with a
+     * linear curve over the panel's duration (250 to 500 ms, by `size`), so it ends with the panel;
+     * under reduced motion it appears and disappears at once. `null` turns the motion off; a class
+     * string or `{ className }` replaces the default classes with yours (see `MotionSlot`), also
+     * under a `WaveProvider` with `motion="none"`, which otherwise turns the default off. The
+     * panel's motion decides when the drawer unmounts or hides: a replacement longer than the
+     * panel's exit is cut off there. Ignored with `modalType="non-modal"` and by an inline drawer
+     * (a development warning says so). Fluent's `OverlayDrawer` `backdropMotion`.
+     * @default the fade above
+     */
+    backdropMotion?: MotionSlot | null;
     /**
      * Content of the built-in Close button, in the built-in header and in every
      * `Drawer.HeaderTitle`, as `Dialog.Content`'s `closeButton`: decorative content inside the button
@@ -5136,16 +5283,17 @@ export declare interface DrawerProps extends Omit<React_2.HTMLAttributes<HTMLEle
      */
     finalFocusRef?: React_2.RefObject<HTMLElement | null>;
     /**
-     * Removes the panel and its content when the drawer closes. `false` keeps them mounted while
-     * closed, `hidden` and `inert` (out of the layout, the Tab order and the accessibility tree), so
-     * what was typed and the state of the components inside survive closing and opening again; the
-     * content then mounts with the Drawer, closed, and an `autoFocus` inside it never applies (an
-     * overlay focuses its first focusable element on each open). An overlay panel still renders only
-     * in the browser; a kept inline panel is in the server HTML, hidden. Kept content still belongs
-     * to its form: a `required` empty field in a closed inline drawer inside a page `<form>` blocks
-     * its submission without a visible message. A popup opened inside that is still open when the
-     * drawer closes stays open over the page (a development warning says so): close it first. A
-     * `key` on the Drawer resets the kept content. Fluent's `unmountOnClose`.
+     * Removes the panel and its content when the drawer closes, once the panel's exit motion has
+     * ended. `false` keeps them mounted while closed, `hidden` and `inert` (out of the layout, the
+     * Tab order and the accessibility tree), so what was typed and the state of the components
+     * inside survive closing and opening again; the content then mounts with the Drawer, closed, and
+     * an `autoFocus` inside it never applies (an overlay focuses its first focusable element on each
+     * open). An overlay panel still renders only in the browser; a kept inline panel is in the
+     * server HTML, hidden. Kept content still belongs to its form: a `required` empty field in a
+     * closed inline drawer inside a page `<form>` blocks its submission without a visible message. A
+     * popup opened inside that is still open when the drawer closes stays open over the page (a
+     * development warning says so): close it first. A `key` on the Drawer resets the kept content.
+     * Fluent's `unmountOnClose`.
      * @default true
      */
     unmountOnClose?: boolean;
@@ -6410,8 +6558,14 @@ export declare interface ImageSwatchProps extends Omit<React_2.ButtonHTMLAttribu
  *   attribute go to it, the consumer's handlers first. The description and the note render next
  *   to it, never inside it. Its box is 24×24px at every `size` and renders `data-size`. The note
  *   mounts through the presence core: it carries `data-presence`, `data-state` (`open`, and
- *   `closed` while it exits, `inert`) and the `data-wave-infolabel-surface` marker; it ships no
- *   motion of its own.
+ *   `closed` while it exits, `inert`) and the `data-wave-infolabel-surface` marker.
+ * - **Motion.** The note fades in and slides toward the button from the side it opened on, and
+ *   fades out and slides back as it closes (see `motion`); it stays in the document, `inert`,
+ *   until the exit ends, with `info` still inside it (never twice in the document), while the
+ *   dismiss layer, the focus restore and the button's `aria-expanded` follow the open state at
+ *   once. Focus inside a closing note moves to the button in the closing commit. Without motion
+ *   (reduced motion, `motion={null}`, or a provider with `motion="none"`) it unmounts as soon as
+ *   it closes.
  *
  * Fluent's InfoButton takes the same `info` and `size`. It opens on click only
  * (`openOnHover={false}` here), renders its note in place, and moves focus into the note; this one
@@ -6427,7 +6581,7 @@ export declare interface ImageSwatchProps extends Omit<React_2.ButtonHTMLAttribu
  * />
  */
 export declare const InfoButton: {
-    ({ info, size: sizeProp, openOnHover, id: idProp, type, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, disabled, onClick, onFocus, onBlur, onKeyDown, onPointerDown, onMouseDown, onPointerEnter, onPointerMove, onPointerLeave, ref, ...rest }: InfoButtonProps): React_2.JSX.Element;
+    ({ info, size: sizeProp, openOnHover, id: idProp, type, "aria-label": ariaLabelProp, motion, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, disabled, onClick, onFocus, onBlur, onKeyDown, onPointerDown, onMouseDown, onPointerEnter, onPointerMove, onPointerLeave, ref, ...rest }: InfoButtonProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -6472,6 +6626,17 @@ export declare interface InfoButtonProps extends Omit<React_2.ButtonHTMLAttribut
      * @default 'Information'
      */
     'aria-label'?: string;
+    /**
+     * The note's motion. By default it fades in and slides 4px away from the button, on the side it
+     * opened on, over 200 ms with a decelerating curve, and fades out and slides back over 100 ms
+     * with an accelerating curve; under reduced motion it appears and disappears at once. `null`
+     * turns the motion off (the note still renders its `data-presence` phases, which then end at
+     * once); a class string or `{ className }` replaces the default classes with yours (see
+     * `MotionSlot`), also under a `WaveProvider` with `motion="none"`, which otherwise turns the
+     * default off. Fluent's `Popover` `surfaceMotion` (its InfoButton is a Popover).
+     * @default the fade and slide above
+     */
+    motion?: MotionSlot | null;
     /** Ref to the button. */
     ref?: React_2.Ref<HTMLButtonElement>;
 }
@@ -6489,7 +6654,7 @@ export declare interface InfoButtonProps extends Omit<React_2.ButtonHTMLAttribut
  * - The button is named "‹label text› ‹infoButtonLabel›" through `aria-labelledby`, which points
  *   at the `<label>` and at the button's own id (whose `aria-label` supplies the second half), so
  *   several InfoLabels on a page are told apart; `infoButtonLabel` localizes that second half.
- *   `openOnHover` and `size` reach the button too.
+ *   `openOnHover`, `motion` and `size` reach the button too.
  * - No `controlRef`: InfoLabel is a label, not a form control, so C-ROUTING's composite-control
  *   routing does not apply to it; a layout that needs the button's own element renders `InfoButton`
  *   next to a `Label` instead.
@@ -6498,7 +6663,7 @@ export declare interface InfoButtonProps extends Omit<React_2.ButtonHTMLAttribut
  * <InfoLabel info="Use at least 8 characters.">Password</InfoLabel>
  */
 export declare const InfoLabel: {
-    ({ children, label, info, infoButtonLabel, openOnHover, id, htmlFor, required, size, weight, disabled, className, ref, ...rest }: InfoLabelProps): React_2.JSX.Element;
+    ({ children, label, info, infoButtonLabel, openOnHover, motion, id, htmlFor, required, size, weight, disabled, className, ref, ...rest }: InfoLabelProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -6537,6 +6702,13 @@ export declare interface InfoLabelProps extends Omit<React_2.HTMLAttributes<HTML
      * @default true
      */
     openOnHover?: boolean;
+    /**
+     * The motion of the info button's note, passed through unchanged (see `InfoButton`'s `motion`:
+     * `undefined` is the default fade and slide, `null` none, a value replaces it). Fluent's
+     * `Popover` `surfaceMotion`.
+     * @default the fade and slide of InfoButton's note
+     */
+    motion?: MotionSlot | null;
     /** Ref to the root `<span>`. */
     ref?: React_2.Ref<HTMLSpanElement>;
 }
@@ -7826,7 +7998,7 @@ export declare const Menu: {
         displayName: string;
     };
     Popover: {
-        ({ side, align, offset, target: targetProp, positioning, children, className, style, onKeyDown, onKeyDownCapture, onFocus, onPointerEnter, onPointerLeave, onPointerMove, onContextMenu, ref, ...rest }: MenuPopoverProps): JSX.Element | null;
+        ({ side, align, offset, target: targetProp, positioning, motion, children, className, style, onKeyDown, onKeyDownCapture, onFocus, onPointerEnter, onPointerLeave, onPointerMove, onContextMenu, ref, ...rest }: MenuPopoverProps): JSX.Element | null;
         displayName: string;
     };
     ItemCheckbox: {
@@ -8288,16 +8460,23 @@ export declare interface MenuItemSwitchProps extends MenuItemProps, MenuItemSele
  * the element focused at the gesture; it is not labelled by its region, so give it `aria-label`
  * (development warning otherwise), as for a menu placed at a `target` without `Menu.Trigger`.
  *
- * The surface mounts through the presence core (`usePresence`): it carries
- * `data-presence="entering" | "entered" | "exiting"` and, while it closes, `data-state="closed"`
- * and `inert`, so exit motion classes on `data-presence` keep it on screen until they end. Focus,
- * the dismiss layer and positioning follow the open state, not the exit. Without motion it unmounts
- * as soon as it closes.
+ * It moves in and out: the surface fades in and slides 4px away from its trigger over 200 ms, and
+ * fades out and slides back over 100 ms, on the side it opened on (`data-side`), so a submenu
+ * slides out of its parent menu; a menu open by default animates in when it mounts in the
+ * browser. Under reduced motion it appears and disappears at once. `motion` turns the motion off
+ * (`null`) or replaces its classes, and a `WaveProvider` with `motion="none"` turns the default
+ * off; a `className` with `data-[presence=…]` classes and no `motion` keeps 0.14's behaviour (your
+ * classes, no default motion). The surface mounts through the presence core (`usePresence`): it
+ * carries `data-presence="entering" | "entered" | "exiting"` and, while it closes,
+ * `data-state="closed"` and `inert`, so it stays on screen, where it was, until its exit motion
+ * ends. Focus, the dismiss layer and positioning follow the open state, not the exit: focus
+ * inside a closing menu leaves it in the commit that closes it. Without motion it unmounts as
+ * soon as it closes.
  *
  * Also exported as `MenuPopover` (import the flat name from React Server Components).
  */
 export declare const MenuPopover: {
-    ({ side, align, offset, target: targetProp, positioning, children, className, style, onKeyDown, onKeyDownCapture, onFocus, onPointerEnter, onPointerLeave, onPointerMove, onContextMenu, ref, ...rest }: MenuPopoverProps): React_2.JSX.Element | null;
+    ({ side, align, offset, target: targetProp, positioning, motion, children, className, style, onKeyDown, onKeyDownCapture, onFocus, onPointerEnter, onPointerLeave, onPointerMove, onContextMenu, ref, ...rest }: MenuPopoverProps): React_2.JSX.Element | null;
     displayName: string;
 };
 
@@ -8335,6 +8514,19 @@ export declare interface MenuPopoverProps extends Omit<React_2.HTMLAttributes<HT
      * @default `{ fitViewport: true }`
      */
     positioning?: PopupPositioning;
+    /**
+     * The menu's motion. By default it fades in and slides 4px away from its trigger, on the side
+     * it opened on (a submenu away from its parent menu), over 200 ms with a decelerating curve, and
+     * fades out and slides back over 100 ms with an accelerating curve; under reduced motion it
+     * appears and disappears at once. `null` turns the motion off (the surface still renders its
+     * `data-presence` phases, which then end at once); a class string or `{ className }` replaces
+     * the default classes with yours (see `MotionSlot`), also under a `WaveProvider` with
+     * `motion="none"`, which otherwise turns the default off. A `className` that holds
+     * `data-[presence=…]` classes while `motion` is unset keeps 0.14's behaviour: no default motion,
+     * your classes animate the surface. Fluent's `Menu` `surfaceMotion`.
+     * @default the fade and slide above
+     */
+    motion?: MotionSlot | null;
     /** Menu items and dividers. */
     children: React_2.ReactNode;
     /**
@@ -8687,6 +8879,85 @@ export declare const messageBarClassNames: {
     readonly dismissIcon: "wave-message-bar__dismiss-icon";
 };
 
+/**
+ * A stack of MessageBars that animates the bars it gains and loses, Fluent's MessageBarGroup with
+ * its `animate` prop: a bar removed from the children fades out while its row closes, so the bars
+ * below glide up instead of jumping (Fluent's bar only fades, and the bars below jump when it is
+ * gone), and with `animate="both"` a bar added after mount opens its row and fades in.
+ *
+ * - **Keys.** Give every bar a stable `key` (`key={message.id}`): the group follows its children
+ *   by key, so it can keep a removed bar on screen during its exit, in its place, and move bars
+ *   that are reordered without replacing them. A removed bar that comes back during its exit is
+ *   shown again. A child without a key of its own, or text, renders after the bars as given,
+ *   without motion, with a development warning. Any keyed element animates; MessageBar is the
+ *   one the group is made for.
+ * - **Motion.** Bars present at the group's first render (on the server too) never animate. Each
+ *   bar sits in an element of its own, which renders no box while the bar is shown, so the bars
+ *   are the stack's own items; while a bar enters or exits, that element clips it while its row
+ *   opens or closes. An exiting bar is `inert`. See `motion` for the default and how to replace
+ *   or turn it off; under `prefers-reduced-motion: reduce` a bar is added and removed at once.
+ * - **Focus.** When a bar leaves with focus inside it (its Dismiss button was pressed), focus moves
+ *   in the same commit to the first tabbable element of the nearest bar after it that stays and
+ *   holds a tabbable element, else of the nearest such bar before it. When no such bar is left,
+ *   the app decides where focus goes.
+ * - **Markup.** A plain `<div>` without a role stacking the bars with an 8px gap; each MessageBar
+ *   stays its own live region. MessageBarGroup is a component of its own rather than a part of
+ *   MessageBar, so a page that imports only MessageBar does not load the group's motion.
+ *
+ * @example
+ * <MessageBarGroup animate="both">
+ *   {messages.map((message) => (
+ *     <MessageBar key={message.id} status={message.status} onDismiss={() => dismiss(message.id)}>
+ *       {message.text}
+ *     </MessageBar>
+ *   ))}
+ * </MessageBarGroup>
+ */
+export declare const MessageBarGroup: {
+    ({ animate, motion, children, className, ref, ...rest }: MessageBarGroupProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * MessageBarGroup: `root` on the element that stacks the bars; `item` on the element around each
+ * bar (the element its enter and exit run on).
+ */
+export declare const messageBarGroupClassNames: {
+    readonly root: "wave-message-bar-group";
+    readonly item: "wave-message-bar-group__item";
+};
+
+/** Properties for the MessageBarGroup component. */
+export declare interface MessageBarGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which changes animate: `'exit-only'` (a bar removed from the children fades and collapses
+     * out) or `'both'` (a bar added after mount also fades and slides in). Bars present at the
+     * group's first render never animate. Fluent's `animate`. The root renders it as
+     * `data-animate`.
+     * @default 'exit-only'
+     */
+    animate?: 'exit-only' | 'both';
+    /**
+     * Replaces the bars' motion (both directions); `null` turns it off. The motion is on the element
+     * around each bar (`className` stays on the root). By default a removed bar fades out while its
+     * row and its bottom margin close over 250 ms with the linear curve, so the bars after it glide
+     * up and nothing jumps when it unmounts (the margin makes up for the group's 8px gap, so a
+     * different gap in `className` needs a `motion` whose margin matches it); with
+     * `animate="both"`, a bar added after mount opens its row and fades in the same way. Under
+     * reduced motion bars appear and disappear at once. `null` turns the motion off (the element
+     * still renders its `data-presence` phases, which then end at once); a class string or
+     * `{ className }` replaces the default classes with yours (see `MotionSlot`), also under a
+     * `WaveProvider` with `motion="none"`, which otherwise turns the default off. A WaveUI addition:
+     * Fluent's MessageBarGroup has no motion slot (its bar only fades out).
+     * @default the collapse and fade above
+     */
+    motion?: MotionSlot | null;
+    /** MessageBar elements, each with a stable `key`. */
+    children?: React_2.ReactNode;
+    /** Ref to the root `<div>`. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /** Properties for the MessageBar component. */
 export declare interface MessageBarProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Status level controlling the color, icon, status text and role of the message bar.
@@ -8829,6 +9100,26 @@ export declare type ModalOpenChangeReason = 'trigger' | 'close' | 'close-button'
  */
 export declare type ModalType = 'modal' | 'alert' | 'non-modal';
 
+/** Motion below a `WaveProvider`: `'default'`, or `'none'` (every motion slot acts as `null`). */
+export declare type MotionPreference = 'default' | 'none';
+
+/**
+ * Replaces a part's default motion (its `motion`, `backdropMotion`, `expandIconMotion` or
+ * `indeterminateMotion` prop): a class string, or `{ className }`. `null` on the prop turns the
+ * motion off and `undefined` keeps the default. On a part with presence phases (a surface, a
+ * backdrop, a collapsing part, a toast, a bar of a MessageBarGroup), write the phases as the
+ * default motion does: the enter's start with the starting variant gated on the entering phase
+ * (`data-[presence=entering]:starting:…`), the exit with `data-[presence=exiting]:…`, and a
+ * reduced-motion counterpart. The other parts (a Nav category's expand icon, ProgressBar's
+ * indeterminate fill, TabList's selection line) have no phases: give them plain transition or
+ * animation classes with a reduced-motion counterpart. The classes must exist in your CSS: the
+ * precompiled stylesheet holds only Wave's own classes, so without Tailwind pass a class of your
+ * own CSS (written against `[data-presence]` for a part with phases).
+ */
+export declare type MotionSlot = string | {
+    className: string;
+};
+
 /**
  * A vertical side navigation (`<nav>` landmark, default name "Navigation") with items, links and
  * collapsible categories.
@@ -8854,9 +9145,14 @@ export declare type ModalType = 'modal' | 'alert' | 'non-modal';
  *   `href` or a button; it is never selected. `Nav.AppItemStatic` shows them as plain text.
  * - **Item actions**: `actions` on `Nav.Item` and `Nav.SubItem` (Fluent's SplitNavItem) puts your
  *   own controls beside the item, in a group named by it; each is a Tab stop after the item, and
- *   none selects it. They are drawn while the row is hovered or has focus, while one is pressed or
- *   has its menu open, and always on touch screens and in forced colours. With actions, a selected
- *   item's background and indicator are drawn on its row (`.wave-nav-item__list-item`).
+ *   none selects it. They fade in while the row is hovered or has focus, while one is pressed or
+ *   has its menu open, and are always drawn on touch screens and in forced colours. With actions, a
+ *   selected item's background and indicator are drawn on its row (`.wave-nav-item__list-item`).
+ * - **Motion**: a category's list opens and closes its space with a short collapse and fade
+ *   (`motion` on `Nav.Category`), its chevron's turn is animated (`expandIconMotion`) and item
+ *   actions fade in. None of these defaults runs under reduced motion, and a `WaveProvider` with
+ *   `motion="none"` turns them off, while a category's own `motion` or `expandIconMotion` value
+ *   still applies. Focus inside a list that closes moves to its category's toggle button.
  *
  * Sub-components are also exported under flat names (`NavCategory`, `NavItem`, `NavSubItem`,
  * `NavSectionHeader`, `NavDivider`, `NavAppItem`, `NavAppItemStatic`): React Server Components
@@ -8867,7 +9163,7 @@ export declare const Nav: {
     displayName: string;
 } & {
     Category: {
-        ({ value, label, icon, className, children, ref, ...rest }: NavCategoryProps): React_2.JSX.Element;
+        ({ value, label, icon, expandIcon, expandIconMotion, motion, className, children, ref, ...rest }: NavCategoryProps): React_2.JSX.Element;
         displayName: string;
     };
     Item: typeof NavItem;
@@ -9007,8 +9303,19 @@ export declare interface NavAppItemStaticProps extends React_2.HTMLAttributes<HT
 
 /**
  * A collapsible group of sub-items. Its toggle button shows `label` and reports `aria-expanded`
- * (and `aria-controls` while open); the sub-items render in a nested list while it is open.
- * Open state lives on `Nav` (`openCategories`/`defaultOpenCategories`).
+ * (and `aria-controls` while open); the sub-items render in a nested list while it is open and
+ * while the list collapses after a close. Open state lives on `Nav`
+ * (`openCategories`/`defaultOpenCategories`).
+ *
+ * The list renders as the only child of a collapse element (its stable class
+ * `wave-nav-category__collapse`), which opens and closes the list's space (`motion`) and has no
+ * box of its own while the category is open, so the list lays out in the category as before. A
+ * category open by default appears without motion. After a close the list stays in the document
+ * until the collapse ends, `inert` (its items leave the Tab order and an arrow-key body's arrow
+ * keys at once), while the toggle button already reports the category closed, without
+ * `aria-controls`; opening the category again during the collapse keeps the same list. Focus
+ * inside the list when the category closes moves to the toggle button. The expand chevron turns
+ * while the category is open (`expandIcon` replaces it, `expandIconMotion` animates its turn).
  *
  * A closed category that contains the current item marks its toggle button with
  * `aria-current="true"` (the button is not the page's link, so not `"page"`),
@@ -9021,14 +9328,15 @@ export declare interface NavAppItemStaticProps extends React_2.HTMLAttributes<HT
  * Also exported as `NavCategory` (import the flat name from React Server Components).
  */
 export declare const NavCategory: {
-    ({ value, label, icon, className, children, ref, ...rest }: NavCategoryProps): React_2.JSX.Element;
+    ({ value, label, icon, expandIcon, expandIconMotion, motion, className, children, ref, ...rest }: NavCategoryProps): React_2.JSX.Element;
     displayName: string;
 };
 
 /**
  * Nav.Category: `root` on its `<li>`; `button` on the toggle button; `icon` on the icon span;
- * `label` on the label span; `expandIcon` on the chevron `<svg>`; `list` on the `<ul>` of its
- * sub-items.
+ * `label` on the label span; `expandIcon` on the chevron `<svg>` (or on the span of your
+ * `expandIcon`); `list` on the `<ul>` of its sub-items; `collapse` on the element around that
+ * list (the element that opens and closes the list's space, 0.15).
  */
 export declare const navCategoryClassNames: {
     readonly root: "wave-nav-category";
@@ -9037,6 +9345,7 @@ export declare const navCategoryClassNames: {
     readonly label: "wave-nav-category__label";
     readonly expandIcon: "wave-nav-category__expand-icon";
     readonly list: "wave-nav-category__list";
+    readonly collapse: "wave-nav-category__collapse";
 };
 
 /** Properties for the NavCategory sub-component. */
@@ -9056,9 +9365,42 @@ export declare interface NavCategoryProps extends React_2.HTMLAttributes<HTMLLIE
      * (`''`, `0`) or a list of nothing renders no icon box.
      */
     icon?: Slot<'span'>;
+    /**
+     * Replaces the expand chevron at the end of the toggle button (decorative, `aria-hidden`).
+     * `null`/`undefined` keep the chevron, which turns while the category is open; `false`, or
+     * anything that renders nothing, hides it (`aria-expanded` still reports the state). Your glyph
+     * renders as given in a span with the expand icon's class and is not turned, so a glyph that
+     * shows the state itself works (a plus or a minus, picked from your `openCategories`). It is
+     * rendered inside the toggle button: a `<button>` or `Button` passed here (or a slot object
+     * whose `as` is one) is not nested (its children become the glyph and its props are dropped,
+     * with a development warning).
+     */
+    expandIcon?: Slot<'span'>;
+    /**
+     * Replaces the motion of the expand icon (Fluent's `NavCategoryItem expandIconMotion`): by
+     * default the chevron's half turn as the category opens and closes is animated over the fast
+     * duration (150 ms) with the easy-ease curve, both ways, and so is any transform of the span
+     * around your own `expandIcon`. The turn itself is not motion: `null` turns the animation off
+     * and the chevron still turns, at once; a class string or `{ className }` replaces it with
+     * plain transition classes and a reduced-motion counterpart (the icon has no presence phases).
+     * A `WaveProvider` with `motion="none"` turns the default off, and a value here still applies
+     * under it.
+     * @default the animated turn described above
+     */
+    expandIconMotion?: MotionSlot | null;
+    /**
+     * Replaces the collapse of the category's list (Fluent's `NavSubItemGroup collapseMotion`), on
+     * the element around its `<ul>`: by default the space the list takes opens from nothing and
+     * closes back to it, with a fade, over the normal duration (200 ms) with the max easy-ease
+     * curve, both ways. `null` turns it off (the list appears and disappears at once); a class
+     * string or `{ className }` replaces it, written as `MotionSlot` describes. A `WaveProvider`
+     * with `motion="none"` turns the default off, and a value here still applies under it.
+     * @default the collapse described above
+     */
+    motion?: MotionSlot | null;
     /**
      * The category's sub-items (`Nav.SubItem`), and `Nav.SectionHeader` and `Nav.Divider`, rendered
-     * in its list while it is open.
+     * in its list while it is open (and while the list collapses after a close).
      */
     children?: React_2.ReactNode;
     /** Ref to the category's `<li>` element. */
@@ -9113,6 +9455,16 @@ export declare interface NavDividerProps extends Omit<React_2.HTMLAttributes<HTM
  *   when an item is chosen is yours, in `onItemSelect`, which also fires when the current page is
  *   activated again. A non-modal overlay (`modalType="non-modal"`) covers the page, which keeps
  *   its Tab order: keep the page's controls clear of it, or use `type="inline"`.
+ * - **Motion:** an overlay slides in from its edge and fades in, and slides back and fades out,
+ *   over 250 ms (`small`, the default), 300 ms (`medium`), 400 ms (`large`) or 500 ms (`full`),
+ *   with its backdrop fading along; one open by default animates in when it mounts in the browser.
+ *   An inline drawer opens and closes the space it takes in the layout over the same durations,
+ *   in an element of its own around the panel (`wave-nav-drawer__collapse`, which has no box
+ *   while open); one open by default does not animate in, and one at `full` has no motion. Under
+ *   reduced motion every drawer appears and disappears at once. `motion` and `backdropMotion`
+ *   turn each off (`null`) or replace it, and `WaveProvider motion="none"` turns both defaults
+ *   off. While it exits the panel stays on screen, `inert`, and focus, the trap and the scroll
+ *   lock are already released.
  * - **Focus:** pass your page's Hamburger as `finalFocusRef`, so focus returns to it when a
  *   Hamburger inside the drawer closes it. An overlay moves focus in when it opens; an inline
  *   drawer does not.
@@ -9155,7 +9507,7 @@ export declare interface NavDividerProps extends Omit<React_2.HTMLAttributes<HTM
  * </NavDrawer>
  */
 export declare const NavDrawer: {
-    ({ type, open: openProp, defaultOpen, onOpenChange, onItemSelect, position, size, separator, modalType: modalTypeProp, unmountOnClose, finalFocusRef, backdrop, value, defaultValue, onValueChange, openCategories, defaultOpenCategories, onOpenCategoriesChange, currentCategory, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, children, ref, ...rest }: NavDrawerProps): React_2.JSX.Element;
+    ({ type, open: openProp, defaultOpen, onOpenChange, onItemSelect, position, size, separator, modalType: modalTypeProp, unmountOnClose, finalFocusRef, backdrop, motion, backdropMotion, value, defaultValue, onValueChange, openCategories, defaultOpenCategories, onOpenCategoriesChange, currentCategory, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, children, ref, ...rest }: NavDrawerProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Header: {
@@ -9210,13 +9562,15 @@ export declare interface NavDrawerBodyProps extends React_2.HTMLAttributes<HTMLD
 
 /**
  * NavDrawer (a Drawer variant: it also carries Drawer's root, and its backdrop Drawer's backdrop
- * class): `root` on the panel (the portaled `role="dialog"` element of an overlay drawer, the
- * panel element of an inline one); `backdrop` on the backdrop of a modal overlay; `nav` on the
- * navigation landmark that fills the panel.
+ * class, and its collapse element Drawer's collapse class): `root` on the panel (the portaled
+ * `role="dialog"` element of an overlay drawer, the panel element of an inline one); `backdrop` on
+ * the backdrop of a modal overlay; `collapse` on the element around an inline drawer's panel;
+ * `nav` on the navigation landmark that fills the panel.
  */
 export declare const navDrawerClassNames: {
     readonly root: "wave-nav-drawer";
     readonly backdrop: "wave-nav-drawer__backdrop";
+    readonly collapse: "wave-nav-drawer__collapse";
     readonly nav: "wave-nav-drawer__nav";
 };
 
@@ -9316,7 +9670,10 @@ export declare interface NavDrawerProps extends Omit<React_2.HTMLAttributes<HTML
      * The panel's width at a side (its height at the bottom), on Drawer's scale: `small` 320px,
      * `medium` 592px, `large` 940px, `full` the viewport (inline: the container). A width class in
      * `className` replaces it (Fluent's navigation pane is 260px wide: the width class of 65
-     * spacing steps). Rendered as `data-size`. Drawer's default too.
+     * spacing steps). It also times the motion, an overlay's slide and an inline drawer's collapse
+     * alike: 250 ms small, 300 ms medium, 400 ms large, 500 ms full (an inline drawer at `full` has
+     * no motion; see `motion`), so a drawer without `size` takes 250 ms whatever width a class gives
+     * it. Rendered as `data-size`. Drawer's default too.
      * @default 'small'
      */
     size?: DrawerSize;
@@ -9340,11 +9697,11 @@ export declare interface NavDrawerProps extends Omit<React_2.HTMLAttributes<HTML
      */
     modalType?: Extract<ModalType, 'modal' | 'non-modal'>;
     /**
-     * Removes the panel when the drawer closes. `false` keeps it mounted while closed, out of view
-     * and `inert`, so the state of what is inside survives, and a Hamburger outside can point
-     * `aria-controls` at it at all times: always for an inline drawer, and once the page has
-     * hydrated for an overlay (whose panel is not in the server HTML). Fluent's `unmountOnClose`.
-     * Drawer's default too.
+     * Removes the panel when the drawer closes, once its exit motion has ended. `false` keeps it
+     * mounted while closed, out of view and `inert`, so the state of what is inside survives, and a
+     * Hamburger outside can point `aria-controls` at it at all times: always for an inline drawer,
+     * and once the page has hydrated for an overlay (whose panel is not in the server HTML).
+     * Fluent's `unmountOnClose`. Drawer's default too.
      * @default true
      */
     unmountOnClose?: boolean;
@@ -9362,6 +9719,43 @@ export declare interface NavDrawerProps extends Omit<React_2.HTMLAttributes<HTML
     backdrop?: Slot<'div'> | (SlotObject<'div'> & {
         appearance?: BackdropAppearance;
     });
+    /**
+     * The drawer's motion, as Drawer's. By default an overlay panel slides in from beyond its edge
+     * and fades in with a decelerating curve, and slides back out and fades out with an accelerating
+     * curve; the `start` and `end` edges follow the text direction, `left` and `right` do not
+     * mirror, and a `bottom` panel rises from below. An inline drawer by default opens the space it
+     * takes in your layout from nothing (its width at a side, its height at the bottom) while its
+     * panel fades in, held at its size against its inner edge, so it reads as sliding out from that
+     * edge, with a decelerating curve; closing runs the same backwards with an accelerating curve.
+     * Both take a duration that follows `size` both ways: 250 ms small (also without `size`), 300 ms
+     * medium, 400 ms large, 500 ms full. An inline drawer at `full` has no motion, as its size is
+     * its container's (a value here does not apply to it either), and an inline drawer whose width
+     * (height at the bottom) in `className` is a percentage resizes oddly during the motion,
+     * correctly once open: give it a length, or pass `null`. Under reduced motion the drawer appears
+     * and disappears at once. `null` turns the motion off (the drawer still renders its
+     * `data-presence` phases, which then end at once); a class string or `{ className }` replaces
+     * the default classes with yours (see `MotionSlot`), also under a `WaveProvider` with
+     * `motion="none"`, which otherwise turns the default off. They go on the overlay panel, or on
+     * the element around an inline drawer's panel (`wave-nav-drawer__collapse`), whose phases the
+     * drawer waits for. A `className` that holds `data-[presence=…]` classes while `motion` is unset
+     * keeps 0.14's behaviour: no default motion, your classes animate the panel, and the drawer
+     * waits for the panel's motion (inline too, not the element around it). Fluent's
+     * `OverlayDrawer` and `InlineDrawer` `surfaceMotion`.
+     * @default the slide (overlay) or the collapse (inline) above
+     */
+    motion?: MotionSlot | null;
+    /**
+     * The backdrop's motion (a modal overlay), as Drawer's. By default it fades in and out with a
+     * linear curve over the panel's duration (250 to 500 ms, by `size`), so it ends with the panel;
+     * under reduced motion it appears and disappears at once. `null` turns the motion off; a class
+     * string or `{ className }` replaces the default classes with yours (see `MotionSlot`), also
+     * under a `WaveProvider` with `motion="none"`, which otherwise turns the default off. The
+     * panel's motion decides when the drawer unmounts or hides: a replacement longer than the
+     * panel's exit is cut off there. Ignored, with a development warning, by a non-modal or inline
+     * drawer. Fluent's `OverlayDrawer` `backdropMotion`.
+     * @default the fade above
+     */
+    backdropMotion?: MotionSlot | null;
     /**
      * Name of the navigation landmark (and of an overlay's dialog). Localize it; rename it when the
      * page has another navigation landmark (two with one name are ambiguous). An `aria-labelledby`
@@ -9491,11 +9885,14 @@ export declare interface NavItemOwnProps {
      * never inside it, in a group named by the item; each is a Tab stop after the item, and a click
      * or key on one never selects the item. They are drawn while the row is hovered or has focus,
      * while one of them is pressed or has its popup open, and always in forced colours and on touch
-     * screens; otherwise they are transparent and still focusable. They stay enabled when the item
-     * is `disabled`. With actions, the selected background and indicator are drawn on the row (the
-     * item's list item, `.wave-nav-item__list-item`), so a `className` on the item no longer covers
-     * them. Content that renders nothing renders no group. Fluent's `actionButton`, `toggleButton`
-     * and `menuButton` slots and their tooltips are your own controls here.
+     * screens; otherwise they are transparent and still focusable. They fade in and out over 150 ms
+     * (at once under reduced motion or a `WaveProvider` with `motion="none"`); the fade sets the
+     * transition of each direct child of the group, so a transition of your own on one is replaced.
+     * They stay enabled when the item is `disabled`. With actions, the selected background and
+     * indicator are drawn on the row (the item's list item, `.wave-nav-item__list-item`), so a
+     * `className` on the item no longer covers them. Content that renders nothing renders no group.
+     * Fluent's `actionButton`, `toggleButton` and `menuButton` slots and their tooltips are your own
+     * controls here.
      */
     actions?: React_2.ReactNode;
 }
@@ -10448,6 +10845,8 @@ export declare type PolymorphicProps<C extends React_2.ElementType, OwnProps> =
  *   moving into the content). Name the content with `title` or `aria-label`.
  * - **Custom anchors:** `target` places it at another element or at a `VirtualElement` (a point, a
  *   text selection); with a controlled `open` it needs no trigger.
+ * - **Motion:** the content fades and slides in from its trigger and back out as it closes;
+ *   `Popover.Content`'s `motion` turns it off or replaces it.
  *
  * @example
  * <Popover>
@@ -10464,7 +10863,7 @@ export declare const Popover: {
         displayName: string;
     };
     Content: {
-        ({ children, title, id: idProp, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown, onContextMenu, onPointerEnter, onPointerLeave, ref, ...rest }: PopoverContentProps): React_2.JSX.Element | null;
+        ({ children, title, id: idProp, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown, onContextMenu, onPointerEnter, onPointerLeave, motion, ref, ...rest }: PopoverContentProps): React_2.JSX.Element | null;
         displayName: string;
     };
 };
@@ -10497,11 +10896,25 @@ export declare const Popover: {
  * `target` it is placed at the target and, without a trigger, follows a target element in the
  * keyboard order.
  *
+ * It moves in and out: the surface fades in and slides 4px away from its trigger over 200 ms, and
+ * fades out and slides back over 100 ms, on the side it opened on (`data-side`); a popover open by
+ * default animates in when it mounts in the browser. Under reduced motion it appears and
+ * disappears at once. `motion` turns the motion off (`null`) or replaces its classes, and a
+ * `WaveProvider` with `motion="none"` turns the default off. The surface mounts through the
+ * presence core (`usePresence`): it carries `data-presence="entering" | "entered" | "exiting"` and
+ * `data-state="open"`, and while it closes `data-state="closed"` and `inert`, so it stays on
+ * screen, where it was, until its exit motion ends. Focus, the dismiss layer, the trigger's
+ * `aria-expanded` and `aria-controls`, and positioning follow the open state, not the exit: focus
+ * inside a closing popover moves, in the commit that closes it, to where the popover returns
+ * focus (so a Dialog opened by a button of the popover as it closes returns focus there too, not
+ * to that button), and a hover close moves no focus. Without motion it unmounts as soon as it
+ * closes.
+ *
  * Also exported as `PopoverContent` for React Server Components, which cannot use the dotted
  * `Popover.Content` (that needs a client file).
  */
 export declare const PopoverContent: {
-    ({ children, title, id: idProp, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown, onContextMenu, onPointerEnter, onPointerLeave, ref, ...rest }: PopoverContentProps): React_2.JSX.Element | null;
+    ({ children, title, id: idProp, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown, onContextMenu, onPointerEnter, onPointerLeave, motion, ref, ...rest }: PopoverContentProps): React_2.JSX.Element | null;
     displayName: string;
 };
 
@@ -10527,6 +10940,17 @@ export declare interface PopoverContentProps extends Omit<React_2.HTMLAttributes
     title?: React_2.ReactNode;
     /** Id of the surface; the trigger's `aria-controls` follows it. Defaults to a generated id. */
     id?: string;
+    /**
+     * The popover's motion. By default it fades in and slides 4px away from its trigger, on the
+     * side it opened on, over 200 ms with a decelerating curve, and fades out and slides back over
+     * 100 ms with an accelerating curve; under reduced motion it appears and disappears at once.
+     * `null` turns the motion off (the surface still renders its `data-presence` phases, which then
+     * end at once); a class string or `{ className }` replaces the default classes with yours (see
+     * `MotionSlot`), also under a `WaveProvider` with `motion="none"`, which otherwise turns the
+     * default off. Fluent's `Popover` `surfaceMotion`.
+     * @default the fade and slide above
+     */
+    motion?: MotionSlot | null;
     /** Ref to the popover surface. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -10961,7 +11385,8 @@ export declare type PresenceStatus = 'available' | 'busy' | 'away' | 'offline' |
  *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's
  *   `<label htmlFor>` to that control.
  * - The indeterminate animation follows the writing direction and becomes a full-width pulse for
- *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.
+ *   reduced motion; `indeterminateMotion` replaces or removes it. In forced-colors mode the fill
+ *   uses `Highlight` and the track gets a border.
  *
  * @example
  * <ProgressBar value={uploaded} max={total} label="Uploading photos" showLabel />
@@ -10972,7 +11397,7 @@ export declare type PresenceStatus = 'available' | 'busy' | 'away' | 'offline' |
  * </Field>
  */
 export declare const ProgressBar: {
-    ({ value, max, label, showLabel, color, id, "aria-describedby": ariaDescribedBy, "aria-invalid": _ariaInvalid, "aria-required": _ariaRequired, className, ref, ...rest }: ProgressBarProps): React_2.JSX.Element;
+    ({ value, max, label, showLabel, color, indeterminateMotion, id, "aria-describedby": ariaDescribedBy, "aria-invalid": _ariaInvalid, "aria-required": _ariaRequired, className, ref, ...rest }: ProgressBarProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -11026,6 +11451,19 @@ export declare interface ProgressBarProps extends React_2.HTMLAttributes<HTMLDiv
      * @default 'brand'
      */
     color?: ProgressBarColor;
+    /**
+     * Replaces the motion of the indeterminate fill (no `value`): by default a fill two fifths of
+     * the track wide sweeps across it, mirrored in right-to-left, and becomes a full-width pulse
+     * for reduced motion. The classes go on the fill and replace the whole default, its width and
+     * its reduced-motion counterparts included. `null` draws a static full-width fill; a class
+     * string or `{ className }` replaces the classes with plain animation classes (and a width) and
+     * their reduced-motion counterparts (the fill has no presence phases). A
+     * `WaveProvider` with `motion="none"` turns the default off (a static full-width fill), and a
+     * value here still applies under it. A determinate bar has no motion and ignores it. Fluent's
+     * ProgressBar `indeterminateMotion` takes a motion slot the same way.
+     * @default the sweep described above
+     */
+    indeterminateMotion?: MotionSlot | null;
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
@@ -13430,15 +13868,20 @@ export declare interface TableSelectionCellProps extends Omit<React_2.TdHTMLAttr
  * a Panel that ends up inside the tablist). Content that is not a tab, such as a button next to
  * the tabs, does not belong in a tablist either: render it outside the TabList.
  *
+ * In the `transparent` appearance the selected tab draws its line with its after pseudo-element,
+ * over a transparent 2px border on its bottom edge (its start edge when vertical), so the tab keeps
+ * the box it has without the line; a class that recolours the line targets that pseudo-element's
+ * border. When the selection moves, the line slides from the tab selected before (`motion`).
+ *
  * Sub-components are also exported under flat names (`TabListTab`, `TabListPanel`,
  * `TabListPanels`) for React Server Components, which cannot use the dotted form.
  */
 export declare const TabList: {
-    ({ 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;
+    ({ value: valueProp, defaultValue: defaultValueProp, onValueChange, orientation: orientationProp, appearance, size, selectTabOnFocus, motion, selectedValue, defaultSelectedValue, onTabSelect, vertical, className, children, onKeyDown, onFocus, ref, ...rest }: TabListProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Tab: {
-        ({ value, id: idProp, icon, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
+        ({ value, id: idProp, icon, className, style, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
         displayName: string;
     };
     Panel: {
@@ -13537,6 +13980,22 @@ export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDi
      * @default true
      */
     selectTabOnFocus?: boolean;
+    /**
+     * Replaces the slide of the selected tab's line in the `transparent` appearance (the other
+     * appearances have no line and do not move): by default, when the selection moves, the line
+     * slides and stretches from the tab selected before to the new one, over the slow duration
+     * (300 ms) with the max decelerating curve. The classes go on the selected tab and time its
+     * line, the tab's after pseudo-element (write them with the after variant, and a reduced-motion
+     * counterpart); the line starts from the previous tab through two custom properties the
+     * TabList writes for one frame. `null` turns the slide off (the line moves at once); a class
+     * string or `{ className }` replaces the classes with plain transition classes for the line, as
+     * above (it has no presence phases). A
+     * `WaveProvider` with `motion="none"` turns the default off, and a value here still applies
+     * under it. The line also moves at once while the user prefers reduced motion. Fluent's
+     * TabList slides its indicator with no prop to turn it off: this prop is a WaveUI addition.
+     * @default the slide described above
+     */
+    motion?: MotionSlot | null;
     /** @deprecated Use `value`. */
     selectedValue?: string;
     /** @deprecated Use `defaultValue`. */
@@ -13560,7 +14019,7 @@ export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDi
  * with its value is mounted.
  */
 export declare const TabListTab: {
-    ({ value, id: idProp, icon, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
+    ({ value, id: idProp, icon, className, style, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -14610,8 +15069,11 @@ export declare type TagSize = Extract<Size, 'extra-small' | 'small' | 'medium'>;
  *   `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.
+ *   the available steps. An uncontrolled step starts again at `defaultActiveStep` each time the
+ *   popover opens, so a tour finished with Done or closed midway starts over (`onStepChange`
+ *   reports the move back); a controlled `activeStep` is left as it is. 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`
@@ -14635,6 +15097,19 @@ 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.
+ * - **Motion.** The surface fades in over 200 ms and out over 100 ms as it closes; pointed at a
+ *   target (or the Trigger) it also slides 4px away from it on the side it opened on
+ *   (`data-side`), and back. Under reduced motion it appears and disappears at once. `motion` (on
+ *   TeachingPopover for the surface it renders, or on `TeachingPopover.Surface`) turns it off
+ *   (`null`) or replaces its classes, and a `WaveProvider` with `motion="none"` turns the default
+ *   off. The surface mounts through the presence core: it carries `data-presence` and
+ *   `data-state="open"`, and while it closes `data-state="closed"` and `inert`, so it stays on
+ *   screen, where it was and on the step it closed on, until its exit ends. Escape, focus and the
+ *   Trigger's `aria-expanded` follow the open state, not the exit: focus inside a closing popover
+ *   moves, in the commit that closes it, to where it returns focus. A popover open by default
+ *   animates in when it mounts in the browser, and one opened again during its exit enters again
+ *   on the same surface (on its first step, as every opening). Without motion it unmounts as soon
+ *   as it closes.
  * - **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`
@@ -14692,7 +15167,7 @@ export declare type TagSize = Extract<Size, 'extra-small' | 'small' | 'medium'>;
  * </TeachingPopover>
  */
 export declare const TeachingPopover: {
-    ({ 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;
+    ({ 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, motion, ref, ...rest }: TeachingPopoverProps): JSX.Element;
     displayName: string;
 } & {
     Trigger: {
@@ -15094,10 +15569,14 @@ export declare interface TeachingPopoverProps extends React_2.HTMLAttributes<HTM
     steps: readonly TeachingPopoverStep[];
     /**
      * Controlled index of the displayed step. Out-of-range values are clamped to the first or last
-     * step (with a development warning).
+     * step (with a development warning). Opening the popover leaves it as it is.
      */
     activeStep?: number;
-    /** Initial step index for uncontrolled usage.
+    /**
+     * Initial step index for uncontrolled usage, and the step the popover starts on again each time
+     * it opens (after Done, Close, Escape or the Trigger closed it, or a controlled `open` turned it
+     * off), so a tour opened again starts over; `onStepChange` is called with it when the step was
+     * elsewhere.
      * @default 0
      */
     defaultActiveStep?: number;
@@ -15107,7 +15586,9 @@ export declare interface TeachingPopoverProps extends React_2.HTMLAttributes<HTM
     defaultCurrentStep?: number;
     /**
      * 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).
+     * `TeachingPopover.CarouselNav` is activated (the button of the current step requests nothing),
+     * and, while the step is uncontrolled, with the initial step when an opening moves the step back
+     * to it (see `defaultActiveStep`).
      */
     onStepChange?: (step: number) => void;
     /**
@@ -15206,11 +15687,25 @@ export declare interface TeachingPopoverProps extends React_2.HTMLAttributes<HTM
      * @default `{ offset: 12 }`
      */
     positioning?: PopupPositioning;
+    /**
+     * The motion of the surface TeachingPopover renders (next to a `TeachingPopover.Surface` it is
+     * ignored, with a development warning: give it to the Surface). By default the surface fades in
+     * over 200 ms with a decelerating curve and out over 100 ms with an accelerating curve, and,
+     * pointed at a target (or the Trigger), also slides 4px away from it on the side it opened on,
+     * and back as it closes; under reduced motion it appears and disappears at once. `null` turns
+     * the motion off (the surface still renders its `data-presence` phases, which then end at
+     * once); a class string or `{ className }` replaces the default classes with yours (see
+     * `MotionSlot`), also under a `WaveProvider` with `motion="none"`, which otherwise turns the
+     * default off. Fluent's `TeachingPopover` `surfaceMotion` (a TeachingPopover is a Popover
+     * there).
+     * @default the fade and slide above
+     */
+    motion?: MotionSlot | null;
     /**
      * `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
+     * `ref`, `motion`, …); with one (best written directly inside, a Fragment is fine: see
      * `TeachingPopover.Surface`), the Surface takes them instead.
      */
     children?: React_2.ReactNode;
@@ -15242,19 +15737,19 @@ export declare interface TeachingPopoverStep {
 /**
  * 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
+ * target with a beak; focus, dismissal, keyboard order, step announcements and motion), so your
+ * `className`, `style`, `ref`, `motion` 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).
+ * own `className`, `style`, `ref`, `motion` 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).
@@ -15285,6 +15780,19 @@ export declare interface TeachingPopoverSurfaceProps extends React_2.HTMLAttribu
      * without one, name it with `aria-label` or `aria-labelledby`.
      */
     children?: React_2.ReactNode;
+    /**
+     * The surface's motion (TeachingPopover's own `motion` is for the surface it renders without a
+     * Surface). By default it fades in over 200 ms with a decelerating curve and out over 100 ms with
+     * an accelerating curve, and, pointed at a target (or the Trigger), also slides 4px away from it
+     * on the side it opened on, and back as it closes; under reduced motion it appears and
+     * disappears at once. `null` turns the motion off (the surface still renders its
+     * `data-presence` phases, which then end at once); a class string or `{ className }` replaces
+     * the default classes with yours (see `MotionSlot`), also under a `WaveProvider` with
+     * `motion="none"`, which otherwise turns the default off. Fluent's `TeachingPopover`
+     * `surfaceMotion` (a TeachingPopover is a Popover there).
+     * @default the fade and slide above
+     */
+    motion?: MotionSlot | null;
     /** Ref to the popover surface (`role="dialog"`). */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -15883,7 +16391,8 @@ export declare interface ToastController {
     };
     /**
      * Dismisses the toast with this id and cancels its timer: a shown toast exits (it stays, inert,
-     * until an exit motion of yours ends), a waiting one is removed. Unknown ids are ignored.
+     * until its exit motion ends; see the Toaster's `motion`), a waiting one is removed. Unknown ids
+     * are ignored.
      */
     dismissToast: (id: string) => void;
     /**
@@ -15961,6 +16470,10 @@ export declare interface ToastDispatchOptions {
  * - `limit` caps how many toasts show at once: the others wait in a queue, in dispatch order,
  *   unannounced and without a running timer, and appear as shown toasts go.
  *   `dismissAllToasts()` removes every toast, shown and queued.
+ * - **Motion:** a toast slides and fades in from the stack's edge while its place opens; a
+ *   dismissed one fades out, then its place closes and the others glide together. It stays in
+ *   the document, `inert`, until then; at once under reduced motion. `motion` replaces or turns
+ *   off the motion of every toast.
  *
  * @example
  * <Toaster position="bottom-end" limit={3}>
@@ -15968,17 +16481,19 @@ export declare interface ToastDispatchOptions {
  * </Toaster>
  */
 export declare const Toaster: {
-    ({ position, limit: limitProp, shortcuts, toaster: handle, className, style, children, onFocus, onBlur, onKeyDown, onPointerEnter, onPointerLeave, onPointerOver, ref, ...rest }: ToasterProps): React_2.JSX.Element;
+    ({ position, limit: limitProp, shortcuts, toaster: handle, motion, className, style, children, onFocus, onBlur, onKeyDown, onPointerEnter, onPointerLeave, onPointerOver, ref, ...rest }: ToasterProps): React_2.JSX.Element;
     displayName: string;
 };
 
 /**
  * Toaster: `root` on the portaled toast region; `toast` on the `role="group"` container the
- * Toaster renders around each toast.
+ * Toaster renders around each toast; `toastContent` on the element inside each container, its
+ * only child, which holds the toast's status text and content (0.15).
  */
 export declare const toasterClassNames: {
     readonly root: "wave-toaster";
     readonly toast: "wave-toaster__toast";
+    readonly toastContent: "wave-toaster__toast-content";
 };
 
 /**
@@ -16015,6 +16530,20 @@ export declare interface ToasterProps extends React_2.HTMLAttributes<HTMLDivElem
      * queues again until a Toaster binds it.
      */
     toaster?: ToasterHandle;
+    /**
+     * The motion of every toast's container (the `role="group"` element; `className` stays on the
+     * region). By default a toast opens its place in the stack, fades in and slides 8px in from the
+     * stack's edge (the top or bottom edge `position` names) over 250 ms with a decelerating curve,
+     * all together; dismissed, it fades out over 200 ms, then its place closes over 200 ms more,
+     * so the toasts around it glide together and nothing jumps when it unmounts (the timer still
+     * starts when the toast is shown). Under reduced motion it appears and disappears at once.
+     * `null` turns the motion off (the container still renders its `data-presence` phases, which
+     * then end at once); a class string or `{ className }` replaces the default classes with yours
+     * (see `MotionSlot`), also under a `WaveProvider` with `motion="none"`, which otherwise turns
+     * the default off. A WaveUI addition: Fluent's Toaster has no motion slot.
+     * @default the slide, fade and collapse above
+     */
+    motion?: MotionSlot | null;
     /** Ref to the toast region (the portaled `<div role="region">`). */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -16563,8 +17092,13 @@ export declare interface ToolbarToggleButtonProps extends Omit<ToggleButtonProps
  * - The text is always present as a hidden `role="tooltip"` element referenced by the child's
  *   `aria-describedby` (or `aria-labelledby` with `relationship="label"`), so screen readers get
  *   it on focus without waiting for the delay; the child's own ids are kept.
- * - The visual surface is rendered in a portal only while visible (it is `aria-hidden`, a copy of
- *   the description), positioned on `side`/`align` with flipping and shifting to stay in view.
+ * - The visual surface is rendered in a portal while visible (it is `aria-hidden`, a copy of the
+ *   description), positioned on `side`/`align` with flipping and shifting to stay in view.
+ * - It fades in and out over 100 ms (see `motion`; at once under reduced motion). The surface
+ *   mounts through the presence core: it carries `data-presence` and `data-state="open"`, and
+ *   while it fades out `data-state="closed"` and `inert`, staying where it was until its exit
+ *   ends; the Escape layer goes as it hides, not after the fade. Shown again during its exit, the
+ *   same surface fades back in. The hidden description is unchanged in every phase.
  * - It appears `openDelay` after the pointer rests on the child or the child takes keyboard focus,
  *   stays visible while the pointer moves onto it, hides `closeDelay` after the pointer leaves or
  *   immediately on blur, and Escape hides it without closing an enclosing dialog or popover. Focus
@@ -16600,7 +17134,7 @@ export declare interface ToolbarToggleButtonProps extends Omit<ToggleButtonProps
  * </Menu>
  */
 export declare const Tooltip: {
-    ({ content, appearance: appearanceProp, variant, openDelay: openDelayProp, closeDelay, delay, open: openProp, defaultOpen, onOpenChange, relationship, side, align, positioning, children, className, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: TooltipProps): React_2.JSX.Element;
+    ({ content, appearance: appearanceProp, variant, openDelay: openDelayProp, closeDelay, delay, open: openProp, defaultOpen, onOpenChange, relationship, side, align, positioning, motion, children, className, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: TooltipProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -16683,6 +17217,17 @@ export declare interface TooltipProps extends Omit<React_2.HTMLAttributes<HTMLSp
      * @default `{ offset: 8 }`
      */
     positioning?: PopupPositioningOptions;
+    /**
+     * The motion of the tooltip's surface (the portaled box; `className` stays on the wrapper
+     * `<span>`). By default it fades in over 100 ms and out over 100 ms with the easy-ease curve,
+     * without a slide; under reduced motion it appears and disappears at once. `null` turns the
+     * motion off (the surface still renders its `data-presence` phases, which then end at once); a
+     * class string or `{ className }` replaces the default classes with yours (see `MotionSlot`),
+     * also under a `WaveProvider` with `motion="none"`, which otherwise turns the default off. A
+     * WaveUI addition: Fluent's Tooltip has no motion.
+     * @default the fade above
+     */
+    motion?: MotionSlot | null;
     /**
      * A single element that triggers the tooltip on hover and focus: it receives the
      * `aria-describedby`/`aria-labelledby`, plus any `id` and `aria-*` props given to the Tooltip
@@ -16705,6 +17250,10 @@ export declare interface TooltipProps extends Omit<React_2.HTMLAttributes<HTMLSp
  * Keyboard focus enters at the `selected` item, else the first item; while focus is inside, the
  * tab stop follows it, so Shift+Tab leaves the tree.
  *
+ * A child group opens and closes its space with a short collapse and fade (the Tree's `motion`;
+ * none under reduced motion or a `WaveProvider` with `motion="none"`), and focus inside a group
+ * that collapses moves to its item.
+ *
  * `selectionMode="multiple"` draws a checkbox on every item, bound to `checkedItems`: Space
  * toggles the focused item's check, a click on the checkbox toggles it, and a click elsewhere on
  * the row activates the item (as Enter does). Checks cascade: checking an item checks every item
@@ -16731,7 +17280,7 @@ export declare interface TooltipProps extends Omit<React_2.HTMLAttributes<HTMLSp
  * `TreeItemPersonaLayout` for React Server Components, which cannot use the dotted form.
  */
 export declare const Tree: {
-    ({ expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemSelect, selected, current, selectionMode, navigationMode, checkedItems, defaultCheckedItems, onCheckedItemsChange, className, children, onKeyDown, onKeyDownCapture, onFocus, onBlur, ref, ...rest }: TreeProps): JSX.Element;
+    ({ expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemSelect, selected, current, selectionMode, navigationMode, checkedItems, defaultCheckedItems, onCheckedItemsChange, motion, className, children, onKeyDown, onKeyDownCapture, onFocus, onBlur, ref, ...rest }: TreeProps): JSX.Element;
     displayName: string;
 } & {
     Item: {
@@ -16763,6 +17312,16 @@ export declare const treeClassNames: {
  * One node of a Tree. Text and other content are the label; nested `Tree.Item` children form its
  * child group, which is shown while the item is expanded.
  *
+ * The child group renders as the only child of a collapse element (its stable class
+ * `wave-tree-item__collapse`), which opens and closes the group's space (the Tree's `motion`) and
+ * has no box of its own while the item is expanded, so the group lays out in the item as before.
+ * An item expanded by default appears without motion. After a collapse the group stays in the
+ * document until the collapse ends, `inert` (its items leave the arrow keys and typeahead at once)
+ * while the item already reports itself collapsed; expanding the item again during the collapse
+ * keeps the same group. Focus inside the group when the item collapses moves to the item. A
+ * pointer click that falls through the exiting group onto the item (an `inert` element lets the
+ * pointer through) is not the item's: it neither expands nor activates it.
+ *
  * Nested items must be `Tree.Item` elements among the item's own children: written directly, in
  * Fragments, or returned by a render function (`{node.children.map(renderNode)}`). A component
  * that renders `Tree.Item` itself (a recursive `<NodeView node={child} />`) is not recognised:
@@ -16772,14 +17331,14 @@ export declare const treeClassNames: {
  * renders is not checked with its parent.
  *
  * `ref` and every other prop land on the `role="treeitem"` element, which contains the label row
- * and the child group. Its `onClick` receives only clicks on its own row (not on its child group
- * or nested items) and its `onKeyDown` only keys pressed while focus is on it or in its row; both
- * run before the built-in behaviour (call `event.preventDefault()` to skip it). In a checkbox
- * tree, a click on the item's checkbox toggles its check and is not passed to `onClick`, and
- * neither is a click on its actions; `onKeyDown` receives no keys pressed in the actions. Its
- * other event handlers (`onFocus`, `onDoubleClick`, `onContextMenu` and the rest) are not
- * filtered: as DOM events bubble, they also receive events from its child group and nested items
- * (compare `event.target` with `event.currentTarget` to tell them apart).
+ * and the child group (in its collapse element). Its `onClick` receives only clicks on its own
+ * row (not on its child group or nested items) and its `onKeyDown` only keys pressed while focus
+ * is on it or in its row; both run before the built-in behaviour (call `event.preventDefault()`
+ * to skip it). In a checkbox tree, a click on the item's checkbox toggles its check and is not
+ * passed to `onClick`, and neither is a click on its actions; `onKeyDown` receives no keys pressed
+ * in the actions. Its other event handlers (`onFocus`, `onDoubleClick`, `onContextMenu` and the
+ * rest) are not filtered: as DOM events bubble, they also receive events from its child group and
+ * nested items (compare `event.target` with `event.currentTarget` to tell them apart).
  *
  * `actions` render in a toolbar at the end of the row, named by the item; keys and clicks on them
  * belong to them and never activate or check the item. `aside` sits before them and describes the
@@ -16799,7 +17358,8 @@ export declare const TreeItem: {
  * chevron (or your `expandIcon`); `indicator` on the checkbox of a multi-select tree or the radio
  * of a single-select one; `icon` on the icon span; `label` on the label span; `iconAfter` on the
  * icon after the label; `aside` on the aside content; `actions` on the row's actions toolbar;
- * `group` on the `role="group"` element of its nested items.
+ * `group` on the `role="group"` element of its nested items; `collapse` on the element around
+ * that group (the element that opens and closes the group's space, 0.15).
  */
 export declare const treeItemClassNames: {
     readonly root: "wave-tree-item";
@@ -16812,6 +17372,7 @@ export declare const treeItemClassNames: {
     readonly aside: "wave-tree-item__aside";
     readonly actions: "wave-tree-item__actions";
     readonly group: "wave-tree-item__group";
+    readonly collapse: "wave-tree-item__collapse";
 };
 
 /**
@@ -16953,6 +17514,17 @@ export declare interface TreeProps extends React_2.HTMLAttributes<HTMLDivElement
      * @default 'tree'
      */
     navigationMode?: 'tree' | 'treegrid';
+    /**
+     * Replaces the collapse of every child group in the tree (Fluent's `Tree collapseMotion`), on
+     * the element around each `role="group"` element: by default the space a group takes opens
+     * from nothing and closes back to it, with a fade, over the normal duration (200 ms) with the
+     * max easy-ease curve, both ways. `null` turns it off (a group appears and disappears at once);
+     * a class string or `{ className }` replaces it, written as `MotionSlot` describes. A
+     * `WaveProvider` with `motion="none"` turns the default off, and a value here still applies
+     * under it. The expand chevron's turn is not part of it, and a nested `Tree` takes its own.
+     * @default the collapse described above
+     */
+    motion?: MotionSlot | null;
     /** Ref to the `role="tree"` element. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -18589,6 +19161,8 @@ export declare interface WaveContextValue {
     portalContainer: HTMLElement | null;
     /** The merged input defaults of the providers above (`{}` outside a provider). */
     inputDefaults: InputDefaults;
+    /** The motion preference of the providers above (`'default'` outside a provider). */
+    motion: MotionPreference;
     /** `false` when no {@link WaveProvider} is above the caller (the defaults are returned). */
     hasProvider: boolean;
 }
@@ -18615,9 +19189,13 @@ export declare type WaveDir = 'ltr' | 'rtl';
  * - `inputDefaults` nests differently: a nested provider's defined keys override the enclosing
  *   provider's, and an omitted key is inherited, so setting only `appearance` in a nested provider
  *   keeps the enclosing provider's `size`.
+ * - `motion="none"` turns the default motion of every animated part below it off (its motion
+ *   slots, Carousel's slide, TabList's sliding line, the reveal of Nav item actions; a part's own
+ *   `motion` still wins), while transitions without a slot keep running (Accordion's and Tree's
+ *   chevron turns, colour changes); a nested provider inherits an omitted `motion` like `theme`.
  */
 export declare const WaveProvider: {
-    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, children, className, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
+    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, motion: motionProp, children, className, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -18653,6 +19231,18 @@ export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDi
      * @default the enclosing WaveProvider's defaults, else none (`medium`, `outline`)
      */
     inputDefaults?: InputDefaults;
+    /**
+     * Motion of the subtree. `'none'` makes every motion slot below it (a part's `motion`,
+     * `backdropMotion`, `expandIconMotion` or `indeterminateMotion` left unset) behave as `null`,
+     * which also stops the slide of TabList's selection line, and turns off Carousel's slide or fade
+     * (a Carousel without its own `motion`) and the reveal of Nav item actions; a part's own value
+     * still wins. Transitions that are no motion slot keep running: the turn of Accordion's and
+     * Tree's chevrons, colour changes on hover and press. Fluent's `MotionBehaviourProvider` with `'skip'` is the counterpart, which
+     * `@fluentui/react-components` does not export. A nested provider inherits an omitted `motion`
+     * like `theme`.
+     * @default the enclosing WaveProvider's motion, else 'default'
+     */
+    motion?: MotionPreference;
     /** Content rendered inside the themed container. */
     children: React_2.ReactNode;
     /** Ref to the themed root `<div>`. */