@mortenbrudvik/waveui 0.7.0 → 0.9.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>;
@@ -927,12 +1116,25 @@ export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivEle
  *   `labelPosition="before"` (the root carries `data-label-position`). The box lines up with the
  *   first line of a label that wraps or has a second line. `children` are not rendered (a
  *   development warning says so).
+ * - `size` (`medium`, `large`) and `shape` (`square`, `circular`) set the box's dimensions and
+ *   corners; the root carries `data-size` and `data-shape`. Checkbox does not read a surrounding
+ *   `Field`'s size or a `WaveProvider`'s input defaults.
  */
 export declare const Checkbox: {
-    ({ checked: checkedProp, defaultChecked, indeterminate, onCheckedChange, onChange, disabled, disabledFocusable, label, labelPosition, name, value, required, form, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-disabled": ariaDisabled, autoFocus, tabIndex, onClick, onFocus, onBlur, onKeyDown, onKeyUp, controlRef, className, children, ref, ...rest }: CheckboxProps): React_2.JSX.Element;
+    ({ checked: checkedProp, defaultChecked, indeterminate, onCheckedChange, onChange, disabled, disabledFocusable, label, labelPosition, size, shape, name, value, required, form, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-disabled": ariaDisabled, autoFocus, tabIndex, onClick, onFocus, onBlur, onKeyDown, onKeyUp, controlRef, className, children, ref, ...rest }: CheckboxProps): React_2.JSX.Element;
     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';
 
@@ -989,6 +1191,18 @@ export declare interface CheckboxProps extends Omit<React_2.HTMLAttributes<HTMLL
      * @default 'after'
      */
     labelPosition?: CheckboxLabelPosition;
+    /**
+     * Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. Unlike the
+     * text controls and pickers, Checkbox does not read a surrounding Field's size or a
+     * WaveProvider's input defaults: this prop is the only source of its size.
+     * @default 'medium'
+     */
+    size?: CheckboxSize;
+    /**
+     * Shape of the box: square corners (the 0.7 look) or a circular, round box.
+     * @default 'square'
+     */
+    shape?: CheckboxShape;
     /**
      * Form field name. With a name, the checkbox takes part in native form submission: it submits
      * `name=value` while checked.
@@ -1018,6 +1232,12 @@ export declare interface CheckboxProps extends Omit<React_2.HTMLAttributes<HTMLL
     ref?: React_2.Ref<HTMLLabelElement>;
 }
 
+/** Shape of the box: square corners (the 0.7 look) or a circular, round box. */
+export declare type CheckboxShape = Extract<Shape, 'square' | 'circular'>;
+
+/** Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. */
+export declare type CheckboxSize = Extract<Size, 'medium' | 'large'>;
+
 /**
  * Checked items of a menu or toolbar, per group `name`: `{ sort: ['date'], view: ['ruler', 'grid'] }`.
  * A checkbox or switch item (or a toolbar toggle) is checked while its `value` is in
@@ -1060,43 +1280,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 +1506,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 +1555,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 +1605,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 +1647,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
@@ -1209,6 +1793,11 @@ export declare interface ColorPickerProps extends Omit<React_2.HTMLAttributes<HT
  * `name`/`required` the value takes part in form submission, validation and reset. The open
  * listbox renders in a portal; while closed it stays in the DOM, hidden.
  *
+ * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,
+ * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and
+ * `data-appearance` on the root `<div>`. The listbox keeps its size.
+ *
  * Sub-components: `Combobox.Option`, `Combobox.OptionGroup`. React Server Components import the
  * flat names `ComboboxOption` / `ComboboxOptionGroup` (dotted access needs a client file).
  */
@@ -1220,6 +1809,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.
@@ -1286,6 +1892,18 @@ export declare interface ComboboxProps extends Omit<React_2.HTMLAttributes<HTMLD
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The
+     * listbox keeps its size.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /**
      * Whether the typed text is itself the value. Without it, typing only filters the options (the
      * first match becomes active, so Enter selects it) and the input shows the selected option's
@@ -1397,6 +2015,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`).
@@ -1454,6 +2085,12 @@ export declare interface CompoundButtonOwnProps {
  */
 export declare type CompoundButtonProps<C extends React_2.ElementType = 'button'> = PolymorphicProps<C, CompoundButtonOwnProps>;
 
+/**
+ * The three-step size of text inputs, pickers, Field and Label (Fluent's field sizes): `small`
+ * (24px tall), `medium` (32px) and `large` (40px).
+ */
+export declare type CoreSize = Extract<Size, 'small' | 'medium' | 'large'>;
+
 /**
  * A small pill showing a count (unread messages, notifications), or with `dot` a small dot
  * without a number. Renders nothing for a count of 0 (unless `showZero`) or less, and
@@ -1475,6 +2112,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 +2161,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 +2282,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 +2301,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 +2314,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 +2367,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 +2393,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 +2482,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> {
     /**
@@ -1850,6 +2560,10 @@ export declare interface DataGridUncontrolledSortProps extends NoDeprecatedSortP
  *   clear button that disappears.
  * - Every emitted date is local midnight. The calendar opens on the month of the selected date or
  *   today, clamped into `minDate`/`maxDate`.
+ * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ *   `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own
+ *   prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as
+ *   `data-size` and `data-appearance` on the root `<div>`. The calendar keeps its size.
  * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,
  *   `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,
  *   `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes
@@ -1868,6 +2582,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';
 
@@ -1967,6 +2705,18 @@ export declare interface DatePickerProps extends Omit<React_2.HTMLAttributes<HTM
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The
+     * calendar keeps its size.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /**
      * Makes the input read-only: the calendar does not open and the value cannot change. Turning it
      * (or `disabled`) on while the user is typing drops the typed text.
@@ -2135,7 +2885,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 +2897,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 +2950,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 +3034,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 +3111,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 +3191,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 +3324,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. */
@@ -2608,6 +3414,11 @@ export declare interface DrawerTriggerRenderProps extends React_2.HTMLAttributes
  * `name`/`required` the value takes part in form submission, validation and reset. The open
  * listbox renders in a portal; while closed it stays in the DOM, hidden.
  *
+ * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,
+ * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and
+ * `data-appearance` on the root `<div>`. The listbox keeps its size.
+ *
  * Sub-components: `Dropdown.Option`, `Dropdown.OptionGroup`. React Server Components import the
  * flat names `DropdownOption` / `DropdownOptionGroup` (dotted access needs a client file).
  */
@@ -2619,6 +3430,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.
@@ -2678,6 +3504,18 @@ export declare interface DropdownProps extends Omit<React_2.HTMLAttributes<HTMLD
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The
+     * listbox keeps its size.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /** Name of the value in form submissions (renders a hidden input). */
     name?: string;
     /** Id of the form the value belongs to, when the Dropdown is outside it. */
@@ -2722,6 +3560,17 @@ export declare interface DropdownProps extends Omit<React_2.HTMLAttributes<HTMLD
  * - `orientation="horizontal"` puts the label in a start column beside the control, with the
  *   message and the hint below the control. The label lines up with the first line of the
  *   control (a Checkbox, Switch or RadioGroup gets 6px of padding above and below for it).
+ * - `size` sets the label's type ramp and, in the horizontal layout, its top padding and the
+ *   padding that lines a Checkbox, Switch or RadioGroup row up with it, so the label's first
+ *   line keeps lining up with a 24, 32 or 40px control. The message and the hint stay small.
+ *   Controls inside read the prop from `FieldContext` as their own default `size` (their own
+ *   `size` wins); the Field's own label falls back to `WaveProvider inputDefaults.size`, else
+ *   `medium`, and the root always renders that resolved value as `data-size`.
+ * - `label` also takes a `Label` or `InfoLabel` element, which renders in place of Field's own
+ *   `<label>` with the Field's wiring (see `label`); an InfoLabel's info button sits next to the
+ *   label text, outside the `<label>`, so the control is named by the text alone. A group control
+ *   (RadioGroup, your own `<div role="radiogroup">`) is named through `aria-labelledby` pointing
+ *   at that `<label>`.
  * - Provides `FieldContext`: the library's inputs (Input, Select, Textarea, Slider, SearchBox,
  *   Checkbox, Switch, RadioGroup, Rating, SpinButton, pickers, …) read it wherever they are inside
  *   the Field and are named by the label, described by the message and the hint and marked
@@ -2782,6 +3631,13 @@ export declare interface DropdownProps extends Omit<React_2.HTMLAttributes<HTMLD
  * </Field>
  *
  * @example
+ * // An InfoLabel as the label: the input is named "Password", the info button
+ * // "Password Information".
+ * <Field label={<InfoLabel info="Use 12 characters or more.">Password</InfoLabel>} required>
+ *   <Input type="password" />
+ * </Field>
+ *
+ * @example
  * // A wrapper component goes inside a plain element.
  * <Field label="Name" required>
  *   <div>
@@ -2792,10 +3648,23 @@ export declare interface DropdownProps extends Omit<React_2.HTMLAttributes<HTMLD
  * </Field>
  */
 export declare const Field: {
-    ({ label, hint, error, validationState, validationMessage, validationMessageIcon, orientation, required, htmlFor, className, children, ref, ...rest }: FieldProps): React_2.JSX.Element;
+    ({ label, hint, error, validationState, validationMessage, validationMessageIcon, orientation, size, required, htmlFor, className, children, ref, ...rest }: FieldProps): React_2.JSX.Element;
     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
@@ -2847,6 +3716,12 @@ export declare interface FieldContextValue {
      * `errorId` is set only while that message is an error.
      */
     validationMessageId?: string;
+    /**
+     * The Field's own `size` prop, when set: the default size of the text inputs and pickers inside
+     * it (their own `size` wins). Absent when the Field has no `size` (the controls then fall back to
+     * `WaveProvider inputDefaults`) and in contexts built before 0.9.
+     */
+    size?: CoreSize;
 }
 
 /**
@@ -2909,6 +3784,18 @@ export declare interface FieldProps extends React_2.HTMLAttributes<HTMLDivElemen
     /**
      * Label displayed above the control (beside it with `orientation="horizontal"`); names the
      * control.
+     *
+     * A `Label` or `InfoLabel` element passed as `label` renders in place of Field's own `<label>`,
+     * never inside it, and names the control by its label text alone (an InfoLabel's info button
+     * sits next to the `<label>`, outside it). Field always points it at the control (`htmlFor`),
+     * and gives it the Field's label id, `required`, label `size` and `weight="semibold"` (the look
+     * of Field's own label), each only where the element leaves it unset; Field's layout classes go
+     * before the element's `className`, so the element's classes win. The element's own `htmlFor`
+     * is read like the Field's `htmlFor` (which wins over it): it becomes the control's id when the
+     * control has none, and one that points at another element is replaced, with a development
+     * warning. Field shows no asterisk of its own next to such an element: the element shows its
+     * `required` indicator. Only the element itself is recognized, not one inside a Fragment, an
+     * array or another element.
      */
     label?: React_2.ReactNode;
     /** Hint shown below the control, after any validation message; describes the control. */
@@ -2951,6 +3838,12 @@ export declare interface FieldProps extends React_2.HTMLAttributes<HTMLDivElemen
      * @default 'vertical'
      */
     orientation?: Orientation;
+    /**
+     * The label's size and the default `size` of the text inputs and pickers inside the Field
+     * (their own `size` wins; choice controls keep theirs). The message and the hint stay small.
+     * @default `WaveProvider` `inputDefaults.size`, else `'medium'`.
+     */
+    size?: CoreSize;
     /**
      * Whether the field is required: shows a decorative asterisk next to the label, sets
      * `aria-required`, and turns on native constraint validation. `<input>`, `<select>`,
@@ -2963,7 +3856,8 @@ export declare interface FieldProps extends React_2.HTMLAttributes<HTMLDivElemen
     required?: boolean;
     /**
      * The id of the control the label points at, when the control has no `id` of its own
-     * (default: a generated id).
+     * (default: the `htmlFor` of a `Label` or `InfoLabel` element passed as `label`, else a
+     * generated id).
      */
     htmlFor?: string;
     /** Ref to the root `<div>`. */
@@ -2985,6 +3879,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 +3948,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 +3980,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 +4032,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`):
  *
@@ -3150,43 +4093,166 @@ export declare interface ImageProps extends React_2.ImgHTMLAttributes<HTMLImageE
 export declare type ImageShape = Shape;
 
 /**
- * A label with an info button that reveals additional information (a "toggletip").
+ * A button with the info glyph that shows `info` in a note next to it: text, links or other rich
+ * content, placed above the button with a beak (a toggletip).
+ *
+ * - **Naming.** The button is named "Information" (`aria-label`, which localizes it). Next to a
+ *   heading or other text, pass `aria-labelledby` with that text's id and the button's own `id`:
+ *   the button is then named "‹text› Information", so several info buttons on a page are told
+ *   apart. The note (`role="note"`) is labelled like the button: by the same `aria-labelledby`
+ *   ids, else by the button. The button has `aria-expanded`, and `aria-controls` while the note is
+ *   open, but no `aria-haspopup`: a note is none of the popup kinds it names.
+ * - **Opening.** A click pins the note open, and a click on a pinned note closes it. With
+ *   `openOnHover` (the default) a mouse pointer resting on the button opens it after 250 ms, and
+ *   it closes 250 ms after the pointer has left the button and the note (a pointer moving
+ *   diagonally from the button into the note keeps it open; touch and pen never hover); keyboard
+ *   focus on the button opens it too, while focus that comes from a pointer press waits for the
+ *   click. A hover close moves no focus, and a note that keyboard focus opened or keeps never
+ *   closes because of pointer movement. Opening never moves focus. Escape, a press outside and
+ *   focus moving outside the button and the note close it; Escape returns focus to the button when
+ *   it was in the note, and a dismissed note opens again on keyboard focus only once focus has
+ *   left both.
+ * - **Tab path.** The note is portaled, but it keeps its place right after the button in the
+ *   keyboard order: Tab from the open button enters the note's first element (a link in it), Tab
+ *   past its last element continues after the button, and Shift+Tab from its first element
+ *   returns to the button.
+ * - **One copy of `info`.** While the note is closed, `info` renders next to the button in an
+ *   element that is not displayed and describes the button (`aria-describedby`), so it is in the
+ *   server HTML and is read when the button takes focus. While the note is shown, `info` renders
+ *   only inside it, in an unnamed element that describes the button. `info` is never in the
+ *   document twice, so content with ids or effects is safe; it remounts each time the note opens
+ *   and closes, so state inside it starts over and its effects run again.
+ * - **Structure.** The button is the root element: `ref`, `className`, `style` and every other
+ *   attribute go to it, the consumer's handlers first. The description and the note render next
+ *   to it, never inside it. Its box is 24×24px at every `size` and renders `data-size`. The note
+ *   mounts through the presence core: it carries `data-presence`, `data-state` (`open`, and
+ *   `closed` while it exits, `inert`) and the `data-wave-infolabel-surface` marker; it ships no
+ *   motion of its own.
+ *
+ * Fluent's InfoButton takes the same `info` and `size`. It opens on click only
+ * (`openOnHover={false}` here), renders its note in place, and moves focus into the note; this one
+ * keeps focus on the button and renders the note in a portal. Fluent's `popover` props and a
+ * controlled open state are not offered.
  *
- * - The info button is a `<button type="button">` named `infoButtonLabel` ("Information"). The
- *   info text is rendered inline in a `hidden` element and linked with `aria-describedby`, so it is
- *   announced from the first render (also after server rendering), whether the popup is open or not.
- * - The visual popup is portaled only while open. It is `aria-hidden` because it duplicates the
- *   description, and it holds no focusable content, so focus stays on the button.
- * - Opens on keyboard focus (not on focus that comes from a pointer press), on hover after a
- *   short delay (the popup itself can be hovered) and on click. A click pins it: a click while it is
- *   open because of hover or focus keeps it open, a click on a pinned popup closes it.
- * - Closes on Escape, on a press outside, when focus moves elsewhere and — unless pinned — when
- *   the pointer leaves or the button loses focus (WCAG 1.4.13). A popup opened by hover that then
- *   receives keyboard focus stays open while the button keeps focus, even after the pointer leaves.
+ * @example
+ * <h2 id="billing">Billing</h2>
+ * <InfoButton
+ *   id="billing-info"
+ *   aria-labelledby="billing billing-info"
+ *   info={<>Invoices are sent monthly. <a href="/help/billing">Learn more</a></>}
+ * />
+ */
+export declare const InfoButton: {
+    ({ info, size: sizeProp, openOnHover, id: idProp, type, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, disabled, onClick, onFocus, onBlur, onKeyDown, onPointerDown, onMouseDown, onPointerEnter, onPointerMove, onPointerLeave, ref, ...rest }: InfoButtonProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * InfoButton: `root` on the `<button>`; `info` on the `role="note"` popup that shows your `info`
+ * (Fluent's `info` slot, the popover surface); `beak` on its arrow.
+ */
+export declare const infoButtonClassNames: {
+    readonly root: "wave-info-button";
+    readonly info: "wave-info-button__info";
+    readonly beak: "wave-info-button__beak";
+};
+
+/** Properties for the InfoButton component. */
+export declare interface InfoButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * The information the note shows: text, links or other content. It also describes the button
+     * (`aria-describedby`), from the server HTML on. It is rendered once: next to the button, not
+     * displayed, while the note is closed, and inside the note while it is shown.
+     */
+    info: React_2.ReactNode;
+    /**
+     * Size of the glyph: 12, 16 or 20px. The button box stays 24×24px at every size, with negative
+     * margins above and below, so it never makes a row that centres its items (as InfoLabel does)
+     * taller.
+     * @default 'medium'
+     */
+    size?: CoreSize;
+    /**
+     * Open the note when a mouse pointer rests on the button (after 250 ms; it closes 250 ms after
+     * the pointer has left the button and the note, touch and pen never hover), and when the button
+     * receives keyboard focus. `false` opens it only on a click, and so on Enter and Space (Fluent's
+     * InfoButton opens on click only). A click always toggles the note: it pins a note that hover or
+     * keyboard focus opened, and closes a pinned one.
+     * @default true
+     */
+    openOnHover?: boolean;
+    /**
+     * Accessible name of the button, and of the note, which is labelled like the button. Localize it
+     * here. With `aria-labelledby` listing the id of your text and the button's own `id`, the name is
+     * your text followed by this one ("Billing Information").
+     * @default 'Information'
+     */
+    'aria-label'?: string;
+    /** Ref to the button. */
+    ref?: React_2.Ref<HTMLButtonElement>;
+}
+
+/**
+ * A label followed by a button that reveals more information about it (Fluent's InfoLabel): the
+ * label renders in a real `<label htmlFor>`, and the button shows `info` — text, links or other
+ * rich content — in a note next to it, rendered once whether the note is open or closed (see
+ * `InfoButton`, which owns that note and its opening, closing and Tab order).
+ *
+ * - `children` is the label content; `label` is a deprecated alias (a warning fires once, and
+ *   `children` wins when both are given).
+ * - `htmlFor`, `required`, `size`, `weight` and `disabled` route to the `<label>`; `disabled` dims
+ *   only the label text, and the info button stays usable.
+ * - The button is named "‹label text› ‹infoButtonLabel›" through `aria-labelledby`, which points
+ *   at the `<label>` and at the button's own id (whose `aria-label` supplies the second half), so
+ *   several InfoLabels on a page are told apart; `infoButtonLabel` localizes that second half.
+ *   `openOnHover` and `size` reach the button too.
+ * - No `controlRef`: InfoLabel is a label, not a form control, so C-ROUTING's composite-control
+ *   routing does not apply to it; a layout that needs the button's own element renders `InfoButton`
+ *   next to a `Label` instead.
  *
  * @example
- * <InfoLabel label="Password" info="Use at least 8 characters." />
+ * <InfoLabel info="Use at least 8 characters.">Password</InfoLabel>
  */
 export declare const InfoLabel: {
-    ({ label, info, infoButtonLabel, className, ref, ...props }: InfoLabelProps): React_2.JSX.Element;
+    ({ children, label, info, infoButtonLabel, openOnHover, id, htmlFor, required, size, weight, disabled, className, ref, ...rest }: InfoLabelProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * InfoLabel: `root` on the outer span; `label` on its Label (which also carries Label's root);
+ * `infoButton` on its InfoButton (which also carries InfoButton's root); `info` on the popup, the
+ * InfoButton's note (which also carries InfoButton's `info`).
+ */
+export declare const infoLabelClassNames: {
+    readonly root: "wave-info-label";
+    readonly label: "wave-info-label__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. */
-    label: string;
+export declare interface InfoLabelProps extends Omit<React_2.HTMLAttributes<HTMLSpanElement>, 'children'>, Pick<LabelProps, 'htmlFor' | 'required' | 'size' | 'weight' | 'disabled'> {
+    /** The label content (Fluent's `children`). */
+    children?: React_2.ReactNode;
     /**
-     * Additional information about the label. It describes the info button
-     * (`aria-describedby`, available from the first render) and is shown in a popup on hover,
-     * keyboard focus or click.
+     * The label content.
+     * @deprecated Use `children`.
      */
-    info: string;
+    label?: React_2.ReactNode;
+    /** The information the info button's note shows: text, links or other rich content. */
+    info: React_2.ReactNode;
     /**
-     * Accessible name of the info button. Localise it here.
+     * Accessible name of the info button: the second half of its name, after the label text
+     * ("Password Information"). Localize it here.
      * @default 'Information'
      */
     infoButtonLabel?: string;
+    /**
+     * Opens the note on a mouse hover, after a short delay, and on keyboard focus, next to a click
+     * (see `InfoButton`'s `openOnHover`, which this passes through unchanged).
+     * @default true
+     */
+    openOnHover?: boolean;
     /** Ref to the root `<span>`. */
     ref?: React_2.Ref<HTMLSpanElement>;
 }
@@ -3197,6 +4263,12 @@ export declare interface InfoLabelProps extends React_2.HTMLAttributes<HTMLSpanE
  * optional error message. Inside a `Field` it picks up the label, hint, error, `required` (native
  * attribute) and invalid state automatically.
  *
+ * `size` resolves from its own prop, then the surrounding `Field`'s `size`, then
+ * `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop, then
+ * `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and
+ * `data-appearance` on the element that draws the field (the `<input>`, or the wrapper with slot
+ * content).
+ *
  * Every prop reaches the `<input>`, except with slot content: then a bordered `<span>` wrapper
  * draws the field and receives `className`, `style` and `hidden` (`ref` stays on the input).
  *
@@ -3206,10 +4278,38 @@ export declare interface InfoLabelProps extends React_2.HTMLAttributes<HTMLSpanE
  * </Field>
  */
 export declare const Input: {
-    ({ error, errorMessageProps, contentBefore, contentAfter, onChange, onValueChange, className, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, required, ...props }: InputProps): React_2.JSX.Element;
+    ({ error, errorMessageProps, size: sizeProp, htmlSize, appearance: appearanceProp, contentBefore, contentAfter, onChange, onValueChange, className, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, required, ...props }: InputProps): React_2.JSX.Element;
     displayName: string;
 };
 
+/**
+ * Look of a text input or picker: `outline` (a full border), `underline` (a bottom stroke only),
+ * `filled-darker` or `filled-lighter` (a fill without a visible stroke).
+ */
+export declare type InputAppearance = 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
+
+/**
+ * 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";
+};
+
+/** Default size and appearance of the text inputs and pickers in a subtree. */
+export declare interface InputDefaults {
+    /** Default `size` of Input, Textarea, Select, SearchBox, SpinButton and the pickers. */
+    size?: CoreSize;
+    /** Default `appearance` of the same controls. */
+    appearance?: InputAppearance;
+}
+
 /**
  * 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, …).
@@ -3222,7 +4322,7 @@ export declare interface InputErrorMessageProps extends React_2.HTMLAttributes<H
 }
 
 /** Properties for the Input component. */
-export declare interface InputProps extends React_2.InputHTMLAttributes<HTMLInputElement> {
+export declare interface InputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /**
      * Validation error.
      * - A non-empty string renders the message in a `role="alert"` element **after** the field (a
@@ -3240,6 +4340,24 @@ export declare interface InputProps extends React_2.InputHTMLAttributes<HTMLInpu
     error?: string | boolean;
     /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */
     errorMessageProps?: InputErrorMessageProps;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.
+     *
+     * A number is the native `size` attribute (the visible width in characters), as in 0.8: it
+     * still renders, warns once in development and is removed in 1.0. Use `htmlSize` for it.
+     * A string of digits only (`size="20"` from untyped code) counts as that number. Any other value
+     * outside the three sizes renders as if `size` were not set.
+     */
+    size?: CoreSize | number;
+    /** The native `size` attribute: the visible width of the field in characters. */
+    htmlSize?: number;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /**
      * Slot rendered before the input text (e.g., an icon). With content in either slot, a bordered
      * `<span>` around the input draws the field: it receives `className`, `style` and `hidden`,
@@ -3260,7 +4378,7 @@ export declare interface InputProps extends React_2.InputHTMLAttributes<HTMLInpu
 
 /**
  * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required
- * asterisk is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom
+ * indicator is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom
  * layouts.
  *
  * @example
@@ -3272,6 +4390,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
@@ -3281,11 +4405,12 @@ export declare type LabelPosition = 'before' | 'after' | 'above' | 'below';
 
 /** Properties for the Label component. */
 export declare interface LabelProps extends React_2.LabelHTMLAttributes<HTMLLabelElement> {
-    /** Whether to show a required indicator asterisk (hidden from assistive technology; mark the
-     * control itself `required`).
+    /** Whether to show a required indicator. `true` shows a decorative asterisk; other content
+     * replaces it (for example a `(required)` text). Decorative (`aria-hidden`), so it must not be
+     * focusable; mark the control itself `required`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | React_2.ReactNode;
     /** Whether the label is visually dimmed.
      * @default false
      */
@@ -3293,7 +4418,7 @@ export declare interface LabelProps extends React_2.LabelHTMLAttributes<HTMLLabe
     /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.
      * @default 'medium'
      */
-    size?: Extract<Size, 'small' | 'medium' | 'large'>;
+    size?: CoreSize;
     /** Font weight of the label (the shared `TextWeight` vocabulary).
      * @default 'regular'
      */
@@ -3330,6 +4455,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 +4551,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 +4570,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 +4741,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 +4776,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 +4832,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 +4847,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 +4871,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 +4894,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 +4957,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 +4980,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 +5014,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 +5098,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 +5138,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 +5199,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 +5356,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 +5499,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 +5599,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'>;
     /**
@@ -4331,13 +5643,51 @@ export declare interface MessageBarProps extends React_2.HTMLAttributes<HTMLDivE
      * `style` are merged the same way, and a Wave Button's own props apply as for the element form.
      * Pass icon content instead, e.g. `dismiss={<CloseIcon />}`.
      */
-    dismiss?: Slot<'span'> | SlotObject<'button'>;
-    /** Message content to display. */
+    dismiss?: Slot<'span'> | SlotObject<'button'>;
+    /**
+     * 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 +5750,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 +5787,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 +5845,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 +5992,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 +6078,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 +6095,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 +6192,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 +6213,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 +6264,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 +6365,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 +6543,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 +6787,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 +6878,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 +6946,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 +7023,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;
 
@@ -5627,26 +7127,61 @@ export declare interface RadioItemProps extends Omit<React_2.ButtonHTMLAttribute
 /**
  * A star rating input (`role="radiogroup"` of `role="radio"` stars).
  *
- * - One tab stop (the chosen star, else the first). Keys choose relative to the current rating and
- *   move focus to the chosen star, as in 0.4: Right/Up one star more, Left/Down one fewer
- *   (Left/Right mirrored under `dir="rtl"`), Home/End the first/last star. From an empty rating,
- *   Right/Up/Home choose 1 star. Keys at the ends (and Left/Down while empty) emit nothing.
- * - The keyboard cannot clear a rating: Left/Down stop at 1 star (APG radio group; 0.4 went down
+ * - One tab stop (the radio of the chosen value, else the first). Keys choose relative to the
+ *   current rating and move focus to the chosen radio, as in 0.4: Right/Up one `step` more (a
+ *   star, or half a star), Left/Down one fewer (Left/Right mirrored under `dir="rtl"`), Home the
+ *   smallest value (`step`) and End `max`. From an empty rating, Right/Up/Home choose `step`.
+ *   Keys at the ends (and Left/Down while empty) emit nothing.
+ * - The keyboard cannot clear a rating: Left/Down stop at `step` (APG radio group; 0.4 went down
  *   to 0). Only a controlled `value={0}` (or a form reset while `defaultValue` is 0) clears it.
+ * - `step={0.5}` offers half stars. Each star stays one pointer target, which chooses by the
+ *   pointer's position (its half from the inline start, else its full value) and then focuses
+ *   the radio it chose; it holds two transparent radios ("2.5 stars", "3 stars") for the
+ *   keyboard and screen readers, and draws the focus ring of either. A controlled value between
+ *   two steps checks no radio and is drawn as the step below it; the keys move it to the next or
+ *   previous step.
  * - `onValueChange` (and the deprecated `onChange` alias) fire only when the rating changes, so
  *   choosing the current star again calls neither.
- * - Hovering previews a value; the preview never outlives the hover or a disabled state.
+ * - Hovering previews a value (half stars preview by the pointer's position); the preview never
+ *   outlives the hover or a disabled state.
+ * - `color` colors the filled stars (`marigold`, the default, `brand` or `neutral`; the root
+ *   carries `data-color`); `iconFilled` and `iconOutline` replace the star glyphs, as a pair.
  * - Inside a `Field` it is named by the Field label (instead of the default "Rating") and
- *   described by its hint and error. The stars are named "1 star", "2 stars", …; `labels`
- *   localizes these names.
+ *   described by its hint and error. The stars are named "1 star", "2 stars", … (and a half value
+ *   "2.5 stars"); `labels` localizes these names.
  * - With `name` (or `required`) it takes part in native forms; a form reset restores
  *   `defaultValue`.
+ * - The stars are generated from `max`. Children that render content replace them: one
+ *   `Rating.Item` per value from 1 to `max`, chosen, previewed, roved and named as the generated
+ *   stars are (`max` still sets the key range and the star names).
+ *
+ * Sub-component: `Rating.Item` (the same component as `RatingDisplay.Item`). React Server
+ * Components import its flat name `RatingItem` (dotted access needs a client file).
  */
 export declare const Rating: {
-    ({ value: valueProp, defaultValue, onValueChange, onChange, max, size, disabled, name, required, form, labels, className, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, onKeyDown, onFocus, onMouseLeave, ref, ...rest }: RatingProps): React_2.JSX.Element;
+    ({ value: valueProp, defaultValue, onValueChange, onChange, max, step: stepProp, size, color, iconFilled, iconOutline, disabled, name, required, form, labels, className, children, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, onKeyDown, onFocus, onMouseLeave, ref, ...rest }: RatingProps): React_2.JSX.Element;
     displayName: string;
+} & {
+    Item: {
+        ({ value, iconFilled, iconOutline, className, ref, ...rest }: RatingItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+};
+
+/**
+ * Rating: `root` on the `role="radiogroup"` element; `star` on each star (a RatingItem: the
+ * `role="radio"` button, or with `step={0.5}` the span around its two radios); `icon` on each
+ * star glyph (the default `<svg>`, or the span of your `iconFilled`/`iconOutline`).
+ */
+export declare const ratingClassNames: {
+    readonly root: "wave-rating";
+    readonly star: "wave-rating__star";
+    readonly icon: "wave-rating__icon";
 };
 
+/** Color of a rating's filled stars. */
+export declare type RatingColor = 'neutral' | 'brand' | 'marigold';
+
 /**
  * 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.
@@ -5656,9 +7191,44 @@ export declare const Rating: {
  *   stars (the root carries `data-compact`). Without them only the stars show.
  * - The value (up to one decimal) and the count are formatted with `locale`, in the text and in
  *   the name; `labels` localizes the name. Pass `locale` when rendering on the server.
+ * - `color` colors the filled stars (`marigold`, the default, `brand` or `neutral`; the root
+ *   carries `data-color`); `iconFilled` and `iconOutline` replace the star glyphs, as a pair.
+ * - The stars are generated from `max`. Children that render content replace them: one
+ *   `RatingDisplay.Item` per value from 1 to `max`. A `compact` display ignores them.
+ *
+ * Sub-component: `RatingDisplay.Item` (the same component as `Rating.Item`). React Server
+ * Components import its flat name `RatingDisplayItem`, or `RatingItem` (dotted access needs a
+ * client file).
  */
 export declare const RatingDisplay: {
-    ({ value, max, size, showValue, count, compact, locale, labels, className, ref, ...rest }: RatingDisplayProps): React_2.JSX.Element;
+    ({ value, max, size, color, iconFilled, iconOutline, showValue, count, compact, locale, labels, className, children, ref, ...rest }: RatingDisplayProps): React_2.JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        ({ value, iconFilled, iconOutline, className, ref, ...rest }: RatingItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+};
+
+/**
+ * RatingDisplay: `root` on the `role="img"` element; `star` on each star span (a RatingItem, and
+ * the one star of `compact`); `icon` on the star glyphs; `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";
+};
+
+/**
+ * Flat name of `RatingDisplay.Item` for React Server Components (the same component as
+ * `RatingItem`).
+ */
+export declare const RatingDisplayItem: {
+    ({ value, iconFilled, iconOutline, className, ref, ...rest }: RatingItemProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -5677,7 +7247,7 @@ export declare interface RatingDisplayLabels {
 }
 
 /** Properties for the RatingDisplay (read-only) component. */
-export declare interface RatingDisplayProps extends React_2.HTMLAttributes<HTMLDivElement> {
+export declare interface RatingDisplayProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'color'> {
     /**
      * Rating value to display. A fraction is drawn as a partly filled star (`4.6` fills 60% of the
      * fifth star), so the stars show the value the accessible name reports.
@@ -5691,6 +7261,36 @@ export declare interface RatingDisplayProps extends React_2.HTMLAttributes<HTMLD
      * @default 'medium'
      */
     size?: Size;
+    /**
+     * Color of the filled stars: `marigold` (default), `brand` or `neutral`; unfilled stars keep a
+     * 3:1 outline. Fluent's default is `neutral`. A value outside the three (from untyped code)
+     * renders as `marigold`; the root carries `data-color` with the resolved value.
+     * @default 'marigold'
+     */
+    color?: RatingColor;
+    /**
+     * The glyph of a filled star. `iconFilled` and `iconOutline` are the glyphs of a filled and an
+     * unfilled star, as a pair; decorative. Fluent's RatingDisplay takes one `icon`; here a filled
+     * and an unfilled star must differ by shape, not by color alone.
+     *
+     * - Each glyph is sized by `size` (an SVG child fills the star) and takes the star's color
+     *   (paint it with `currentColor`). A partly filled star clips the filled glyph over the
+     *   unfilled one from the inline start, and the `compact` star is the filled glyph.
+     * - `null`, `undefined` and a value that renders nothing draw the default star. A value that
+     *   renders nothing, and a pair with only one of the two set, log a development warning.
+     * - A `<button>` or `Button` element (or a slot object whose `as` is one) is not nested in the
+     *   star: its children become the glyph (the default star when they render nothing), its props
+     *   are dropped, and a development warning says so (in place of the warning for a value that
+     *   renders nothing).
+     * - A `RatingDisplay.Item` that sets its own pair draws that one instead.
+     */
+    iconFilled?: Slot<'span'>;
+    /**
+     * The glyph of an unfilled star, as a pair with `iconFilled` (its rules apply); decorative.
+     * Fluent's RatingDisplay takes one `icon`; here a filled and an unfilled star must differ by
+     * shape, not by color alone.
+     */
+    iconOutline?: Slot<'span'>;
     /**
      * Shows the value as text after the stars, formatted with `locale` (up to one decimal).
      * @default false
@@ -5715,25 +7315,105 @@ export declare interface RatingDisplayProps extends React_2.HTMLAttributes<HTMLD
     locale?: string;
     /** Built-in texts, for localization. */
     labels?: RatingDisplayLabels;
+    /**
+     * Custom stars: one `RatingDisplay.Item` per value from 1 to `max`, in place of the generated
+     * stars (when the children render content). A `compact` display ignores them.
+     */
+    children?: React_2.ReactNode;
     /** Ref to the root element. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/**
+ * One star of a `Rating` or a `RatingDisplay`, drawn from its root: pass one per value from 1 to
+ * `max` as the root's children, in place of the stars it generates.
+ *
+ * - In a `Rating` it is a `role="radio"` button named by the root's `labels.star` ("2 stars"),
+ *   chosen, previewed and roved as a generated star is. With the root's `step={0.5}` it is a star
+ *   `<span>`, one pointer target that chooses by the pointer's position, holding two transparent
+ *   radios: its half value, then its full value ("1.5 stars", "2 stars"). In a `RatingDisplay` it
+ *   is a star filled, partly filled or empty by the root's value.
+ * - It draws the root's `color` and glyph pair, or its own `iconFilled`/`iconOutline` pair when it
+ *   sets one.
+ * - `className`, `style`, `data-*`, the other attributes, the handlers and `ref` go to that star
+ *   element, the consumer's handlers first. The role, name, checked state and tab stop of its
+ *   radio (or radios) come from the root.
+ * - At `step={1}` the consumer's `onClick` and `onMouseEnter` compose onto the radio itself, so a
+ *   `preventDefault()` in either vetoes that star's own activation or hover preview. At
+ *   `step={0.5}` `onClick` and `onPointerMove` compose onto the star `<span>` instead: its two
+ *   radios run their own `onClick` first and choose their own value directly (Space, Enter, a
+ *   screen reader, or `radio.click()`), before the click bubbles to the span's composed handler,
+ *   so a `preventDefault()` there vetoes only a pointer-chosen value, never a keyboard or
+ *   assistive-technology activation.
+ * - Outside a `Rating` or `RatingDisplay` it throws in development.
+ */
+export declare const RatingItem: {
+    ({ value, iconFilled, iconOutline, className, ref, ...rest }: RatingItemProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * RatingItem (also Rating.Item, RatingDisplay.Item and RatingDisplayItem): `root` on the star
+ * element (the `role="radio"` button in a Rating, the span around its two radios with
+ * `step={0.5}`, the star span in a RatingDisplay), which also carries its rating's `star` class;
+ * `icon` on each glyph it draws (the default `<svg>`, or the span of an `iconFilled`/`iconOutline`
+ * glyph), which also carries its rating's `icon` class.
+ */
+export declare const ratingItemClassNames: {
+    readonly root: "wave-rating-item";
+    readonly icon: "wave-rating-item__icon";
+};
+
+/** Properties for the RatingItem component (`Rating.Item`, `RatingDisplay.Item`). */
+export declare interface RatingItemProps extends Omit<React_2.HTMLAttributes<HTMLElement>, 'role' | 'aria-checked' | 'aria-label' | 'aria-labelledby' | 'tabIndex' | 'children' | 'onChange'> {
+    /**
+     * The star's full value, from 1 to the root's `max`: the rating it chooses (with the root's
+     * `step={0.5}` also its half, `value - 0.5`), or shows.
+     */
+    value: number;
+    /**
+     * The glyph of this star when filled, as a pair with `iconOutline`, following the rules of the
+     * root's `iconFilled` (a button is unwrapped, its children becoming the glyph, and a value or
+     * button children that render nothing draw the default star). An item that sets either glyph
+     * of the pair (`null` included) draws its own pair instead of its root's, and a glyph it leaves
+     * unset is the default star (a development warning says so).
+     */
+    iconFilled?: Slot<'span'>;
+    /**
+     * The glyph of this star when unfilled, as a pair with `iconFilled`, following the rules of the
+     * root's `iconOutline` (a button is unwrapped, its children becoming the glyph, and a value or
+     * button children that render nothing draw the default star). An item that sets either glyph
+     * of the pair (`null` included) draws its own pair instead of its root's, and a glyph it leaves
+     * unset is the default star (a development warning says so).
+     */
+    iconOutline?: Slot<'span'>;
+    /**
+     * Ref to the star element: the `role="radio"` button in a Rating, the star `<span>` in a Rating
+     * with `step={0.5}` and in a RatingDisplay.
+     */
+    ref?: React_2.Ref<HTMLElement>;
+}
+
 /**
  * The Rating's built-in star names, for localization. Each member is optional and falls back to
  * its English default.
  */
 export declare interface RatingLabels {
     /**
-     * Accessible name of the star that chooses `value` (1 to `max`).
+     * Accessible name of the radio that chooses `value`: a whole star (1 to `max`), and with
+     * `step={0.5}` a half value too ("2.5 stars").
      * @default (value) => value === 1 ? '1 star' : `${value} stars`
      */
     star?: (value: number, max: number) => string;
 }
 
 /** Properties for the Rating component. */
-export declare interface RatingProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
-    /** Controlled rating value (`0` = no rating). */
+export declare interface RatingProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'color'> {
+    /**
+     * Controlled rating value (`0` = no rating): a whole number of stars, or with `step={0.5}` a
+     * multiple of 0.5. A value between two steps (2.7) checks no radio, is drawn as the step below
+     * it (2.5) and holds the tab stop there; the keys move it to the next or previous step.
+     */
     value?: number;
     /** Initial rating for uncontrolled usage (also the value a form reset restores).
      * @default 0
@@ -5751,10 +7431,50 @@ export declare interface RatingProps extends Omit<React_2.HTMLAttributes<HTMLDiv
      * @default 5
      */
     max?: number;
+    /**
+     * The grain of the rating: `1` (whole stars) or `0.5` (half stars). With `0.5`, each star stays
+     * one pointer target of at least 24×24px (a larger `size` keeps a larger one): the half is
+     * chosen by the pointer's position over it (the half at the inline start, which mirrors under
+     * `dir="rtl"`), and two transparent radios per star, the half value then the full value, serve
+     * the keyboard and screen readers. The keys then move by half a star. A value other than `0.5`
+     * (from untyped code) counts as `1`. RatingDisplay has no `step`: it draws any fraction.
+     * @default 1
+     */
+    step?: 0.5 | 1;
     /** Size of the star icons. Every size keeps a target of at least 24×24px.
      * @default 'medium'
      */
     size?: Size;
+    /**
+     * Color of the filled stars: `marigold` (default), `brand` or `neutral`; unfilled stars keep a
+     * 3:1 outline. Fluent's default is `neutral`. A value outside the three (from untyped code)
+     * renders as `marigold`; the root carries `data-color` with the resolved value.
+     * @default 'marigold'
+     */
+    color?: RatingColor;
+    /**
+     * The glyph of a filled star. `iconFilled` and `iconOutline` are the glyphs of a filled and an
+     * unfilled star, as a pair; decorative. Fluent's RatingDisplay takes one `icon`; here a filled
+     * and an unfilled star must differ by shape, not by color alone.
+     *
+     * - Each glyph is sized by `size` (an SVG child fills the star) and takes the star's color
+     *   (paint it with `currentColor`). A half-filled star (`step={0.5}`) clips the filled glyph
+     *   over the unfilled one from the inline start.
+     * - `null`, `undefined` and a value that renders nothing draw the default star. A value that
+     *   renders nothing, and a pair with only one of the two set, log a development warning.
+     * - A `<button>` or `Button` element (or a slot object whose `as` is one) is not nested in the
+     *   star: its children become the glyph (the default star when they render nothing), its props
+     *   are dropped, and a development warning says so (in place of the warning for a value that
+     *   renders nothing).
+     * - A `Rating.Item` that sets its own pair draws that one instead.
+     */
+    iconFilled?: Slot<'span'>;
+    /**
+     * The glyph of an unfilled star, as a pair with `iconFilled` (its rules apply); decorative.
+     * Fluent's RatingDisplay takes one `icon`; here a filled and an unfilled star must differ by
+     * shape, not by color alone.
+     */
+    iconOutline?: Slot<'span'>;
     /** Whether the rating is disabled and non-interactive.
      * @default false
      */
@@ -5769,10 +7489,16 @@ export declare interface RatingProps extends Omit<React_2.HTMLAttributes<HTMLDiv
     /** Id of the form the rating belongs to, when it is rendered outside that form. */
     form?: string;
     /**
-     * Names of the stars ("1 star", "2 stars", …), for localization. The group's own name is
-     * `aria-label` (default "Rating"). Unset members keep their English defaults.
+     * Names of the stars ("1 star", "2 stars", …, and "2.5 stars" for a half value), for
+     * localization. The group's own name is `aria-label` (default "Rating"). Unset members keep
+     * their English defaults.
      */
     labels?: RatingLabels;
+    /**
+     * Custom stars: one `Rating.Item` per value from 1 to `max`, in place of the generated stars
+     * (when the children render content). `max` still sets the key range and the star names.
+     */
+    children?: React_2.ReactNode;
     /** Ref to the `role="radiogroup"` element. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
@@ -5863,15 +7589,34 @@ export declare interface RovingContainerProps {
  *   the label, hint, error and required state automatically.
  * - **Forms**: with `name` the text is submitted with the form; a form reset restores
  *   `defaultValue`.
+ * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ *   `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own
+ *   prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as
+ *   `data-size` and `data-appearance` on the root `<div>`.
  *
  * @example
  * <SearchBox aria-label="Search files" value={query} onValueChange={setQuery} />
  */
 export declare const SearchBox: {
-    ({ value: controlledValue, defaultValue, onValueChange, onChange, onClear, placeholder, disabled, contentBefore, contentAfter, dismiss, className, ref, controlRef, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, required, name, form, readOnly, autoComplete, autoFocus, autoCapitalize, autoCorrect, inputMode, enterKeyHint, spellCheck, maxLength, minLength, pattern, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, hidden, ...rest }: SearchBoxProps): React_2.JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, onChange, onClear, placeholder, disabled, size: sizeProp, appearance: appearanceProp, contentBefore, contentAfter, dismiss, className, ref, controlRef, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, required, name, form, readOnly, autoComplete, autoFocus, autoCapitalize, autoCorrect, inputMode, enterKeyHint, spellCheck, maxLength, minLength, pattern, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, hidden, ...rest }: SearchBoxProps): React_2.JSX.Element;
     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.
@@ -5904,6 +7649,17 @@ export declare interface SearchBoxProps extends Omit<React_2.HTMLAttributes<HTML
     placeholder?: string;
     /** Whether the search box is disabled and non-interactive. */
     disabled?: boolean;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /**
      * Slot rendered before the text (replaces the default search icon). It takes the room it needs;
      * the text starts after it. A value that renders nothing (`null`, `false`, `''`, an empty array
@@ -5956,6 +7712,11 @@ export declare interface SearchBoxProps extends Omit<React_2.HTMLAttributes<HTML
  * `Field` label, `aria-label` or `aria-labelledby`. Inside a `Field` it picks up the label, hint,
  * error, `required` (native attribute) and invalid state automatically.
  *
+ * `size` resolves from its own prop, then the surrounding `Field`'s `size`, then
+ * `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop, then
+ * `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and
+ * `data-appearance` on the `<select>`.
+ *
  * @example
  * <Field label="Country" required>
  *   <Select defaultValue="">
@@ -5965,16 +7726,22 @@ export declare interface SearchBoxProps extends Omit<React_2.HTMLAttributes<HTML
  * </Field>
  */
 export declare const Select: {
-    ({ error, errorMessageProps, className, children, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, required, ...props }: SelectProps): React_2.JSX.Element;
+    ({ error, errorMessageProps, size: sizeProp, htmlSize, appearance: appearanceProp, className, children, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, required, ...props }: SelectProps): React_2.JSX.Element;
     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 }
 
 /** Properties for the Select component. */
-export declare interface SelectProps extends React_2.SelectHTMLAttributes<HTMLSelectElement> {
+export declare interface SelectProps extends Omit<React_2.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     /**
      * Validation error.
      * - A non-empty string renders the message in a `role="alert"` element **after** the select
@@ -5991,6 +7758,24 @@ export declare interface SelectProps extends React_2.SelectHTMLAttributes<HTMLSe
     error?: string | boolean;
     /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */
     errorMessageProps?: InputErrorMessageProps;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.
+     *
+     * A number is the native `size` attribute (the number of visible rows), as in 0.8: it still
+     * renders, warns once in development and is removed in 1.0. Use `htmlSize` for it.
+     * A string of digits only (`size="20"` from untyped code) counts as that number. Any other value
+     * outside the three sizes renders as if `size` were not set.
+     */
+    size?: CoreSize | number;
+    /** The native `size` attribute: the number of visible rows. */
+    htmlSize?: number;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /** Ref to the `<select>` element. */
     ref?: React_2.Ref<HTMLSelectElement>;
 }
@@ -6023,11 +7808,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 +7827,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> {
     /**
@@ -6079,16 +7874,24 @@ export declare interface SkeletonProps extends React_2.HTMLAttributes<HTMLDivEle
  * The fill follows the value through the `--wave-slider-progress` variable on the input (also in
  * the server HTML), including the browser's snapping to `step` and a form reset.
  *
+ * `size` (`small`, `medium`) sets the thumb and rail dimensions; the input carries `data-size`.
+ * Slider does not read a surrounding `Field`'s size or a `WaveProvider`'s input defaults.
+ *
  * @example
  * <Slider label="Volume" min={0} max={100} value={volume} onValueChange={setVolume} />
  */
 export declare const Slider: {
-    ({ className, style, label, value, defaultValue, min, max, step, form, onChange, onValueChange, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, required, ...props }: SliderProps): React_2.JSX.Element;
+    ({ className, style, label, value, defaultValue, min, max, step, size: sizeProp, form, onChange, onValueChange, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, required, ...props }: SliderProps): React_2.JSX.Element;
     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'> {
+export declare interface SliderProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
     /** Controlled slider value. */
     value?: number;
     /** Initial value for uncontrolled usage. */
@@ -6108,10 +7911,25 @@ export declare interface SliderProps extends Omit<React_2.InputHTMLAttributes<HT
      * `Field`, leave it out so the Field's label names the slider.
      */
     label?: string;
+    /**
+     * Size of the thumb and rail: the 0.7 20px thumb on a 4px rail, or a small 16px thumb on a 2px
+     * rail in a 24px-tall input. Unlike the text controls and pickers, Slider does not read a
+     * surrounding `Field`'s size or a `WaveProvider`'s input defaults: this prop is the only source
+     * of its size.
+     *
+     * `SliderProps` inherited the native HTML `size` attribute, which a range input ignores anyway.
+     * A number is deprecated: it renders nothing (not even the native attribute), is reported once
+     * in development, and is a type error from 1.0.
+     * @default 'medium'
+     */
+    size?: SliderSize | number;
     /** Ref to the `<input type="range">` element. */
     ref?: React_2.Ref<HTMLInputElement>;
 }
 
+/** Size of the thumb and rail: a small 16px thumb on a 2px rail, or the 0.7 20px thumb on a 4px rail. */
+export declare type SliderSize = Extract<Size, 'small' | 'medium'>;
+
 /**
  * Slot definition — a customisable sub-element of a component. Accepts:
  *
@@ -6159,14 +7977,26 @@ export declare type SortDirection = 'ascending' | 'descending';
  * A numeric input with decrement/increment buttons (APG spinbutton pattern).
  *
  * - **Keyboard** on the input: ArrowUp/ArrowDown step by `step`, PageUp/PageDown by `largeStep`
- *   (default ten steps), Home/End jump to `min`/`max` when they are finite. The −/+ buttons are
- *   not tab stops and never take focus, so focus stays on the spinbutton and screen readers
- *   announce the new value.
+ *   (default ten steps), Home/End jump to `min`/`max` when they are finite (Shift+Home and
+ *   Shift+End keep their native text-selection instead). The −/+ buttons are not tab stops and
+ *   never take focus, so focus stays on the spinbutton and screen readers announce the new
+ *   value.
+ * - **Pointer** on the −/+ buttons (mouse, touch or pen): a short press steps once, on release
+ *   (its click), never on the press alone, so a finger that starts a scroll on a button changes
+ *   nothing. Holding a button repeats the step: the first after 300ms, then faster, every 80ms
+ *   after about a second (Fluent's timing). A hold stops when the button is released, the
+ *   pointer leaves it or the press turns into a scroll, at the bound, when the window loses
+ *   focus, and when the spin button becomes disabled or read-only. Only the primary button of a
+ *   primary pointer holds: a second finger, a secondary button or a Ctrl+press with a mouse (the
+ *   secondary click on macOS) neither starts a hold nor ends one. A click without a press (a
+ *   screen reader, `element.click()`) steps once. The buttons open no context menu (a long press
+ *   on touch would), show no iOS callout, and allow no text selection or double-tap zoom.
  * - **Typing** edits a draft: the value is parsed, clamped and committed on blur or Enter
  *   (Escape reverts). Text that is not a number is flagged with `aria-invalid` and reverted on
  *   blur. Steps (keys and buttons) start from the typed number, and the −/+ buttons are disabled
  *   when that number is at `min`/`max`. Steps are rounded to the precision of `step` and of the
- *   value, so `0.1 + 0.2` is `0.3`.
+ *   value, so `0.1 + 0.2` is `0.3`; `precision` rounds every committed value, typed or stepped,
+ *   to a fixed number of decimals instead, without padding it (pad with `displayValue`).
  * - **Routing**: `id`, ARIA, native input attributes and focus/keyboard handlers go to the
  *   `<input role="spinbutton">`; `className`, `style`, `data-*`, other handlers and `ref` stay on
  *   the root (`controlRef` reaches the input). Inside a `Field` it picks up the label, hint, error
@@ -6174,16 +8004,130 @@ export declare type SortDirection = 'ascending' | 'descending';
  *   or use a label (development warning otherwise).
  * - **Forms**: with `name` the committed value is submitted; `required` makes the input natively
  *   required; a form reset restores `defaultValue`.
+ * - **Empty values**: `allowEmpty` lets the value become `null` (an empty field). Clearing the
+ *   text and committing it (blur or Enter) sets the value to `null`, uncontrolled too; stepping
+ *   up or down from an empty value starts at 0 and clamps to the nearest bound. `required` (its
+ *   own, or a required Field's) still blocks submitting an empty value: the check runs on the
+ *   `HiddenInput` that carries the committed value, not on the shown text, so it keeps working
+ *   even when the shown text is not empty.
+ * - **Display text**: `displayValue` shows formatted text (`$1.00`) for the value while the field
+ *   is not being edited, and as its `aria-valuetext`; while the field has focus and can be
+ *   edited it shows the plain number instead, so typing still edits the number (a consumer
+ *   `aria-valuetext` always wins). It applies only while `value` is controlled: an uncontrolled
+ *   spin button ignores it and warns once in development.
+ * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ *   `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own
+ *   prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as
+ *   `data-size` and `data-appearance` on the root. SpinButton takes every size the other fields
+ *   do, and unlike 0.7 its root is now exactly as tall as theirs, with its step buttons and
+ *   input taking up that height; sizing the root wider widens the input instead of leaving
+ *   empty space inside it. The step buttons keep a 1px separator from the input only in
+ *   `outline`; the other appearances have none.
  * - The −/+ buttons are named "Decrement"/"Increment"; `labels` localizes the names.
  *
  * @example
  * <SpinButton aria-label="Quantity" min={1} max={10} value={qty} onValueChange={setQty} />
  */
 export declare const SpinButton: {
-    ({ value: valueProp, defaultValue, onValueChange, onChange, min, max, step, largeStep, disabled, name, form, labels, className, hidden, ref, controlRef, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-valuetext": ariaValueText, required, readOnly, placeholder, maxLength, spellCheck, autoComplete, autoFocus, inputMode, enterKeyHint, tabIndex, onFocus, onBlur, onKeyDown, onKeyUp, ...rest }: SpinButtonProps): React_2.JSX.Element;
+    (props: SpinButtonProps | SpinButtonAllowEmptyProps): React_2.ReactNode;
     displayName: string;
 };
 
+/** SpinButton props with `allowEmpty`: the value may be `null` (an empty field). */
+export declare interface SpinButtonAllowEmptyProps extends SpinButtonBaseProps {
+    /** The value may be `null`: clearing the text and committing it empties the field. */
+    allowEmpty: true;
+    /** Controlled value; `null` is an empty field. */
+    value?: number | null;
+    /** Initial value for uncontrolled usage (also what a form reset restores).
+     * @default null
+     */
+    defaultValue?: number | null;
+    /** Called with the new value when it changes, `null` when the field is emptied. */
+    onValueChange?: (value: number | null) => void;
+    /** Not available with `allowEmpty` (the deprecated alias of `onValueChange`). */
+    onChange?: never;
+}
+
+/**
+ * Properties every SpinButton mode shares (every member of {@link SpinButtonProps} and
+ * {@link SpinButtonAllowEmptyProps} except the value members, which differ between them).
+ */
+export declare interface SpinButtonBaseProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | keyof SpinButtonInputProps>, SpinButtonInputProps {
+    /** Minimum allowed value.
+     * @default -Infinity
+     */
+    min?: number;
+    /** Maximum allowed value.
+     * @default Infinity
+     */
+    max?: number;
+    /** Step of the increment/decrement buttons and of ArrowUp/ArrowDown.
+     * @default 1
+     */
+    step?: number;
+    /** Step of PageUp/PageDown.
+     * @default step * 10
+     */
+    largeStep?: number;
+    /**
+     * Decimals every committed value is rounded to, typed or stepped (0–20); the number is not
+     * padded (use `displayValue` for `1.00`). Default: steps round to the decimals of `step` and
+     * the value, typed values are kept as typed.
+     */
+    precision?: number;
+    /** Whether the spin button is disabled and non-interactive. */
+    disabled?: boolean;
+    /** Form field name. With a name, the committed value is submitted with the form. */
+    name?: string;
+    /** Id of the form the spin button belongs to, when it is rendered outside that form. */
+    form?: string;
+    /**
+     * Names of the −/+ step buttons (not tab stops, but in the accessibility tree), for
+     * localization. Unset members keep their English defaults.
+     */
+    labels?: SpinButtonLabels;
+    /**
+     * Text shown for the value while the field is not being edited, and its `aria-valuetext` (a
+     * `$1.00` for 1). While the field has focus and can be edited it shows the plain number, so
+     * typing edits the number. Applies only while `value` is controlled (update it with the
+     * value); Fluent's `displayValue`.
+     */
+    displayValue?: string;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`.
+     *
+     * SpinButton is 24, 32 or 40px tall like every field; its buttons are square-ish, 24, 32 or
+     * 40px wide.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a
+     * visible label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     *
+     * The step buttons keep a 1px separator from the input only in `outline`; the other
+     * appearances have none.
+     */
+    appearance?: InputAppearance;
+    /** Ref to the root `<div>`. */
+    ref?: React_2.Ref<HTMLDivElement>;
+    /** Ref to the `<input role="spinbutton">` (the focusable control). */
+    controlRef?: React_2.Ref<HTMLInputElement>;
+}
+
+/**
+ * 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.
@@ -6205,8 +8149,14 @@ export declare interface SpinButtonLabels {
     decrement?: string;
 }
 
-/** Properties for the SpinButton component. */
-export declare interface SpinButtonProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | keyof SpinButtonInputProps>, SpinButtonInputProps {
+/** SpinButton props with a number value (the 0.7 shape). */
+export declare interface SpinButtonProps extends SpinButtonBaseProps {
+    /**
+     * Allows an empty value (`null`). Takes the literal `true`: a `boolean` variable fits neither
+     * member of the props, so branch the JSX or spread `{ allowEmpty: true, value }`.
+     * @default false
+     */
+    allowEmpty?: false;
     /** Controlled numeric value. */
     value?: number;
     /** Initial value for uncontrolled usage (also what a form reset restores).
@@ -6224,37 +8174,6 @@ export declare interface SpinButtonProps extends Omit<React_2.HTMLAttributes<HTM
      * @deprecated Use `onValueChange`. (`onChange` is reserved for native change events.)
      */
     onChange?: (value: number) => void;
-    /** Minimum allowed value.
-     * @default -Infinity
-     */
-    min?: number;
-    /** Maximum allowed value.
-     * @default Infinity
-     */
-    max?: number;
-    /** Step of the increment/decrement buttons and of ArrowUp/ArrowDown.
-     * @default 1
-     */
-    step?: number;
-    /** Step of PageUp/PageDown.
-     * @default step * 10
-     */
-    largeStep?: number;
-    /** Whether the spin button is disabled and non-interactive. */
-    disabled?: boolean;
-    /** Form field name. With a name, the committed value is submitted with the form. */
-    name?: string;
-    /** Id of the form the spin button belongs to, when it is rendered outside that form. */
-    form?: string;
-    /**
-     * Names of the −/+ step buttons (not tab stops, but in the accessibility tree), for
-     * localization. Unset members keep their English defaults.
-     */
-    labels?: SpinButtonLabels;
-    /** Ref to the root `<div>`. */
-    ref?: React_2.Ref<HTMLDivElement>;
-    /** Ref to the `<input role="spinbutton">` (the focusable control). */
-    controlRef?: React_2.Ref<HTMLInputElement>;
 }
 
 /**
@@ -6292,6 +8211,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 +8288,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 +8403,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 +8472,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 +8527,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 +8629,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). */
@@ -6718,12 +8694,25 @@ export declare type SwatchPickerSize = Extract<Size, 'small' | 'medium' | 'large
  *   `labelPosition` (the root carries `data-label-position`). Beside the label, the switch lines
  *   up with the first line of a label that wraps or has a second line. `children` are not
  *   rendered (a development warning says so).
+ * - `size` (`small`, `medium`) sets the track and thumb dimensions; the root carries `data-size`.
+ *   Switch does not read a surrounding `Field`'s size or a `WaveProvider`'s input defaults.
  */
 export declare const Switch: {
-    ({ checked: checkedProp, defaultChecked, onCheckedChange, onChange, disabled, disabledFocusable, label, labelPosition, name, value, required, form, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-disabled": ariaDisabled, autoFocus, tabIndex, onClick, onFocus, onBlur, onKeyDown, onKeyUp, controlRef, className, children, ref, ...rest }: SwitchProps): React_2.JSX.Element;
+    ({ checked: checkedProp, defaultChecked, onCheckedChange, onChange, disabled, disabledFocusable, label, labelPosition, size, name, value, required, form, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, "aria-details": ariaDetails, "aria-disabled": ariaDisabled, autoFocus, tabIndex, onClick, onFocus, onBlur, onKeyDown, onKeyUp, controlRef, className, children, ref, ...rest }: SwitchProps): React_2.JSX.Element;
     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';
 
@@ -6772,6 +8761,14 @@ export declare interface SwitchProps extends Omit<React_2.HTMLAttributes<HTMLLab
      * @default 'after'
      */
     labelPosition?: SwitchLabelPosition;
+    /**
+     * Size of the track: the 0.7 40x20 track with a 14px thumb, or a small 32x16 track with a 10px
+     * thumb and a 24px-tall pointer target. Unlike the text controls and pickers, Switch does not
+     * read a surrounding Field's size or a WaveProvider's input defaults: this prop is the only
+     * source of its size.
+     * @default 'medium'
+     */
+    size?: SwitchSize;
     /**
      * Form field name. With a name, the switch takes part in native form submission: it submits
      * `name=value` while on.
@@ -6801,6 +8798,9 @@ export declare interface SwitchProps extends Omit<React_2.HTMLAttributes<HTMLLab
     ref?: React_2.Ref<HTMLLabelElement>;
 }
 
+/** Size of the track: a 32x16 track with a 10px thumb, or the 0.7 40x20 track with a 14px thumb. */
+export declare type SwitchSize = Extract<Size, 'small' | 'medium'>;
+
 /**
  * A non-interactive data table with an optional striped body. The table sits in a horizontally
  * scrollable wrapper; while it scrolls, the wrapper is a focusable region (named by
@@ -6853,6 +8853,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 +8872,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 +8885,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 +8918,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 +8931,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 +8977,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 +9027,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 +9042,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 +9058,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 +9124,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 +9172,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`).
@@ -7209,12 +9272,38 @@ export declare interface TagOwnProps {
  * Selected values without a matching option are shown with their raw value. The open list renders
  * only in the browser: an open list (`defaultOpen`, `open`) is closed in the server HTML and opens
  * once the picker has hydrated.
+ *
+ * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ * `size`, then `WaveProvider inputDefaults.size`, else `'medium'` (a Field or provider `small`
+ * gives `'medium'` too, since TagPicker has no `small`); `appearance` from its own prop, then
+ * `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and
+ * `data-appearance` on the root `<div>`. The option list keeps its size.
  */
 export declare const TagPicker: {
     (props: TagPickerProps): React_2.JSX.Element;
     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.
@@ -7301,6 +9390,19 @@ export declare interface TagPickerProps extends Omit<React_2.HTMLAttributes<HTML
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Size of the tags and the field: `medium` (the 0.7 look), `large` or `extra-large` (Fluent's
+     * union; TagPicker has no `small`). Default: the surrounding Field's `size`, else `WaveProvider
+     * inputDefaults.size`, else `'medium'`; a Field or provider `small` gives `'medium'` too. The
+     * option list keeps its size.
+     */
+    size?: TagPickerSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /** Name of the values in form submissions (one hidden input per value). */
     name?: string;
     /** Id of the form the values belong to, when the TagPicker is outside it. */
@@ -7348,6 +9450,9 @@ export declare interface TagPickerProps extends Omit<React_2.HTMLAttributes<HTML
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** Sizes of TagPicker (Fluent's): medium (the 0.7 look), large and extra-large. */
+export declare type TagPickerSize = Extract<Size, 'medium' | 'large' | 'extra-large'>;
+
 /**
  * Props of {@link Tag} rendered as `C` (default `'span'`). `TagProps` without a type argument is
  * the 0.4 name.
@@ -7386,6 +9491,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.
@@ -7513,16 +9635,27 @@ export { Text_2 as Text }
  * bottom border while focused). Inside a `Field` it picks up the label, hint, error, `required`
  * (native attribute) and invalid state automatically.
  *
+ * `size` resolves from its own prop, then the surrounding `Field`'s `size`, then
+ * `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop, then
+ * `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and
+ * `data-appearance` on the textarea element.
+ *
  * @example
  * <Field label="Description" hint="Markdown is supported">
  *   <Textarea rows={4} />
  * </Field>
  */
 export declare const Textarea: {
-    ({ error, errorMessageProps, className, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, required, ...props }: TextareaProps): React_2.JSX.Element;
+    ({ error, errorMessageProps, size: sizeProp, appearance: appearanceProp, className, ref, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-errormessage": ariaErrorMessage, required, ...props }: TextareaProps): React_2.JSX.Element;
     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> {
     /**
@@ -7541,10 +9674,27 @@ export declare interface TextareaProps extends React_2.TextareaHTMLAttributes<HT
     error?: string | boolean;
     /** Props of the error message element (`id`, `className`, …) rendered for a string `error`. */
     errorMessageProps?: InputErrorMessageProps;
+    /**
+     * Size of the field, a minimum height with its type ramp: `small` (64px, Caption 1 text),
+     * `medium` (80px, Body 1) or `large` (96px, Body 2). Default: the surrounding Field's `size`,
+     * else `WaveProvider inputDefaults.size`, else `'medium'`.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /** Ref to the `<textarea>` element. */
     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'`).
@@ -7603,6 +9753,10 @@ export declare type TextWeight = 'regular' | 'semibold' | 'bold';
  *   picker instead of to the clear button that disappears.
  * - The value is `HH:mm` (24-hour) whatever the display `format`; values off the `step` grid or
  *   outside the bounds are still displayed in `format`.
+ * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s
+ *   `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own
+ *   prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as
+ *   `data-size` and `data-appearance` on the root `<div>`. The time list keeps its size.
  * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,
  *   `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,
  *   `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes
@@ -7619,6 +9773,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';
 
@@ -7710,6 +9885,18 @@ export declare interface TimePickerProps extends Omit<React_2.HTMLAttributes<HTM
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the
+     * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The time
+     * list keeps its size.
+     */
+    size?: CoreSize;
+    /**
+     * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),
+     * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible
+     * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.
+     */
+    appearance?: InputAppearance;
     /**
      * Makes the input read-only: the list does not open and the value cannot change. Turning it (or
      * `disabled`) on while the user is typing drops the typed text.
@@ -7788,59 +9975,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 +10187,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 +10219,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 +10282,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 +10321,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 +10352,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 +10401,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 +10521,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 +10529,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 +10554,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 +10572,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 +10588,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 +10616,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 +10683,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 +10729,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 +10755,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 +10826,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 +10909,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 +10979,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 +11070,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 +11123,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 +11498,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 +11593,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 +11639,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 +11652,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>
  */
@@ -9033,6 +11708,8 @@ export declare interface WaveContextValue {
     themeClassName: string;
     /** Element portaled overlays render into; `null` means `document.body`. */
     portalContainer: HTMLElement | null;
+    /** The merged input defaults of the providers above (`{}` outside a provider). */
+    inputDefaults: InputDefaults;
     /** `false` when no {@link WaveProvider} is above the caller (the defaults are returned). */
     hasProvider: boolean;
 }
@@ -9056,12 +11733,20 @@ export declare type WaveDir = 'ltr' | 'rtl';
  *   enclosing provider, so `<WaveProvider theme="light">` inside an RTL app is a light panel that
  *   stays right-to-left and keeps the app's portal container. At the top level the defaults are
  *   `'light'`, `'ltr'` and `document.body`.
+ * - `inputDefaults` nests differently: a nested provider's defined keys override the enclosing
+ *   provider's, and an omitted key is inherited, so setting only `appearance` in a nested provider
+ *   keeps the enclosing provider's `size`.
  */
 export declare const WaveProvider: {
-    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, children, className, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
+    ({ theme: themeProp, dir: dirProp, portalContainer: portalContainerProp, inputDefaults: inputDefaultsProp, children, className, ref, ...rest }: WaveProviderProps): React_2.JSX.Element;
     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> {
     /**
@@ -9081,6 +11766,14 @@ export declare interface WaveProviderProps extends React_2.HTMLAttributes<HTMLDi
      * @default the enclosing WaveProvider's container, else document.body
      */
     portalContainer?: HTMLElement | null;
+    /**
+     * Default `size` and `appearance` of the text inputs and pickers in the subtree (Input,
+     * Textarea, Select, SearchBox, SpinButton, Combobox, Dropdown, DatePicker, TimePicker,
+     * TagPicker). Their own props and a Field's `size` win. A nested provider merges its keys over
+     * the enclosing provider's; an omitted key is inherited.
+     * @default the enclosing WaveProvider's defaults, else none (`medium`, `outline`)
+     */
+    inputDefaults?: InputDefaults;
     /** Content rendered inside the themed container. */
     children: React_2.ReactNode;
     /** Ref to the themed root `<div>`. */