@mortenbrudvik/waveui 0.12.0 → 0.13.0

package/dist/index.d.ts

@@ -306,7 +306,7 @@ export declare type Appearance = 'primary' | 'outline' | 'subtle' | 'transparent
  * <Avatar name="Jane Doe" src="/jane.jpg" badge={<PresenceBadge status="available" />} />
  */
 export declare const Avatar: {
-    ({ src, name, size: sizeProp, icon, image, badge, decorative, className, ref, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-description": ariaDescription, "aria-details": ariaDetails, ...rest }: AvatarProps): React_2.JSX.Element;
+    ({ src, name, size: sizeProp, shape: shapeProp, color: colorProp, idForColor, active, activeAppearance, initials: initialsSlot, icon, image, badge, decorative, className, ref, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-description": ariaDescription, "aria-details": ariaDetails, ...rest }: AvatarProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -325,30 +325,48 @@ export declare const avatarClassNames: {
     readonly badge: "wave-avatar__badge";
 };
 
+/** The color of an Avatar that shows initials: a look, `colorful` (hashed), or a named color. */
+export declare type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+
 /**
- * A row of overlapping avatars (`role="group"`; name it with `aria-label`).
+ * A row of avatars (`role="group"`; name it with `aria-label`), laid out as a `stack` (overlapping),
+ * `spread` or `pie` (`layout`). `size` reaches the members.
  *
  * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` ("+3", named
- * "3 more", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an
- * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`
- * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or
- * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.
- * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to
- * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered
+ * "3 more", see `overflowLabel`; `overflowIndicator="icon"` shows an icon, and a count above 99
+ * reads "99+"). It toggles a popup that lists the hidden members: an `AvatarGroup.Item` as a row
+ * with its avatar and name, an `Avatar` by its `aria-label` or `name` prop, text as it is. Other
+ * members, such as an `Avatar` inside a link or one labelled by `aria-labelledby`, are rendered as
+ * they are, and an `Avatar` or text with no accessible name is listed as `unnamedMemberLabel` with
+ * a development warning. Focus moves into the popup; Escape, a press outside or the button close
+ * it and focus returns to the button (`open`, `defaultOpen` and `onOpenChange(open, details)`
+ * control it). Tab and Shift+Tab move through the popup's own tab stops (links in rendered
  * members); Tab from the last one closes the popup and moves on to the element after the button,
  * Shift+Tab from the first one closes it and returns to the button. When the button is the last
  * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to
  * the browser or the enclosing focus trap.
  *
+ * To split the members yourself, render `AvatarGroup.Item`s and an `AvatarGroup.Popover` holding
+ * the overflow items (see `partitionAvatarGroupItems`).
+ *
  * @example
  * <AvatarGroup aria-label="Project team" max={3}>
- *   <Avatar name="Ada Lovelace" />
- *   <Avatar name="Alan Turing" />
+ *   <AvatarGroup.Item name="Ada Lovelace" />
+ *   <AvatarGroup.Item name="Alan Turing" />
  * </AvatarGroup>
  */
 export declare const AvatarGroup: {
-    ({ max, size, overflowLabel, unnamedMemberLabel, className, children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: AvatarGroupProps): React_2.JSX.Element;
+    ({ max, size, layout, overflowIndicator, overflowLabel, unnamedMemberLabel, open, defaultOpen, onOpenChange, className, children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: AvatarGroupProps): React_2.JSX.Element;
     displayName: string;
+} & {
+    Item: {
+        ({ className, ...props }: AvatarGroupItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Popover: {
+        ({ children, indicator, count, label: labelProp, unnamedMemberLabel, open: openProp, defaultOpen, onOpenChange, className, ref, }: AvatarGroupPopoverProps): React_2.JSX.Element;
+        displayName: string;
+    };
 };
 
 /**
@@ -360,24 +378,120 @@ export declare const avatarGroupClassNames: {
     readonly root: "wave-avatar-group";
     readonly item: "wave-avatar-group__item";
     readonly overflowButton: "wave-avatar-group__overflow-button";
+    readonly pie: "wave-avatar-group__pie";
     readonly surface: "wave-avatar-group__surface";
     readonly list: "wave-avatar-group__list";
     readonly listItem: "wave-avatar-group__list-item";
 };
 
+/**
+ * A member of an AvatarGroup. In the group it renders as an `Avatar`; in the overflow list of the
+ * popup it renders as a row with the avatar and the name. It takes the props of an `Avatar`.
+ */
+export declare const AvatarGroupItem: {
+    ({ className, ...props }: AvatarGroupItemProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * AvatarGroup.Item: `root` on the avatar it renders in the group, and on the row (avatar and name)
+ * it renders in the overflow list; `name` on the name text of that row.
+ */
+export declare const avatarGroupItemClassNames: {
+    readonly root: "wave-avatar-group-item";
+    readonly name: "wave-avatar-group-item__name";
+};
+
+/** Properties for the AvatarGroup.Item sub-component: the props of an Avatar. */
+export declare type AvatarGroupItemProps = AvatarProps;
+
+/** The layouts of an AvatarGroup. */
+export declare type AvatarGroupLayout = 'stack' | 'spread' | 'pie';
+
+/** Why the popup of an AvatarGroup opens or closes: its trigger, or a dismissal. */
+export declare type AvatarGroupOpenChangeDetails = OpenChangeDetails<DismissReason | 'trigger'>;
+
+/**
+ * The overflow of an AvatarGroup, written by hand: a "+N" button that opens a popup listing its
+ * children (`AvatarGroup.Item`s, `Avatar`s, text or other elements). Write it as a child of the
+ * group to replace the overflow that `max` makes; its `count`, `indicator`, `label`, `open` and
+ * `onOpenChange` take over what `max` would have derived. Tab leaves the popup from the button.
+ */
+export declare const AvatarGroupPopover: {
+    ({ children, indicator, count, label: labelProp, unnamedMemberLabel, open: openProp, defaultOpen, onOpenChange, className, ref, }: AvatarGroupPopoverProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** AvatarGroup.Popover: `root` on the overflow button (which also carries the group's button class). */
+export declare const avatarGroupPopoverClassNames: {
+    readonly root: "wave-avatar-group-popover";
+};
+
+/** Properties for the AvatarGroup.Popover sub-component. */
+export declare interface AvatarGroupPopoverProps {
+    /** The overflow members: `AvatarGroup.Item`s, `Avatar`s, text or other elements. */
+    children?: React_2.ReactNode;
+    /**
+     * What the overflow button shows: the number of hidden members (`+3`, capped at `99+`), or an
+     * icon.
+     * @default 'count'
+     */
+    indicator?: 'count' | 'icon';
+    /** The number of hidden members. @default the number of `children` */
+    count?: number;
+    /**
+     * Accessible name of the overflow button and its popup. A function receives the number of hidden
+     * members.
+     * @default (count) => `${count} more`
+     */
+    label?: string | ((count: number) => string);
+    /**
+     * Text listed in the overflow popup for a hidden member that has no accessible name.
+     * @default 'Unnamed member'
+     */
+    unnamedMemberLabel?: string;
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    /**
+     * Whether the popup starts open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the popup asks to open or close, with the reason (`trigger`, `escape`, …). */
+    onOpenChange?: (open: boolean, details?: AvatarGroupOpenChangeDetails) => void;
+    /** Extra classes for the overflow button. */
+    className?: string;
+    /** Ref to the overflow `<button>`. */
+    ref?: React_2.Ref<HTMLButtonElement>;
+}
+
 /** Properties for the AvatarGroup component. */
 export declare interface AvatarGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /**
      * Maximum number of avatars to display. The others are replaced by an overflow button that
      * lists their names. `0` or a negative value shows only the overflow button, a fraction is
      * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment
-     * count one by one.
+     * count one by one. A `pie` shows at most three.
      */
     max?: number;
-    /** Size of the overflow button (match it to the avatars).
-     * @default 'medium'
+    /**
+     * Size of the avatars. It reaches the members that set no `size` of their own, and the overflow
+     * button.
+     * @default 'medium' ('large' in a `pie`)
      */
-    size?: Size;
+    size?: AvatarSize;
+    /**
+     * How the members are laid out: `stack` overlaps them, `spread` puts them side by side, `pie`
+     * draws up to three of them as the wedges of one circle (the group's name is then the only name).
+     * @default 'stack'
+     */
+    layout?: AvatarGroupLayout;
+    /**
+     * What the overflow button shows: the number of hidden members (`+3`, capped at `99+`), or an
+     * icon.
+     * @default 'count'
+     */
+    overflowIndicator?: 'count' | 'icon';
     /**
      * Accessible name of the overflow button (and its popup). A function receives the number of
      * hidden members. Localise it here.
@@ -391,10 +505,31 @@ export declare interface AvatarGroupProps extends React_2.HTMLAttributes<HTMLDiv
      * @default 'Unnamed member'
      */
     unnamedMemberLabel?: string;
+    /** Whether the overflow popup is open (controlled). */
+    open?: boolean;
+    /**
+     * Whether the overflow popup starts open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the overflow popup asks to open or close, with the reason: `trigger` (the button),
+     * `escape`, `outside-press` or `focus-outside`.
+     */
+    onOpenChange?: (open: boolean, details?: AvatarGroupOpenChangeDetails) => void;
     /** Ref to the root `<div>`. */
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** The named colors of an Avatar: the persona palette (`--wave-palette-<name>` tokens). */
+export declare type AvatarNamedColor = 'red' | 'pumpkin' | 'gold' | 'forest' | 'teal' | 'blue' | 'navy' | 'lavender' | 'purple' | 'magenta' | 'brown' | 'steel';
+
+/**
+ * The numeric sizes of an Avatar, in pixels (Fluent's 14 sizes). A literal union: Tailwind can only
+ * generate the classes of {@link avatarBoxClasses}.
+ */
+export declare type AvatarNumericSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+
 /** Properties for the Avatar component. */
 export declare interface AvatarProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     /**
@@ -409,11 +544,49 @@ export declare interface AvatarProps extends React_2.HTMLAttributes<HTMLSpanElem
      */
     name?: string;
     /**
-     * Size of the avatar. Without it, an Avatar in the `media` of a tag (Tag, InteractionTag) takes
-     * the tag's media box instead: 24, 20 or 16px by the tag's size.
+     * Size of the avatar: a named size (`extra-small` 24px to `extra-large` 56px) or a pixel size from
+     * 16 to 128. Without it, an Avatar in the `media` of a tag (Tag, InteractionTag) takes the tag's
+     * media box instead: 24, 20 or 16px by the tag's size.
      * @default 'medium'
      */
-    size?: Size;
+    size?: AvatarSize;
+    /**
+     * Shape of the avatar. Without it, an Avatar in the `media` of a rounded tag is square.
+     * @default 'circular'
+     */
+    shape?: 'circular' | 'square';
+    /**
+     * Color of the avatar when it shows initials: `brand` (the primary color), `neutral` (muted),
+     * `colorful` (one of the named colors, chosen from `idForColor`, else from `name`; `brand`
+     * without either) or a named color of the persona palette. An image, or an icon, keeps its own
+     * look.
+     * @default 'brand'
+     */
+    color?: AvatarColor;
+    /**
+     * Whether the person is active: `active` draws the `activeAppearance` around the avatar, `inactive`
+     * dims it, `unset` shows neither.
+     * @default 'unset'
+     */
+    active?: 'active' | 'inactive' | 'unset';
+    /**
+     * How an `active` avatar is marked: a `ring`, a `shadow`, both (`ring-shadow`) or a `glow` in the
+     * primary color.
+     * @default 'ring'
+     */
+    activeAppearance?: 'ring' | 'ring-shadow' | 'shadow' | 'glow';
+    /**
+     * A stable id (a user id, say) that picks the color of `color="colorful"`, so the same person has
+     * the same color wherever they are shown, whatever their name looks like.
+     */
+    idForColor?: string;
+    /**
+     * The initials shown when there is no image and no icon, instead of the ones computed from
+     * `name` (see `getInitials`): a string, an element or an object of `<span>` attributes. A value
+     * that renders nothing (`''`, `[]`) keeps the computed initials. Rendered in an `aria-hidden`
+     * `<span>`.
+     */
+    initials?: Slot<'span'>;
     /**
      * Icon shown instead of the initials when there is no image. Rendered in an `aria-hidden`
      * `<span>` (a slot object can override its attributes). A falsy value (`null`, `false`, `''`,
@@ -455,6 +628,9 @@ export declare interface AvatarProps extends React_2.HTMLAttributes<HTMLSpanElem
     ref?: React_2.Ref<HTMLSpanElement>;
 }
 
+/** The size of an Avatar: a named size (24 to 56px) or one of the {@link AvatarNumericSize}s. */
+export declare type AvatarSize = Size | AvatarNumericSize;
+
 /** How a modal surface's backdrop paints the page: `dimmed`, or `transparent` (a modal over another). */
 export declare type BackdropAppearance = 'dimmed' | 'transparent';
 
@@ -1071,7 +1247,8 @@ export declare interface CalendarValueChangeDetails {
 }
 
 /**
- * A surface that groups related content, with `Card.Header`, `Card.Body` and `Card.Footer`.
+ * A surface that groups related content, with `Card.Header`, `Card.Preview`, `Card.Body` and
+ * `Card.Footer`.
  *
  * **Selectable cards** (`onSelect`) come in two patterns:
  * - A card without interactive content is itself the control (`selectionControl="card"`, the
@@ -1088,7 +1265,7 @@ export declare interface CalendarValueChangeDetails {
  * the selected look only; its state is not exposed to assistive technology.
  *
  * React Server Components cannot dot into a client module: import the flat names `CardHeader`,
- * `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.
+ * `CardPreview`, `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.
  *
  * @example
  * <Card onSelect={toggle} selected={selected}>
@@ -1102,10 +1279,14 @@ export declare interface CalendarValueChangeDetails {
  */
 export declare const Card: PolymorphicComponent<"div", CardOwnProps> & {
     Header: PolymorphicComponent<"div", CardHeaderOwnProps>;
+    Preview: PolymorphicComponent<"div", CardPreviewOwnProps>;
     Body: PolymorphicComponent<"div", CardBodyOwnProps>;
     Footer: PolymorphicComponent<"div", CardFooterOwnProps>;
 };
 
+/** The look of a Card: a filled surface with a shadow, a muted fill, an outline, or no surface. */
+export declare type CardAppearance = 'filled' | 'filled-alternative' | 'outline' | 'subtle';
+
 /**
  * The main content of a {@link Card}. Flat export for React Server Components (`Card.Body` in
  * client files).
@@ -1131,6 +1312,7 @@ export declare const cardClassNames: {
     readonly root: "wave-card";
     readonly checkbox: "wave-card__checkbox";
     readonly checkmark: "wave-card__checkmark";
+    readonly floatingAction: "wave-card__floating-action";
 };
 
 /**
@@ -1160,8 +1342,11 @@ export declare const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps>
 /** Card.Header: `root` on the rendered element; `title` on the title; `subtitle` on the subtitle. */
 export declare const cardHeaderClassNames: {
     readonly root: "wave-card-header";
+    readonly image: "wave-card-header__image";
+    readonly text: "wave-card-header__text";
     readonly title: "wave-card-header__title";
     readonly subtitle: "wave-card-header__subtitle";
+    readonly action: "wave-card-header__action";
 };
 
 /** The Card.Header's own props (component-specific props only). */
@@ -1174,6 +1359,16 @@ export declare interface CardHeaderOwnProps {
     title?: React_2.ReactNode;
     /** Subtitle content displayed below the title (none when it renders nothing, as `title`). */
     subtitle?: React_2.ReactNode;
+    /**
+     * An image beside the text, at the start: an `Avatar`, an icon, a logo. A value that renders
+     * nothing renders no element.
+     */
+    image?: Slot<'span'>;
+    /**
+     * An action beside the text, at the end: a menu button, say. A value that renders nothing
+     * renders no element.
+     */
+    action?: Slot<'span'>;
 }
 
 /** Props of {@link CardHeader} rendered as `C` (default `'div'`), including `ref`. */
@@ -1184,6 +1379,25 @@ export declare type CardHeaderProps<C extends React_2.ElementType = 'div'> = Pol
  * Every other prop comes from the rendered element (`as`).
  */
 export declare interface CardOwnProps {
+    /**
+     * Look of the card: `filled` (a surface with a border and a shadow), `filled-alternative` (a
+     * muted fill), `outline` (a border only) or `subtle` (no surface until hovered or selected). A
+     * selectable card gets a hover and pressed look for its appearance; the selected look is the
+     * same in every appearance.
+     * @default 'filled'
+     */
+    appearance?: CardAppearance;
+    /**
+     * Padding of the card's parts: `small` 0.75rem, `medium` 1rem, `large` 1.25rem.
+     * @default 'medium'
+     */
+    size?: CoreSize;
+    /**
+     * Layout of the card's parts: `vertical` stacks them, `horizontal` puts them in a row (put the
+     * text parts in one wrapper element to keep them stacked beside a `Card.Preview`).
+     * @default 'vertical'
+     */
+    orientation?: Orientation;
     /**
      * Whether the card is selected. Shown with the selected colors plus non-color cues: a 2px primary
      * border (a 1px border plus an inset 1px ring), a Highlight outline in forced-colors mode, and a
@@ -1225,8 +1439,54 @@ export declare interface CardOwnProps {
      * `Card.Header` title, which the checkbox references with `aria-labelledby`.
      */
     selectLabel?: string;
+    /**
+     * The built-in checkbox of `selectionControl="checkbox"`: an object of `<input>` attributes is
+     * merged onto it (a class, `aria-describedby`, `name`; its type, checked state and change
+     * handling stay the card's), an element replaces it (give that control its own name and call
+     * `onSelect` from it), and `null` or `false` removes it, for a control you render elsewhere.
+     * Ignored with the default `selectionControl`.
+     */
+    checkbox?: Slot<'input'>;
+    /**
+     * An action over the top end corner of the card (a menu button, say). A card with one is
+     * positioned; with `selectionControl="checkbox"` the built-in checkbox then moves to the top
+     * start corner. Content that renders nothing renders no element.
+     */
+    floatingAction?: Slot<'span'>;
 }
 
+/**
+ * Edge-to-edge media of a {@link Card} (an image, a video, a map), with an optional `logo` over its
+ * bottom start corner. It has no padding: in a vertical card it fills the width, in a horizontal
+ * one it is the full-height block at the start. Flat export for React Server Components
+ * (`Card.Preview` in client files).
+ *
+ * @example
+ * <Card>
+ *   <Card.Preview logo={<img alt="Contoso" src="/logo.svg" />}><img alt="" src="/cover.jpg" /></Card.Preview>
+ *   <Card.Header title="Contoso" />
+ * </Card>
+ */
+export declare const CardPreview: PolymorphicComponent<'div', CardPreviewOwnProps>;
+
+/** Card.Preview: `root` on the rendered element; `logo` on the logo over its bottom start corner. */
+export declare const cardPreviewClassNames: {
+    readonly root: "wave-card-preview";
+    readonly logo: "wave-card-preview__logo";
+};
+
+/** The Card.Preview's own props (component-specific props only). */
+export declare interface CardPreviewOwnProps {
+    /**
+     * A logo placed over the bottom start corner of the preview: a string, an element or an object
+     * of `<span>` attributes. A value that renders nothing renders no element.
+     */
+    logo?: Slot<'span'>;
+}
+
+/** Props of {@link CardPreview} rendered as `C` (default `'div'`), including `ref`. */
+export declare type CardPreviewProps<C extends React_2.ElementType = 'div'> = PolymorphicProps<C, CardPreviewOwnProps>;
+
 /**
  * Props of {@link Card} rendered as `C` (default `'div'`). `CardProps` without a type argument is
  * the 0.4 name: the props of a Card rendered as a `<div>`, including `ref`.
@@ -1261,19 +1521,32 @@ export declare type CardProps<C extends React_2.ElementType = 'div'> = Polymorph
  * - The controls are layered over the slides inside the carousel's own stacking context, so they
  *   never paint over page headers that stay in view while the page scrolls.
  *
- * Compound access (`Carousel.Item`) needs a client module; React Server Components import the
- * flat name `CarouselItem` instead.
+ * - `groupSize` shows several slides per page, `draggable` lets the pointer drag them, and a
+ *   `thumbnail` on a `Carousel.Item` turns the picker into a row of thumbnails.
+ * - `controlsLayout` places the Previous and Next buttons over the slides (`overlay`,
+ *   `overlay-wide`) or beside them (`inline`, `inline-wide`); `Carousel.Button` replaces the
+ *   built-in button of its `direction` with one of your own glyph.
+ *
+ * Compound access (`Carousel.Item`, `Carousel.Button`) needs a client module; React Server
+ * Components import the flat names `CarouselItem` and `CarouselButton` instead.
  */
 export declare const Carousel: {
-    ({ value: controlledValue, defaultValue, onValueChange, autoPlay, autoPlayInterval, autoPlayLabels, labels, loop, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: CarouselProps): React_2.JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, autoPlay, autoPlayInterval, autoPlayLabels, labels, loop, groupSize, align, draggable, controlsLayout, appearance, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ref, ...rest }: CarouselProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Item: {
-        ({ className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
+        ({ thumbnail: _thumbnail, className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        ({ direction, onClick, className, children, ref, ...rest }: CarouselButtonProps): React_2.JSX.Element;
         displayName: string;
     };
 };
 
+/** How a Carousel is drawn: `flat`, or `elevated` with rounded corners and a shadow. */
+export declare type CarouselAppearance = 'flat' | 'elevated';
+
 /** Accessible names of the rotation control shown while `autoPlay` is on. */
 export declare interface CarouselAutoPlayLabels {
     /** Name of the control while slides rotate (activating it stops the rotation).
@@ -1286,15 +1559,42 @@ export declare interface CarouselAutoPlayLabels {
     play?: string;
 }
 
+/**
+ * A Previous or Next button written in a {@link Carousel}, for a glyph or look of your own.
+ * Write it as a direct child of the Carousel: it replaces the built-in button of its
+ * `direction`, takes its place in the layout and is named, disabled and wired to the slides the
+ * same way (`labels.previous`/`labels.next`, `aria-controls`, `aria-disabled` at the ends
+ * without `loop`, which keeps it focusable). Its children replace the chevron, which mirrors in
+ * right-to-left layouts; `aria-label` replaces the name.
+ */
+export declare const CarouselButton: {
+    ({ direction, onClick, className, children, ref, ...rest }: CarouselButtonProps): React_2.JSX.Element;
+    displayName: string;
+};
+
+/** Carousel.Button: `root` on the button element. */
+export declare const carouselButtonClassNames: {
+    readonly root: "wave-carousel-button";
+};
+
+/** Properties for the CarouselButton sub-component. */
+export declare interface CarouselButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Which way the button moves the carousel. */
+    direction: 'previous' | 'next';
+    ref?: React_2.Ref<HTMLButtonElement>;
+}
+
 /**
  * Carousel: `root` on the `role="region"` element; `autoPlayButton` on the pause and start
- * button; `track` on the moving element around the slides; `slide` on each slide wrapper;
+ * button; `viewport` on the clipping element around the track; `track` on the moving element
+ * around the slides; `slide` on each slide wrapper;
  * `previousButton` and `nextButton` on the arrow buttons; `picker` on the `role="group"` of
  * picker buttons; `pickerButton` on each of them; `pickerIndicator` on each button's dot.
  */
 export declare const carouselClassNames: {
     readonly root: "wave-carousel";
     readonly autoPlayButton: "wave-carousel__auto-play-button";
+    readonly viewport: "wave-carousel__viewport";
     readonly track: "wave-carousel__track";
     readonly slide: "wave-carousel__slide";
     readonly previousButton: "wave-carousel__previous-button";
@@ -1304,23 +1604,35 @@ export declare const carouselClassNames: {
     readonly pickerIndicator: "wave-carousel__picker-indicator";
 };
 
+/** Where a Carousel puts its Previous and Next buttons. */
+export declare type CarouselControlsLayout = 'overlay' | 'inline' | 'overlay-wide' | 'inline-wide';
+
 /**
  * One slide of a {@link Carousel}. Write it in the Carousel, directly or in a Fragment: a component
  * that renders `Carousel.Item` itself is not recognised as a slide (put that component inside the
  * `Carousel.Item` instead).
  */
 export declare const CarouselItem: {
-    ({ className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
+    ({ thumbnail: _thumbnail, className, children, ref, ...rest }: CarouselItemProps): React_2.JSX.Element;
     displayName: string;
 };
 
-/** Carousel.Item: `root` on the item element. */
+/** Carousel.Item: `root` on the item element; `thumbnail` on the image in its picker button. */
 export declare const carouselItemClassNames: {
     readonly root: "wave-carousel-item";
+    readonly thumbnail: "wave-carousel-item__thumbnail";
 };
 
 /** Properties for the CarouselItem sub-component. */
 export declare interface CarouselItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * An image for this slide's button in the picker, in place of the dot. A string is the image
+     * `src`; an object sets the `<img>`'s attributes. The button keeps its slide-label name, so the
+     * image is decorative (`alt=""`). When any slide has one, the picker becomes a row of
+     * thumbnails below the slides; a slide without one keeps its dot. With `groupSize` above 1, a
+     * page shows the thumbnail of its first slide.
+     */
+    thumbnail?: Slot<'img'>;
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
@@ -1350,6 +1662,13 @@ export declare interface CarouselLabels {
      * @default (index, total) => `Slide ${index + 1} of ${total}`
      */
     slide?: (index: number, total: number) => string;
+    /**
+     * Name of a page of several slides, from the one-based number of its first and last slide, out
+     * of `total` slides (`groupSize` above 1). It names the page's picker button and is announced
+     * by the live region when the page is shown. A page of one slide uses `slide`.
+     * @default (start, end, total) => `Slides ${start} to ${end} of ${total}`
+     */
+    slides?: (start: number, end: number, total: number) => string;
     /** How assistive technology announces the carousel region (`aria-roledescription`).
      * @default 'carousel'
      */
@@ -1362,14 +1681,57 @@ export declare interface CarouselLabels {
 
 /** Properties for the Carousel component. */
 export declare interface CarouselProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Controlled index of the currently active slide. Out-of-range values show the nearest slide. */
+    /**
+     * Controlled index of the active slide: with `groupSize` above 1, the first slide of the shown
+     * page. A value in the middle of a page shows that page and out-of-range values show the
+     * nearest one.
+     */
     value?: number;
     /** Default active slide index for uncontrolled usage.
      * @default 0
      */
     defaultValue?: number;
-    /** Called with the new index when the active slide changes (not when it stays the same). */
+    /**
+     * Called with the new index when the active slide changes (not when it stays the same): the
+     * first slide of the new page when `groupSize` is above 1.
+     */
     onValueChange?: (index: number) => void;
+    /**
+     * How many slides one page shows: a number, or `'auto'` to show as many as fit the width of the
+     * carousel (the slides keep their own width, which must be equal). Previous, Next, the picker
+     * (one button per page), looping and autoplay move by page, and the slides of the shown page
+     * form one arrow-key focus group. With `1` each slide fills the width, as before.
+     * @default 1
+     */
+    groupSize?: number | 'auto';
+    /**
+     * With `groupSize="auto"`, where the shown page sits when its slides do not fill the width.
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Lets the pointer drag the slides (mouse, touch and pen). The track follows the pointer and,
+     * on release, the page changes when the drag passed a quarter of the width or left fast, else
+     * it snaps back; the direction follows the carousel's. The click that ends a drag is not
+     * delivered to the slide, and a vertical swipe still scrolls the page. Dragging pauses
+     * autoplay like the pointer over the carousel does. The buttons and the keyboard stay the way
+     * to operate the carousel without a pointer.
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * Where the Previous and Next buttons go. `overlay` floats round buttons over the slides;
+     * `overlay-wide` makes them full-height strips at the edges; `inline` puts them in a row with
+     * the slides, outside them; `inline-wide` is `inline` with full-height buttons. The rotation
+     * control stays the first focusable element at the start corner in every layout.
+     * @default 'overlay'
+     */
+    controlsLayout?: CarouselControlsLayout;
+    /**
+     * `elevated` rounds the corners and adds a shadow.
+     * @default 'flat'
+     */
+    appearance?: CarouselAppearance;
     /**
      * Rotates the slides automatically. A Pause/Start control is rendered as the first focusable
      * element. Rotation pauses while focus is anywhere inside the carousel (the control included;
@@ -3387,6 +3749,12 @@ export declare interface DatePickerProps extends Omit<React_2.HTMLAttributes<HTM
 /** A day of the week, as `Date.prototype.getDay()` numbers them: 0 is Sunday, 6 is Saturday. */
 export declare type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
+/**
+ * The 0.5 spellings of two presence statuses. They still work and warn once in development; use
+ * `'do-not-disturb'` and `'out-of-office'` instead. Removed in 1.0.
+ */
+export declare type DeprecatedPresenceStatus = 'dnd' | 'oof';
+
 /**
  * A dialog (Fluent UI v2 style), modal by default: `Dialog` holds the open state; `Dialog.Trigger`
  * opens and closes it and `Dialog.Content` renders the surface in a portal while open (and, with
@@ -5258,6 +5626,38 @@ export declare function getFirstTabbable(container: Element, options?: {
     includeContainer?: boolean;
 }): HTMLElement | null;
 
+/**
+ * The initials of a person's name, for an avatar: the first letter of the first and, with two or
+ * more words, of the last word, upper-cased.
+ *
+ * Text in `()`, `[]`, `{}` and `<>` and all punctuation are ignored (`'Jane Doe (Contoso)'` gives
+ * `'JD'`). A name with no letters (a phone number, an emoji) or with letters of a script without
+ * letter initials (Han, Hiragana, Katakana, Hangul, Thai, Lao, Khmer, Myanmar, Tibetan) gives
+ * `''`, so an avatar falls back to its person glyph. Server-safe.
+ *
+ * @example
+ * getInitials('Jane Doe (Contoso)'); // 'JD'
+ * getInitials('Jane Doe', { dir: 'rtl' }); // 'DJ'
+ * getInitials('+1 (555) 010-0000'); // ''
+ */
+export declare function getInitials(name: string, options?: GetInitialsOptions): string;
+
+/** Options of {@link getInitials}. */
+export declare interface GetInitialsOptions {
+    /**
+     * Text direction of the place the initials are shown. In `'rtl'` the first and last initial of a
+     * left-to-right script swap, so they read in the order of the name on screen; a Hebrew or Arabic
+     * name keeps its order, which the text direction already mirrors.
+     * @default 'ltr'
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Keep only the first initial, also for a name of several words.
+     * @default false
+     */
+    firstInitialOnly?: boolean;
+}
+
 /** The last tabbable element inside `container`, or `null`. */
 export declare function getLastTabbable(container: Element, options?: {
     includeContainer?: boolean;
@@ -9157,17 +9557,53 @@ export declare interface PaginationProps extends Omit<React_2.HTMLAttributes<HTM
 }
 
 /**
- * A person's avatar next to their name and optional secondary text (job title, email), with an
- * optional presence badge.
+ * Splits the items of an AvatarGroup into the ones shown inline and the ones in the overflow list.
+ * `AvatarGroup` uses it for `max`; use it yourself to render `AvatarGroup.Item`s and
+ * `AvatarGroup.Popover` from your own list. Server-safe: it imports nothing.
+ *
+ * @example
+ * const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: people, maxInlineItems: 4 });
+ */
+export declare function partitionAvatarGroupItems<T>({ items, maxInlineItems, layout, }: PartitionAvatarGroupItemsOptions<T>): PartitionAvatarGroupItemsResult<T>;
+
+/** Options of {@link partitionAvatarGroupItems}. */
+export declare interface PartitionAvatarGroupItemsOptions<T> {
+    /** All the items of the group. */
+    items: readonly T[];
+    /**
+     * How many items are shown inline; the rest go to the overflow. A fraction is rounded down, `0`
+     * or a negative value shows none, and `undefined` or `NaN` shows all (up to the layout's cap).
+     */
+    maxInlineItems?: number;
+    /**
+     * The layout of the group. A `pie` shows at most three items inline.
+     * @default 'stack'
+     */
+    layout?: AvatarGroupLayout;
+}
+
+/** Result of {@link partitionAvatarGroupItems}. */
+export declare interface PartitionAvatarGroupItemsResult<T> {
+    /** The items shown inline, in order. */
+    inlineItems: T[];
+    /** The items in the overflow list, in order; `undefined` when nothing overflows. */
+    overflowItems: T[] | undefined;
+}
+
+/**
+ * A person's avatar next to their name and up to three more text lines (job title, location,
+ * status), with an optional presence badge. The text can sit after, before or below the avatar
+ * (`textPosition`), `presenceOnly` swaps the avatar for the presence badge, and the text scales with
+ * `size` up to `huge`.
  *
  * The built-in avatar is decorative (`<Avatar decorative>`): the visible name is announced once,
  * not a second time as the avatar's image name. The presence badge stays exposed as a named image.
  *
  * @example
- * <Persona name="Jane Doe" secondaryText="Designer" status="available" />
+ * <Persona name="Jane Doe" secondaryText="Designer" tertiaryText="Oslo" status="available" />
  */
 export declare const Persona: {
-    ({ name, secondaryText, src, size, status, avatar, badge, className, ref, ...props }: PersonaProps): React_2.JSX.Element;
+    ({ name, primaryText, secondaryText, tertiaryText, quaternaryText, textPosition, textAlignment, presenceOnly, src, size, status, avatar, badge, className, ref, ...props }: PersonaProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -9182,20 +9618,52 @@ export declare const personaClassNames: {
     readonly badge: "wave-persona__badge";
     readonly primaryText: "wave-persona__primary-text";
     readonly secondaryText: "wave-persona__secondary-text";
+    readonly tertiaryText: "wave-persona__tertiary-text";
+    readonly quaternaryText: "wave-persona__quaternary-text";
 };
 
 /** Properties for the Persona component. */
 export declare interface PersonaProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Display name of the person. */
-    name: string;
-    /** Secondary text such as job title or email. */
-    secondaryText?: string;
+    /**
+     * Display name of the person. It gives the avatar its initials and the first text line its text
+     * (unless `primaryText` is given). A persona with neither `name` nor `primaryText` warns in
+     * development.
+     */
+    name?: string;
+    /**
+     * The first text line (the name). A string, an element or an object of `<span>` attributes.
+     * @default the `name`
+     */
+    primaryText?: Slot<'span'>;
+    /** The second text line, such as a job title or email. */
+    secondaryText?: Slot<'span'>;
+    /** The third text line, such as a location. */
+    tertiaryText?: Slot<'span'>;
+    /** The fourth text line, such as a status message. */
+    quaternaryText?: Slot<'span'>;
+    /**
+     * Where the text sits relative to the avatar, in reading order: after it, before it, or below it.
+     * @default 'after'
+     */
+    textPosition?: 'after' | 'before' | 'below';
+    /**
+     * How the text lines align with each other.
+     * @default 'start' ('center' when the text is below the avatar)
+     */
+    textAlignment?: 'start' | 'center';
+    /**
+     * Shows only the presence badge (from `status` or `badge`) in place of the avatar. The text
+     * stays.
+     * @default false
+     */
+    presenceOnly?: boolean;
     /** URL of the person's avatar image. */
     src?: string;
-    /** Size of the persona avatar.
+    /**
+     * Size of the persona: its avatar and its text.
      * @default 'medium'
      */
-    size?: Size;
+    size?: PersonaSize;
     /** Presence status shown as a badge on the avatar. Ignored when a `badge` is given. */
     status?: PresenceStatus;
     /**
@@ -9215,6 +9683,9 @@ export declare interface PersonaProps extends React_2.HTMLAttributes<HTMLDivElem
     ref?: React_2.Ref<HTMLDivElement>;
 }
 
+/** The size of a Persona: the Avatar sizes, and `huge` (a 72px avatar). */
+export declare type PersonaSize = Size | 'huge';
+
 /** How urgently assistive technology should read a message. */
 export declare type Politeness = 'polite' | 'assertive';
 
@@ -9737,9 +10208,10 @@ export declare interface PresenceAttributes {
  *
  * @example
  * <PresenceBadge status="busy" />
+ * <PresenceBadge status="do-not-disturb" />
  */
 export declare const PresenceBadge: {
-    ({ status, size, className, ref, ...props }: PresenceBadgeProps): React_2.JSX.Element;
+    ({ status: statusProp, size: sizeProp, className, ref, ...props }: PresenceBadgeProps): React_2.JSX.Element;
     displayName: string;
 };
 
@@ -9751,9 +10223,14 @@ export declare const presenceBadgeClassNames: {
 
 /** Properties for the PresenceBadge component. */
 export declare interface PresenceBadgeProps extends React_2.HTMLAttributes<HTMLSpanElement> {
-    /** Presence status to display. */
-    status: PresenceStatus;
-    /** Size of the presence indicator.
+    /**
+     * Presence status to display. `'dnd'` and `'oof'` are deprecated aliases of `'do-not-disturb'`
+     * and `'out-of-office'`: they render the same and warn once in development (removed in 1.0).
+     * @default 'available'
+     */
+    status?: PresenceStatus;
+    /**
+     * Size of the presence indicator. In the `badge` slot of an Avatar it is sized from the avatar.
      * @default 'medium'
      */
     size?: Size;
@@ -9779,8 +10256,11 @@ export declare interface PresenceProps extends UsePresenceOptions {
     children: React_2.ReactElement | ((presence: UsePresenceResult) => React_2.ReactNode);
 }
 
-/** User presence status for Avatar and Persona components. */
-export declare type PresenceStatus = 'available' | 'busy' | 'away' | 'offline' | 'dnd' | 'oof';
+/**
+ * User presence status for Avatar and Persona components. `'dnd'` and `'oof'` are deprecated
+ * aliases of `'do-not-disturb'` and `'out-of-office'` ({@link DeprecatedPresenceStatus}).
+ */
+export declare type PresenceStatus = 'available' | 'busy' | 'away' | 'offline' | 'do-not-disturb' | 'out-of-office' | DeprecatedPresenceStatus;
 
 /**
  * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).
@@ -12019,11 +12499,11 @@ export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableR
  * `TabListPanels`) for React Server Components, which cannot use the dotted form.
  */
 export declare const TabList: {
-    ({ value: valueProp, defaultValue: defaultValueProp, onValueChange, orientation: orientationProp, selectTabOnFocus, selectedValue, defaultSelectedValue, onTabSelect, vertical, className, children, onKeyDown, onFocus, ref, ...rest }: TabListProps): React_2.JSX.Element;
+    ({ value: valueProp, defaultValue: defaultValueProp, onValueChange, orientation: orientationProp, appearance, size, selectTabOnFocus, selectedValue, defaultSelectedValue, onTabSelect, vertical, className, children, onKeyDown, onFocus, ref, ...rest }: TabListProps): React_2.JSX.Element;
     displayName: string;
 } & {
     Tab: {
-        ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
+        ({ value, id: idProp, icon, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
         displayName: string;
     };
     Panel: {
@@ -12036,6 +12516,9 @@ export declare const TabList: {
     };
 };
 
+/** The look of a TabList: an underline, subtle fills, or circular subtle or filled tabs. */
+export declare type TabListAppearance = 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
+
 /** TabList: `root` on the `role="tablist"` element. */
 export declare const tabListClassNames: {
     readonly root: "wave-tab-list";
@@ -12098,6 +12581,19 @@ export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDi
      * @default 'horizontal'
      */
     orientation?: Orientation;
+    /**
+     * Look of the tabs: `transparent` underlines the selected tab, `subtle` and `subtle-circular`
+     * fill it with a subtle color (square or fully rounded), `filled-circular` fills it with the
+     * primary color. In forced colors the selected tab keeps a Highlight outline (or underline) in
+     * every appearance.
+     * @default 'transparent'
+     */
+    appearance?: TabListAppearance;
+    /**
+     * Size of the tabs: their padding and type (`medium` is 14px text on 16 by 8px padding).
+     * @default 'medium'
+     */
+    size?: CoreSize;
     /**
      * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic
      * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click
@@ -12129,13 +12625,14 @@ export declare interface TabListProps extends Omit<React_2.HTMLAttributes<HTMLDi
  * with its value is mounted.
  */
 export declare const TabListTab: {
-    ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
+    ({ value, id: idProp, icon, className, children, onClick, ref, ...rest }: TabProps): React_2.JSX.Element;
     displayName: string;
 };
 
 /** TabList.Tab: `root` on the `role="tab"` button. */
 export declare const tabListTabClassNames: {
     readonly root: "wave-tab-list-tab";
+    readonly icon: "wave-tab-list-tab__icon";
 };
 
 /** Properties for the TabPanel sub-component. */
@@ -12156,6 +12653,11 @@ export declare interface TabPanelsProps extends React_2.HTMLAttributes<HTMLDivEl
 export declare interface TabProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Unique value identifying this tab (and its panel). */
     value: string;
+    /**
+     * An icon before the text, hidden from assistive technology. A tab with an icon and no text is
+     * icon-only (a square hit area): name it with `aria-label`, or a development warning asks for it.
+     */
+    icon?: Slot<'span'>;
     /** Ref to the tab `<button>`. */
     ref?: React_2.Ref<HTMLButtonElement>;
 }