@mortenbrudvik/waveui 0.11.0 → 0.13.0

package/README.md

@@ -447,8 +447,9 @@ export function SaveArea() {
 | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `Accordion`     | `AccordionItem`, `AccordionTrigger`, `AccordionPanel`                                                                                                                            |
 | `Breadcrumb`    | `BreadcrumbItem`                                                                                                                                                                 |
-| `Card`          | `CardHeader`, `CardBody`, `CardFooter`                                                                                                                                           |
-| `Carousel`      | `CarouselItem`                                                                                                                                                                   |
+| `AvatarGroup`   | `AvatarGroupItem`, `AvatarGroupPopover`                                                                                                                                          |
+| `Card`          | `CardHeader`, `CardPreview`, `CardBody`, `CardFooter`                                                                                                                                           |
+| `Carousel`      | `CarouselItem`, `CarouselButton`                                                                                                                                                                   |
 | `ColorPicker`   | `ColorPickerHexField`, `ColorPickerSwatches`, `ColorPickerPreview`                                                                                                               |
 | `Combobox`      | `ComboboxOption`, `ComboboxOptionGroup` (also `Option`, `OptionGroup`)                                                                                                           |
 | `DataGrid`      | `DataGridHeader`, `DataGridHeaderCell`, `DataGridBody`, `DataGridRow`, `DataGridCell`                                                                                            |
@@ -531,17 +532,17 @@ Your `className` is merged last with `cn()`, so it replaces a conflicting class
 
 | Component       | Description                                                                                                                                                                                                                                                                    |
 | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Avatar`        | Image, initials or icon, with an image-failure fallback and an optional `badge`.                                                                                                                                                                                               |
-| `AvatarGroup`   | Overlapping avatars; `max` adds an overflow button that lists the hidden members.                                                                                                                                                                                              |
+| `Avatar`        | Image, initials or icon, with an image-failure fallback and an optional `badge`; `size` (named or 16 to 128 px), `shape`, `color` (`neutral`, `brand`, `colorful` or one of twelve named colors), `active` and `activeAppearance`, an `initials` slot (see [Avatars and people](#avatars-and-people)). |
+| `AvatarGroup`   | Avatars in a `stack`, `spread` or `pie` `layout`; `max` adds an overflow button (`99+` past 99) that lists the hidden members. Compound form: `AvatarGroup.Item` and `AvatarGroup.Popover`. |
 | `Badge`         | Status or category label: `appearance` `filled`, `tint`, `outline`; semantic `color` (see [Badges](#badges)).                                                                                                                                                                  |
 | `CounterBadge`  | Count pill (`99+` above `overflowCount`) or, with `dot`, an unread dot; Badge's `color` palette; `showZero`.                                                                                                                                                                   |
-| `PresenceBadge` | Availability badge with a distinct shape per status.                                                                                                                                                                                                                           |
+| `PresenceBadge` | Availability badge with a distinct shape per status (`available`, `busy`, `away`, `offline`, `do-not-disturb`, `out-of-office`; `dnd` and `oof` are deprecated). |
 | `Tag`           | Chip: `appearance` (`filled`, `outline`, `brand`), `size` (`medium` 28px, `small`, `extra-small`), `shape` (`circular`, `rounded`), `disabled`, a look-only `selected`, `value` (its key in a TagGroup) and the `media` (an Avatar), `icon` and `secondaryText` slots; an optional Dismiss button (`dismissible`, `onDismiss`, `dismissLabel`) that also dismisses on Delete and Backspace. `onDismiss` and `dismissIcon` need `dismissible` (a development warning says so). In a TagGroup focus moves for you when a tag is removed; on its own, move it yourself (see [Tags](#tags)). |
 | `TagGroup`      | A set of tags: a toolbar (one Tab stop, arrow keys) or, with `role="list"`, a list; default `size`, `appearance`, `shape`, `dismissible` and `disabled` for its tags; `onDismiss(value)`, focus to the next tag (else the previous one, else `fallbackFocusRef`) when the focused tag is removed; selectable InteractionTags through `value`/`defaultValue`/`onValueChange`, with `name`, `form` and `required`. |
 | `InteractionTag` | A tag with an action: `InteractionTag.Primary` (a button, or a toggle in a selecting TagGroup; `media`, `icon`, `secondaryText`) and an optional `InteractionTag.Secondary` (a separate Dismiss button named "Dismiss <text>"); `size`, `appearance`, `shape`, `disabled`, `selected`, `value`. |
 | `InfoLabel`     | A real `<label>` (`children`, `htmlFor`, `required`, `size`, `weight`, `disabled`) with an info button after it that shows `info` (text, links or other content) in a note; `openOnHover`, `infoButtonLabel`. Usable as the `label` of a Field.                                |
 | `InfoButton`    | A button with the info glyph that shows `info` in a `role="note"` next to it, without moving focus: opens on click, on mouse hover and on keyboard focus (`openOnHover={false}`: click only); Tab from the button enters the note; `size`. Named "Information" (`aria-label`). |
-| `Persona`       | Avatar with name, secondary text and presence.                                                                                                                                                                                                                                 |
+| `Persona`       | Avatar with up to four lines of text (`primaryText` to `quaternaryText`), `textPosition` (`after`, `before`, `below`), `presenceOnly` and presence; sizes up to `huge`. |
 | `Divider`       | Horizontal or vertical separator, optionally labelled.                                                                                                                                                                                                                         |
 | `Image`         | `<img>` with `fit`, `shape`, `shadow`, `bordered`; warns in development when `alt` is missing. Never wider than its parent; with the default `fit` its height follows its width. `fit="none"` keeps the top-left corner in view, `"center"` the middle.                        |
 | `List`          | Plain list, selectable listbox (single or multiple) or, with item `action`s, a grid; in a selectable List item values are unique (development warning).                                                                                                                        |
@@ -556,11 +557,11 @@ Your `className` is merged last with `cn()`, so it replaces a conflicting class
 
 | Component   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Card`      | Surface with `Card.Header`, `Card.Body`, `Card.Footer`; optionally selectable (`onSelect`, `selected`, `selectionControl`).                                                                                                                                                                                                                                                                                                                           |
+| `Card`      | Surface with `Card.Header` (`image`, `action`), `Card.Preview`, `Card.Body`, `Card.Footer`; `appearance`, `size`, `orientation`; optionally selectable (`onSelect`, `selected`, `selectionControl`, `checkbox`) with a `floatingAction` (see [Cards, tabs and carousels](#cards-tabs-and-carousels)). |
 | `Accordion` | Disclosure sections (`Accordion.Item`, `.Trigger`, `.Panel`); single (default) or `type="multiple"`; `headingLevel`; item values are unique (development warning).                                                                                                                                                                                                                                                                                    |
-| `TabList`   | Tabs (`TabList.Tab`, `.Panel`, `.Panels`) with automatic activation, or manual with `selectTabOnFocus={false}`; `orientation`; tab values are unique (development warning).                                                                                                                                                                                                                                                                           |
+| `TabList`   | Tabs (`TabList.Tab`, `.Panel`, `.Panels`) with automatic activation, or manual with `selectTabOnFocus={false}`; `orientation`, `appearance` (`transparent`, `subtle`, `subtle-circular`, `filled-circular`), `size`, a `Tab` `icon` (alone: icon-only); tab values are unique (development warning). |
 | `Tree`      | Hierarchical tree (`Tree.Item`) with expand/collapse and typeahead; single selection, or checkboxes with a cascading mixed state (`selectionMode="multiple"`); row `actions`, `aside` and `Tree.ItemPersonaLayout`; `navigationMode="treegrid"` (see [Trees](#trees)). Nested items are `Tree.Item` elements in their parent's children (directly, in Fragments or from a render function), not rendered by a recursive component; values are unique. |
-| `Carousel`  | One slide at a time with previous/next, a slide picker and optional auto-rotation with a pause control. Slides are `Carousel.Item` children, directly or in Fragments (a component that renders `Carousel.Item` is not a slide).                                                                                                                                                                                                                      |
+| `Carousel`  | Slides (`Carousel.Item` children, directly or in Fragments; a component that renders `Carousel.Item` is not a slide) with previous/next, a slide picker and optional auto-rotation with a pause control. `groupSize` (a number or `auto`) shows several at once, `draggable` drags them, `Carousel.Item` `thumbnail` shows thumbnails, `controlsLayout` places the buttons and `Carousel.Button` replaces one. |
 | `Overflow`  | Hides items that do not fit in one row and renders an overflow button (`useOverflowMenu` lists the hidden items); item ids are unique (development warning). The row has a 4px padding, so its items' focus rings are not clipped.                                                                                                                                                                                                                    |
 | `Grid`      | CSS grid with a column count and token gaps.                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `Stack`     | Vertical or horizontal stack (`orientation`, `gap`).                                                                                                                                                                                                                                                                                                                                                                                                  |
@@ -1601,9 +1602,85 @@ export function Author() {
 
 - **Hover cards.** `openOnHover` opens a Popover when the mouse rests on its trigger (`openDelay`, 250ms) and closes it `closeDelay` (500ms) after the pointer has left the trigger and the content, unless focus is inside the content (or in a layer opened from it). Opening and closing by hover move no focus (neither does the close of a hover card opened inside it); Tab from the trigger enters the content, as for any open Popover. A click on the trigger pins it (it stays open and focus stays where it is), and a second click closes it. Focus left on the trigger does not keep an unpinned card open. The triangle safe zone, the touch rule and "stays closed after Escape until the pointer leaves" are Menu's.
 - **Context popovers.** `openOnContext` works as on Menu, with Popover's focus rules: a right click opens the popover at the pointer and leaves focus where it is (Tab from that element enters the content); Shift+F10 or the ContextMenu key opens it at the focused element and moves focus into the content, and Escape returns focus to that element. The region gets no `aria-haspopup` or `aria-expanded`, so name the content with `title`, `aria-label` or `aria-labelledby`.
-- **`target`** on the Popover root (next to `side` and `align`; `PopupTarget`, as on `Menu.Popover`) places the content at an element held in state or at a `VirtualElement` instead of the trigger. A controlled popover with a `target` needs no trigger; a toggle button used as the target carries its own `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls` (give `Popover.Content` an `id`), a press on it does not count as outside, and Tab from it enters the content. TeachingPopover's `target` takes an element or a ref instead (it takes no `VirtualElement`, and Menu and Popover take no ref); a later release unifies them.
+- **`target`** on the Popover root (next to `side` and `align`; `PopupTarget`, as on `Menu.Popover`) places the content at an element held in state or at a `VirtualElement` instead of the trigger. A controlled popover with a `target` needs no trigger; a toggle button used as the target carries its own `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls` (give `Popover.Content` an `id`), a press on it does not count as outside, and Tab from it enters the content. `Popover`, `Menu.Popover` and TeachingPopover take the same `target`: an element held in state, a `VirtualElement` or a ref object (a ref is read after each render of the popup, and the popup stays hidden while it holds no element).
 - **Tooltip timing.** `openDelay` (default 200ms) is how long the pointer rests on the child, or the child has keyboard focus, before the tooltip appears: unlike Menu's and Popover's `openDelay`, it applies to focus too. `closeDelay` (default 100ms) is how long it stays once the pointer has left the child and the tooltip; blur and Escape hide it at once. `delay` is the deprecated name of `openDelay` (it warns once in development).
 
+### Custom overlays
+
+The hooks behind WaveUI's own surfaces are public, so a surface WaveUI does not ship (a command palette, a custom popup) joins the same layer stack: Escape closes the topmost layer first, a press in the Toaster or in a marked region closes nothing, and focus returns to the opener.
+
+```tsx
+import * as React from 'react';
+import {
+  Portal,
+  useMergedRefs,
+  useModalLayer,
+  usePopupPosition,
+  useDismiss,
+  useRestoreFocus,
+} from '@mortenbrudvik/waveui';
+
+// A modal command palette: the page behind it is inert, Tab stays inside.
+function CommandPalette({ open, onOpenChange, triggerRef }) {
+  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);
+  const surfaceRef = React.useRef<HTMLDivElement | null>(null);
+  const mergedRef = useMergedRefs(surfaceRef, setSurface);
+  const { layerId } = useModalLayer({
+    open,
+    container: surface,
+    onDismiss: () => onOpenChange(false),
+    refs: [surfaceRef],
+    triggerRef,
+  });
+  if (!open) return null;
+  return (
+    <Portal layerId={layerId}>
+      <div ref={mergedRef} role="dialog" aria-label="Command palette">
+        <input aria-label="Search commands" />
+      </div>
+    </Portal>
+  );
+}
+
+// A non-modal popup placed against its button.
+function Details() {
+  const [open, setOpen] = React.useState(false);
+  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const surfaceRef = React.useRef<HTMLDivElement | null>(null);
+  const { setReference, setFloating, floatingProps } = usePopupPosition({ open, side: 'bottom' });
+  const { layerId } = useDismiss({
+    open,
+    onDismiss: () => setOpen(false),
+    refs: [triggerRef, surfaceRef],
+    anchorRef: triggerRef,
+  });
+  useRestoreFocus({ enabled: open, container: surface, triggerRef });
+  const buttonRef = useMergedRefs(triggerRef, setReference);
+  const popupRef = useMergedRefs(surfaceRef, setSurface, setFloating);
+  return (
+    <>
+      <button ref={buttonRef} onClick={() => setOpen((o) => !o)}>
+        Details
+      </button>
+      {open && (
+        <Portal layerId={layerId}>
+          <div ref={popupRef} role="dialog" aria-label="Details" {...floatingProps}>
+            …
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+}
+```
+
+- **Layers.** `useDismiss` registers a layer (Escape, outside press and, for listboxes, focus leaving it); give `Portal` the returned `layerId` so a Popover or Menu opened inside becomes the layer's child and closes first. `useModalLayer` adds the trap, the `inert` isolation (WaveUI isolates instead of setting `aria-modal`, so toasts stay announced), the scroll lock and focus restore, with `modalType` `'modal'`, `'alert'` or `'non-modal'`.
+- **Positioning.** `usePopupPosition` takes `side`, `align`, `offset`, `flip`, `fallbackPlacements`, `shift`, `fitViewport`, `matchReferenceWidth`, `strategy`, `hideWhenDetached` and `onPositioned`, and returns `update()`. The anchor is an element or a `VirtualElement`.
+- **App-owned regions.** Spread `modalAllowProps` on a region that a modal must leave usable (a notification area); `useModalOpen()` tells you when a modal is open, so global shortcuts can wait.
+- **`positioning` prop.** Popover, `Menu.Popover`, Tooltip, TeachingPopover, Combobox, Dropdown, TagPicker, DatePicker and TimePicker take `positioning={{ offset, fitViewport, matchReferenceWidth, fallbackPlacements }}` (and `target` where the component has one); `side` and `align` stay their own props.
+- **Stability.** These hooks are public but pre-1.0: their options may still change through the usual deprecation path.
+
 ### Enter and exit motion
 
 Motion tokens are CSS variables on `:root`, the same in every theme: `--wave-duration-ultra-fast` (50ms), `-faster` (100ms), `-fast` (150ms), `-normal` (200ms), `-gentle` (250ms), `-slow` (300ms), `-slower` (400ms), `-ultra-slow` (500ms), and the curves `--wave-curve-accelerate-max`, `-accelerate-mid`, `-accelerate-min`, `-decelerate-max`, `-decelerate-mid`, `-decelerate-min`, `-easy-ease-max`, `-easy-ease` and `-linear`, with the values of Fluent's motion tokens (the guide's "Motion & Animation" chapter lists them). On the Tailwind path they are the utilities `duration-wave-*` and `ease-wave-*`; the precompiled `./styles` contains only the utilities Wave itself uses, so there use the variables in your own CSS.
@@ -1777,6 +1854,29 @@ export function UpdateNotice({ onUpdate, onLater }: { onUpdate: () => void; onLa
 - A badge whose text alone does not say what it means ("3") can be named: with `aria-label` or `aria-labelledby` a Badge or CounterBadge gets `role="img"`, so the name is announced (a `role` you pass wins; an empty or whitespace-only name counts as absent). `<CounterBadge dot aria-label="Unread messages" />` is a named unread dot.
 - The root carries `data-color` and `data-appearance` with the resolved values (and `data-dot` on a dot), for your own selectors.
 
+### Avatars and people
+
+- **Sizes and shape.** `size` takes the named sizes or a box in pixels (16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128); `shape="square"` rounds the corners. An Avatar in a `Tag` with `shape="rounded"` is square.
+- **Initials** come from `getInitials(name, { dir, firstInitialOnly })`: two letters for a full name, one for a single name, brackets and punctuation dropped, a hyphen or apostrophe joins words. A name with digits only, emoji or a script without letter initials (Han, Kana, Hangul, Thai, Lao, Khmer, Myanmar, Tibetan) shows none, so an icon or the `initials` slot is the better content. `initials` replaces the text. On a right-to-left page the two letters of a left-to-right name swap; Hebrew and Arabic names keep their order.
+- **Color.** `color` is `neutral` (the default), `brand`, `colorful` or one of `red`, `pumpkin`, `gold`, `forest`, `teal`, `blue`, `navy`, `lavender`, `purple`, `magenta`, `brown`, `steel`. `colorful` picks a named color from `idForColor`, else from `name`: the same input is always the same color, so a person keeps their color across pages. The palette is the `--wave-palette-<name>` and `--wave-palette-<name>-foreground` tokens; high contrast paints a white fill with black text.
+- **`active`** is `active` (the `activeAppearance` around the avatar: `ring`, `ring-shadow`, `shadow` or `glow`), `inactive` (dimmed) or `unset`.
+- **Presence.** `PresenceBadge` `status` is `available`, `busy`, `away`, `offline`, `do-not-disturb` or `out-of-office` (Fluent's names); `dnd` and `oof` still work and log a deprecation warning. Inside an Avatar the badge takes the size that fits the avatar.
+- **`Persona`** shows `primaryText` (default: `name`), then `secondaryText`, `tertiaryText` and `quaternaryText`, after, before or below the avatar (`textPosition`; below, the text is centered unless `textAlignment="start"`). `presenceOnly` swaps the avatar for the presence badge. A Persona without a `name` or text needs an `aria-label`.
+- **`AvatarGroup`** `layout` is `stack` (overlapping), `spread` (a gap) or `pie` (up to three wedges of a circle). Members take the group's `size`; one with a size of its own keeps it. `max` splits the members; to write the split yourself, use `partitionAvatarGroupItems({ items, maxInlineItems, layout })` and render `AvatarGroup.Item`s with an `AvatarGroup.Popover` for the rest:
+
+```tsx
+const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: people, maxInlineItems: 3 });
+
+<AvatarGroup aria-label="Project team">
+  {inlineItems.map((name) => <AvatarGroup.Item key={name} name={name} />)}
+  {overflowItems && (
+    <AvatarGroup.Popover>
+      {overflowItems.map((name) => <AvatarGroup.Item key={name} name={name} />)}
+    </AvatarGroup.Popover>
+  )}
+</AvatarGroup>;
+```
+
 ### Tags
 
 Put tags that belong together in a `TagGroup`. By default it is a toolbar: one Tab stop, Left/Right between the tags (mirrored in RTL), Delete or Backspace to dismiss. When the focused tag is removed, focus moves to the next tag, else the previous one, else `fallbackFocusRef`, so it never falls to the page:
@@ -2045,6 +2145,15 @@ export function Shell({ narrow }: { narrow: boolean }) {
 - **Width.** `size` defaults to `small` (320px), Drawer's scale; Fluent's navigation pane is 260px wide, `className="w-65"` on your Tailwind build (or a class of your own with `width: 260px`). `position` defaults to `start` (Drawer's to `end`), and `separator` to on.
 - **Server rendering.** An inline NavDrawer renders in the server HTML (open, or hidden when kept mounted); with `focusMode="arrow"` its Tab stop is set once it has mounted.
 
+### Cards, tabs and carousels
+
+- **Card** `appearance` is `filled` (the default), `filled-alternative`, `outline` or `subtle`; `size` (`small`, `medium`, `large`) sets the padding of its parts through `--wave-card-padding`; `orientation="horizontal"` puts a `Card.Preview` beside the text. `Card.Preview` takes a `logo` over its bottom start corner. `Card.Header` takes an `image` (an Avatar, say) and an `action` (a menu button). With `selectionControl="checkbox"`, `checkbox` merges onto the built-in checkbox (an object), replaces it (an element) or removes it (`null`, when you render the control elsewhere); `floatingAction` sits over the top end corner and moves the checkbox to the start corner.
+- **TabList** `appearance` is `transparent` (the default), `subtle`, `subtle-circular` or `filled-circular`, and `size` `small`, `medium` or `large`. A `TabList.Tab` with an `icon` and no text is icon-only: give it an `aria-label` (development warning `TabList.Tab:icon-only-name`).
+- **Carousel groups.** `groupSize={n}` shows `n` slides per page and `"auto"` as many as fit (the slides keep their width, which must be equal; `align` places a page that does not fill the width). `value`, `onValueChange` and `defaultValue` are the index of the first slide of the page; previous, next, the picker (one button per page), looping and autoplay move by page. `labels.slides(start, end, total)` names a page.
+- **Dragging.** `draggable` follows the pointer (mouse, touch, pen); a drag past a quarter of the width, or a release faster than 0.5 px/ms, changes the page, else the track snaps back. The click that ends a drag is dropped, a vertical swipe still scrolls the page, and autoplay pauses while dragging.
+- **Thumbnails.** `<Carousel.Item thumbnail="/a.png">` (or an object of `<img>` attributes) turns the picker into a row of thumbnails; each button keeps its slide name.
+- **Controls.** `controlsLayout` is `overlay` (the default, round buttons over the slides), `overlay-wide` (full-height edge strips), `inline` (buttons beside the slides) or `inline-wide`. `Carousel.Button` (`direction="previous"` or `"next"`) replaces the built-in button of that direction and keeps its name, `aria-controls` and disabled behaviour; its children replace the chevron. `appearance="elevated"` rounds the carousel and adds a shadow.
+
 ### Slots
 
 Props such as `icon`, `contentBefore` and `dismiss` are slots. A slot accepts content (rendered inside the slot's element) or an object with `as`, `className`, `children` and any attribute of the slot's element:
@@ -2085,7 +2194,7 @@ The names and hidden texts that components render themselves are English by defa
 | `MessageBar`, `Toast`       | `statusLabel` (the hidden severity text; also an option of both `dispatchToast` forms); `Toast` also `dismissLabel` (also an option of the text form)                                                                                                                                                                                                                                                                            |
 | `Tag`                       | `dismissLabel` ("Dismiss", with the tag's text)                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `InteractionTag.Secondary`  | `dismissLabel` ("Dismiss", with the primary text: "Dismiss Cherry") |
-| `Carousel`                  | `labels` (`previous`, `next`, `picker`, `slide(index, total)` with a zero-based index, `carouselRoleDescription`, `slideRoleDescription`), `autoPlayLabels`                                                                                                                                                                                                                                                                      |
+| `Carousel`                  | `labels` (`previous`, `next`, `picker`, `slide(index, total)` with a zero-based index, `slides(start, end, total)` with one-based numbers for a page of several slides, `carouselRoleDescription`, `slideRoleDescription`), `autoPlayLabels`                                                                                                                                                                                                                                                                      |
 | `Stepper`                   | `statusLabels` (`completed`, `error`; `''` omits the text)                                                                                                                                                                                                                                                                                                                                                                       |
 | `Pagination`                | `getItemAriaLabel(type, page, selected)`                                                                                                                                                                                                                                                                                                                                                                                         |
 | `ColorPicker`               | `labels` (the 0.7 strings, plus `area` (the name of a bound area's group, "Saturation and brightness"), `saturation`, `brightness`, `roleDescription`, `hue`, `transparency`, `colorName(color)` and `valueText(color, channel)` for bound parts)                                                                                                                                                                                |
@@ -2157,7 +2266,7 @@ As implemented in 0.11. Buttons, links, checkboxes, switches and the trigger but
 | ColorArea                             | One Tab stop. Left/Right change saturation (mirrored in RTL), Up/Down brightness; Shift with an arrow by 10; PageUp/PageDown brightness by 10; Home/End saturation to 0/100.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | ColorSlider, AlphaSlider              | The arrows of their axis by 1 (mirrored in RTL when horizontal), Shift with an arrow by 10, PageUp/PageDown by 10, Home/End to the minimum/maximum.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
-Accordion and Carousel have no arrow-key navigation: their triggers and controls are Tab stops.
+Accordion and Carousel have no arrow-key navigation between their controls: their triggers and controls are Tab stops. With `groupSize` above 1 the slides of the shown page are one arrow-key group (the slide that last had focus is its Tab stop; an arrow past the end of the page shows the next one).
 
 Typeahead (Menu, selectable List, Tree, Dropdown, Listbox) accepts characters typed with AltGr, which Windows reports as Ctrl+Alt (Polish `ł`, Romanian `ș`); Ctrl+Alt with an arrow, Home, End or Space is left to the browser. An item that cannot take focus is passed over for the next match. Menu typeahead matches the item labels, not icons or shortcuts. Options and option groups with `hidden` are skipped like a native `<option hidden>`.
 
@@ -2166,7 +2275,16 @@ Typeahead (Menu, selectable List, Tree, Dropdown, Listbox) accepts characters ty
 | Export                                                                                                                                       | Purpose                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `useControllable(value, defaultValue, onChange)`                                                                                             | Controlled/uncontrolled state; returns `[value, setValue, isControlled]`; `setValue` accepts a value or an updater and skips no-op updates.                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `useRovingTabIndex(options)`                                                                                                                 | Roving tab stop and arrow-key navigation for composite widgets; items marked `data-disabled-focusable` stay reachable, a composite marked `data-roving-transparent` (a toolbar radio group) adds its items to the enclosing arrow order, and `tabStop: 'none'` leaves every item out of the Tab order (a composite reached by arrow keys only).                                                                                                                                                                                                                        |
+| `useRovingTabIndex(options)`                                                                                                                 | Roving tab stop and arrow-key navigation for composite widgets (`orientation: 'grid'` with `columns` for two-dimensional grids); items marked `data-disabled-focusable` stay reachable, a composite marked `data-roving-transparent` (a toolbar radio group) adds its items to the enclosing arrow order, and `tabStop: 'none'` leaves every item out of the Tab order (a composite reached by arrow keys only).                                                                                                                                                                                                                        |
+| `usePopupPosition(options)`                                                                                                                  | Place a surface against an anchor (an element or a `VirtualElement`): `side`, `align`, `offset`, `flip`, `fallbackPlacements`, `shift`, `fitViewport`, `matchReferenceWidth`, `strategy`, `hideWhenDetached`, `onPositioned`; returns `floatingProps`, `update()` and the final placement.                                                                                                                                                                                                                                                                             |
+| `useDismiss(options)`, `DismissLayerProvider`                                                                                                | Register a dismiss layer (Escape, outside press, focus leaving it) in WaveUI's layer stack; `Portal layerId` and `DismissLayerProvider` make layers opened inside its children.                                                                                                                                                                                                                                                                                                                                                                                        |
+| `useModalLayer(options)`, `useFocusTrap`, `useInitialFocus`, `useRestoreFocus`                                                               | A modal surface's dismissal, focus trap, `inert` isolation, scroll lock and focus restore (`modalType`: `modal`, `alert`, `non-modal`); the pieces are public too.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `useModalOpen()`, `hasOpenModal()`, `modalAllowProps`                                                                                        | Whether a modal is open; props that keep an app-owned region usable over a modal.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `useFocusableGroup(options)`                                                                                                                 | One tab stop that holds several focusable elements (`tabBehavior`: `unlimited`, `limited`, `limited-trap-focus`); Enter or F2 enters, Escape leaves.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `useFocusVisible()`                                                                                                                          | `true` while the last input was the keyboard; `false` on the server.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `useGridNavigation(options)`                                                                                                                 | Keyboard navigation of a static `<table role="grid">` (the Table's own).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `getTabbableElements(container)`, `getFirstTabbable`, `getLastTabbable`                                                                      | The tabbable elements of a container in Tab order (hidden, disabled and `inert` ones left out).                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `focusRing`, `focusRingInset`, `inputFocus`, `inputFocusWithin`                                                                              | The focus class strings of the library, to compose with `cn()` on your own controls.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `useId(prefix?)`                                                                                                                             | SSR-safe ids (`prefix-<react id>`; never parse the React part).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `useEventCallback(fn)`                                                                                                                       | Stable callback that always calls the latest `fn`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `useMergedRefs(...refs)`                                                                                                                     | One stable callback ref for several refs.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
@@ -2184,6 +2302,8 @@ Typeahead (Menu, selectable List, Tree, Dropdown, Listbox) accepts characters ty
 | `createToaster()`                                                                                                                            | A toast controller for code outside components; bind it with `<Toaster toaster={handle}>` (see [Toasts](#toasts)). Server-safe.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `useIsOverflowing(target)`, `useOverflowMenu()`, `useIsOverflowItemVisible(id)`                                                              | Overflow detection.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `hsvToHex(color)`, `hexToHsv(hex)`                                                                                                           | Convert between an `HsvColor` and a hex string (`#rrggbb`, or `#rrggbbaa` below full opacity); `hexToHsv` returns `null` for other text. Server-safe.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `getInitials(name, options?)` | The initials Avatar shows (`dir`, `firstInitialOnly`); none for digits, emoji or scripts without letter initials. Server-safe. |
+| `partitionAvatarGroupItems({ items, maxInlineItems, layout })` | Split a list into the inline and overflow items of an AvatarGroup (`{ inlineItems, overflowItems }`); imports nothing. |
 | `addDays(date, amount)`, `addMonths(date, amount)`, `isSameDay(a, b)`, `startOfWeek(date, firstDayOfWeek?)`, `getWeekNumber(date, options?)` | Date helpers on calendar days: every returned date is local midnight (Fluent's keep the time of day). `addMonths` clamps the day to the target month (January 31 plus a month is February 28 or 29); `getWeekNumber` takes `firstDayOfWeek` and `firstWeekOfYear` (`GetWeekNumberOptions`; ISO 8601 is `{ firstDayOfWeek: 1, firstWeekOfYear: 'first-four-day-week' }`). With the types `DayOfWeek` (`0`–`6`, Sunday first) and `FirstWeekOfYear`. Server-safe.                                                                                                        |
 | `buttonClassNames`, `toastTitleClassNames`, …                                                                                                | The stable class names of every component and part (see [Styling hooks](#styling-hooks)). Server-safe.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `cn(...classes)`                                                                                                                             | clsx + tailwind-merge that knows Wave's type ramp and shadows; the last class wins over a conflicting class of the same variant.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
@@ -2192,6 +2312,30 @@ Typeahead (Menu, selectable List, Tree, Dropdown, Listbox) accepts characters ty
 | `resolveSlot`, `renderSlot`                                                                                                                  | The slot helpers the components use.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `getThemeClassName(theme)`                                                                                                                   | The theme classes of a theme.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 
+## Upgrading from 0.12
+
+0.13 removes nothing public; these changes can still affect your types, tests and styles:
+
+1. **`PresenceStatus` gains `'do-not-disturb'` and `'out-of-office'`** (`dnd` and `oof` stay, deprecated): an exhaustive `switch` or a `Record` over it needs the cases. `PresenceBadge` `status` is optional.
+2. **`Avatar` `size` also takes a number and `Persona` `size` gains `'huge'`:** code that narrows these unions needs the new members.
+3. **An Avatar in a rounded Tag is square** (`Tag` and `InteractionTag` pass their shape to their `media`).
+4. **Initials come from `getInitials`:** punctuation is dropped, a hyphen or apostrophe joins words, and names without letter initials show none.
+5. **AvatarGroup's popup is `AvatarGroup.Popover`:** the count reads `99+` past 99 (the name keeps the real number).
+6. **Card parts take their padding from `--wave-card-padding`** instead of a fixed `p-4`.
+7. **Carousel has a viewport element** (`.wave-carousel__viewport`) that clips the track; the default layout's buttons sit inside it. Reach the track by `.wave-carousel__track`.
+
+The CHANGELOG's [0.13.0 section](CHANGELOG.md) lists the additions.
+
+## Upgrading from 0.11
+
+0.12 removes nothing public; these changes can still affect your types and tests:
+
+1. **`target` widens.** `Popover` and `Menu.Popover` `target` also accept a ref object (`PopupTargetInput`), and `TeachingPopover` `target` a `VirtualElement`; code that reads `PopoverProps['target']` as `PopupTarget` needs the wider type.
+2. **`useRovingTabIndex` `orientation` gains `'grid'`:** an exhaustive `switch` or a `Record` over the option's type needs the case.
+3. **`usePopupPosition` results gain `update()`**, and `useListboxPopup` options gain `positioning`; nothing else about them changes.
+
+The CHANGELOG's [0.12.0 section](CHANGELOG.md) lists the additions.
+
 ## Upgrading from 0.10
 
 0.11 removes nothing public; these changes can still affect your tests, styles and types:

package/dist/components/button/Link.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("./Button.semantics.cjs"),a=require("../../lib/styles.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c={inline:`text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2`,standalone:`font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`,subtle:`text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`},l=e=>{let{as:o,appearance:l,variant:u,disabled:d=!1,disabledFocusable:f=!1,className:p,onClick:m,onKeyDown:h,onKeyUp:g,onBlur:_,ref:v,...y}=e,b=n.resolveDeprecatedProp(`Link`,l,u,`variant`,`appearance`)??`inline`,x=o??`a`,{defaults:S,enforced:C,handlers:w}=i.useButtonSemantics({tag:typeof x==`string`?x:null,href:y.href,disabled:d,disabledFocusable:f,onClick:m,onKeyDown:h,onKeyUp:g,onBlur:_}),T={...y};for(let[e,t]of Object.entries(S))T[e]??=t;return(0,s.jsx)(x,{...T,...w,ref:v,className:t.cn(r.linkClassNames.root,`cursor-pointer transition-colors motion-reduce:transition-none`,a.focusRing,c[b],(d||f)&&`cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100`,p),...C})};l.displayName=`Link`,exports.Link=l;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../lib/styles.cjs"),a=require("./Button.semantics.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c={inline:`text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2`,standalone:`font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`,subtle:`text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline`},l=e=>{let{as:o,appearance:l,variant:u,disabled:d=!1,disabledFocusable:f=!1,className:p,onClick:m,onKeyDown:h,onKeyUp:g,onBlur:_,ref:v,...y}=e,b=n.resolveDeprecatedProp(`Link`,l,u,`variant`,`appearance`)??`inline`,x=o??`a`,{defaults:S,enforced:C,handlers:w}=a.useButtonSemantics({tag:typeof x==`string`?x:null,href:y.href,disabled:d,disabledFocusable:f,onClick:m,onKeyDown:h,onKeyUp:g,onBlur:_}),T={...y};for(let[e,t]of Object.entries(S))T[e]??=t;return(0,s.jsx)(x,{...T,...w,ref:v,className:t.cn(r.linkClassNames.root,`cursor-pointer transition-colors motion-reduce:transition-none`,i.focusRing,c[b],(d||f)&&`cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100`,p),...C})};l.displayName=`Link`,exports.Link=l;
 //# sourceMappingURL=Link.cjs.map

package/dist/components/button/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","names":["resolveDeprecatedProp","useButtonSemantics","cn","linkClassNames","focusRing","require_runtime","require_cn","require_dev","require_classNames","require_Button_semantics","require_styles","react","react_jsx_runtime","appearanceClasses","Link","appearanceProp","rest","props","appearance","variant","Component","as","elementProps","key","value","defaults","handlers","disabled","disabledFocusable","className","enforced"],"sources":["../../../src/components/button/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { linkClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { focusRing } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useButtonSemantics } from './Button.semantics';\n\n/**\n * Color treatment of a {@link Link}.\n *\n * - `inline` (default): for links in running text. Always underlined (the underline thickens on\n *   hover and focus), because the link color alone does not stand out enough from body text.\n * - `standalone`: semibold, underlined on hover/focus only. Use it only where the position or\n *   container already marks the text as a link (a list of links, a card footer, navigation).\n * - `subtle`: foreground color, underlined on hover/focus only. It cannot be told apart from body\n *   text, so never use it inside a paragraph; only where the context makes the link obvious.\n */\nexport type LinkAppearance = 'inline' | 'standalone' | 'subtle';\n\n/** @deprecated Use {@link LinkAppearance}. */\nexport type LinkVariant = LinkAppearance;\n\n/**\n * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `'a'`).\n */\nexport interface LinkOwnProps {\n  /** Color treatment (see {@link LinkAppearance} for where each one may be used).\n   * @default 'inline'\n   */\n  appearance?: LinkAppearance;\n  /** @deprecated Use `appearance` (same values). */\n  variant?: LinkVariant;\n  /**\n   * Makes the link unavailable. An `<a>` drops its `href` (no navigation by middle-click, the\n   * context menu or drag), keeps `role=\"link\"` (`role=\"button\"` when it had no `href`), and gets\n   * `aria-disabled=\"true\"`, `data-disabled` and `tabIndex={-1}` (none can be overridden); a custom\n   * `as` (router link) gets the same attributes. Clicks, Enter and Space are prevented: your\n   * `onClick` is not called and the click does not reach ancestor click handlers. `as=\"button\"`\n   * uses the native `disabled` attribute.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link unavailable but keeps it focusable and in the tab order: for a toolbar item or\n   * a disabled link that needs a Tooltip. Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable`; an `<a>` drops its `href`, keeps `role=\"link\"` (`role=\"button\"`\n   * when it had no `href`) and gets `tabIndex={0}`, and `as=\"button\"` gets these attributes\n   * instead of the native `disabled`.\n   * Clicks, Enter and Space are prevented; your `onClick` is not called and the click does not\n   * reach ancestor click handlers. Wins over `disabled` when both are set. In a `Toolbar` it stays\n   * in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n}\n\n/**\n * Props of {@link Link} rendered as `C` (default `'a'`). `LinkProps` without a type argument is\n * the 0.4 name: the props of a Link rendered as an `<a>`, including `ref`.\n */\nexport type LinkProps<C extends React.ElementType = 'a'> = PolymorphicProps<C, LinkOwnProps>;\n\n/** The props the implementation reads, for any `as`. */\ntype LinkImplProps = LinkOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** The destination: without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\nconst appearanceClasses: Record<LinkAppearance, string> = {\n  inline:\n    'text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2',\n  standalone:\n    'font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n  subtle:\n    'text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n};\n\n/**\n * A hyperlink with Fluent link styling. Renders an `<a>` by default; `as` renders a router link\n * (`<Link as={RouterLink} to=\"/\">`) or a `<button>` styled as a link (`type=\"button\"` by default).\n *\n * - Without `href`, the `<a>` runs an action instead of navigating (\"Show more\"): it keeps its\n *   element and gets `role=\"button\"`, a tab stop and Enter/Space activation (the consumer's\n *   `role` and `tabIndex` win). A non-interactive `as` (`span`, `div`) is treated the same way;\n *   any `href` string, `''` included, keeps the link semantics.\n *\n * @example\n * <p>Read the <Link href=\"/docs\">documentation</Link> first.</p>\n * <Link appearance=\"standalone\" href=\"/pricing\">See pricing</Link>\n * <Link onClick={showMore}>Show more</Link>\n */\nexport const Link: PolymorphicComponent<'a', LinkOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    variant,\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ref,\n    ...rest\n  } = props as LinkImplProps;\n\n  const appearance =\n    resolveDeprecatedProp('Link', appearanceProp, variant, 'variant', 'appearance') ?? 'inline';\n\n  const Component: React.ElementType = as ?? 'a';\n  const tag = typeof Component === 'string' ? Component : null;\n  // The activation semantics of Button: an `<a>` without `href` or a `span` is a button, and a\n  // disabled link blocks its click (ancestors included), Enter and Space.\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE).\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        linkClassNames.root,\n        'cursor-pointer transition-colors motion-reduce:transition-none',\n        focusRing,\n        appearanceClasses[appearance],\n        // Full opacity while a focusable disabled link shows its focus ring, which `opacity`\n        // would dim below 3:1 (as for buttons).\n        (disabled || disabledFocusable) &&\n          'cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100',\n        className,\n      )}\n      {...enforced}\n    />\n  );\n};\n\nLink.displayName = 'Link';\n"],"mappings":"yTA4EA,IAAMa,EAAoD,CACxD,OACE,sGACF,WACE,iHACF,OACE,qGACJ,EAgBaC,EAAiD,GAAU,CACtE,GAAM,CACJ,KACA,WAAYC,EACZ,UACA,WAAW,GACX,oBAAoB,GACpB,YACA,UACA,YACA,UACA,SACA,MACA,GAAGC,GACDC,EAEEC,EACJlB,EAAAA,sBAAsB,OAAQe,EAAgBI,EAAS,UAAW,YAAY,GAAK,SAE/EC,EAA+BC,GAAM,IAIrC,CAAE,WAAU,WAAU,YAAapB,EAAAA,mBAAmB,CAC1D,IAJU,OAAOmB,GAAc,SAAWA,EAAY,KAKtD,KAAMJ,EAAK,KACX,WACA,oBACA,UACA,YACA,UACA,QACF,CAAC,EAGKM,EAAwC,CAAE,GAAGN,CAAK,EACxD,IAAK,GAAM,CAACO,EAAKC,KAAU,OAAO,QAAQC,CAAQ,EAAG,EAAaF,KAASC,EAE3E,OACE,EAAAZ,EAAA,IAAA,CAACQ,EAAD,CACE,GAAIE,EACJ,GAAII,EACC,MACL,UAAWxB,EAAAA,GACTC,EAAAA,eAAe,KACf,iEACAC,EAAAA,UACAS,EAAkBK,IAGjBS,GAAYC,IACX,wEACFC,CACF,EACA,GAAIC,CACL,CAAA,CAEL,EAEA,EAAK,YAAc"}
+{"version":3,"file":"Link.cjs","names":["resolveDeprecatedProp","useButtonSemantics","cn","linkClassNames","focusRing","require_runtime","require_cn","require_dev","require_classNames","require_styles","require_Button_semantics","react","react_jsx_runtime","appearanceClasses","Link","appearanceProp","rest","props","appearance","variant","Component","as","elementProps","key","value","defaults","handlers","disabled","disabledFocusable","className","enforced"],"sources":["../../../src/components/button/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { linkClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { focusRing } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useButtonSemantics } from './Button.semantics';\n\n/**\n * Color treatment of a {@link Link}.\n *\n * - `inline` (default): for links in running text. Always underlined (the underline thickens on\n *   hover and focus), because the link color alone does not stand out enough from body text.\n * - `standalone`: semibold, underlined on hover/focus only. Use it only where the position or\n *   container already marks the text as a link (a list of links, a card footer, navigation).\n * - `subtle`: foreground color, underlined on hover/focus only. It cannot be told apart from body\n *   text, so never use it inside a paragraph; only where the context makes the link obvious.\n */\nexport type LinkAppearance = 'inline' | 'standalone' | 'subtle';\n\n/** @deprecated Use {@link LinkAppearance}. */\nexport type LinkVariant = LinkAppearance;\n\n/**\n * The Link's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `'a'`).\n */\nexport interface LinkOwnProps {\n  /** Color treatment (see {@link LinkAppearance} for where each one may be used).\n   * @default 'inline'\n   */\n  appearance?: LinkAppearance;\n  /** @deprecated Use `appearance` (same values). */\n  variant?: LinkVariant;\n  /**\n   * Makes the link unavailable. An `<a>` drops its `href` (no navigation by middle-click, the\n   * context menu or drag), keeps `role=\"link\"` (`role=\"button\"` when it had no `href`), and gets\n   * `aria-disabled=\"true\"`, `data-disabled` and `tabIndex={-1}` (none can be overridden); a custom\n   * `as` (router link) gets the same attributes. Clicks, Enter and Space are prevented: your\n   * `onClick` is not called and the click does not reach ancestor click handlers. `as=\"button\"`\n   * uses the native `disabled` attribute.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link unavailable but keeps it focusable and in the tab order: for a toolbar item or\n   * a disabled link that needs a Tooltip. Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable`; an `<a>` drops its `href`, keeps `role=\"link\"` (`role=\"button\"`\n   * when it had no `href`) and gets `tabIndex={0}`, and `as=\"button\"` gets these attributes\n   * instead of the native `disabled`.\n   * Clicks, Enter and Space are prevented; your `onClick` is not called and the click does not\n   * reach ancestor click handlers. Wins over `disabled` when both are set. In a `Toolbar` it stays\n   * in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n}\n\n/**\n * Props of {@link Link} rendered as `C` (default `'a'`). `LinkProps` without a type argument is\n * the 0.4 name: the props of a Link rendered as an `<a>`, including `ref`.\n */\nexport type LinkProps<C extends React.ElementType = 'a'> = PolymorphicProps<C, LinkOwnProps>;\n\n/** The props the implementation reads, for any `as`. */\ntype LinkImplProps = LinkOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** The destination: without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\nconst appearanceClasses: Record<LinkAppearance, string> = {\n  inline:\n    'text-primary underline not-disabled:not-aria-disabled:hover:decoration-2 focus-visible:decoration-2',\n  standalone:\n    'font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n  subtle:\n    'text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline',\n};\n\n/**\n * A hyperlink with Fluent link styling. Renders an `<a>` by default; `as` renders a router link\n * (`<Link as={RouterLink} to=\"/\">`) or a `<button>` styled as a link (`type=\"button\"` by default).\n *\n * - Without `href`, the `<a>` runs an action instead of navigating (\"Show more\"): it keeps its\n *   element and gets `role=\"button\"`, a tab stop and Enter/Space activation (the consumer's\n *   `role` and `tabIndex` win). A non-interactive `as` (`span`, `div`) is treated the same way;\n *   any `href` string, `''` included, keeps the link semantics.\n *\n * @example\n * <p>Read the <Link href=\"/docs\">documentation</Link> first.</p>\n * <Link appearance=\"standalone\" href=\"/pricing\">See pricing</Link>\n * <Link onClick={showMore}>Show more</Link>\n */\nexport const Link: PolymorphicComponent<'a', LinkOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    variant,\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ref,\n    ...rest\n  } = props as LinkImplProps;\n\n  const appearance =\n    resolveDeprecatedProp('Link', appearanceProp, variant, 'variant', 'appearance') ?? 'inline';\n\n  const Component: React.ElementType = as ?? 'a';\n  const tag = typeof Component === 'string' ? Component : null;\n  // The activation semantics of Button: an `<a>` without `href` or a `span` is a button, and a\n  // disabled link blocks its click (ancestors included), Enter and Space.\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE).\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        linkClassNames.root,\n        'cursor-pointer transition-colors motion-reduce:transition-none',\n        focusRing,\n        appearanceClasses[appearance],\n        // Full opacity while a focusable disabled link shows its focus ring, which `opacity`\n        // would dim below 3:1 (as for buttons).\n        (disabled || disabledFocusable) &&\n          'cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100',\n        className,\n      )}\n      {...enforced}\n    />\n  );\n};\n\nLink.displayName = 'Link';\n"],"mappings":"yTA4EA,IAAMa,EAAoD,CACxD,OACE,sGACF,WACE,iHACF,OACE,qGACJ,EAgBaC,EAAiD,GAAU,CACtE,GAAM,CACJ,KACA,WAAYC,EACZ,UACA,WAAW,GACX,oBAAoB,GACpB,YACA,UACA,YACA,UACA,SACA,MACA,GAAGC,GACDC,EAEEC,EACJlB,EAAAA,sBAAsB,OAAQe,EAAgBI,EAAS,UAAW,YAAY,GAAK,SAE/EC,EAA+BC,GAAM,IAIrC,CAAE,WAAU,WAAU,YAAapB,EAAAA,mBAAmB,CAC1D,IAJU,OAAOmB,GAAc,SAAWA,EAAY,KAKtD,KAAMJ,EAAK,KACX,WACA,oBACA,UACA,YACA,UACA,QACF,CAAC,EAGKM,EAAwC,CAAE,GAAGN,CAAK,EACxD,IAAK,GAAM,CAACO,EAAKC,KAAU,OAAO,QAAQC,CAAQ,EAAG,EAAaF,KAASC,EAE3E,OACE,EAAAZ,EAAA,IAAA,CAACQ,EAAD,CACE,GAAIE,EACJ,GAAII,EACC,MACL,UAAWxB,EAAAA,GACTC,EAAAA,eAAe,KACf,iEACAC,EAAAA,UACAS,EAAkBK,IAGjBS,GAAYC,IACX,wEACFC,CACF,EACA,GAAIC,CACL,CAAA,CAEL,EAEA,EAAK,YAAc"}

package/dist/components/button/Link.mjs

@@ -2,8 +2,8 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { resolveDeprecatedProp as t } from "../../lib/dev.mjs";
 import { linkClassNames as n } from "../../lib/classNames.mjs";
-import { useButtonSemantics as r } from "./Button.semantics.mjs";
-import { focusRing as i } from "../../lib/styles.mjs";
+import { focusRing as r } from "../../lib/styles.mjs";
+import { useButtonSemantics as i } from "./Button.semantics.mjs";
 import "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/button/Link.tsx
@@ -12,7 +12,7 @@ var o = {
 	standalone: "font-semibold text-primary no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline",
 	subtle: "text-foreground no-underline not-disabled:not-aria-disabled:hover:underline focus-visible:underline"
 }, s = (s) => {
-	let { as: c, appearance: l, variant: u, disabled: d = !1, disabledFocusable: f = !1, className: p, onClick: m, onKeyDown: h, onKeyUp: g, onBlur: _, ref: v, ...y } = s, b = t("Link", l, u, "variant", "appearance") ?? "inline", x = c ?? "a", { defaults: S, enforced: C, handlers: w } = r({
+	let { as: c, appearance: l, variant: u, disabled: d = !1, disabledFocusable: f = !1, className: p, onClick: m, onKeyDown: h, onKeyUp: g, onBlur: _, ref: v, ...y } = s, b = t("Link", l, u, "variant", "appearance") ?? "inline", x = c ?? "a", { defaults: S, enforced: C, handlers: w } = i({
 		tag: typeof x == "string" ? x : null,
 		href: y.href,
 		disabled: d,
@@ -27,7 +27,7 @@ var o = {
 		...T,
 		...w,
 		ref: v,
-		className: e(n.root, "cursor-pointer transition-colors motion-reduce:transition-none", i, o[b], (d || f) && "cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100", p),
+		className: e(n.root, "cursor-pointer transition-colors motion-reduce:transition-none", r, o[b], (d || f) && "cursor-not-allowed opacity-50 aria-disabled:focus-visible:opacity-100", p),
 		...C
 	});
 };

package/dist/components/data-display/Avatar.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/slot.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useMergedRefs.cjs"),o=require("../../lib/aria.cjs"),ee=require("../../lib/icons.cjs"),te=require("./Avatar.context.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l={"extra-small":`w-6 h-6 text-[10px]`,small:`w-8 h-8 text-xs`,medium:`w-10 h-10 text-sm`,large:`w-12 h-12 text-base`,"extra-large":`w-14 h-14 text-lg`},ne={24:l[`extra-small`],20:`w-5 h-5 text-[10px]`,16:`w-4 h-4 text-[10px]`},u=`w-full h-full object-cover`;function re(e){let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?``:((Array.from(t[0])[0]??``)+(t.length>1?Array.from(t[t.length-1])[0]??``:``)).toUpperCase()}function d(e){return e?.trim().replace(/\s+/g,` `)||void 0}function ie(e){if(s.isValidElement(e))return e.props;if(typeof e==`object`&&e&&!(Symbol.iterator in e))return e}function ae(e,t,n){if(e===void 0)return[void 0,void 0,n||void 0,void 0];if(typeof e==`string`)return[void 0,void 0,e,void 0];let r=s.isValidElement(e)?e:void 0;return[r?.type,r?.key,t?.src,t?.srcSet]}function f(e){if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null}function p(e,t){if(Object.is(e,t))return!0;if(!f(e)||!f(t))return!1;let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>Object.prototype.hasOwnProperty.call(t,n)&&Object.is(e[n],t[n]))}function oe(e,t){return e.every((e,n)=>p(e,t[n]))}var m=({src:e,name:f,size:p,icon:m,image:h,badge:g,decorative:_=!1,className:v,ref:y,role:b,"aria-label":x,"aria-labelledby":S,"aria-describedby":C,"aria-description":se,"aria-details":ce,...w})=>{let T=s.useContext(te.AvatarSizeContext),E=h==null||typeof h==`boolean`||h===``?void 0:h,D=ie(E),O=ae(E,D,e),[le,k]=s.useState(!1),[ue,A]=s.useState(O);oe(ue,O)||(A(O),k(!1));let j=s.useRef(null);s.useLayoutEffect(()=>{let e=j.current?.querySelector(`img`);if(!e||!e.complete||e.naturalWidth!==0)return;let t=!0,n=e.getAttribute(`src`),r=e.getAttribute(`srcset`),i=()=>{t&&e.isConnected&&e.getAttribute(`src`)===n&&e.getAttribute(`srcset`)===r&&k(!0)};return typeof e.decode==`function`?e.decode().then(void 0,i):queueMicrotask(i),()=>{t=!1}},[]);let M=a.useMergedRefs(y,j),N=x!==void 0||S!==void 0,P=b!==void 0&&b!==`presentation`&&b!==`none`,F=d(f),I=_||N||P?``:F??``,L=()=>k(!0),R=D?.alt,z=R!=null,B=z?R:I,V={"aria-describedby":C,"aria-description":se,"aria-details":ce},H=!_&&!N&&!P&&typeof B==`string`&&B.trim()!==``,U=H?V:{},W=null;if(!le){if(typeof E==`string`)W=(0,c.jsx)(`img`,{src:E,alt:I,...U,className:t.cn(i.avatarClassNames.image,u),onError:L});else if(E!==void 0){let e={onError:r.composeEventHandlers(D?.onError,L)};if(z||(e.alt=I),H){let t=D?.[`aria-describedby`];e[`aria-describedby`]=o.joinIds(C,typeof t==`string`?t:void 0)}let a=s.isValidElement(E)?s.cloneElement(E,e):D?{...E,...e}:E;W=n.renderSlot(a,`img`,t.cn(i.avatarClassNames.image,u),{alt:I,...U})}else e&&(W=(0,c.jsx)(`img`,{src:e,alt:I,...U,className:t.cn(i.avatarClassNames.image,u),onError:L}))}let G=W!==null&&H?{}:V,K=W===null&&m&&n.slotRendersContent(m)?n.renderSlot(m,`span`,t.cn(i.avatarClassNames.icon,`inline-flex`),{"aria-hidden":!0}):null,q=W===null&&K===null&&f?re(f):``,J,Y;W===null?K===null?q?(J=(0,c.jsx)(`span`,{"aria-hidden":`true`,className:i.avatarClassNames.initials,children:q}),Y=`bg-primary text-primary-foreground`):(J=(0,c.jsx)(ee.PersonIcon,{size:`60%`,className:i.avatarClassNames.icon}),Y=`bg-muted text-muted-foreground`):(J=K,Y=`bg-muted text-muted-foreground`):J=W;let de=W!==null&&P&&typeof B==`string`?d(B):void 0,fe=typeof R==`string`?d(R):void 0,X=x??(W===null?F??fe:P?de??F:void 0),Z;Z=_?{"aria-hidden":!0,...G}:X!==void 0||S!==void 0?{role:b??`img`,"aria-label":X,"aria-labelledby":S,...G}:W!==null||b!==void 0?{role:b,...G}:{"aria-hidden":!0,...G};let Q=g&&n.slotRendersContent(g)?n.renderSlot(g,`span`,t.cn(i.avatarClassNames.badge,`absolute bottom-0 end-0 inline-flex`)):null,pe=Q!==null,me=p===void 0?T?ne[T.size]:l.medium:l[p],$=t.cn(i.avatarClassNames.visual,`inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-bold`,me,Y);return pe?(0,c.jsxs)(`span`,{ref:y,...w,className:t.cn(i.avatarClassNames.root,`relative inline-flex shrink-0`,v),children:[(0,c.jsx)(`span`,{ref:j,...Z,className:$,children:J}),Q]}):(0,c.jsx)(`span`,{ref:M,...Z,...w,className:t.cn(i.avatarClassNames.root,$,v),children:J})};m.displayName=`Avatar`,exports.Avatar=m,exports.avatarSizeClasses=l;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/slot.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../lib/initials.cjs"),ee=require("../../hooks/useMergedRefs.cjs"),te=require("../../lib/aria.cjs"),ne=require("../../hooks/useDirection.cjs"),re=require("../../lib/icons.cjs"),o=require("./Avatar.context.cjs"),ie=require("./AvatarGroup.context.cjs"),s=require("./Avatar.colors.cjs"),c=require("./Avatar.sizes.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");c.avatarBoxClasses[24],c.avatarBoxClasses[32],c.avatarBoxClasses[40],c.avatarBoxClasses[48],c.avatarBoxClasses[56];var d=`w-full h-full object-cover`,ae={ring:`ring-2 ring-primary ring-offset-2 ring-offset-background`,"ring-shadow":`ring-2 ring-primary ring-offset-2 ring-offset-background shadow-8`,shadow:`shadow-8`,glow:`shadow-[0_0_0.5rem_0.125rem_var(--wave-primary)]`};function f(e){return e?.trim().replace(/\s+/g,` `)||void 0}function oe(e){if(l.isValidElement(e))return e.props;if(typeof e==`object`&&e&&!(Symbol.iterator in e))return e}function se(e,t,n){if(e===void 0)return[void 0,void 0,n||void 0,void 0];if(typeof e==`string`)return[void 0,void 0,e,void 0];let r=l.isValidElement(e)?e:void 0;return[r?.type,r?.key,t?.src,t?.srcSet]}function p(e){if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null}function m(e,t){if(Object.is(e,t))return!0;if(!p(e)||!p(t))return!1;let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>Object.prototype.hasOwnProperty.call(t,n)&&Object.is(e[n],t[n]))}function ce(e,t){return e.every((e,n)=>m(e,t[n]))}var h=({src:e,name:p,size:m,shape:h,color:le=`brand`,idForColor:ue,active:g=`unset`,activeAppearance:_=`ring`,initials:v,icon:y,image:b,badge:x,decorative:S=!1,className:C,ref:w,role:T,"aria-label":de,"aria-labelledby":E,"aria-describedby":fe,"aria-description":pe,"aria-details":me,...he})=>{let D=l.useContext(o.AvatarSizeContext),O=b==null||typeof b==`boolean`||b===``?void 0:b,k=oe(O),A=se(O,k,e),[ge,j]=l.useState(!1),[_e,ve]=l.useState(A);ce(_e,A)||(ve(A),j(!1));let M=l.useRef(null);l.useLayoutEffect(()=>{let e=M.current?.querySelector(`img`);if(!e||!e.complete||e.naturalWidth!==0)return;let t=!0,n=e.getAttribute(`src`),r=e.getAttribute(`srcset`),i=()=>{t&&e.isConnected&&e.getAttribute(`src`)===n&&e.getAttribute(`srcset`)===r&&j(!0)};return typeof e.decode==`function`?e.decode().then(void 0,i):queueMicrotask(i),()=>{t=!1}},[]);let ye=ee.useMergedRefs(w,M),N=de!==void 0||E!==void 0,P=T!==void 0&&T!==`presentation`&&T!==`none`,F=f(p),I=S||N||P?``:F??``,L=()=>j(!0),R=k?.alt,z=R!=null,B=z?R:I,V={"aria-describedby":fe,"aria-description":pe,"aria-details":me},H=!S&&!N&&!P&&typeof B==`string`&&B.trim()!==``,U=H?V:{},W=null;if(!ge){if(typeof O==`string`)W=(0,u.jsx)(`img`,{src:O,alt:I,...U,className:t.cn(i.avatarClassNames.image,d),onError:L});else if(O!==void 0){let e={onError:r.composeEventHandlers(k?.onError,L)};if(z||(e.alt=I),H){let t=k?.[`aria-describedby`];e[`aria-describedby`]=te.joinIds(fe,typeof t==`string`?t:void 0)}let a=l.isValidElement(O)?l.cloneElement(O,e):k?{...O,...e}:O;W=n.renderSlot(a,`img`,t.cn(i.avatarClassNames.image,d),{alt:I,...U})}else e&&(W=(0,u.jsx)(`img`,{src:e,alt:I,...U,className:t.cn(i.avatarClassNames.image,d),onError:L}))}let G=W!==null&&H?{}:V,K=W===null&&y&&n.slotRendersContent(y)?n.renderSlot(y,`span`,t.cn(i.avatarClassNames.icon,`inline-flex`),{"aria-hidden":!0}):null,be=ne.useDirection(),q=l.useContext(ie.AvatarGroupContext),xe=t.cn(i.avatarClassNames.initials,q?.layout===`pie`&&`invisible`),J=s.resolveAvatarColor(le,ue,p),Se=W===null&&K===null,Ce=Se&&p?a.getInitials(p,{dir:be}):``,we=Se?v&&n.slotRendersContent(v)?n.renderSlot(v,`span`,xe,{"aria-hidden":!0}):Ce?(0,u.jsx)(`span`,{"aria-hidden":`true`,className:xe,children:Ce}):null:null,Y,X;W===null?K===null?we?(Y=we,X=s.avatarColorClasses[J]):(Y=(0,u.jsx)(re.PersonIcon,{size:`60%`,className:i.avatarClassNames.icon}),X=`bg-muted text-muted-foreground`):(Y=K,X=`bg-muted text-muted-foreground`):Y=W;let Te=W!==null&&P&&typeof B==`string`?f(B):void 0,Ee=typeof R==`string`?f(R):void 0,De=de??(W===null?F??Ee:P?Te??F:void 0),Z;Z=S?{"aria-hidden":!0,...G}:De!==void 0||E!==void 0?{role:T??`img`,"aria-label":De,"aria-labelledby":E,...G}:W!==null||T!==void 0?{role:T,...G}:{"aria-hidden":!0,...G};let Oe=x&&n.slotRendersContent(x)?n.renderSlot(x,`span`,t.cn(i.avatarClassNames.badge,`absolute bottom-0 end-0 inline-flex`)):null,ke=Oe!==null,Q=m??q?.size??(D?D.size:`medium`),Ae=h??D?.shape??`circular`,je=c.avatarPixelSize(Q),Me={"data-size":String(Q),"data-shape":Ae,"data-color":J,"data-active":g,"data-active-appearance":_},$=t.cn(i.avatarClassNames.visual,`inline-flex items-center justify-center overflow-hidden shrink-0 font-bold`,c.avatarShapeClasses(Ae,je),c.avatarSizeClassesFor(Q),X,g===`active`&&ae[_],g===`inactive`&&`opacity-60 transition-opacity motion-reduce:transition-none`);return ke?(0,u.jsxs)(`span`,{ref:w,...Me,...he,className:t.cn(i.avatarClassNames.root,`relative inline-flex shrink-0`,C),children:[(0,u.jsx)(`span`,{ref:M,...Z,className:$,children:Y}),(0,u.jsx)(o.AvatarBadgeSizeContext.Provider,{value:c.avatarBadgeSize(je),children:Oe})]}):(0,u.jsx)(`span`,{ref:ye,...Z,...Me,...he,className:t.cn(i.avatarClassNames.root,$,C),children:Y})};h.displayName=`Avatar`,exports.Avatar=h;
 //# sourceMappingURL=Avatar.cjs.map