@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -49,6 +49,11 @@ export declare interface AccordionBaseProps extends React_2.HTMLAttributes<HTMLD
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** Accordion: `root` on the accordion element. */
+export declare const accordionClassNames: {
+    readonly root: "wave-accordion";
+};
+
 /** Heading level of the element that wraps each Accordion trigger. */
 export declare type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -72,6 +77,11 @@ export declare const AccordionItem: {
     displayName: string;
 };
 
+/** Accordion.Item: `root` on the item element. */
+export declare const accordionItemClassNames: {
+    readonly root: "wave-accordion-item";
+};
+
 /** Properties for the AccordionItem sub-component. */
 export declare interface AccordionItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Unique value identifying this accordion item. */
@@ -110,6 +120,11 @@ export declare const AccordionPanel: {
     displayName: string;
 };
 
+/** Accordion.Panel: `root` on the `role="region"` element. */
+export declare const accordionPanelClassNames: {
+    readonly root: "wave-accordion-panel";
+};
+
 /** Properties for the AccordionPanel sub-component (merged onto the `role="region"` element). */
 export declare interface AccordionPanelProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Ref to the panel `<div role="region">`. */
@@ -168,12 +183,72 @@ export declare const AccordionTrigger: {
     displayName: string;
 };
 
+/**
+ * Accordion.Trigger: `root` on the `<button>`; `heading` on the heading element around it (`<h1>`
+ * to `<h6>`, from `headingLevel`); `expandIcon` on the chevron `<svg>`.
+ */
+export declare const accordionTriggerClassNames: {
+    readonly root: "wave-accordion-trigger";
+    readonly heading: "wave-accordion-trigger__heading";
+    readonly expandIcon: "wave-accordion-trigger__expand-icon";
+};
+
 /** Properties for the AccordionTrigger sub-component (merged onto the trigger `<button>`). */
 export declare interface AccordionTriggerProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Ref to the trigger `<button>`. */
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/**
+ * A slider for a color's opacity, drawn over a checkerboard, horizontal (mirrored in right-to-left
+ * layouts) or vertical (bottom to top); `transparency` shows transparency instead. The arrow keys
+ * move by 1 %, Shift with an arrow and Page Up or Page Down by 10, Home and End to the ends. It is
+ * named by `aria-label`, else the surrounding Field's label, else "Opacity" ("Transparency").
+ * Inside a ColorPicker, leave `value` and `defaultValue` out and it binds to the picker. Fluent's
+ * `AlphaSlider`, with `value`/`onValueChange` for its `color`/`onChange`.
+ *
+ * @example
+ * <AlphaSlider value={color} onValueChange={setColor} />
+ */
+export declare const AlphaSlider: {
+    ({ transparency, orientation, value, defaultValue, onValueChange, shape, labels, disabled, name, form, required, controlRef, className, style, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, autoFocus, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, ref, ...rest }: AlphaSliderProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** AlphaSlider: `root` on the slider element; `rail` on the rail; `thumb` on the thumb. */
+export declare const alphaSliderClassNames: {
+    readonly root: "wave-alpha-slider";
+    readonly rail: "wave-alpha-slider__rail";
+    readonly thumb: "wave-alpha-slider__thumb";
+};
+
+/** Texts of an AlphaSlider, for localisation. Every key is optional. */
+export declare interface AlphaSliderLabels {
+    /** Name of the slider.
+     * @default 'Opacity'
+     */
+    opacity?: string;
+    /** Name of the slider with `transparency`.
+     * @default 'Transparency'
+     */
+    transparency?: string;
+    /** Replaces the value text ("40%"), for languages whose order differs. */
+    valueText?: (color: HsvColor, transparency: boolean) => string;
+}
+
+/** Properties for the AlphaSlider component. */
+export declare interface AlphaSliderProps extends Omit<ColorSliderProps, 'channel' | 'labels'> {
+    /**
+     * Shows transparency (100 % is fully transparent) instead of opacity: the rail, the input's
+     * value, the value text and the arrow direction all follow it, while `value.a` stays the
+     * opacity (Fluent's `transparency`).
+     * @default false
+     */
+    transparency?: boolean;
+    /** Texts of the slider; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */
+    labels?: AlphaSliderLabels;
+}
+
 /**
  * Announces `message` to screen readers through a shared, visually hidden live region
  * (`[data-wave-announcer]`, which modal isolation never makes inert).
@@ -220,6 +295,21 @@ export declare const Avatar: {
     displayName: string;
 };
 
+/**
+ * Avatar: `root` on the avatar span (with `badge`, on the outer wrapper); `visual` on the circle
+ * (the root without `badge`, the inner span with it); `image` on the `<img>` (or the element of
+ * your `image` slot); `icon` on the `icon` slot, else on the default person `<svg>`; `initials`
+ * on the initials span; `badge` on the `badge` slot.
+ */
+export declare const avatarClassNames: {
+    readonly root: "wave-avatar";
+    readonly visual: "wave-avatar__visual";
+    readonly image: "wave-avatar__image";
+    readonly icon: "wave-avatar__icon";
+    readonly initials: "wave-avatar__initials";
+    readonly badge: "wave-avatar__badge";
+};
+
 /**
  * A row of overlapping avatars (`role="group"`; name it with `aria-label`).
  *
@@ -246,6 +336,20 @@ export declare const AvatarGroup: {
     displayName: string;
 };
 
+/**
+ * AvatarGroup: `root` on the `role="group"` element; `item` on the wrapper around each shown
+ * member; `overflowButton` on the "+N" button; `surface` on its popup; `list` on the popup's
+ * `<ul>`; `listItem` on each of its `<li>`.
+ */
+export declare const avatarGroupClassNames: {
+    readonly root: "wave-avatar-group";
+    readonly item: "wave-avatar-group__item";
+    readonly overflowButton: "wave-avatar-group__overflow-button";
+    readonly surface: "wave-avatar-group__surface";
+    readonly list: "wave-avatar-group__list";
+    readonly listItem: "wave-avatar-group__list-item";
+};
+
 /** Properties for the AvatarGroup component. */
 export declare interface AvatarGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
@@ -356,6 +460,11 @@ export declare const Badge: {
 /** Visual style variant for Badge components. */
 export declare type BadgeAppearance = 'filled' | 'tint' | 'outline';
 
+/** Badge: `root` on the badge span. */
+export declare const badgeClassNames: {
+    readonly root: "wave-badge";
+};
+
 /** Semantic colors of Badge and CounterBadge. */
 export declare type BadgeColor = 'brand' | 'success' | 'warning' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle';
 
@@ -404,6 +513,17 @@ export declare const Breadcrumb: {
     Item: typeof BreadcrumbItem;
 };
 
+/**
+ * Breadcrumb: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`; `divider`
+ * on each separator `<svg>`.
+ */
+export declare const breadcrumbClassNames: {
+    readonly root: "wave-breadcrumb";
+    readonly list: "wave-breadcrumb__list";
+    readonly listItem: "wave-breadcrumb__list-item";
+    readonly divider: "wave-breadcrumb__divider";
+};
+
 /**
  * One step of a breadcrumb trail:
  * - `href` → a link (`<a>`, anchor attributes);
@@ -459,6 +579,15 @@ export declare interface BreadcrumbItemButtonProps extends BreadcrumbItemOwnProp
     ref?: React_2.Ref<HTMLButtonElement | HTMLSpanElement>;
 }
 
+/**
+ * Breadcrumb.Item: `root` on the link, button or text span it renders (or your `asChild`
+ * element); `icon` on the icon span.
+ */
+export declare const breadcrumbItemClassNames: {
+    readonly root: "wave-breadcrumb-item";
+    readonly icon: "wave-breadcrumb-item__icon";
+};
+
 /**
  * Breadcrumb.Item with an `href` known only at run time (`string | undefined`): a link when it is
  * a string, otherwise a button (with `onClick`) or text. Handlers receive `HTMLElement` events and
@@ -562,6 +691,16 @@ export declare interface BreadcrumbProps extends React_2.HTMLAttributes<HTMLElem
  */
 export declare const Button: PolymorphicComponent<'button', ButtonOwnProps>;
 
+/**
+ * Button: `root` on the rendered element (`<button>`, or your `as`); `icon` on the icon box.
+ * Style them from your own CSS (`.wave-button`, `.wave-button__icon`). State is not a class: use
+ * the `data-*` attributes (`[data-pressed]`, `[data-disabled]`).
+ */
+export declare const buttonClassNames: {
+    readonly root: "wave-button";
+    readonly icon: "wave-button__icon";
+};
+
 /**
  * The Button's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`), so `as="a"` accepts `href`/`target`
@@ -668,12 +807,27 @@ export declare const Card: PolymorphicComponent<"div", CardOwnProps> & {
  */
 export declare const CardBody: PolymorphicComponent<'div', CardBodyOwnProps>;
 
+/** Card.Body: `root` on the rendered element. */
+export declare const cardBodyClassNames: {
+    readonly root: "wave-card-body";
+};
+
 /** The Card.Body's own props: none besides the element's (component-specific props only). */
 export declare type CardBodyOwnProps = Record<never, never>;
 
 /** Props of {@link CardBody} rendered as `C` (default `'div'`), including `ref`. */
 export declare type CardBodyProps<C extends React_2.ElementType = 'div'> = PolymorphicProps<C, CardBodyOwnProps>;
 
+/**
+ * Card: `root` on the rendered element (your `as`, default `<div>`); `checkbox` on the built-in
+ * selection checkbox; `checkmark` on the corner check `<svg>` of a selected card.
+ */
+export declare const cardClassNames: {
+    readonly root: "wave-card";
+    readonly checkbox: "wave-card__checkbox";
+    readonly checkmark: "wave-card__checkmark";
+};
+
 /**
  * The action row of a {@link Card} (end-aligned). A selectable card with actions here needs
  * `selectionControl="checkbox"`. Flat export for React Server Components (`Card.Footer` in client
@@ -681,6 +835,11 @@ export declare type CardBodyProps<C extends React_2.ElementType = 'div'> = Polym
  */
 export declare const CardFooter: PolymorphicComponent<'div', CardFooterOwnProps>;
 
+/** Card.Footer: `root` on the rendered element. */
+export declare const cardFooterClassNames: {
+    readonly root: "wave-card-footer";
+};
+
 /** The Card.Footer's own props: none besides the element's (component-specific props only). */
 export declare type CardFooterOwnProps = Record<never, never>;
 
@@ -693,6 +852,13 @@ export declare type CardFooterProps<C extends React_2.ElementType = 'div'> = Pol
  */
 export declare const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps>;
 
+/** Card.Header: `root` on the rendered element; `title` on the title; `subtitle` on the subtitle. */
+export declare const cardHeaderClassNames: {
+    readonly root: "wave-card-header";
+    readonly title: "wave-card-header__title";
+    readonly subtitle: "wave-card-header__subtitle";
+};
+
 /** The Card.Header's own props (component-specific props only). */
 export declare interface CardHeaderOwnProps {
     /**
@@ -815,6 +981,24 @@ export declare interface CarouselAutoPlayLabels {
     play?: string;
 }
 
+/**
+ * Carousel: `root` on the `role="region"` element; `autoPlayButton` on the pause and start
+ * button; `track` on the moving element around the slides; `slide` on each slide wrapper;
+ * `previousButton` and `nextButton` on the arrow buttons; `picker` on the `role="group"` of
+ * picker buttons; `pickerButton` on each of them; `pickerIndicator` on each button's dot.
+ */
+export declare const carouselClassNames: {
+    readonly root: "wave-carousel";
+    readonly autoPlayButton: "wave-carousel__auto-play-button";
+    readonly track: "wave-carousel__track";
+    readonly slide: "wave-carousel__slide";
+    readonly previousButton: "wave-carousel__previous-button";
+    readonly nextButton: "wave-carousel__next-button";
+    readonly picker: "wave-carousel__picker";
+    readonly pickerButton: "wave-carousel__picker-button";
+    readonly pickerIndicator: "wave-carousel__picker-indicator";
+};
+
 /**
  * One slide of a {@link Carousel}. Write it in the Carousel, directly or in a Fragment: a component
  * that renders `Carousel.Item` itself is not recognised as a slide (put that component inside the
@@ -825,6 +1009,11 @@ export declare const CarouselItem: {
     displayName: string;
 };
 
+/** Carousel.Item: `root` on the item element. */
+export declare const carouselItemClassNames: {
+    readonly root: "wave-carousel-item";
+};
+
 /** Properties for the CarouselItem sub-component. */
 export declare interface CarouselItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     ref?: React_2.Ref<HTMLDivElement>;
@@ -933,6 +1122,16 @@ export declare const Checkbox: {
     displayName: string;
 };
 
+/**
+ * Checkbox: `root` on the `<label>`; `indicator` on the `role="checkbox"` button (the box);
+ * `label` on the label text.
+ */
+export declare const checkboxClassNames: {
+    readonly root: "wave-checkbox";
+    readonly indicator: "wave-checkbox__indicator";
+    readonly label: "wave-checkbox__label";
+};
+
 /** Handlers that run on the `role="checkbox"` button instead of the root label (C-ROUTING). */
 declare type CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
 
@@ -1060,43 +1259,213 @@ export declare type CheckedValuesChangeHandler = (checkedValues: Record<string,
 export declare function cn(...inputs: ClassValue[]): string;
 
 /**
- * A color picker: a preview, a hex text field, optional preset swatches and an optional opacity
- * slider, grouped as a named `role="group"`.
- *
- * - **Value**: a hex color, `#rrggbb` or `#rrggbbaa`. The opacity slider shows and edits the
- *   value's alpha byte; picking a preset or typing a 6-digit hex keeps the current opacity.
- * - **Hex field**: the text is a draft (surrounding whitespace is dropped). Complete 6- or 8-digit
- *   values are applied while typing; text that can never be a hex color is flagged at once
- *   (`aria-invalid` plus the `hexError` description). Leaving the field or pressing Enter applies
- *   a short `#rgb` (keeping the current opacity) or `#rgba`, then shows the current value again
- *   (also when a controlled parent rejected the typed color); an empty field (or a lone `#`) also
- *   shows the current value again. Any other text is kept and flagged instead of being thrown
- *   away, until it is corrected, cleared, or the value changes from elsewhere (a preset, the
- *   opacity slider, the parent, a form reset). Enter still submits the surrounding form, with the
- *   color just applied; while the text is flagged, the form submits the last applied color.
+ * A 2-D color field: saturation from left to right (mirrored in right-to-left layouts) and
+ * brightness from bottom to top, at the value's hue. ArrowLeft and ArrowRight move saturation by
+ * 1 %, ArrowUp and ArrowDown brightness; Shift with an arrow moves by 10, Page Up and Page Down
+ * move brightness by 10, and Home and End set saturation to 0 and 100. A press or drag (mouse,
+ * touch or pen) moves the thumb to the pointer. It is one Tab stop holding two sliders for
+ * assistive technology, "Saturation" and "Brightness", whose value texts start with their own
+ * channel and name the color; focus follows the axis a key moves, and unless the primary pointer
+ * is coarse (touch), only the slider with the Tab stop is exposed. Inside a ColorPicker, leave
+ * `value` and `defaultValue` out and it binds to the picker. Fluent's
+ * `ColorArea`, with `value`/`onValueChange` for its `color`/`onChange`.
+ *
+ * @example
+ * <ColorArea aria-label="Accent color" value={color} onValueChange={setColor} />
+ */
+export declare const ColorArea: {
+    ({ value, defaultValue, onValueChange, shape, labels, disabled, name, form, required, controlRef, className, style, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, autoFocus, tabIndex, onKeyDown, onPointerDown, onPointerMove, ref, ...rest }: ColorAreaProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * ColorArea: `root` on the `role="group"` element; `field` on the gradient layer; `thumb` on the
+ * thumb (the two range inputs are not parts).
+ */
+export declare const colorAreaClassNames: {
+    readonly root: "wave-color-area";
+    readonly field: "wave-color-area__field";
+    readonly thumb: "wave-color-area__thumb";
+};
+
+/** Texts of a ColorArea, for localisation. Every key is optional. */
+export declare interface ColorAreaLabels {
+    /** Name of the horizontal slider.
+     * @default 'Saturation'
+     */
+    saturation?: string;
+    /** Name of the vertical slider (the `value` channel).
+     * @default 'Brightness'
+     */
+    brightness?: string;
+    /** Role description of both sliders.
+     * @default '2D slider'
+     */
+    roleDescription?: string;
+    /** Names the color at the end of each value text; return `''` to leave it out.
+     * @default an English namer ("dark blue")
+     */
+    colorName?: (color: HsvColor) => string;
+    /** Replaces a whole value text, for languages whose order differs. */
+    valueText?: (color: HsvColor, channel: 'saturation' | 'value') => string;
+}
+
+/** Properties for the ColorArea component. */
+export declare interface ColorAreaProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /**
+     * The color (Fluent's `color`). Inside a ColorPicker, leave `value` and `defaultValue` out to
+     * bind the area to the picker.
+     */
+    value?: HsvColor;
+    /**
+     * Initial color for uncontrolled usage (also what a form reset restores).
+     * @default the brand blue, `{ h: 208, s: 0.92, v: 0.74 }` (`#0f6cbd`)
+     */
+    defaultValue?: HsvColor;
+    /**
+     * Called with the new color on every step (a key, a pointer move or assistive technology) that
+     * changes it (Fluent's `onChange`). A bound area calls it too.
+     */
+    onValueChange?: (value: HsvColor) => void;
+    /**
+     * `'square'` removes the corner radius (the thumb stays round). Bound to a ColorPicker, the
+     * picker's shape unless you pass one.
+     * @default 'rounded'
+     */
+    shape?: ColorPickerShape;
+    /** Texts of the area; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */
+    labels?: ColorAreaLabels;
+    /**
+     * Unavailable: both inputs are natively disabled, pointer presses are ignored and the area is
+     * dimmed. A bound area is also disabled while the picker's value is not a hex color.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Form field name: the color is submitted as hex (`hsvToHex`). Ignored while bound to a ColorPicker. */
+    name?: string;
+    /** Id of the form the area belongs to, when it is rendered outside that form. */
+    form?: string;
+    /**
+     * Marks the hidden form input required (a color is always set, so it never blocks). A consumer
+     * `aria-required` does the same: a group supports neither, so neither is set on it.
+     */
+    required?: boolean;
+    /** Ref to the saturation `<input type="range">`. */
+    controlRef?: React_2.Ref<HTMLInputElement>;
+    /** Ref to the root `role="group"` element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * A color picker whose value is a hex string (`#rrggbb`, or `#rrggbbaa` with an alpha byte),
+ * grouped as a named `role="group"`.
+ *
+ * - **Default layout** (no children): a color area (saturation and brightness) and a hue slider,
+ *   then a preview and the hex field, preset swatches and, with `showOpacity`, an opacity row
+ *   whose slider is an `AlphaSlider` (0–100 %). Dragging to gray, white or black keeps the hue.
+ * - **Your own layout** (children): `ColorArea`, `ColorSlider` and `AlphaSlider`, which bind to
+ *   the picker while they have neither `value` nor `defaultValue`, and the parts
+ *   `ColorPicker.HexField`, `ColorPicker.Swatches` and `ColorPicker.Preview`.
+ * - **Hex field**: the text is a draft. Complete 6- and 8-digit values apply while typing; text
+ *   that can never be a hex color is flagged at once (`aria-invalid` plus the `hexError`
+ *   description). Leaving the field or pressing Enter applies a short `#rgb` (keeping the current
+ *   opacity) or `#rgba`, then shows the current value again; other text stays flagged until it is
+ *   corrected, cleared, or the value changes from elsewhere. Enter still submits the surrounding
+ *   form, with the color just applied.
  * - **Presets** render as a SwatchPicker radiogroup ("Preset colors"): one tab stop, arrow keys
- *   move and pick, and the selected preset shows a ring and a check glyph.
- * - **Naming**: `aria-label`/`aria-labelledby` name the group; inside a `Field` its label does, and
- *   the Field's hint and error describe the group. The invalid state (`aria-invalid`, from the
- *   Field or the prop) is set on the hex field, since `role="group"` does not support it, and the
- *   hex field is then also described by the Field's error and by a consumer `aria-errormessage`
- *   (which is routed to the hex field too). A consumer `aria-required` makes the hidden form input
- *   required instead of reaching the group. The texts of the picker's own parts are localised with
- *   `labels`.
+ *   move and pick, and picking keeps the current opacity.
+ * - **Naming**: `aria-label`/`aria-labelledby` name the group; inside a `Field` its label does,
+ *   and the Field's hint and error describe the group. The invalid state (`aria-invalid`, from the
+ *   Field or the prop) is set on the hex field, since `role="group"` does not support it, and a
+ *   consumer `aria-errormessage` goes there too. A consumer `aria-required` makes the hidden form
+ *   input required instead. The built-in texts are localised with `labels`.
  * - **Forms**: with `name` the color is submitted with the form; a form reset restores
  *   `defaultValue` and reports it through `onValueChange` only when the color changes.
  *
+ * React Server Components cannot dot into a client module: import the flat names
+ * `ColorPickerHexField`, `ColorPickerSwatches` and `ColorPickerPreview` there;
+ * `ColorPicker.HexField` etc. work in client files.
+ *
  * @example
  * <ColorPicker aria-label="Accent color" showOpacity value={color} onValueChange={setColor} />
+ *
+ * <ColorPicker aria-label="Accent color" value={color} onValueChange={setColor}>
+ *   <ColorArea />
+ *   <ColorSlider />
+ *   <ColorPicker.HexField />
+ * </ColorPicker>
  */
 export declare const ColorPicker: {
-    ({ value: valueProp, defaultValue, onValueChange, onChange, presets, showOpacity, labels, name, required, form, className, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, ref, ...rest }: ColorPickerProps): React_2.JSX.Element;
+    ({ value: valueProp, defaultValue, onValueChange, onChange, presets, showOpacity, labels, shape, name, required, form, className, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, children, ref, ...rest }: ColorPickerProps): React_2.JSX.Element;
     displayName: string;
+} & {
+    HexField: {
+        ({ id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-required": ariaRequired, autoFocus, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, inputMode, enterKeyHint, autoCapitalize, autoCorrect, spellCheck, controlRef, className, ref, ...rest }: ColorPickerHexFieldProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Swatches: {
+        ({ className, "aria-label": ariaLabel, size, shape, ...rest }: ColorPickerSwatchesProps): React_2.JSX.Element | null;
+        displayName: string;
+    };
+    Preview: {
+        ({ className, style, ref, ...rest }: ColorPickerPreviewProps): React_2.JSX.Element;
+        displayName: string;
+    };
 };
 
 /**
- * Texts of the ColorPicker's own parts, for localisation. Every key is optional; missing keys use
- * the English default.
+ * ColorPicker: `root` on the `role="group"` element; `opacityLabel` on the caption and
+ * `opacityValue` on the percentage of the default layout's opacity row. Its color area and
+ * sliders carry their own classes (ColorArea, ColorSlider, AlphaSlider).
+ */
+export declare const colorPickerClassNames: {
+    readonly root: "wave-color-picker";
+    readonly opacityLabel: "wave-color-picker__opacity-label";
+    readonly opacityValue: "wave-color-picker__opacity-value";
+};
+
+/**
+ * The hex text field of a ColorPicker: a caption, the input and its error. The text is a draft:
+ * complete 6- and 8-digit values apply while typing, text that can never be a hex color is
+ * flagged at once, and leaving the field (or Enter) applies a short `#rgb`/`#rgba` and shows the
+ * value again; other text stays flagged until it is corrected, cleared, or the value changes from
+ * elsewhere (a preset, another part, the parent, a form reset). Inside a Field it carries the
+ * Field's invalid state and error. Must be inside a ColorPicker. Also exported as
+ * `ColorPickerHexField` (import the flat name in React Server Components).
+ */
+export declare const ColorPickerHexField: {
+    ({ id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-required": ariaRequired, autoFocus, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, inputMode, enterKeyHint, autoCapitalize, autoCorrect, spellCheck, controlRef, className, ref, ...rest }: ColorPickerHexFieldProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * ColorPicker.HexField: `root` on the field's outer element; `label` on the caption; `input` on
+ * the hex `<input>`; `errorMessage` on the error text.
+ */
+export declare const colorPickerHexFieldClassNames: {
+    readonly root: "wave-color-picker-hex-field";
+    readonly label: "wave-color-picker-hex-field__label";
+    readonly input: "wave-color-picker-hex-field__input";
+    readonly errorMessage: "wave-color-picker-hex-field__error-message";
+};
+
+/**
+ * Properties for the ColorPickerHexField sub-component. `id`, the labelling and validation
+ * `aria-*` (`aria-label`, `aria-labelledby`, `aria-describedby`, `aria-invalid`,
+ * `aria-errormessage`, `aria-details`, `aria-required`), `autoFocus`, `tabIndex`, the focus and key
+ * handlers and the text-entry attributes (`inputMode`, `enterKeyHint`, `autoCapitalize`,
+ * `autoCorrect`, `spellCheck`) go to the `<input>`; everything else stays on the outer label.
+ */
+export declare interface ColorPickerHexFieldProps extends React_2.HTMLAttributes<HTMLElement> {
+    /** Ref to the hex `<input>`. */
+    controlRef?: React_2.Ref<HTMLInputElement>;
+    /** Ref to the field's outer element: the label around the caption, the input and the error. */
+    ref?: React_2.Ref<HTMLLabelElement>;
+}
+
+/**
+ * Texts of the ColorPicker's own parts and of the color parts bound to it, for localisation.
+ * Every key is optional; missing keys use the English default.
  */
 export declare interface ColorPickerLabels {
     /** Visible caption above the hex field.
@@ -1116,10 +1485,41 @@ export declare interface ColorPickerLabels {
      * @default 'Preset colors'
      */
     presets?: string;
-    /** Visible label and accessible name of the opacity slider.
+    /** Visible label of the opacity row and accessible name of the opacity slider (a bound
+     * `AlphaSlider`).
      * @default 'Opacity'
      */
     opacity?: string;
+    /** Accessible name of a bound `ColorArea`'s group.
+     * @default 'Saturation and brightness'
+     */
+    area?: string;
+    /** Name of a bound area's saturation slider and of a bound `channel="saturation"` slider.
+     * @default 'Saturation'
+     */
+    saturation?: string;
+    /** Name of a bound area's brightness slider and of a bound `channel="value"` slider.
+     * @default 'Brightness'
+     */
+    brightness?: string;
+    /** Role description of a bound area's two sliders.
+     * @default '2D slider'
+     */
+    roleDescription?: string;
+    /** Name of a bound hue slider.
+     * @default 'Hue'
+     */
+    hue?: string;
+    /** Name of a bound `AlphaSlider` with `transparency`.
+     * @default 'Transparency'
+     */
+    transparency?: string;
+    /** Names the color at the end of the bound parts' value texts; return `''` to leave it out.
+     * @default an English namer ("dark blue")
+     */
+    colorName?: (color: HsvColor) => string;
+    /** Replaces a whole value text of a bound part, for languages whose order differs. */
+    valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value' | 'alpha') => string;
 }
 
 /** A named preset color. */
@@ -1134,6 +1534,26 @@ export declare interface ColorPickerPreset {
     label: string;
 }
 
+/**
+ * A swatch of the picker's current color (decorative, `aria-hidden`); it keeps its color in forced
+ * colors and follows the picker's `shape`. Must be inside a ColorPicker. Also exported as
+ * `ColorPickerPreview`.
+ */
+export declare const ColorPickerPreview: {
+    ({ className, style, ref, ...rest }: ColorPickerPreviewProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** ColorPicker.Preview: `root` on the preview swatch. */
+export declare const colorPickerPreviewClassNames: {
+    readonly root: "wave-color-picker-preview";
+};
+
+/** Properties for the ColorPickerPreview sub-component. */
+export declare interface ColorPickerPreviewProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /** Properties for the ColorPicker component. */
 export declare interface ColorPickerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     /**
@@ -1164,16 +1584,34 @@ export declare interface ColorPickerProps extends Omit<React_2.HTMLAttributes<HT
      * skipped (development warning). Picking a preset keeps the current opacity, so a preset's alpha
      * digits are ignored. With an alpha below `f`/`ff` (`#rgba`, `#rrggbbaa`) there is a development
      * warning, and a string preset is announced by the `#rrggbb` color it applies; an opaque alpha
-     * (`#rgbf`, `#rrggbbff`) changes nothing, and the string stays the name as written.
+     * (`#rgbf`, `#rrggbbff`) changes nothing, and the string stays the name as written. With
+     * `children`, the presets feed only `ColorPicker.Swatches`.
      * @default Blue, Red, Green, Yellow, Purple, Teal, Pink and Black (Fluent brand colors)
      */
     presets?: ReadonlyArray<string | ColorPickerPreset>;
-    /** Whether to show the opacity slider. The opacity is the alpha byte of `value`.
+    /**
+     * Whether the default layout shows the opacity row: the caption, an alpha slider (0–100 %,
+     * named by `labels.opacity`) and the percentage. The opacity is the alpha byte of `value`. Does
+     * nothing with `children`.
      * @default false
      */
     showOpacity?: boolean;
-    /** Texts of the picker's own parts (hex field, error, presets, opacity), for localisation. */
+    /** Texts of the picker's own parts and of the color parts bound to it, for localisation. */
     labels?: ColorPickerLabels;
+    /**
+     * `'square'` removes the corner radius of the preview and of the area and the rails of the
+     * color parts bound to it, including those of the default layout.
+     * @default 'rounded'
+     */
+    shape?: ColorPickerShape;
+    /**
+     * Your own layout: `ColorArea`, `ColorSlider` and `AlphaSlider` (bound to the picker while they
+     * have neither `value` nor `defaultValue`) and the parts `ColorPicker.HexField`,
+     * `ColorPicker.Swatches` and `ColorPicker.Preview`. Without children the picker renders its
+     * default layout. With children, `showOpacity` does nothing and `presets` feed only
+     * `ColorPicker.Swatches`.
+     */
+    children?: React_2.ReactNode;
     /** Form field name. With a name, the current color is submitted with the form. */
     name?: string;
     /**
@@ -1188,6 +1626,131 @@ export declare interface ColorPickerProps extends Omit<React_2.HTMLAttributes<HT
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** The shape of ColorPicker and its color parts (a subset of `Shape`). */
+export declare type ColorPickerShape = Extract<Shape, 'rounded' | 'square'>;
+
+/**
+ * The picker's `presets` as swatches (a SwatchPicker named by `labels.presets`, small and rounded
+ * unless you pass `size` or `shape`). Picking one keeps the opacity. Renders nothing without
+ * presets. Must be inside a ColorPicker. Also exported as `ColorPickerSwatches`.
+ */
+export declare const ColorPickerSwatches: {
+    ({ className, "aria-label": ariaLabel, size, shape, ...rest }: ColorPickerSwatchesProps): React_2.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * ColorPicker.Swatches (also carries SwatchPicker's root): `root` on the SwatchPicker it renders;
+ * its swatches keep SwatchPicker's own `swatch` class.
+ */
+export declare const colorPickerSwatchesClassNames: {
+    readonly root: "wave-color-picker-swatches";
+};
+
+/** Properties for the ColorPickerSwatches sub-component: the picker's `presets` as a SwatchPicker. */
+export declare type ColorPickerSwatchesProps = Omit<SwatchPickerProps, 'items' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'name' | 'form' | 'required'>;
+
+/**
+ * A slider for one channel of an HSV color: hue (the default), saturation or brightness
+ * (`channel="value"`), horizontal (mirrored in right-to-left layouts) or vertical (bottom to top).
+ * The arrow keys move by 1 (hue in degrees, the others in percent), Shift with an arrow and Page
+ * Up or Page Down by 10, Home and End to the ends. It is named by `aria-label`, else the
+ * surrounding Field's label, else "Hue", "Saturation" or "Brightness"; a hue slider's value text
+ * names the color ("210°, blue"). Inside a ColorPicker, leave `value` and `defaultValue` out and
+ * it binds to the picker. Fluent's `ColorSlider`, with `value`/`onValueChange` for its
+ * `color`/`onChange` and `orientation` for its `vertical`.
+ *
+ * @example
+ * <ColorSlider value={color} onValueChange={setColor} />
+ */
+export declare const ColorSlider: {
+    ({ channel, orientation, value, defaultValue, onValueChange, shape, labels, disabled, name, form, required, controlRef, className, style, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, autoFocus, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, ref, ...rest }: ColorSliderProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** ColorSlider: `root` on the slider element; `rail` on the gradient rail; `thumb` on the thumb. */
+export declare const colorSliderClassNames: {
+    readonly root: "wave-color-slider";
+    readonly rail: "wave-color-slider__rail";
+    readonly thumb: "wave-color-slider__thumb";
+};
+
+/** Texts of a ColorSlider, for localisation. Every key is optional. */
+export declare interface ColorSliderLabels {
+    /** Name of a hue slider.
+     * @default 'Hue'
+     */
+    hue?: string;
+    /** Name of a `channel="saturation"` slider.
+     * @default 'Saturation'
+     */
+    saturation?: string;
+    /** Name of a `channel="value"` slider.
+     * @default 'Brightness'
+     */
+    brightness?: string;
+    /** Names the color at the end of a hue slider's value text; return `''` to leave it out.
+     * @default an English namer ("blue")
+     */
+    colorName?: (color: HsvColor) => string;
+    /** Replaces the value text, for languages whose order differs. */
+    valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value') => string;
+}
+
+/** Properties for the ColorSlider component. */
+export declare interface ColorSliderProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /** The channel the slider edits.
+     * @default 'hue'
+     */
+    channel?: 'hue' | 'saturation' | 'value';
+    /** `'vertical'` draws the rail from bottom to top (Fluent's `vertical`).
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * The color (Fluent's `color`). Inside a ColorPicker, leave `value` and `defaultValue` out to
+     * bind the slider to the picker.
+     */
+    value?: HsvColor;
+    /**
+     * Initial color for uncontrolled usage (also what a form reset restores).
+     * @default the brand blue, `{ h: 208, s: 0.92, v: 0.74 }` (`#0f6cbd`)
+     */
+    defaultValue?: HsvColor;
+    /**
+     * Called with the new color on every step (a key, the pointer or assistive technology) that
+     * changes it (Fluent's `onChange`). A bound slider calls it too.
+     */
+    onValueChange?: (value: HsvColor) => void;
+    /**
+     * `'square'` removes the corner radius of the rail (the thumb stays round). Bound to a
+     * ColorPicker, the picker's shape unless you pass one.
+     * @default 'rounded'
+     */
+    shape?: ColorPickerShape;
+    /** Texts of the slider; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */
+    labels?: ColorSliderLabels;
+    /**
+     * Unavailable: the input is natively disabled and the slider dimmed. A bound slider is also
+     * disabled while the picker's value is not a hex color.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Form field name: the color is submitted as hex (`hsvToHex`). Ignored while bound to a ColorPicker. */
+    name?: string;
+    /** Id of the form the slider belongs to, when it is rendered outside that form. */
+    form?: string;
+    /**
+     * Marks the hidden form input required (a color is always set, so it never blocks). A consumer
+     * `aria-required` does the same: a slider supports neither, so neither is set on it.
+     */
+    required?: boolean;
+    /** Ref to the `<input type="range">`. */
+    controlRef?: React_2.Ref<HTMLInputElement>;
+    /** Ref to the root element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /**
  * An editable combobox: a text input with a filterable listbox of `Option`s (APG combobox with
  * list autocomplete). Typing filters the options; ArrowDown/ArrowUp move the highlight
@@ -1220,6 +1783,23 @@ export declare const Combobox: {
     OptionGroup: React_2.FC<OptionGroupProps>;
 };
 
+/**
+ * Combobox: `root` on the outer element; `input` on the `role="combobox"` input; `clearButton` on
+ * the clear button; `expandButton` on the expand button and `expandIcon` on its glyph; `listbox`
+ * on the `role="listbox"` list; `surface` on its portaled popup; `emptyMessage` on the
+ * "No matches" row.
+ */
+export declare const comboboxClassNames: {
+    readonly root: "wave-combobox";
+    readonly input: "wave-combobox__input";
+    readonly clearButton: "wave-combobox__clear-button";
+    readonly expandButton: "wave-combobox__expand-button";
+    readonly expandIcon: "wave-combobox__expand-icon";
+    readonly listbox: "wave-combobox__listbox";
+    readonly surface: "wave-combobox__surface";
+    readonly emptyMessage: "wave-combobox__empty-message";
+};
+
 /**
  * The Combobox's built-in texts, for localization. Each member is optional and falls back to its
  * English default.
@@ -1397,6 +1977,19 @@ export declare function composeEventHandlers<E extends {
  */
 export declare const CompoundButton: PolymorphicComponent<'button', CompoundButtonOwnProps>;
 
+/**
+ * CompoundButton (also carries Button's root and icon classes): `root` on the rendered element;
+ * `icon` on the icon box (Button's icon span in the icon-only layout); `contentContainer` on the
+ * text column; `primaryText` on the main line; `secondaryText` on the second line.
+ */
+export declare const compoundButtonClassNames: {
+    readonly root: "wave-compound-button";
+    readonly icon: "wave-compound-button__icon";
+    readonly contentContainer: "wave-compound-button__content-container";
+    readonly primaryText: "wave-compound-button__primary-text";
+    readonly secondaryText: "wave-compound-button__secondary-text";
+};
+
 /**
  * The CompoundButton's own props (the XOwnProps rule of `PolymorphicProps`: component-specific
  * props only). Every other prop comes from the rendered element (`as`).
@@ -1475,6 +2068,14 @@ export declare const CounterBadge: {
     displayName: string;
 };
 
+/**
+ * CounterBadge (also carries Badge's root): `root` on the badge span (a count it does not show
+ * renders no element).
+ */
+export declare const counterBadgeClassNames: {
+    readonly root: "wave-counter-badge";
+};
+
 /** Properties for the CounterBadge component. */
 export declare interface CounterBadgeProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     /**
@@ -1516,6 +2117,25 @@ export declare interface CounterBadgeProps extends React_2.HTMLAttributes<HTMLSp
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/**
+ * Creates a handle. It touches no DOM, so a module-scope handle is safe during server rendering;
+ * a dispatch on the server does nothing (it returns the id), so no toast is carried from one
+ * request to the next.
+ *
+ * - `dispatchToast` returns the id at once: `toastId`, or one the handle generates.
+ * - Before a Toaster binds the handle, dispatches wait in its queue, in dispatch order (a dispatch
+ *   with the id of a waiting one replaces it in place); `dismissToast` removes a waiting toast and
+ *   `dismissAllToasts` empties the queue. The Toaster that binds takes the queue.
+ *
+ * @example
+ * export const appToaster = createToaster();
+ * // <Toaster toaster={appToaster}><App /></Toaster>
+ * queryClient.getMutationCache().config.onError = () => {
+ *   appToaster.dispatchToast({ status: 'error', title: 'Could not save' });
+ * };
+ */
+export declare function createToaster(): ToasterHandle;
+
 /**
  * An interactive data table (`role="grid"`) following the APG Grid pattern: one tab stop,
  * arrow-key navigation between cells (Home/End, Ctrl+Home/Ctrl+End, PageUp/PageDown; Up/Down keep
@@ -1618,6 +2238,11 @@ export declare const DataGridBody: {
     displayName: string;
 };
 
+/** DataGrid.Body: `root` on the `<tbody>`. */
+export declare const dataGridBodyClassNames: {
+    readonly root: "wave-data-grid-body";
+};
+
 /** Properties for the DataGridBody sub-component. */
 export declare interface DataGridBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
     /** DataGrid row elements. */
@@ -1632,6 +2257,11 @@ export declare const DataGridCell: {
     displayName: string;
 };
 
+/** DataGrid.Cell: `root` on the `role="gridcell"` cell. */
+export declare const dataGridCellClassNames: {
+    readonly root: "wave-data-grid-cell";
+};
+
 /** Properties for the DataGridCell sub-component. */
 export declare interface DataGridCellProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
     /** Cell content. */
@@ -1640,6 +2270,12 @@ export declare interface DataGridCellProps extends React_2.TdHTMLAttributes<HTML
     ref?: React_2.Ref<HTMLTableCellElement>;
 }
 
+/** DataGrid: `root` on the grid element (`role="grid"`); `container` on the wrapper around it. */
+export declare const dataGridClassNames: {
+    readonly root: "wave-data-grid";
+    readonly container: "wave-data-grid__container";
+};
+
 /** Defines a column in the DataGrid. */
 export declare interface DataGridColumn {
     /** Unique identifier for the column (the header cell's `columnId`). */
@@ -1687,6 +2323,16 @@ export declare const DataGridHeaderCell: {
     displayName: string;
 };
 
+/**
+ * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its
+ * direction `<svg>`.
+ */
+export declare const dataGridHeaderCellClassNames: {
+    readonly root: "wave-data-grid-header-cell";
+    readonly button: "wave-data-grid-header-cell__button";
+    readonly sortIcon: "wave-data-grid-header-cell__sort-icon";
+};
+
 /** Properties for the DataGridHeaderCell sub-component. */
 export declare interface DataGridHeaderCellProps extends React_2.ThHTMLAttributes<HTMLTableCellElement> {
     /** Column ID used for sort tracking. Required for `sortable`. */
@@ -1703,6 +2349,16 @@ export declare interface DataGridHeaderCellProps extends React_2.ThHTMLAttribute
     ref?: React_2.Ref<HTMLTableCellElement>;
 }
 
+/**
+ * DataGrid.Header: `root` on the `<thead>`; `selectionCell` on the selection column's cell of
+ * each header row; `selectAllCheckbox` on its checkbox.
+ */
+export declare const dataGridHeaderClassNames: {
+    readonly root: "wave-data-grid-header";
+    readonly selectionCell: "wave-data-grid-header__selection-cell";
+    readonly selectAllCheckbox: "wave-data-grid-header__select-all-checkbox";
+};
+
 /** Properties for the DataGridHeader sub-component. */
 export declare interface DataGridHeaderProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
     /**
@@ -1782,6 +2438,16 @@ export declare const DataGridRow: {
     displayName: string;
 };
 
+/**
+ * DataGrid.Row: `root` on the `<tr>`; `selectionCell` on its selection cell; `selectionControl`
+ * on the checkbox or radio in it.
+ */
+export declare const dataGridRowClassNames: {
+    readonly root: "wave-data-grid-row";
+    readonly selectionCell: "wave-data-grid-row__selection-cell";
+    readonly selectionControl: "wave-data-grid-row__selection-control";
+};
+
 /** Properties for the DataGridRow sub-component. */
 export declare interface DataGridRowProps extends React_2.HTMLAttributes<HTMLTableRowElement> {
     /**
@@ -1868,6 +2534,30 @@ export declare const DatePicker: {
     displayName: string;
 };
 
+/**
+ * DatePicker: `root` on the outer element; `input` on the text input; `clearButton` on the clear
+ * button; `openCalendarButton` on the calendar button; `errorMessage` on the `role="alert"`
+ * message; `surface` on the portaled `role="dialog"` calendar; `header` on its month row;
+ * `previousMonthButton` and `nextMonthButton` on the month buttons; `heading` on the month
+ * `<h2>`; `grid` on the calendar's `role="grid"` element; `weekday` on each weekday header cell;
+ * `day` on each day button.
+ */
+export declare const datePickerClassNames: {
+    readonly root: "wave-date-picker";
+    readonly input: "wave-date-picker__input";
+    readonly clearButton: "wave-date-picker__clear-button";
+    readonly openCalendarButton: "wave-date-picker__open-calendar-button";
+    readonly errorMessage: "wave-date-picker__error-message";
+    readonly surface: "wave-date-picker__surface";
+    readonly header: "wave-date-picker__header";
+    readonly previousMonthButton: "wave-date-picker__previous-month-button";
+    readonly heading: "wave-date-picker__heading";
+    readonly nextMonthButton: "wave-date-picker__next-month-button";
+    readonly grid: "wave-date-picker__grid";
+    readonly weekday: "wave-date-picker__weekday";
+    readonly day: "wave-date-picker__day";
+};
+
 /** Why typed text was not accepted (see {@link DatePickerProps.onInvalidInput}). */
 export declare type DatePickerInvalidReason = 'unparseable' | 'out-of-range' | 'disabled';
 
@@ -2135,7 +2825,10 @@ export declare interface DialogCloseRenderProps extends React_2.HTMLAttributes<H
 /**
  * The dialog surface, rendered in a portal (inheriting the WaveProvider theme) while the dialog is
  * open: backdrop, title, Close button and a scrolling body. It takes the full width up to its
- * `size` and never exceeds the viewport (the body scrolls). It is `role="dialog"`, or
+ * `size` and never exceeds the viewport (the body scrolls, also sideways for content wider than
+ * the dialog). Its 1rem gap to the viewport edges is its own margin, so a margin in `className`
+ * replaces the gap: with the width and height caps lifted as well and its height set to the
+ * viewport's, it fills the viewport (a full-screen dialog). It is `role="dialog"`, or
  * `role="alertdialog"` when the Dialog has `modalType="alert"` (a `role` you pass wins), and
  * carries `data-modal-type` with the resolved type.
  */
@@ -2144,6 +2837,19 @@ export declare const DialogContent: {
     displayName: string;
 };
 
+/**
+ * Dialog.Content: `root` on the surface (`role="dialog"` or `"alertdialog"`); `backdrop` on the
+ * backdrop around it; `closeButton` on the built-in Close button (which also carries Button's
+ * root); `body` on the scrolling body. The heading of its `title` prop carries Dialog.Title's
+ * class.
+ */
+export declare const dialogContentClassNames: {
+    readonly root: "wave-dialog-content";
+    readonly backdrop: "wave-dialog-content__backdrop";
+    readonly closeButton: "wave-dialog-content__close-button";
+    readonly body: "wave-dialog-content__body";
+};
+
 /** Properties for the DialogContent sub-component. */
 export declare interface DialogContentProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
@@ -2184,6 +2890,11 @@ export declare const DialogFooter: {
     displayName: string;
 };
 
+/** Dialog.Footer: `root` on the footer element. */
+export declare const dialogFooterClassNames: {
+    readonly root: "wave-dialog-footer";
+};
+
 /** Properties for the DialogFooter sub-component. */
 export declare interface DialogFooterProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Footer content, typically action buttons (wrap closing buttons in `Dialog.Close`). */
@@ -2263,6 +2974,11 @@ export declare const DialogTitle: {
     displayName: string;
 };
 
+/** Dialog.Title: `root` on the `<h2>`. */
+export declare const dialogTitleClassNames: {
+    readonly root: "wave-dialog-title";
+};
+
 /** Properties for the DialogTitle sub-component. */
 export declare interface DialogTitleProps extends React_2.HTMLAttributes<HTMLHeadingElement> {
     /** The title; any content. */
@@ -2335,6 +3051,17 @@ export declare interface DialogTriggerRenderProps extends React_2.HTMLAttributes
  */
 export declare const Divider: PolymorphicComponent<'hr', DividerOwnProps>;
 
+/**
+ * Divider: `root` on the `<hr>` of a plain horizontal divider, else on the `role="separator"`
+ * element (or your `as`); `line` on each of the two line elements of a labelled divider; `label`
+ * on its label span.
+ */
+export declare const dividerClassNames: {
+    readonly root: "wave-divider";
+    readonly line: "wave-divider__line";
+    readonly label: "wave-divider__label";
+};
+
 /**
  * The Divider's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props
  * only). Every other prop comes from the rendered element (`as`).
@@ -2404,6 +3131,20 @@ export declare const Drawer: {
     };
 };
 
+/**
+ * Drawer: `root` on the portaled panel (`role="dialog"`, while open); `backdrop` on the backdrop;
+ * `header` on the header row; `closeButton` on the Close button (which also carries Button's
+ * root); `body` on the scrolling body. The heading of its `title` prop carries Drawer.Title's
+ * class.
+ */
+export declare const drawerClassNames: {
+    readonly root: "wave-drawer";
+    readonly backdrop: "wave-drawer__backdrop";
+    readonly header: "wave-drawer__header";
+    readonly closeButton: "wave-drawer__close-button";
+    readonly body: "wave-drawer__body";
+};
+
 /**
  * Closes the drawer: composes a click handler onto its single child (its own `onClick` runs first;
  * calling `preventDefault()` there keeps the drawer open), or passes it to a render-prop child.
@@ -2523,6 +3264,11 @@ export declare const DrawerTitle: {
     displayName: string;
 };
 
+/** Drawer.Title: `root` on the `<h2>`. */
+export declare const drawerTitleClassNames: {
+    readonly root: "wave-drawer-title";
+};
+
 /** Properties for the DrawerTitle sub-component. */
 export declare interface DrawerTitleProps extends React_2.HTMLAttributes<HTMLHeadingElement> {
     /** The title; any content. */
@@ -2619,6 +3365,21 @@ export declare const Dropdown: {
     OptionGroup: React_2.FC<OptionGroupProps>;
 };
 
+/**
+ * Dropdown: `root` on the outer element; `button` on the `role="combobox"` button; `value` on the
+ * value or placeholder span; `expandIcon` on the chevron `<svg>`; `clearButton` on the clear
+ * button; `listbox` on the `role="listbox"` list; `surface` on its portaled popup.
+ */
+export declare const dropdownClassNames: {
+    readonly root: "wave-dropdown";
+    readonly button: "wave-dropdown__button";
+    readonly value: "wave-dropdown__value";
+    readonly expandIcon: "wave-dropdown__expand-icon";
+    readonly clearButton: "wave-dropdown__clear-button";
+    readonly listbox: "wave-dropdown__listbox";
+    readonly surface: "wave-dropdown__surface";
+};
+
 /**
  * The Dropdown's built-in texts, for localization. Each member is optional and falls back to its
  * English default.
@@ -2796,6 +3557,19 @@ export declare const Field: {
     displayName: string;
 };
 
+/**
+ * Field: `root` on the field element; `label` on the `<label>`; `required` on the asterisk;
+ * `validationMessage` on the message; `validationMessageIcon` on its icon; `hint` on the hint.
+ */
+export declare const fieldClassNames: {
+    readonly root: "wave-field";
+    readonly label: "wave-field__label";
+    readonly required: "wave-field__required";
+    readonly validationMessage: "wave-field__validation-message";
+    readonly validationMessageIcon: "wave-field__validation-message-icon";
+    readonly hint: "wave-field__hint";
+};
+
 /**
  * What a `Field` tells the controls inside it: the ids of its label, hint and validation message,
  * and its validation, invalid and required state. `Field` provides it; every library input reads
@@ -2985,6 +3759,11 @@ export declare interface FieldProps extends React_2.HTMLAttributes<HTMLDivElemen
  */
 export declare const Flex: PolymorphicComponent<'div', FlexOwnProps>;
 
+/** Flex: `root` on the rendered element. */
+export declare const flexClassNames: {
+    readonly root: "wave-flex";
+};
+
 /**
  * The Flex's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`).
@@ -3049,6 +3828,11 @@ export declare function getThemeClassName(theme: WaveTheme): string;
  */
 export declare const Grid: PolymorphicComponent<'div', GridOwnProps>;
 
+/** Grid: `root` on the rendered element. */
+export declare const gridClassNames: {
+    readonly root: "wave-grid";
+};
+
 /**
  * The Grid's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`).
@@ -3076,6 +3860,40 @@ export declare interface GridOwnProps {
  */
 export declare type GridProps<C extends React_2.ElementType = 'div'> = PolymorphicProps<C, GridOwnProps>;
 
+/**
+ * The HSV color of a hex string: `#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa` (surrounding whitespace
+ * ignored, any case). `a` is set only when the input has alpha digits. Returns `null` for anything
+ * else (named colors, `rgb()`, a missing `#`). `hsvToHex(hexToHsv(x))` gives `x` back in
+ * ColorPicker's normal form.
+ *
+ * @example hexToHsv('#ff000080') // { h: 0, s: 1, v: 1, a: 0.50196… }
+ */
+export declare function hexToHsv(hex: string): HsvColor | null;
+
+/**
+ * A color in HSV (Fluent's `HsvColor`): `h` is the hue in degrees (0–360), `s` the saturation, `v`
+ * the brightness (value) and `a` the opacity, each from 0 to 1. Without `a` the color is opaque.
+ */
+export declare interface HsvColor {
+    /** Hue in degrees, 0–360. */
+    h: number;
+    /** Saturation, 0–1. */
+    s: number;
+    /** Brightness (value), 0–1. */
+    v: number;
+    /** Opacity, 0–1; left out means opaque. */
+    a?: number;
+}
+
+/**
+ * The hex string of an HSV color: lowercase `#rrggbb`, or `#rrggbbaa` when `a` is below 1
+ * (ColorPicker's value format). The hue wraps into [0, 360); saturation, brightness and alpha are
+ * clamped to [0, 1]; a channel that is not a number reads as 0 (alpha: as left out, so opaque).
+ *
+ * @example hsvToHex({ h: 208, s: 0.92, v: 0.74 }) // '#0f6cbd'
+ */
+export declare function hsvToHex(color: HsvColor): string;
+
 /** Where an icon renders relative to a label: the inline start (`before`) or end (`after`). */
 export declare type IconPosition = 'before' | 'after';
 
@@ -3094,6 +3912,11 @@ declare const Image_2: {
 };
 export { Image_2 as Image }
 
+/** Image: `root` on the `<img>`. */
+export declare const imageClassNames: {
+    readonly root: "wave-image";
+};
+
 /**
  * How an image fits its box (the `width`/`height` attributes, or a size set with `className`):
  *
@@ -3172,6 +3995,13 @@ export declare const InfoLabel: {
     displayName: string;
 };
 
+/** InfoLabel: `root` on the outer span; `infoButton` on the info button; `info` on its popup. */
+export declare const infoLabelClassNames: {
+    readonly root: "wave-info-label";
+    readonly infoButton: "wave-info-label__info-button";
+    readonly info: "wave-info-label__info";
+};
+
 /** Properties for the InfoLabel component. */
 export declare interface InfoLabelProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     /** Primary label text to display. */
@@ -3210,6 +4040,20 @@ export declare const Input: {
     displayName: string;
 };
 
+/**
+ * Input: `root` on the `<input>`, or, with `contentBefore` or `contentAfter` content, on the
+ * wrapper that draws the field; `input` on the `<input>` (also when it is the root);
+ * `contentBefore` and `contentAfter` on the slot spans; `errorMessage` on the `role="alert"`
+ * message after the control.
+ */
+export declare const inputClassNames: {
+    readonly root: "wave-input";
+    readonly input: "wave-input__input";
+    readonly contentBefore: "wave-input__content-before";
+    readonly contentAfter: "wave-input__content-after";
+    readonly errorMessage: "wave-input__error-message";
+};
+
 /**
  * Props of the error message element that {@link Input}, `Select` and `Textarea` render after the
  * control for a string `error` (`id`, `className`, `role`, data attributes, …).
@@ -3272,6 +4116,12 @@ export declare const Label: {
     displayName: string;
 };
 
+/** Label: `root` on the `<label>`; `required` on the asterisk. */
+export declare const labelClassNames: {
+    readonly root: "wave-label";
+    readonly required: "wave-label__required";
+};
+
 /**
  * Where a label renders relative to its control or indicator. Components accept a subset,
  * derived with `Extract<LabelPosition, …>` (never `Exclude<>`, so a later value does not widen
@@ -3330,6 +4180,11 @@ export declare const Link: PolymorphicComponent<'a', LinkOwnProps>;
  */
 export declare type LinkAppearance = 'inline' | 'standalone' | 'subtle';
 
+/** Link: `root` on the rendered element (`<a>`, or your `as`). */
+export declare const linkClassNames: {
+    readonly root: "wave-link";
+};
+
 /**
  * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`, default `'a'`).
@@ -3421,6 +4276,11 @@ export declare const List: {
     };
 };
 
+/** List: `root` on the `<ul>` (the `role="grid"` element of a selectable list with actions). */
+export declare const listClassNames: {
+    readonly root: "wave-list";
+};
+
 /**
  * An item of a {@link List} (also available as `List.Item`). Renders an `<li>` (`listitem`, or
  * `option` in a selectable list), or a `<div role="row">` in a selectable list with actions. In a
@@ -3435,6 +4295,16 @@ export declare const ListItem: {
     displayName: string;
 };
 
+/**
+ * List.Item: `root` on the `<li>` (the `role="row"` element of a list with actions); `content` on
+ * the content element; `action` on the action cell.
+ */
+export declare const listItemClassNames: {
+    readonly root: "wave-list-item";
+    readonly content: "wave-list-item__content";
+    readonly action: "wave-list-item__action";
+};
+
 /** Properties for the ListItem component. */
 export declare interface ListItemProps extends React_2.HTMLAttributes<HTMLLIElement> {
     /**
@@ -3596,7 +4466,7 @@ export declare const Menu: {
     };
     ItemLink: PolymorphicComponent<"a", MenuItemLinkOwnProps>;
     Group: {
-        ({ children, ref, ...rest }: MenuGroupProps): JSX.Element;
+        ({ children, className, ref, ...rest }: MenuGroupProps): JSX.Element;
         displayName: string;
     };
     GroupHeader: {
@@ -3631,6 +4501,17 @@ export declare const MenuButton: {
     displayName: string;
 };
 
+/**
+ * MenuButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on
+ * Button's icon span; `menuIcon` on the default chevron `<svg>`, or on the span of your
+ * `menuIcon`.
+ */
+export declare const menuButtonClassNames: {
+    readonly root: "wave-menu-button";
+    readonly icon: "wave-menu-button__icon";
+    readonly menuIcon: "wave-menu-button__menu-icon";
+};
+
 /** Properties for the MenuButton component. */
 export declare interface MenuButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style variant.
@@ -3676,6 +4557,11 @@ export declare interface MenuButtonProps extends React_2.ButtonHTMLAttributes<HT
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/** Menu: `root` on the `role="menu"` element of a static menu (a popup menu has Menu.Popover's). */
+export declare const menuClassNames: {
+    readonly root: "wave-menu";
+};
+
 /**
  * A separator between groups of menu items (`role="separator"`).
  *
@@ -3686,6 +4572,11 @@ export declare const MenuDivider: {
     displayName: string;
 };
 
+/** Menu.Divider: `root` on the `role="separator"` element. */
+export declare const menuDividerClassNames: {
+    readonly root: "wave-menu-divider";
+};
+
 /** Properties for the MenuDivider sub-component. */
 export declare interface MenuDividerProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Ref to the `role="separator"` element. */
@@ -3705,10 +4596,15 @@ export declare interface MenuDividerProps extends React_2.HTMLAttributes<HTMLDiv
  * Also exported as `MenuGroup` (import the flat name from React Server Components).
  */
 export declare const MenuGroup: {
-    ({ children, ref, ...rest }: MenuGroupProps): React_2.JSX.Element;
+    ({ children, className, ref, ...rest }: MenuGroupProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/** Menu.Group: `root` on the `role="group"` element. */
+export declare const menuGroupClassNames: {
+    readonly root: "wave-menu-group";
+};
+
 /**
  * The visible heading of a `Menu.Group`. It is not a menu item: arrow keys and typeahead skip it.
  * Its text lines up with the item labels (it keeps the menu's check and icon columns). It labels
@@ -3723,6 +4619,11 @@ export declare const MenuGroupHeader: {
     displayName: string;
 };
 
+/** Menu.GroupHeader: `root` on the header element. */
+export declare const menuGroupHeaderClassNames: {
+    readonly root: "wave-menu-group-header";
+};
+
 /** Properties for the MenuGroupHeader sub-component. */
 export declare interface MenuGroupHeaderProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Ref to the header element. */
@@ -3781,6 +4682,19 @@ export declare const MenuItemCheckbox: {
     displayName: string;
 };
 
+/**
+ * Menu.ItemCheckbox (also carries Menu.Item's root and matching part classes): `root` on the
+ * `role="menuitemcheckbox"` element; `checkmark`, `icon`, `content` and `shortcut` as on
+ * Menu.Item.
+ */
+export declare const menuItemCheckboxClassNames: {
+    readonly root: "wave-menu-item-checkbox";
+    readonly checkmark: "wave-menu-item-checkbox__checkmark";
+    readonly icon: "wave-menu-item-checkbox__icon";
+    readonly content: "wave-menu-item-checkbox__content";
+    readonly shortcut: "wave-menu-item-checkbox__shortcut";
+};
+
 /** Properties for the MenuItemCheckbox sub-component. */
 export declare interface MenuItemCheckboxProps extends MenuItemProps, MenuItemSelectableProps {
     /**
@@ -3791,6 +4705,20 @@ export declare interface MenuItemCheckboxProps extends MenuItemProps, MenuItemSe
     checkmark?: Slot<'span'>;
 }
 
+/**
+ * Menu.Item: `root` on the `role="menuitem"` element; `checkmark` on the check column; `icon` on
+ * the icon span; `content` on the label span; `shortcut` on the shortcut span;
+ * `submenuIndicator` on the chevron `<svg>` of a submenu trigger.
+ */
+export declare const menuItemClassNames: {
+    readonly root: "wave-menu-item";
+    readonly checkmark: "wave-menu-item__checkmark";
+    readonly icon: "wave-menu-item__icon";
+    readonly content: "wave-menu-item__content";
+    readonly shortcut: "wave-menu-item__shortcut";
+    readonly submenuIndicator: "wave-menu-item__submenu-indicator";
+};
+
 /**
  * A menu item that navigates (`role="menuitem"` on the link element). Enter follows the link the
  * way the browser does (Shift+Enter, Ctrl+Enter and Cmd+Enter open a new window or tab), Space
@@ -3811,6 +4739,17 @@ export declare interface MenuItemCheckboxProps extends MenuItemProps, MenuItemSe
  */
 export declare const MenuItemLink: PolymorphicComponent<'a', MenuItemLinkOwnProps>;
 
+/**
+ * Menu.ItemLink (also carries Menu.Item's root and matching part classes): `root` on the
+ * `role="menuitem"` link (`<a>`, or your `as`); `icon`, `content` and `shortcut` as on Menu.Item.
+ */
+export declare const menuItemLinkClassNames: {
+    readonly root: "wave-menu-item-link";
+    readonly icon: "wave-menu-item-link__icon";
+    readonly content: "wave-menu-item-link__content";
+    readonly shortcut: "wave-menu-item-link__shortcut";
+};
+
 /** The MenuItemLink's own props (the XOwnProps rule: component-specific props only). */
 export declare interface MenuItemLinkOwnProps {
     /** Icon before the label (decorative); the rules of `Menu.Item.icon`. */
@@ -3884,6 +4823,18 @@ export declare const MenuItemRadio: {
     displayName: string;
 };
 
+/**
+ * Menu.ItemRadio (also carries Menu.Item's root and matching part classes): `root` on the
+ * `role="menuitemradio"` element; `checkmark`, `icon`, `content` and `shortcut` as on Menu.Item.
+ */
+export declare const menuItemRadioClassNames: {
+    readonly root: "wave-menu-item-radio";
+    readonly checkmark: "wave-menu-item-radio__checkmark";
+    readonly icon: "wave-menu-item-radio__icon";
+    readonly content: "wave-menu-item-radio__content";
+    readonly shortcut: "wave-menu-item-radio__shortcut";
+};
+
 /** Properties for the MenuItemRadio sub-component. */
 export declare interface MenuItemRadioProps extends MenuItemProps, MenuItemSelectableProps {
     /** As `MenuItemCheckbox.checkmark`. */
@@ -3912,6 +4863,20 @@ export declare const MenuItemSwitch: {
     displayName: string;
 };
 
+/**
+ * Menu.ItemSwitch (also carries Menu.Item's root, `icon`, `content` and `shortcut` classes):
+ * `root` on the `role="menuitemcheckbox"` element; `icon`, `content` and `shortcut` as on
+ * Menu.Item; `track` on the switch; `thumb` on its thumb.
+ */
+export declare const menuItemSwitchClassNames: {
+    readonly root: "wave-menu-item-switch";
+    readonly icon: "wave-menu-item-switch__icon";
+    readonly content: "wave-menu-item-switch__content";
+    readonly shortcut: "wave-menu-item-switch__shortcut";
+    readonly track: "wave-menu-item-switch__track";
+    readonly thumb: "wave-menu-item-switch__thumb";
+};
+
 /** Properties for the MenuItemSwitch sub-component. */
 export declare interface MenuItemSwitchProps extends MenuItemProps, MenuItemSelectableProps {
 }
@@ -3959,6 +4924,11 @@ export declare const MenuPopover: {
     displayName: string;
 };
 
+/** Menu.Popover: `root` on the portaled `role="menu"` element. */
+export declare const menuPopoverClassNames: {
+    readonly root: "wave-menu-popover";
+};
+
 /** Properties for the MenuPopover sub-component. */
 export declare interface MenuPopoverProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'id'> {
     /**
@@ -4111,6 +5081,11 @@ export declare const MenuSplitGroup: {
     displayName: string;
 };
 
+/** Menu.SplitGroup: `root` on the `role="group"` element. */
+export declare const menuSplitGroupClassNames: {
+    readonly root: "wave-menu-split-group";
+};
+
 /** Properties for the MenuSplitGroup sub-component. */
 export declare interface MenuSplitGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
@@ -4249,24 +5224,85 @@ export declare function mergeRefs<T>(...refs: Array<React_2.Ref<T> | undefined |
 
 /**
  * An inline message that tells the user about the state of a page or task: a status icon, a
- * visually hidden status label ("Warning:"), the message and an optional dismiss button.
+ * visually hidden status label ("Warning:"), an optional title, the message, optional actions and
+ * an optional dismiss button.
  *
  * - The status sets the tint, the logical start border, the icon and the role (`alert` for
  *   `warning`/`error`, `status` otherwise). Screen readers hear the severity through `statusLabel`.
+ * - Parts, as direct children: `MessageBar.Title` (a semibold lead-in, read first after the
+ *   severity) and `MessageBar.Actions` (buttons after the text on one row, or below it with
+ *   `layout="multiline"`). The built-in Dismiss button stays the bar's own.
+ * - With its default roles the bar is a live region and the title is read as the start of its
+ *   content; give the bar `role="region"` (a notice that stays on the page) and the title names it.
  * - The dismiss button is always the MessageBar's own `<button>` wired to `onDismiss`
  *   (`type="button"` unless a merged button slot sets its own `type`); the `dismiss` slot only
  *   replaces its content (see {@link MessageBarProps.dismiss}).
  *
+ * React Server Components cannot dot into a client module: import the flat names
+ * `MessageBarTitle` and `MessageBarActions` there; `MessageBar.Title` and `MessageBar.Actions`
+ * work in client files.
+ *
  * @example
  * <MessageBar status="warning" onDismiss={() => setVisible(false)}>
- *   Your subscription expires in 3 days.
+ *   <MessageBar.Title>Update available</MessageBar.Title>
+ *   A new version is ready to install.
+ *   <MessageBar.Actions>
+ *     <Button size="small">Update now</Button>
+ *   </MessageBar.Actions>
  * </MessageBar>
  */
 export declare const MessageBar: {
-    ({ status, statusLabel, onDismiss, icon, dismiss, children, className, ref, ...rest }: MessageBarProps): React_2.JSX.Element;
+    ({ status, statusLabel, onDismiss, icon, dismiss, layout, children, className, ref, ...rest }: MessageBarProps): React_2.JSX.Element;
+    displayName: string;
+} & {
+    Title: {
+        ({ id, className, children, ref, ...rest }: MessageBarTitleProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Actions: {
+        ({ className, children, ref, ...rest }: MessageBarActionsProps): React_2.JSX.Element;
+        displayName: string;
+    };
+};
+
+/**
+ * The bar's actions (Retry, Learn more): after the text on one row, on their own row under it in
+ * the multiline layout. Must be a direct child of MessageBar (a Fragment there counts, and so does
+ * a part written in a Server Component); anywhere else it renders where it is (development
+ * warning). Actions whose children render nothing are left out, so the bar keeps its look without
+ * actions. The actions have no role of their own: the bar is already the grouping.
+ *
+ * Also exported as `MessageBarActions` (import the flat name from React Server Components).
+ */
+export declare const MessageBarActions: {
+    ({ className, children, ref, ...rest }: MessageBarActionsProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/** MessageBar.Actions: `root` on the element that holds the actions. */
+export declare const messageBarActionsClassNames: {
+    readonly root: "wave-message-bar-actions";
+};
+
+/** Properties for the MessageBarActions sub-component. */
+export declare interface MessageBarActionsProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Ref to the element that holds the actions. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * MessageBar: `root` on the bar; `icon` on the status icon span; `body` on the text column (it
+ * holds `MessageBar.Title`); `dismissButton` on the Dismiss button; `dismissIcon` on the icon
+ * inside it (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).
+ */
+export declare const messageBarClassNames: {
+    readonly root: "wave-message-bar";
+    readonly icon: "wave-message-bar__icon";
+    readonly body: "wave-message-bar__body";
+    readonly dismissButton: "wave-message-bar__dismiss-button";
+    readonly dismissIcon: "wave-message-bar__dismiss-icon";
+};
+
 /** 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.
@@ -4288,7 +5324,8 @@ export declare interface MessageBarProps extends React_2.HTMLAttributes<HTMLDivE
     onDismiss?: () => void;
     /**
      * Custom status icon, rendered decoratively (`aria-hidden="true"`, a slot object can override
-     * it) in the status color. `null` renders no icon.
+     * it) in the status color. Only `undefined` keeps the default status icon; `null`, or anything that
+     * renders nothing (`false`, `''`), shows no icon.
      */
     icon?: Slot<'span'>;
     /**
@@ -4332,12 +5369,50 @@ export declare interface MessageBarProps extends React_2.HTMLAttributes<HTMLDivE
      * Pass icon content instead, e.g. `dismiss={<CloseIcon />}`.
      */
     dismiss?: Slot<'span'> | SlotObject<'button'>;
-    /** Message content to display. */
+    /**
+     * How the text and the actions share the bar. `'singleline'`: the actions sit on the text's row
+     * (the text wraps inside its column; it is never cut off). `'multiline'`: the actions get a row of
+     * their own under the text. `'auto'`: the actions stay on the text's row while the text fits on
+     * one line, measured after mount (the server renders one row), and move below it otherwise; a bar
+     * without `MessageBar.Actions` is `'multiline'`, the 0.7 look. The root renders the layout in use
+     * as `data-layout` (`singleline` or `multiline`). Fluent's `layout`.
+     * @default 'auto'
+     */
+    layout?: 'auto' | 'singleline' | 'multiline';
+    /**
+     * The message: body text, with the parts `MessageBar.Title` and `MessageBar.Actions` as direct
+     * children (see the component docs).
+     */
     children: React_2.ReactNode;
     /** Ref to the root `<div>`. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/**
+ * The bar's title, read right after the severity text. Names the bar when the bar has a non-live
+ * `role` (`region`, `group`). Must be a direct child of MessageBar (a Fragment there counts, and so
+ * does a title written in a Server Component); anywhere else it renders where it is, without its
+ * place or the naming (development warning). Give a bar one title: a second one renders as body
+ * text (development warning). A title whose children render nothing is left out.
+ *
+ * Also exported as `MessageBarTitle` (import the flat name from React Server Components).
+ */
+export declare const MessageBarTitle: {
+    ({ id, className, children, ref, ...rest }: MessageBarTitleProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** MessageBar.Title: `root` on the title span. */
+export declare const messageBarTitleClassNames: {
+    readonly root: "wave-message-bar-title";
+};
+
+/** Properties for the MessageBarTitle sub-component. */
+export declare interface MessageBarTitleProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    /** Ref to the title `<span>`. */
+    ref?: React_2.Ref<HTMLSpanElement>;
+}
+
 /**
  * Why a Dialog or Drawer asks to open or close: `trigger` (its Trigger part), `close` (a
  * `.Close` part), `close-button` (the built-in Close button), `escape`, `outside-press` (the
@@ -4400,6 +5475,20 @@ export declare const NavCategory: {
     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.
+ */
+export declare const navCategoryClassNames: {
+    readonly root: "wave-nav-category";
+    readonly button: "wave-nav-category__button";
+    readonly icon: "wave-nav-category__icon";
+    readonly label: "wave-nav-category__label";
+    readonly expandIcon: "wave-nav-category__expand-icon";
+    readonly list: "wave-nav-category__list";
+};
+
 /** Properties for the NavCategory sub-component. */
 export declare interface NavCategoryProps extends React_2.HTMLAttributes<HTMLLIElement> {
     /**
@@ -4423,6 +5512,12 @@ export declare interface NavCategoryProps extends React_2.HTMLAttributes<HTMLLIE
     ref?: React_2.Ref<HTMLLIElement>;
 }
 
+/** Nav: `root` on the `<nav>`; `list` on its `<ul>`. */
+export declare const navClassNames: {
+    readonly root: "wave-nav";
+    readonly list: "wave-nav__list";
+};
+
 /**
  * A top-level navigation entry: a link when `href` is given (anchor props), a button otherwise
  * (button props). Clicking selects it (`aria-current="page"`); activating a disabled entry never
@@ -4475,6 +5570,17 @@ export declare interface NavItemButtonProps extends NavItemOwnProps, NoAnchorOnl
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/**
+ * Nav.Item: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the `<li>` around it;
+ * `icon` on the icon span; `content` on the label span.
+ */
+export declare const navItemClassNames: {
+    readonly root: "wave-nav-item";
+    readonly listItem: "wave-nav-item__list-item";
+    readonly icon: "wave-nav-item__icon";
+    readonly content: "wave-nav-item__content";
+};
+
 /**
  * Nav.Item with an `href` known only at run time (`string | undefined`): a link when it is a
  * string, a button otherwise. Resolved after the button and link signatures.
@@ -4611,6 +5717,12 @@ export declare interface NavSubItemButtonProps extends NavSubItemOwnProps, NoAnc
     ref?: React_2.Ref<HTMLButtonElement>;
 }
 
+/** Nav.SubItem: `root` on the `<a>` or `<button>`; `listItem` on the `<li>` around it. */
+export declare const navSubItemClassNames: {
+    readonly root: "wave-nav-sub-item";
+    readonly listItem: "wave-nav-sub-item__list-item";
+};
+
 /**
  * Nav.SubItem with an `href` known only at run time (`string | undefined`): a link when it is a
  * string, a button otherwise. Only the attributes both elements share are accepted, and handlers
@@ -4691,6 +5803,16 @@ export declare interface OpenChangeDetails<R extends string = string> {
 declare const Option_2: React_2.NamedExoticComponent<OptionProps>;
 export { Option_2 as Option }
 
+/**
+ * Option (also Combobox.Option and Dropdown.Option): `root` on the `role="option"` element;
+ * `checkIcon` on the check `<svg>`; `content` on the content span.
+ */
+export declare const optionClassNames: {
+    readonly root: "wave-option";
+    readonly checkIcon: "wave-option__check-icon";
+    readonly content: "wave-option__content";
+};
+
 /**
  * Groups options under a heading: `<li role="presentation">` with the heading and a
  * `<ul role="group" aria-labelledby>` of the options. Hidden while a filter (or their own `hidden`)
@@ -4698,6 +5820,16 @@ export { Option_2 as Option }
  */
 export declare const OptionGroup: React_2.FC<OptionGroupProps>;
 
+/**
+ * OptionGroup (also Combobox.OptionGroup and Dropdown.OptionGroup): `root` on the group's entry
+ * in the list; `label` on its heading; `list` on the `role="group"` list of its options.
+ */
+export declare const optionGroupClassNames: {
+    readonly root: "wave-option-group";
+    readonly label: "wave-option-group__label";
+    readonly list: "wave-option-group__list";
+};
+
 /** Properties for the OptionGroup component used to group options. */
 export declare interface OptionGroupProps extends React_2.LiHTMLAttributes<HTMLLIElement> {
     /** Heading label for the option group (names the group). */
@@ -4785,6 +5917,15 @@ export declare const Overflow: {
     };
 };
 
+/**
+ * Overflow: `root` on the overflow element; `overflowButton` on the element around what
+ * `overflowButton` renders.
+ */
+export declare const overflowClassNames: {
+    readonly root: "wave-overflow";
+    readonly overflowButton: "wave-overflow__overflow-button";
+};
+
 /**
  * One entry of an {@link Overflow}. While it does not fit it stays mounted but is hidden
  * (`data-overflow-hidden` and an inline `display: none` placed after the consumer's own `style`),
@@ -4797,6 +5938,11 @@ export declare const OverflowItem: {
     displayName: string;
 };
 
+/** Overflow.Item: `root` on the item element. */
+export declare const overflowItemClassNames: {
+    readonly root: "wave-overflow-item";
+};
+
 /** Properties for the OverflowItem sub-component. */
 export declare interface OverflowItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
@@ -4843,6 +5989,23 @@ export declare const Pagination: {
     displayName: string;
 };
 
+/**
+ * Pagination: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`;
+ * `firstButton`, `previousButton`, `pageButton`, `nextButton` and `lastButton` on its buttons;
+ * `ellipsis` on each "…" span.
+ */
+export declare const paginationClassNames: {
+    readonly root: "wave-pagination";
+    readonly list: "wave-pagination__list";
+    readonly listItem: "wave-pagination__list-item";
+    readonly firstButton: "wave-pagination__first-button";
+    readonly previousButton: "wave-pagination__previous-button";
+    readonly pageButton: "wave-pagination__page-button";
+    readonly nextButton: "wave-pagination__next-button";
+    readonly lastButton: "wave-pagination__last-button";
+    readonly ellipsis: "wave-pagination__ellipsis";
+};
+
 /** The kinds of Pagination buttons, as passed to `getItemAriaLabel`. */
 export declare type PaginationItemType = 'first' | 'previous' | 'page' | 'next' | 'last';
 
@@ -4927,6 +6090,19 @@ export declare const Persona: {
     displayName: string;
 };
 
+/**
+ * Persona: `root` on the persona element; `avatar` on the built-in Avatar (which also carries
+ * Avatar's root and `visual` classes) or on your `avatar` slot; `badge` on the element that
+ * places the badge; `primaryText` on the name; `secondaryText` on the second line.
+ */
+export declare const personaClassNames: {
+    readonly root: "wave-persona";
+    readonly avatar: "wave-persona__avatar";
+    readonly badge: "wave-persona__badge";
+    readonly primaryText: "wave-persona__primary-text";
+    readonly secondaryText: "wave-persona__secondary-text";
+};
+
 /** Properties for the Persona component. */
 export declare interface PersonaProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Display name of the person. */
@@ -5092,6 +6268,16 @@ export declare const PopoverContent: {
     displayName: string;
 };
 
+/**
+ * Popover.Content: `root` on the portaled `role="dialog"` surface; `beak` on the arrow; `title`
+ * on the `<h2>` of `title`.
+ */
+export declare const popoverContentClassNames: {
+    readonly root: "wave-popover-content";
+    readonly beak: "wave-popover-content__beak";
+    readonly title: "wave-popover-content__title";
+};
+
 /** Properties for the PopoverContent sub-component. */
 export declare interface PopoverContentProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Content to render inside the popover. */
@@ -5326,6 +6512,14 @@ export declare const Portal: {
     displayName: string;
 };
 
+/**
+ * Portal: `root` on the portal wrapper (the existing `wave-portal` scope class; the wrapper also
+ * takes your `className`).
+ */
+export declare const portalClassNames: {
+    readonly root: "wave-portal";
+};
+
 /** Props accepted by {@link Portal}. */
 export declare interface PortalProps {
     /** Content rendered into the portal. */
@@ -5409,6 +6603,12 @@ export declare const PresenceBadge: {
     displayName: string;
 };
 
+/** PresenceBadge: `root` on the `role="img"` span; `icon` on the status glyph `<svg>`. */
+export declare const presenceBadgeClassNames: {
+    readonly root: "wave-presence-badge";
+    readonly icon: "wave-presence-badge__icon";
+};
+
 /** Properties for the PresenceBadge component. */
 export declare interface PresenceBadgeProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     /** Presence status to display. */
@@ -5471,6 +6671,16 @@ export declare const ProgressBar: {
     displayName: string;
 };
 
+/**
+ * ProgressBar: `root` on the `role="progressbar"` element (the track); `bar` on the fill; `label`
+ * on the label of `showLabel` (a sibling of the root).
+ */
+export declare const progressBarClassNames: {
+    readonly root: "wave-progress-bar";
+    readonly bar: "wave-progress-bar__bar";
+    readonly label: "wave-progress-bar__label";
+};
+
 /** Color of a {@link ProgressBar}'s fill. */
 export declare type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';
 
@@ -5538,12 +6748,27 @@ export declare const RadioGroup: {
     Item: typeof RadioItem;
 };
 
+/** RadioGroup: `root` on the `role="radiogroup"` element. */
+export declare const radioGroupClassNames: {
+    readonly root: "wave-radio-group";
+};
+
 /**
  * Flat name of `RadioGroup.Item` (C-COMPOUND), for React Server Components, which cannot access
  * the dotted form. Same component as {@link RadioItem}.
  */
 export declare const RadioGroupItem: typeof RadioItem;
 
+/**
+ * RadioGroup.Item: `root` on the `<label>` (where `className` lands; `ref` and the other props go
+ * to the radio); `indicator` on the `role="radio"` button; `label` on the label text.
+ */
+export declare const radioGroupItemClassNames: {
+    readonly root: "wave-radio-group-item";
+    readonly indicator: "wave-radio-group-item__indicator";
+    readonly label: "wave-radio-group-item__label";
+};
+
 /** Props of {@link RadioGroupItem} (same as {@link RadioItemProps}). */
 export declare type RadioGroupItemProps = RadioItemProps;
 
@@ -5647,6 +6872,16 @@ export declare const Rating: {
     displayName: string;
 };
 
+/**
+ * Rating: `root` on the `role="radiogroup"` element; `star` on each `role="radio"` button; `icon`
+ * on each star `<svg>`.
+ */
+export declare const ratingClassNames: {
+    readonly root: "wave-rating";
+    readonly star: "wave-rating__star";
+    readonly icon: "wave-rating__icon";
+};
+
 /**
  * A read-only star rating (`role="img"` named "Rating: <value> out of <max>"). A fractional value
  * is drawn with a partly filled star, so the stars and the name show the same value.
@@ -5662,6 +6897,18 @@ export declare const RatingDisplay: {
     displayName: string;
 };
 
+/**
+ * RatingDisplay: `root` on the `role="img"` element; `star` on each star span; `icon` on the star
+ * `<svg>` elements; `value` on the value span; `count` on the count span.
+ */
+export declare const ratingDisplayClassNames: {
+    readonly root: "wave-rating-display";
+    readonly star: "wave-rating-display__star";
+    readonly icon: "wave-rating-display__icon";
+    readonly value: "wave-rating-display__value";
+    readonly count: "wave-rating-display__count";
+};
+
 /** Built-in texts of RatingDisplay, for localization. */
 export declare interface RatingDisplayLabels {
     /**
@@ -5872,6 +7119,21 @@ export declare const SearchBox: {
     displayName: string;
 };
 
+/**
+ * SearchBox: `root` on the element that draws the field; `contentBefore` on the span that holds
+ * the search icon or your slot; `input` on the `<input type="search">`; `contentAfter` on the span
+ * that holds your slot; `dismissButton` on the clear button; `dismissIcon` on the icon inside it
+ * (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).
+ */
+export declare const searchBoxClassNames: {
+    readonly root: "wave-search-box";
+    readonly contentBefore: "wave-search-box__content-before";
+    readonly input: "wave-search-box__input";
+    readonly contentAfter: "wave-search-box__content-after";
+    readonly dismissButton: "wave-search-box__dismiss-button";
+    readonly dismissIcon: "wave-search-box__dismiss-icon";
+};
+
 /**
  * Props that SearchBox routes to its `<input>` (C-ROUTING): the id, the ARIA naming/validation
  * attributes, native text-input attributes and the focus/keyboard handlers.
@@ -5969,6 +7231,12 @@ export declare const Select: {
     displayName: string;
 };
 
+/** Select: `root` on the `<select>`; `errorMessage` on the message after it, as Input's. */
+export declare const selectClassNames: {
+    readonly root: "wave-select";
+    readonly errorMessage: "wave-select__error-message";
+};
+
 /** How many items a selectable collection allows (List, DataGrid, Accordion, …). */
 declare type SelectionMode_2 = 'single' | 'multiple';
 export { SelectionMode_2 as SelectionMode }
@@ -6023,11 +7291,16 @@ export declare const Skeleton: {
     displayName: string;
 } & {
     Group: {
-        ({ label, "aria-busy": busy, children, ref, ...rest }: SkeletonGroupProps): React_2.JSX.Element;
+        ({ label, "aria-busy": busy, className, children, ref, ...rest }: SkeletonGroupProps): React_2.JSX.Element;
         displayName: string;
     };
 };
 
+/** Skeleton: `root` on the placeholder element. */
+export declare const skeletonClassNames: {
+    readonly root: "wave-skeleton";
+};
+
 /**
  * Container for the Skeletons of a loading region: `aria-busy="true"` plus a visually hidden
  * `label` ("Loading"), while the placeholders stay decorative. It uses no live-region role, so it
@@ -6037,10 +7310,15 @@ export declare const Skeleton: {
  * export for React Server Components (`Skeleton.Group` in client files).
  */
 export declare const SkeletonGroup: {
-    ({ label, "aria-busy": busy, children, ref, ...rest }: SkeletonGroupProps): React_2.JSX.Element;
+    ({ label, "aria-busy": busy, className, children, ref, ...rest }: SkeletonGroupProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/** Skeleton.Group: `root` on the group element. */
+export declare const skeletonGroupClassNames: {
+    readonly root: "wave-skeleton-group";
+};
+
 /** Properties for the Skeleton.Group component. */
 export declare interface SkeletonGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
@@ -6087,6 +7365,11 @@ export declare const Slider: {
     displayName: string;
 };
 
+/** Slider: `root` on the `<input type="range">` (its rail and thumb are pseudo-elements). */
+export declare const sliderClassNames: {
+    readonly root: "wave-slider";
+};
+
 /** Properties for the Slider component. */
 export declare interface SliderProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /** Controlled slider value. */
@@ -6184,6 +7467,17 @@ export declare const SpinButton: {
     displayName: string;
 };
 
+/**
+ * SpinButton: `root` on the outer element; `decrementButton` on the − button; `input` on the
+ * `role="spinbutton"` input; `incrementButton` on the + button.
+ */
+export declare const spinButtonClassNames: {
+    readonly root: "wave-spin-button";
+    readonly decrementButton: "wave-spin-button__decrement-button";
+    readonly input: "wave-spin-button__input";
+    readonly incrementButton: "wave-spin-button__increment-button";
+};
+
 /**
  * Props that SpinButton routes to its `<input role="spinbutton">` (C-ROUTING): the id, the ARIA
  * naming/validation attributes, native text-input attributes and the focus/keyboard handlers.
@@ -6292,6 +7586,16 @@ export declare const Spinner: {
 /** Color treatment of a {@link Spinner}. */
 export declare type SpinnerAppearance = 'primary' | 'inverted';
 
+/**
+ * Spinner: `root` on the outer span; `spinner` on the ring; `label` on the label span (also while
+ * only screen readers get it, without `labelVisible`).
+ */
+export declare const spinnerClassNames: {
+    readonly root: "wave-spinner";
+    readonly spinner: "wave-spinner__spinner";
+    readonly label: "wave-spinner__label";
+};
+
 /** Properties for the Spinner component. */
 export declare interface SpinnerProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     /** Size of the spinner.
@@ -6359,6 +7663,19 @@ export declare const SplitButton: {
     displayName: string;
 };
 
+/**
+ * SplitButton: `root` on the `role="group"` element; `primaryActionButton` and `menuButton` on its
+ * two Buttons (which also carry Button's root); `icon` on the primary half's icon span and
+ * `menuIcon` on the menu half's (both also carry Button's icon class).
+ */
+export declare const splitButtonClassNames: {
+    readonly root: "wave-split-button";
+    readonly primaryActionButton: "wave-split-button__primary-action-button";
+    readonly menuButton: "wave-split-button__menu-button";
+    readonly icon: "wave-split-button__icon";
+    readonly menuIcon: "wave-split-button__menu-icon";
+};
+
 /**
  * Props for one half of a SplitButton (`menuButtonProps`, `primaryActionButtonProps`): native
  * `<button>` attributes, `data-*` attributes and `ref`. They are merged onto the built-in props
@@ -6461,6 +7778,11 @@ export declare interface SplitButtonProps extends Omit<React_2.HTMLAttributes<HT
  */
 export declare const Stack: PolymorphicComponent<'div', StackOwnProps>;
 
+/** Stack: `root` on the rendered element. */
+export declare const stackClassNames: {
+    readonly root: "wave-stack";
+};
+
 /**
  * The Stack's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`).
@@ -6525,6 +7847,12 @@ export declare const Stepper: {
     };
 };
 
+/** Stepper: `root` on the `role="group"` element; `list` on its `<ol>`. */
+export declare const stepperClassNames: {
+    readonly root: "wave-stepper";
+    readonly list: "wave-stepper__list";
+};
+
 /** Properties for the Stepper component. */
 export declare interface StepperProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Controlled index (0-based) of the currently active step. */
@@ -6574,6 +7902,23 @@ export declare const StepperStep: {
     displayName: string;
 };
 
+/**
+ * Stepper.Step: `root` on the step's element inside its `<li>`; `listItem` on the `<li>`; `button`
+ * on the `role="button"` element; `indicator` on the circle; `icon` on the `icon` slot inside it;
+ * `label` on the label; `description` on the description; `connector` on the line to the next
+ * step.
+ */
+export declare const stepperStepClassNames: {
+    readonly root: "wave-stepper-step";
+    readonly listItem: "wave-stepper-step__list-item";
+    readonly button: "wave-stepper-step__button";
+    readonly indicator: "wave-stepper-step__indicator";
+    readonly icon: "wave-stepper-step__icon";
+    readonly label: "wave-stepper-step__label";
+    readonly description: "wave-stepper-step__description";
+    readonly connector: "wave-stepper-step__connector";
+};
+
 /** Properties for the Step sub-component. */
 export declare interface StepProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Label text for the step. */
@@ -6659,6 +8004,12 @@ export declare const SwatchPicker: {
     displayName: string;
 };
 
+/** SwatchPicker: `root` on the `role="radiogroup"` element; `swatch` on each `role="radio"` button. */
+export declare const swatchPickerClassNames: {
+    readonly root: "wave-swatch-picker";
+    readonly swatch: "wave-swatch-picker__swatch";
+};
+
 /** Properties for the SwatchPicker component. */
 export declare interface SwatchPickerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     /** The swatches to display, in order (a readonly array is accepted; it is never modified). */
@@ -6724,6 +8075,17 @@ export declare const Switch: {
     displayName: string;
 };
 
+/**
+ * Switch: `root` on the `<label>`; `track` on the `role="switch"` button; `thumb` on its thumb;
+ * `label` on the label text.
+ */
+export declare const switchClassNames: {
+    readonly root: "wave-switch";
+    readonly track: "wave-switch__track";
+    readonly thumb: "wave-switch__thumb";
+    readonly label: "wave-switch__label";
+};
+
 /** Handlers that run on the `role="switch"` button instead of the root label (C-ROUTING). */
 declare type SwitchControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
 
@@ -6853,6 +8215,11 @@ export declare const TableBody: {
     displayName: string;
 };
 
+/** Table.Body: `root` on the `<tbody>`. */
+export declare const tableBodyClassNames: {
+    readonly root: "wave-table-body";
+};
+
 /** Properties for the TableBody sub-component. */
 export declare interface TableBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
     /** Table row elements. */
@@ -6867,6 +8234,11 @@ export declare const TableCell: {
     displayName: string;
 };
 
+/** Table.Cell: `root` on the `<td>`. */
+export declare const tableCellClassNames: {
+    readonly root: "wave-table-cell";
+};
+
 /** Properties for the TableCell sub-component. */
 export declare interface TableCellProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
     /** Cell content. */
@@ -6875,6 +8247,12 @@ export declare interface TableCellProps extends React_2.TdHTMLAttributes<HTMLTab
     ref?: React_2.Ref<HTMLTableCellElement>;
 }
 
+/** Table: `root` on the `<table>`; `container` on the scroll wrapper around it. */
+export declare const tableClassNames: {
+    readonly root: "wave-table";
+    readonly container: "wave-table__container";
+};
+
 /** @deprecated Use `Table.Header` (`TableHeader`). */
 export declare const TableHead: {
     (props: TableHeadProps): React_2.JSX.Element;
@@ -6902,6 +8280,11 @@ export declare const TableHeaderCell: {
     displayName: string;
 };
 
+/** Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`. */
+export declare const tableHeaderCellClassNames: {
+    readonly root: "wave-table-header-cell";
+};
+
 /** Properties for the TableHeaderCell sub-component. */
 export declare interface TableHeaderCellProps extends React_2.ThHTMLAttributes<HTMLTableCellElement> {
     /** Header cell content. */
@@ -6910,6 +8293,11 @@ export declare interface TableHeaderCellProps extends React_2.ThHTMLAttributes<H
     ref?: React_2.Ref<HTMLTableCellElement>;
 }
 
+/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */
+export declare const tableHeaderClassNames: {
+    readonly root: "wave-table-header";
+};
+
 /** Properties for the TableHeader sub-component. */
 export declare interface TableHeaderProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
     /** Table header row elements. */
@@ -6951,6 +8339,11 @@ export declare const TableRow: {
     displayName: string;
 };
 
+/** Table.Row: `root` on the `<tr>`. */
+export declare const tableRowClassNames: {
+    readonly root: "wave-table-row";
+};
+
 /** Properties for the TableRow sub-component. */
 export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableRowElement> {
     /** Table cell elements. */
@@ -6996,6 +8389,11 @@ export declare const TabList: {
     };
 };
 
+/** TabList: `root` on the `role="tablist"` element. */
+export declare const tabListClassNames: {
+    readonly root: "wave-tab-list";
+};
+
 /**
  * The content of one tab, rendered only while its tab is selected and labelled by it (while a Tab
  * with its value is mounted). A non-empty `id` replaces the generated one (the tab's
@@ -7006,6 +8404,11 @@ export declare const TabListPanel: {
     displayName: string;
 };
 
+/** TabList.Panel: `root` on the `role="tabpanel"` element. */
+export declare const tabListPanelClassNames: {
+    readonly root: "wave-tab-list-panel";
+};
+
 /**
  * Optional container for the panels, rendered after the tablist. Use it to style the panel area,
  * and for panels that components render themselves: the TabList finds a Panel in its children, in
@@ -7017,6 +8420,11 @@ export declare const TabListPanels: {
     displayName: string;
 };
 
+/** TabList.Panels: `root` on the element around the panels. */
+export declare const tabListPanelsClassNames: {
+    readonly root: "wave-tab-list-panels";
+};
+
 /** Properties for the TabList component. */
 export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
     /**
@@ -7078,6 +8486,11 @@ export declare const TabListTab: {
     displayName: string;
 };
 
+/** TabList.Tab: `root` on the `role="tab"` button. */
+export declare const tabListTabClassNames: {
+    readonly root: "wave-tab-list-tab";
+};
+
 /** Properties for the TabPanel sub-component. */
 export declare interface TabPanelProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Value of the Tab that shows this panel. */
@@ -7121,6 +8534,18 @@ export declare interface TabProps extends React_2.ButtonHTMLAttributes<HTMLButto
  */
 export declare const Tag: PolymorphicComponent<'span', TagOwnProps>;
 
+/**
+ * Tag: `root` on the rendered element (your `as`, default `<span>`); `primaryText` on the content
+ * span; `dismissButton` on the Dismiss button; `dismissIcon` on the icon inside it (what
+ * `dismissIcon` renders, a merged Button's icon span, else the default `<svg>`).
+ */
+export declare const tagClassNames: {
+    readonly root: "wave-tag";
+    readonly primaryText: "wave-tag__primary-text";
+    readonly dismissButton: "wave-tag__dismiss-button";
+    readonly dismissIcon: "wave-tag__dismiss-icon";
+};
+
 /**
  * The Tag's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`, default `span`).
@@ -7215,6 +8640,26 @@ export declare const TagPicker: {
     displayName: string;
 };
 
+/**
+ * TagPicker: `root` on the outer element; `control` on the tag area; `group` on the list of tags;
+ * `tag` on each tag; `removeButton` on each tag's remove button; `input` on the `role="combobox"`
+ * input; `listbox` on the `role="listbox"` list; `option` on each Option it renders (which also
+ * carries Option's classes); `surface` on the portaled popup; `emptyMessage` on the "No matches"
+ * row.
+ */
+export declare const tagPickerClassNames: {
+    readonly root: "wave-tag-picker";
+    readonly control: "wave-tag-picker__control";
+    readonly group: "wave-tag-picker__group";
+    readonly tag: "wave-tag-picker__tag";
+    readonly removeButton: "wave-tag-picker__remove-button";
+    readonly input: "wave-tag-picker__input";
+    readonly listbox: "wave-tag-picker__listbox";
+    readonly option: "wave-tag-picker__option";
+    readonly surface: "wave-tag-picker__surface";
+    readonly emptyMessage: "wave-tag-picker__empty-message";
+};
+
 /**
  * The TagPicker's built-in names, descriptions and announcements, for localization. Each member is
  * optional and falls back to its English default.
@@ -7386,6 +8831,23 @@ export declare const TeachingPopover: {
     displayName: string;
 };
 
+/**
+ * TeachingPopover: `root` on the `role="dialog"` surface; `beak` on the arrow; `closeButton`,
+ * `backButton` and `nextButton` on its buttons (which also carry Button's root); `title` on the
+ * `<h3>`; `body` on the step body; `footer` on the bottom row; `dot` on each step dot.
+ */
+export declare const teachingPopoverClassNames: {
+    readonly root: "wave-teaching-popover";
+    readonly beak: "wave-teaching-popover__beak";
+    readonly closeButton: "wave-teaching-popover__close-button";
+    readonly title: "wave-teaching-popover__title";
+    readonly body: "wave-teaching-popover__body";
+    readonly footer: "wave-teaching-popover__footer";
+    readonly dot: "wave-teaching-popover__dot";
+    readonly backButton: "wave-teaching-popover__back-button";
+    readonly nextButton: "wave-teaching-popover__next-button";
+};
+
 /** The built-in text of a TeachingPopover, for localization (see `TeachingPopoverProps.labels`). */
 export declare interface TeachingPopoverLabels {
     /** Text of the Back button.
@@ -7523,6 +8985,12 @@ export declare const Textarea: {
     displayName: string;
 };
 
+/** Textarea: `root` on the `<textarea>`; `errorMessage` on the message after it, as Input's. */
+export declare const textareaClassNames: {
+    readonly root: "wave-textarea";
+    readonly errorMessage: "wave-textarea__error-message";
+};
+
 /** Properties for the Textarea component. */
 export declare interface TextareaProps extends React_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
@@ -7545,6 +9013,11 @@ export declare interface TextareaProps extends React_2.TextareaHTMLAttributes<HT
     ref?: React_2.Ref<HTMLTextAreaElement>;
 }
 
+/** Text: `root` on the rendered element (your `as`, default `<span>`). */
+export declare const textClassNames: {
+    readonly root: "wave-text";
+};
+
 /**
  * The Text's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).
  * Every other prop comes from the rendered element (`as`, default `'span'`).
@@ -7619,6 +9092,27 @@ export declare const TimePicker: {
     displayName: string;
 };
 
+/**
+ * TimePicker: `root` on the outer element; `input` on the `role="combobox"` input; `clearButton`
+ * on the clear button; `expandButton` on the expand button and `expandIcon` on its glyph;
+ * `errorMessage` on the `role="alert"` message; `listbox` on the `role="listbox"` list; `option`
+ * on each option; `checkIcon` on each option's check column; `surface` on the portaled popup;
+ * `emptyMessage` on its status row.
+ */
+export declare const timePickerClassNames: {
+    readonly root: "wave-time-picker";
+    readonly input: "wave-time-picker__input";
+    readonly clearButton: "wave-time-picker__clear-button";
+    readonly expandButton: "wave-time-picker__expand-button";
+    readonly expandIcon: "wave-time-picker__expand-icon";
+    readonly errorMessage: "wave-time-picker__error-message";
+    readonly listbox: "wave-time-picker__listbox";
+    readonly option: "wave-time-picker__option";
+    readonly checkIcon: "wave-time-picker__check-icon";
+    readonly surface: "wave-time-picker__surface";
+    readonly emptyMessage: "wave-time-picker__empty-message";
+};
+
 /** Why typed text was not accepted (see {@link TimePickerProps.onInvalidInput}). */
 export declare type TimePickerInvalidReason = 'unparseable' | 'out-of-range';
 
@@ -7788,59 +9282,206 @@ export declare interface TimePickerProps extends Omit<React_2.HTMLAttributes<HTM
 }
 
 /**
- * The visual of a single notification: status icon, visually hidden status text, title, body and an
- * optional dismiss button. Usually rendered by `<Toaster>` through `useToastController()`.
+ * A notification: status icon, visually hidden severity text, title, body, footer and a Dismiss
+ * button. Its parts are direct children: `Toast.Title` (the title row, with an optional
+ * `action`), `Toast.Body` (with an optional `subtitle`) and `Toast.Footer` (a row of actions); a
+ * `Toast.Close` anywhere inside makes its child dismiss the toast. The `title` prop and plain
+ * children are the 0.5 form and render as a Title and a Body.
+ *
+ * Dispatch it with `useToastController().dispatchToast(<Toast>…</Toast>)`, or render it yourself.
  *
- * - **In a Toaster** (dispatched with `useToastController()`): not a live region itself; the
- *   Toaster announces it through its permanent live regions.
+ * - **In a Toaster**: not a live region itself; the Toaster announces it once per dispatch through
+ *   its permanent live regions (its severity text, then its title, body and the labels of its
+ *   actions, never the Dismiss button, or, after the severity text, the dispatch's
+ *   `announcement`), politely or, for `error`, assertively, and names its container by the
+ *   severity text and title. Every Toast there shows the Dismiss button.
  * - **On its own** (your own container, an inline notice): a live region, as in 0.4 —
  *   `role="status"` with `aria-live="polite"`, or `role="alert"` with `aria-live="assertive"` for
  *   `error` (override with `role`/`aria-live`). A live region that is added together with its
  *   text is not announced by every screen reader, so render the Toast in advance and change its
  *   content, or dispatch it through a Toaster.
+ *
+ * Sub-components are also exported under flat names (`ToastTitle`, `ToastBody`, `ToastFooter`,
+ * `ToastClose`): React Server Components import those, because dotted access (`Toast.Title`)
+ * needs a client file.
  */
 export declare const Toast: {
-    ({ status, title, statusLabel, onDismiss, dismissLabel, className, children, ref, ...rest }: ToastProps): React_2.JSX.Element;
+    ({ status, title, statusLabel, icon, onDismiss, dismissLabel, className, children, ref, ...rest }: ToastProps): JSX.Element;
+    displayName: string;
+} & {
+    Title: {
+        ({ action, className, children, ref, ...rest }: ToastTitleProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ subtitle, id: idProp, className, children, ref, ...rest }: ToastBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ref, ...rest }: ToastFooterProps): JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        ({ children, asChild, ref, ...rest }: ToastCloseProps): ReactNode;
+        displayName: string;
+    };
+};
+
+/**
+ * The body text and an optional `subtitle`, which describe the toast. Your `id` is the id the
+ * toast's description points at (a generated one otherwise).
+ *
+ * Also exported as `ToastBody` (import the flat name from React Server Components).
+ */
+export declare const ToastBody: {
+    ({ subtitle, id: idProp, className, children, ref, ...rest }: ToastBodyProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Toast.Body: `root` on the body element (also the one plain children render); `subtitle` on the
+ * `subtitle` line inside it.
+ */
+export declare const toastBodyClassNames: {
+    readonly root: "wave-toast-body";
+    readonly subtitle: "wave-toast-body__subtitle";
+};
+
+/** Properties for the ToastBody sub-component. */
+export declare interface ToastBodyProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** A secondary line under the body text. */
+    subtitle?: React_2.ReactNode;
+    /** Ref to the body element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
+/**
+ * Toast: `root` on the toast; `icon` on the status icon span (or your `icon` slot); `content` on
+ * the text column that holds the title, body and footer; `dismissButton` on the Dismiss button.
+ */
+export declare const toastClassNames: {
+    readonly root: "wave-toast";
+    readonly icon: "wave-toast__icon";
+    readonly content: "wave-toast__content";
+    readonly dismissButton: "wave-toast__dismiss-button";
+};
+
+/**
+ * Makes its single child dismiss the toast: it calls the Toast's `onDismiss` (when there is one),
+ * then, inside the Toaster, dismisses the toast. Your `onClick` runs first; `preventDefault()`
+ * keeps the toast. Works in dispatched content with or without a `Toast`. Fluent's `ToastTrigger`.
+ *
+ * Also exported as `ToastClose` (import the flat name from React Server Components).
+ */
+export declare const ToastClose: {
+    ({ children, asChild, ref, ...rest }: ToastCloseProps): React_2.ReactNode;
     displayName: string;
 };
 
+/** Properties for the ToastClose sub-component (as `DialogCloseProps`). */
+export declare interface ToastCloseProps extends Omit<React_2.HTMLAttributes<HTMLElement>, 'children'> {
+    /** The element that dismisses the toast; a single element gets a composed `onClick`, a function the props. */
+    children: React_2.ReactNode | ((props: ToastCloseRenderProps) => React_2.ReactNode);
+    /** `false` renders a wrapper `<span>` that dismisses on click. @default true */
+    asChild?: boolean;
+    /** Ref to the close element (the child, or the wrapper span). */
+    ref?: React_2.Ref<HTMLElement>;
+}
+
+/** Props a `Toast.Close` puts on its element (and passes to a render-prop child), as `DialogCloseRenderProps`. */
+export declare interface ToastCloseRenderProps extends React_2.HTMLAttributes<HTMLElement> {
+    onClick: React_2.MouseEventHandler<HTMLElement>;
+    /** A callback ref, so the props spread onto any element type. */
+    ref: React_2.RefCallback<HTMLElement>;
+}
+
 /** The toast API returned by {@link useToastController}. */
 export declare interface ToastController {
     /**
-     * Shows a toast and returns its id (`options.toastId`, or a generated one). A toast with the same
-     * id is replaced. Beyond the Toaster's `limit`, the toast waits in a queue until it can be shown.
+     * Shows a toast and returns its id. `dispatchToast(content, options?)` shows your content,
+     * usually a `<Toast>` with parts; `dispatchToast(options)` builds a toast from text (0.5). A
+     * plain object is read as options; anything else (an element, a portal, a string) is content. A
+     * toast with the same id is replaced (revived while it exits); beyond the Toaster's `limit` the
+     * toast waits in a queue. Fluent's `dispatchToast(content, options)` returns nothing.
      */
-    dispatchToast: (options: ToastOptions) => string;
+    dispatchToast: {
+        (content: React_2.ReactNode, options?: ToastDispatchOptions): string;
+        (options: ToastOptions): string;
+    };
     /**
-     * Removes the toast with this id (shown or waiting) and cancels its timer. Unknown ids are
-     * ignored.
+     * 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.
      */
     dismissToast: (id: string) => void;
-    /** Removes every toast, shown and queued, and cancels their timers. */
+    /**
+     * Dismisses every toast and cancels their timers: shown toasts exit (as `dismissToast`), queued
+     * ones are removed.
+     */
     dismissAllToasts: () => void;
 }
 
+/** Options of `dispatchToast(content, options)`, the form that shows your own React content. */
+export declare interface ToastDispatchOptions {
+    /** As `ToastOptions.toastId`: dispatching again with the id of a shown or exiting toast replaces it. */
+    toastId?: string;
+    /**
+     * Auto-dismiss timeout in milliseconds, as `ToastOptions.timeout`. A toast that holds an action
+     * (an interactive element besides its Dismiss button) stays until it is dismissed unless you
+     * pass one: people using a screen reader, a switch or voice control need time to reach it.
+     * @default 5000, or no timeout for a toast with an action
+     */
+    timeout?: number;
+    /**
+     * Severity of content that renders no `Toast`: the announcement's politeness (`error` is
+     * assertive), its spoken prefix and the container's name. A rendered `Toast` uses its own
+     * `status`; a different value passed here warns in development.
+     * @default 'info'
+     */
+    status?: Status;
+    /** Visually hidden severity text for content that renders no `Toast` (as `Toast.statusLabel`). */
+    statusLabel?: string;
+    /**
+     * Text announced instead of the toast's title, body and action labels (the severity text still
+     * comes first), for a toast whose visible text is no good announcement, such as a progress toast.
+     */
+    announcement?: string;
+}
+
 /**
  * Provides {@link useToastController} to its children and shows the dispatched toasts.
  *
- * - **Wrap the app** in `<Toaster>`; components below it call `useToastController()`.
+ * - **Wrap the app** in `<Toaster>`; components below it call `useToastController()`, and code
+ *   outside components (a query-cache callback, a server-event handler) dispatches through a
+ *   handle from `createToaster()` bound with `toaster`, which also runs several Toasters side by
+ *   side (one handle each).
+ * - **Two ways to dispatch:** `dispatchToast(<Toast>…</Toast>)` shows your content, usually a
+ *   `Toast` with `Toast.Title`, `Toast.Body` and `Toast.Footer`; `dispatchToast({ title, body })`
+ *   builds a toast from text. Both return the toast's id. Content without a `Toast` takes its
+ *   severity from the options (`status`, `statusLabel`) and shows no Dismiss button (add a
+ *   `Toast.Close`).
  * - The toasts render in a portal (the `toast` layer, above dialogs) inside a region labelled
  *   "Notifications" (override with `aria-label`). The region is allow-listed for modals
  *   (`data-wave-focus-trap-allow`): it stays reachable by Tab and exposed to assistive technology
  *   while a Dialog or Drawer is open, and clicking a toast never dismisses the overlay below.
  * - Two permanent, visually hidden live regions (polite, and assertive for `error`) announce every
- *   toast; the toasts themselves are not live regions. Each message stays in its live region for
- *   2 seconds (or until its toast goes), so browsing the region later meets the text only once.
+ *   toast once per dispatch, read from what it renders after it mounts: the severity text, then
+ *   the title, the body and the labels of its actions (never the Dismiss button) or, instead of
+ *   those, the dispatch's `announcement`.
+ *   The toasts themselves are not live regions. Each message stays in its live region for 2
+ *   seconds (or until its toast goes), so browsing the region later meets the text only once.
  * - While an open modal panel covers the toasts' corner (a Drawer on the same side), the toasts
  *   move beside it, so they never hide its focused controls (WCAG 2.4.11). Without room beside it
  *   (a full-width panel on a narrow screen) they keep their corner.
- * - Timers pause while a toast is hovered or focused and while the window is in the background
- *   (it has lost focus, or the page is not shown, as in a background tab).
- *   When a toast that contains focus goes away, focus moves to the next toast (or the previous one
- *   when the last toast goes), or back to the element that was focused before focus entered the
- *   toasts once no toast is left (kept across the moves between toasts and while another window
- *   is active; forgotten once focus has returned to it, and when focus leaves the toasts for
- *   another element or for the page body).
+ * - Timers pause while the pointer or focus is anywhere in the toast region, a menu or popover
+ *   opened from a toast included (someone reading or operating one toast is reading the stack),
+ *   and while the window is in the background (it has lost focus, or the page is not shown, as in
+ *   a background tab). When a toast that contains focus goes away, focus moves to the next toast
+ *   (or the previous one), or back to the element that was focused before focus entered the
+ *   toasts once no toast is left.
+ * - **Keyboard:** `shortcuts.focus` names a key press that moves focus to the newest toast (use a
+ *   modifier, WCAG 2.1.4); Escape in the toast region dismisses every toast and returns focus to
+ *   where it was before focus entered the toasts (a tooltip or menu of a toast closes first, and a
+ *   Dialog below stays open); Delete or Backspace dismisses the focused toast.
  * - Each toast's dismiss button is named "Dismiss"; pass `dismissLabel` to `dispatchToast` for
  *   other languages.
  * - `limit` caps how many toasts show at once: the others wait in a queue, in dispatch order,
@@ -7853,10 +9494,27 @@ export declare interface ToastController {
  * </Toaster>
  */
 export declare const Toaster: {
-    ({ position, limit: limitProp, className, style, children, onFocus, onBlur, ref, ...rest }: ToasterProps): React_2.JSX.Element;
+    ({ position, limit: limitProp, shortcuts, toaster: handle, 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.
+ */
+export declare const toasterClassNames: {
+    readonly root: "wave-toaster";
+    readonly toast: "wave-toaster__toast";
+};
+
+/**
+ * A toast controller that code outside React components can call (a query-cache callback, a
+ * server-event handler, a shared helper). Bind it to one Toaster with `<Toaster toaster={handle}>`;
+ * toasts dispatched through it render there. One handle per Toaster is also how an app runs
+ * several Toasters (Fluent's `toasterId`).
+ */
+export declare type ToasterHandle = ToastController;
+
 /** Properties for the Toaster container component. */
 export declare interface ToasterProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
@@ -7868,15 +9526,56 @@ export declare interface ToasterProps extends React_2.HTMLAttributes<HTMLDivElem
     /**
      * Most toasts shown at once. Further toasts wait in a queue (in dispatch order) and appear when
      * a shown toast goes; a queued toast is not announced and its timer does not run until then.
-     * Lowering it never hides a toast that is already shown. A value below 1 counts as 1
-     * (development warning); `Infinity` means no limit.
+     * Lowering it never hides a toast that is already shown, and a toast dispatched again with its id
+     * while it exits comes back at once, even when `limit` toasts are already shown. A value below 1
+     * counts as 1 (development warning); `Infinity` means no limit.
      * @default Infinity
      */
     limit?: number;
+    /** Keyboard shortcuts; Escape, Delete and Backspace need none (see the component docs). */
+    shortcuts?: ToasterShortcuts;
+    /**
+     * Binds this Toaster to a handle from `createToaster()`: toasts dispatched through the handle
+     * render here. A handle binds one Toaster: a second Toaster given a bound handle does not bind
+     * (development warning), and does not take the handle over when the first unmounts; the handle
+     * queues again until a Toaster binds it.
+     */
+    toaster?: ToasterHandle;
     /** Ref to the toast region (the portaled `<div role="region">`). */
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** Keyboard shortcuts of a Toaster (Fluent's shape). */
+export declare interface ToasterShortcuts {
+    /**
+     * Returns `true` for the key press that moves focus to the most recently dispatched toast, for
+     * example `(event) => event.altKey && event.shiftKey && event.code === 'KeyN'`. Use a modifier
+     * (or let people change or turn off the shortcut): a single-character shortcut fails WCAG 2.1.4.
+     */
+    focus?: (event: KeyboardEvent) => boolean;
+}
+
+/**
+ * A row of actions under the body.
+ *
+ * Also exported as `ToastFooter` (import the flat name from React Server Components).
+ */
+export declare const ToastFooter: {
+    ({ className, ref, ...rest }: ToastFooterProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** Toast.Footer: `root` on the row of actions. */
+export declare const toastFooterClassNames: {
+    readonly root: "wave-toast-footer";
+};
+
+/** Properties for the ToastFooter sub-component. */
+export declare interface ToastFooterProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Ref to the footer element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /** Options for dispatching a toast notification. */
 export declare interface ToastOptions {
     /** Status level controlling the toast color, icon, status text and announcement politeness
@@ -7890,19 +9589,19 @@ export declare interface ToastOptions {
     body?: string;
     /**
      * Auto-dismiss timeout in milliseconds. The countdown starts when the toast is shown (a toast
-     * waiting beyond the Toaster's `limit` does not count down) and pauses while the pointer is over
-     * the toast, while focus is inside it and while the browser window is in the background (it has
-     * lost focus, or the page is not shown, as in a background tab, also when the Toaster mounts
-     * there). `0` (or any value that is not a positive finite number) keeps the toast until it is
-     * dismissed.
+     * waiting beyond the Toaster's `limit` does not count down) and pauses while the pointer or
+     * focus is anywhere in the toast region (a menu or popover opened from a toast included) and
+     * while the browser window is in the background (it has lost focus, or the page is not shown, as
+     * in a background tab, also when the Toaster mounts there). `0` (or any value that is not a
+     * positive finite number) keeps the toast until it is dismissed.
      * @default 5000
      */
     timeout?: number;
     /**
      * Identifier of the toast. `dispatchToast` returns it (a generated one when omitted). Dispatching
-     * again with the id of a toast that is still shown replaces that toast (content and timer); with
-     * the id of a toast that waits beyond the Toaster's `limit`, it replaces its options and the toast
-     * keeps its place in the queue.
+     * again with the id of a toast that is shown, or still exiting after its dismissal, replaces or
+     * revives that toast (content and timer); with the id of a toast that waits beyond the Toaster's
+     * `limit`, it replaces its options and the toast keeps its place in the queue.
      */
     toastId?: string;
     /**
@@ -7929,14 +9628,27 @@ export declare interface ToastProps extends React_2.HTMLAttributes<HTMLDivElemen
      * @default 'info'
      */
     status?: Status;
-    /** Title text displayed in the toast. */
+    /**
+     * Title text (the 0.5 form; renders as a `Toast.Title`). A `Toast.Title` among the children wins
+     * over it (development warning).
+     */
     title?: string;
     /**
      * Visually hidden status text read before the toast (`'Info:'`, `'Success:'`, `'Warning:'`,
      * `'Error:'` by default). Pass a translation for other languages, or `''` to omit it.
      */
     statusLabel?: string;
-    /** Called when the dismiss button is activated. Passing it renders the dismiss button. */
+    /**
+     * Replaces the status icon (decorative, `aria-hidden`). Only `undefined` keeps the default;
+     * `null`, or anything that renders nothing, shows no icon (the status-icon slot rule, as
+     * `MessageBar.icon`). Fluent's `ToastTitle` `media`.
+     */
+    icon?: Slot<'span'>;
+    /**
+     * Called when the Dismiss button or a `Toast.Close` is activated; passing it renders the button.
+     * Inside the Toaster every Toast shows the button and it dismisses the toast (your `onDismiss`
+     * runs first). A timeout, Escape, Delete and `dismissToast` do not call it.
+     */
     onDismiss?: () => void;
     /**
      * Accessible name of the dismiss button. Pass a translation for other languages.
@@ -7947,6 +9659,35 @@ export declare interface ToastProps extends React_2.HTMLAttributes<HTMLDivElemen
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/**
+ * The title row: the title text (which names the toast) and an optional `action` at its end. A
+ * direct child of Toast, or dispatched content of a Toaster.
+ *
+ * Also exported as `ToastTitle` (import the flat name from React Server Components).
+ */
+export declare const ToastTitle: {
+    ({ action, className, children, ref, ...rest }: ToastTitleProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Toast.Title: `root` on the title row (also the one the `title` prop renders); `label` on the
+ * title text, which names the toast; `action` on the `action` slot at the row's end.
+ */
+export declare const toastTitleClassNames: {
+    readonly root: "wave-toast-title";
+    readonly label: "wave-toast-title__label";
+    readonly action: "wave-toast-title__action";
+};
+
+/** Properties for the ToastTitle sub-component. */
+export declare interface ToastTitleProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Content at the end of the title row, such as a link or a button (often in `Toast.Close`). */
+    action?: Slot<'span'>;
+    /** Ref to the title row. */
+    ref?: React_2.Ref<HTMLDivElement>;
+}
+
 /**
  * A button that switches between pressed and unpressed, e.g. Bold in a text toolbar. Built on
  * {@link Button}: same appearances, sizes, `type="button"` default, decorative icon slot and
@@ -7967,10 +9708,19 @@ export declare interface ToastProps extends React_2.HTMLAttributes<HTMLDivElemen
  * <ToggleButton role="checkbox" isAccessible icon={<GridIcon />} aria-label="Grid" />
  */
 export declare const ToggleButton: {
-    ({ pressed, defaultPressed, onPressedChange, appearance, size, disabled, disabledFocusable, isAccessible, className, onClick, ...props }: ToggleButtonProps): React_2.JSX.Element;
+    ({ pressed, defaultPressed, onPressedChange, appearance, size, disabled, disabledFocusable, isAccessible, icon, className, onClick, ...props }: ToggleButtonProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * ToggleButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on
+ * Button's icon span.
+ */
+export declare const toggleButtonClassNames: {
+    readonly root: "wave-toggle-button";
+    readonly icon: "wave-toggle-button__icon";
+};
+
 /** Properties for the ToggleButton component. */
 export declare interface ToggleButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
     /** Controlled pressed state. */
@@ -8078,7 +9828,7 @@ export declare interface ToggleButtonProps extends Omit<React_2.ButtonHTMLAttrib
 export declare const Toolbar: PolymorphicComponent<"div", ToolbarOwnProps> & {
     Button: PolymorphicComponent<"button", ToolbarButtonOwnProps>;
     ToggleButton: {
-        ({ name, value, appearance, size, onClick, ...rest }: ToolbarToggleButtonProps): React_2.JSX.Element;
+        ({ name, value, appearance, size, icon, className, onClick, ...rest }: ToolbarToggleButtonProps): React_2.JSX.Element;
         displayName: string;
     };
     RadioGroup: {
@@ -8086,7 +9836,7 @@ export declare const Toolbar: PolymorphicComponent<"div", ToolbarOwnProps> & {
         displayName: string;
     };
     RadioButton: {
-        ({ name, value, appearance, size, onClick, ...rest }: ToolbarRadioButtonProps): React_2.JSX.Element;
+        ({ name, value, appearance, size, icon, className, onClick, ...rest }: ToolbarRadioButtonProps): React_2.JSX.Element;
         displayName: string;
     };
     Group: {
@@ -8111,6 +9861,15 @@ export declare const Toolbar: PolymorphicComponent<"div", ToolbarOwnProps> & {
  */
 export declare const ToolbarButton: PolymorphicComponent<'button', ToolbarButtonOwnProps>;
 
+/**
+ * Toolbar.Button (also carries Button's root and icon classes): `root` on the rendered element;
+ * `icon` on Button's icon span (the icon box of `vertical`).
+ */
+export declare const toolbarButtonClassNames: {
+    readonly root: "wave-toolbar-button";
+    readonly icon: "wave-toolbar-button__icon";
+};
+
 /** Toolbar.Button's own props: Button's, plus `vertical`. Default appearance `'subtle'`. */
 export declare interface ToolbarButtonOwnProps extends ButtonOwnProps {
     /** The icon above the label (a 24 px icon box and a caption-size label). @default false */
@@ -8120,6 +9879,11 @@ export declare interface ToolbarButtonOwnProps extends ButtonOwnProps {
 /** Props of {@link ToolbarButton} rendered as `C` (default `'button'`), including `ref`. */
 export declare type ToolbarButtonProps<C extends React_2.ElementType = 'button'> = PolymorphicProps<C, ToolbarButtonOwnProps>;
 
+/** Toolbar: `root` on the `role="toolbar"` element (your `as`, default `<div>`). */
+export declare const toolbarClassNames: {
+    readonly root: "wave-toolbar";
+};
+
 /**
  * A separator between groups, drawn across the toolbar (vertical in a horizontal toolbar):
  * `role="separator"` with `aria-orientation`. It is not focusable, so the arrow keys pass it.
@@ -8131,6 +9895,11 @@ export declare const ToolbarDivider: {
     displayName: string;
 };
 
+/** Toolbar.Divider: `root` on the `role="separator"` element. */
+export declare const toolbarDividerClassNames: {
+    readonly root: "wave-toolbar-divider";
+};
+
 /** Properties for Toolbar.Divider. */
 export declare interface ToolbarDividerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Ref to the separator element. */
@@ -8154,6 +9923,11 @@ export declare const ToolbarGroup: {
     displayName: string;
 };
 
+/** Toolbar.Group: `root` on the group element. */
+export declare const toolbarGroupClassNames: {
+    readonly root: "wave-toolbar-group";
+};
+
 /** Properties for Toolbar.Group. */
 export declare interface ToolbarGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Ref to the group element. */
@@ -8216,10 +9990,19 @@ export declare type ToolbarProps<C extends React_2.ElementType = 'div'> = Polymo
  * </Toolbar.RadioGroup>
  */
 export declare const ToolbarRadioButton: {
-    ({ name, value, appearance, size, onClick, ...rest }: ToolbarRadioButtonProps): React_2.JSX.Element;
+    ({ name, value, appearance, size, icon, className, onClick, ...rest }: ToolbarRadioButtonProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * Toolbar.RadioButton (also carries the root and icon classes of Button and ToggleButton):
+ * `root` on the `role="radio"` button; `icon` on the icon span.
+ */
+export declare const toolbarRadioButtonClassNames: {
+    readonly root: "wave-toolbar-radio-button";
+    readonly icon: "wave-toolbar-radio-button__icon";
+};
+
 /** Properties for Toolbar.RadioButton: one choice of a `Toolbar.RadioGroup`. */
 export declare interface ToolbarRadioButtonProps extends Omit<ToggleButtonProps, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'name' | 'value' | 'role'> {
     /** The group: a key of the Toolbar's `checkedValues`; radio buttons of one `name` are exclusive. */
@@ -8253,6 +10036,11 @@ export declare const ToolbarRadioGroup: {
     displayName: string;
 };
 
+/** Toolbar.RadioGroup: `root` on the `role="radiogroup"` element. */
+export declare const toolbarRadioGroupClassNames: {
+    readonly root: "wave-toolbar-radio-group";
+};
+
 /** Properties for Toolbar.RadioGroup. */
 export declare interface ToolbarRadioGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Ref to the group element. */
@@ -8274,10 +10062,19 @@ export declare interface ToolbarRadioGroupProps extends React_2.HTMLAttributes<H
  * </Toolbar>
  */
 export declare const ToolbarToggleButton: {
-    ({ name, value, appearance, size, onClick, ...rest }: ToolbarToggleButtonProps): React_2.JSX.Element;
+    ({ name, value, appearance, size, icon, className, onClick, ...rest }: ToolbarToggleButtonProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * Toolbar.ToggleButton (also carries the root and icon classes of Button and ToggleButton):
+ * `root` on the `<button>`; `icon` on the icon span.
+ */
+export declare const toolbarToggleButtonClassNames: {
+    readonly root: "wave-toolbar-toggle-button";
+    readonly icon: "wave-toolbar-toggle-button__icon";
+};
+
 /** Properties for Toolbar.ToggleButton: ToggleButton's, bound to the Toolbar's `checkedValues`. */
 export declare interface ToolbarToggleButtonProps extends Omit<ToggleButtonProps, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'name' | 'value'> {
     /** The group: a key of the Toolbar's `checkedValues`. */
@@ -8336,6 +10133,12 @@ export declare const Tooltip: {
 /** Color treatment of a tooltip (`TooltipProps.appearance`). */
 export declare type TooltipAppearance = 'inverted' | 'normal';
 
+/** Tooltip: `root` on the span around your child; `content` on the portaled tooltip. */
+export declare const tooltipClassNames: {
+    readonly root: "wave-tooltip";
+    readonly content: "wave-tooltip__content";
+};
+
 /** Properties for the Tooltip component. */
 export declare interface TooltipProps extends Omit<React_2.HTMLAttributes<HTMLSpanElement>, 'content'> {
     /** Content to display inside the tooltip (short, non-interactive text). */
@@ -8413,30 +10216,68 @@ export declare interface TooltipProps extends Omit<React_2.HTMLAttributes<HTMLSp
 
 /**
  * A hierarchical list (WAI-ARIA Tree View pattern) with a single tab stop: Up/Down move between
- * visible items, Home/End to the first/last, Right expands or moves to the first child, Left
- * collapses or moves to the parent (both mirrored in RTL), Enter/Space activate (and toggle a
- * parent), `*` expands the siblings, and typing jumps to an item by its text.
+ * visible items, Home/End to the first/last, Right expands or moves to the first child (or into
+ * the row's actions, see below), Left collapses or moves to the parent (both mirrored in RTL),
+ * Enter activates (and toggles a parent), and so does Space unless the tree has checkboxes, `*`
+ * expands the siblings, and typing jumps to an item by its text.
  *
  * 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.
  *
+ * `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
+ * nested in it, and an item shows checked when all of its nested items are checked, mixed when
+ * some are. `onCheckedItemsChange` receives every checked item in tree order (fully checked parents
+ * included), followed by listed values that match no item, and `details` (`value`, `checked`,
+ * `event`).
+ *
+ * Row content: `actions` (buttons at the end of the row, in a toolbar named by the item, shown on
+ * hover and focus, and always where there is no hover or colors are forced), `aside` (a count or a
+ * badge that describes the item), `iconAfter` and `expandIcon`. Tab from the focused item enters
+ * its actions and Shift+Tab returns. Keys and clicks on the actions never activate or check the
+ * item. With `navigationMode="treegrid"`, Right (Left in right-to-left layouts) moves from an
+ * item into its actions and Left returns, the actions take no Tab stop, and on an open parent Right
+ * moves into its actions rather than to its first child (Down does); the roles stay `tree` and
+ * `treeitem`.
+ *
  * Items are `Tree.Item` elements; nested items are written in their parent's children (directly,
  * in Fragments, or returned by a render function), not rendered by a component of their own.
- * Every item needs a `value` that is unique within the Tree.
+ * Every item needs a `value` that is unique within the Tree. `Tree.ItemPersonaLayout` lays out a
+ * person (media, name and description) as an item's label.
  *
- * `Tree.Item` is also exported as `TreeItem` for React Server Components, which cannot use the
- * dotted form.
+ * `Tree.Item` and `Tree.ItemPersonaLayout` are also exported as `TreeItem` and
+ * `TreeItemPersonaLayout` for React Server Components, which cannot use the dotted form.
  */
 export declare const Tree: {
-    ({ expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemSelect, selected, current, className, children, onKeyDown, onKeyDownCapture, onFocus, onBlur, ref, ...rest }: TreeProps): React_2.JSX.Element;
+    ({ expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemSelect, selected, current, selectionMode, navigationMode, checkedItems, defaultCheckedItems, onCheckedItemsChange, className, children, onKeyDown, onKeyDownCapture, onFocus, onBlur, ref, ...rest }: TreeProps): JSX.Element;
     displayName: string;
 } & {
     Item: {
-        ({ value, icon, leaf, className, children, onClick, onKeyDown, onFocus, ref, ...props }: TreeItemProps): React_2.JSX.Element;
+        ({ value, icon, iconAfter, expandIcon, aside, actions, leaf, className, children, onClick, onKeyDown, onFocus, onBlur, ref, ...props }: TreeItemProps): JSX.Element;
+        displayName: string;
+    };
+    ItemPersonaLayout: {
+        ({ media, description, className, children, ref, ...rest }: TreeItemPersonaLayoutProps): JSX.Element;
         displayName: string;
     };
 };
 
+/** The second argument of `onCheckedItemsChange`. */
+export declare interface TreeCheckedItemsChangeDetails {
+    /** The item that was toggled. */
+    value: string;
+    /** Its new state (a toggle never leaves it mixed). */
+    checked: boolean;
+    /** The DOM event of the toggle: a keyboard event for Space, a mouse event for a click. */
+    event: Event;
+}
+
+/** Tree: `root` on the `role="tree"` element. */
+export declare const treeClassNames: {
+    readonly root: "wave-tree";
+};
+
 /**
  * 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.
@@ -8445,25 +10286,87 @@ export declare const Tree: {
  * 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:
  * its output becomes part of the label, so the parent cannot expand (a development warning names
- * this). Render data-driven trees with a render function instead.
+ * this). Render data-driven trees with a render function instead. The checks of a
+ * `selectionMode="multiple"` tree cascade by the same rule, so an item that such a component
+ * 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). 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).
+ * 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
+ * item.
  *
  * The item is named by its label (`aria-labelledby`), not by its icon or nested items; an
  * `aria-label` or `aria-labelledby` prop replaces that name. Typeahead matches the label text too
  * (a `data-roving-text` prop replaces it).
  */
 export declare const TreeItem: {
-    ({ value, icon, leaf, className, children, onClick, onKeyDown, onFocus, ref, ...props }: TreeItemProps): React_2.JSX.Element;
+    ({ value, icon, iconAfter, expandIcon, aside, actions, leaf, className, children, onClick, onKeyDown, onFocus, onBlur, ref, ...props }: TreeItemProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Tree.Item: `root` on the `role="treeitem"` element; `row` on its row; `expandIcon` on the
+ * 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.
+ */
+export declare const treeItemClassNames: {
+    readonly root: "wave-tree-item";
+    readonly row: "wave-tree-item__row";
+    readonly expandIcon: "wave-tree-item__expand-icon";
+    readonly indicator: "wave-tree-item__indicator";
+    readonly icon: "wave-tree-item__icon";
+    readonly label: "wave-tree-item__label";
+    readonly iconAfter: "wave-tree-item__icon-after";
+    readonly aside: "wave-tree-item__aside";
+    readonly actions: "wave-tree-item__actions";
+    readonly group: "wave-tree-item__group";
+};
+
+/**
+ * Lays out an item's label as a person: `media`, the name (children) and a `description` under
+ * it. Use it as a Tree.Item's label content: the item is named by the name and described by the
+ * description. Also exported as `TreeItemPersonaLayout` (Fluent's name; import the flat name from
+ * React Server Components).
+ */
+export declare const TreeItemPersonaLayout: {
+    ({ media, description, className, children, ref, ...rest }: TreeItemPersonaLayoutProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * Tree.ItemPersonaLayout: `root` on the layout span; `media` on the picture; `main` on the name;
+ * `description` on the description line.
+ */
+export declare const treeItemPersonaLayoutClassNames: {
+    readonly root: "wave-tree-item-persona-layout";
+    readonly media: "wave-tree-item-persona-layout__media";
+    readonly main: "wave-tree-item-persona-layout__main";
+    readonly description: "wave-tree-item-persona-layout__description";
+};
+
+/** Properties for the TreeItemPersonaLayout sub-component (Fluent's `TreeItemPersonaLayout`). */
+export declare interface TreeItemPersonaLayoutProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The person's picture, usually an Avatar (`size="small"`, 32 px, fits a row). The name is shown
+     * next to it, so make it decorative (`<Avatar decorative … />`).
+     */
+    media?: React_2.ReactNode;
+    /** A second line under the name; it describes the item. */
+    description?: React_2.ReactNode;
+    ref?: React_2.Ref<HTMLSpanElement>;
+}
+
 /** Properties for the TreeItem sub-component. */
 export declare interface TreeItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Unique value identifying this tree item. */
@@ -8474,6 +10377,34 @@ export declare interface TreeItemProps extends React_2.HTMLAttributes<HTMLDivEle
      * icon (`''`, `0`) or a list of nothing renders no span.
      */
     icon?: Slot<'span'>;
+    /** Icon after the label (decorative, `aria-hidden`; a falsy value renders nothing, as `icon`). */
+    iconAfter?: Slot<'span'>;
+    /**
+     * Replaces the expand chevron (decorative). `null`/`undefined` keep the chevron; `false`, or
+     * anything that renders nothing, hides it (`aria-expanded` still reports the state). Not rotated.
+     */
+    expandIcon?: Slot<'span'>;
+    /**
+     * Non-interactive content at the end of the row, such as a count or a badge. It describes the item
+     * (`aria-describedby`); it hides while the actions show on hover or focus.
+     */
+    aside?: React_2.ReactNode;
+    /**
+     * Buttons at the end of the row (a toolbar named by the item's label). Shown while the row is
+     * hovered or the item or its actions have focus, and always in forced colors and without hover
+     * (touch). Tab reaches them from the focused item (`navigationMode="tree"`), or the arrow keys do
+     * (`"treegrid"`). Keys and clicks on them never activate or check the item.
+     *
+     * They also stay shown while a Menu, Popover or Dialog rendered inside them holds focus or its
+     * trigger among them is expanded, so its focus return reaches the action. A dialog your app
+     * renders elsewhere and opens from an action through state (a "Delete…" menu item that opens a
+     * confirm Dialog) closes after the actions have hidden again (on devices with hover, outside
+     * forced colors): a hidden action cannot take focus, so focus returns to the nearest element
+     * that can, normally the item. Render such a Dialog inside `actions` (its `Dialog.Trigger`
+     * there, or the controlled Dialog next to the Menu that opens it) to return focus to the action;
+     * `finalFocusRef` cannot name it, since it is still hidden when the dialog closes.
+     */
+    actions?: React_2.ReactNode;
     /**
      * Renders the item as a leaf even when it has nested `Tree.Item`s: they are not rendered, and
      * the item has no `aria-expanded` and does not expand. An item is expandable only while it has
@@ -8499,17 +10430,48 @@ export declare interface TreeProps extends React_2.HTMLAttributes<HTMLDivElement
     /** Called with the new list of expanded item values when an item expands or collapses. */
     onExpandedItemsChange?: (expandedItems: string[]) => void;
     /**
-     * Called with an item's value every time it is activated (click, Enter or Space), also when the
-     * same item is activated again.
+     * Called with an item's value every time it is activated (a click on its row, Enter, or Space
+     * unless the tree has checkboxes), also when the same item is activated again.
      */
     onItemSelect?: (value: string) => void;
     /**
      * Value of the selected item. When set (also to `null`), every item carries `aria-selected`, and
-     * the selected item is where keyboard focus enters the tree.
+     * the selected item is where keyboard focus enters the tree. It has no effect with
+     * `selectionMode="multiple"` (a development warning): items carry `aria-checked` instead. With
+     * `selectionMode="single"` every item carries `aria-selected` even while it is not set (a
+     * development warning: the radios need it).
      */
     selected?: string | null;
     /** Value of the current item (for example the open page): it gets `aria-current="true"`. */
     current?: string | null;
+    /**
+     * How items are selected. `'none'`: activation only (0.7; `selected` highlights one item).
+     * `'single'`: a radio indicator on every item for `selected`/`onItemSelect`. `'multiple'`: a
+     * checkbox on every item, bound to `checkedItems`; checking an item checks its descendants, and a
+     * parent shows checked, mixed or unchecked from them. Fluent's `'multiselect'` is `'multiple'`.
+     * @default 'none'
+     */
+    selectionMode?: 'none' | SelectionMode_2;
+    /** Controlled checked items (`selectionMode="multiple"`); see the cascade rule in the component docs. */
+    checkedItems?: readonly string[];
+    /**
+     * Initially checked items (uncontrolled).
+     * @default []
+     */
+    defaultCheckedItems?: readonly string[];
+    /**
+     * Called with every checked item (in tree order) when a check changes (Fluent's `onCheckedChange`).
+     * WaveUI always passes `details`; it is typed optional until 1.0.
+     */
+    onCheckedItemsChange?: (checkedItems: string[], details?: TreeCheckedItemsChangeDetails) => void;
+    /**
+     * `'tree'`: Tab from a focused item enters its actions. `'treegrid'`: the "next" arrow
+     * (ArrowRight, ArrowLeft in RTL) moves into an item's actions and "previous" returns; on an
+     * expanded parent "next" no longer moves to the first child (ArrowDown does). The roles stay
+     * `tree` and `treeitem` (Fluent's `navigationMode`).
+     * @default 'tree'
+     */
+    navigationMode?: 'tree' | 'treegrid';
     /** Ref to the `role="tree"` element. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -8843,7 +10805,10 @@ export declare interface UsePresenceResult {
  *   `input[type=hidden]` is no item.
  * - **Tab stop** (`tabStop`): `'active'` — the enabled `activeValue` item, else the first enabled
  *   item; `'last-focused'` — the last focused enabled item, else the `'active'` rule. A nested
- *   composite or a control that uses the arrow keys itself holds it only when no other item can.
+ *   composite or a control that uses the arrow keys itself holds it only when no other item can;
+ *   `'none'` — no item: every item is `tabIndex=-1` (a nested composite keeps its own tab stop;
+ *   mark it `data-roving-transparent` to join the group's arrow order), and focus reaches the
+ *   items only through the keys or a script.
  * - **Keys** are ignored when another handler already called `preventDefault()`; with Meta; with
  *   Alt or Ctrl, except a single character typed with AltGr (Ctrl+Alt on Windows), which is
  *   typeahead text (arrows, Home, End and Space with Ctrl+Alt stay ignored); and when they start
@@ -8935,8 +10900,12 @@ export declare interface UseRovingTabIndexOptions {
      *  'active' — APG Toolbar (and the static Menu). Either way a nested composite or a control that
      *  uses the arrow keys itself (text field, select, slider, spin button, editable combobox) holds
      *  it only when no other item can: arrows pressed there never lead back to the other items, so
-     *  focusing one keeps the tab stop on the last focused other item. */
-    tabStop?: 'active' | 'last-focused';
+     *  focusing one keeps the tab stop on the last focused other item. 'none': no item holds it
+     *  (every item gets tabIndex -1; a nested composite keeps its own tab stop, and one marked
+     *  `data-roving-transparent` joins the group's arrow order), for a composite reached only by
+     *  the arrow keys of an enclosing widget or by a script (a tree row's actions); the keys,
+     *  `focusValue`, `focusFirst` and `focusLast` keep working. */
+    tabStop?: 'active' | 'last-focused' | 'none';
     /** true ⇒ the hook writes tabIndex 0/-1 onto item elements itself and assigns
      *  data-roving-value="auto-<n>" to items that lack one. For containers that do not render their
      *  items (Toolbar children, Menu items, Tree rows). Default false (items call getTabIndex).
@@ -8977,9 +10946,10 @@ export declare interface UseRovingTabIndexResult {
 }
 
 /**
- * Returns the {@link ToastController} of the enclosing `<Toaster>`: `dispatchToast(options)` shows
- * a toast and returns its id, `dismissToast(id)` removes it, `dismissAllToasts()` removes every
- * toast.
+ * Returns the {@link ToastController} of the enclosing `<Toaster>`: `dispatchToast(content,
+ * options?)` shows your content (usually a `<Toast>` with parts) and `dispatchToast(options)` a
+ * toast built from text; both return the toast's id. `dismissToast(id)` dismisses one toast,
+ * `dismissAllToasts()` every toast.
  *
  * Must be called inside `<Toaster>`, which provides the controller to its children — wrap the app
  * (or the part of it that shows toasts) in `<Toaster>`; a sibling `<Toaster />` does not work.
@@ -8989,7 +10959,19 @@ export declare interface UseRovingTabIndexResult {
  * @example
  * function SaveButton() {
  *   const { dispatchToast } = useToastController();
- *   return <Button onClick={() => dispatchToast({ status: 'success', title: 'Saved' })}>Save</Button>;
+ *   return (
+ *     <Button
+ *       onClick={() =>
+ *         dispatchToast(
+ *           <Toast status="success">
+ *             <Toast.Title>Saved</Toast.Title>
+ *           </Toast>,
+ *         )
+ *       }
+ *     >
+ *       Save
+ *     </Button>
+ *   );
  * }
  * // <Toaster><App /></Toaster>
  */
@@ -9062,6 +11044,11 @@ export declare const WaveProvider: {
     displayName: string;
 };
 
+/** WaveProvider: `root` on the themed element (the existing `wave-root` scope class). */
+export declare const waveProviderClassNames: {
+    readonly root: "wave-root";
+};
+
 /** Props accepted by {@link WaveProvider}. */
 export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**