@mortenbrudvik/waveui 0.11.0 → 0.12.0

package/README.md

@@ -1601,9 +1601,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.
@@ -2166,7 +2242,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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
@@ -2192,6 +2277,16 @@ 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.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/AvatarGroup.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../lib/layers.cjs"),l=require("../../hooks/useDismiss.cjs"),u=require("../portal/Portal.cjs");require("../../lib/styles.cjs");const d=require("../../hooks/usePopupPosition.cjs"),f=require("../../hooks/useRestoreFocus.cjs"),p=require("./Avatar.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=`Unnamed member`,_=e=>typeof e==`string`&&e.trim()!==``;function v(e){if(typeof e==`string`||typeof e==`number`)return String(e).trim()||void 0;if(!n.isElementOfType(e,p.Avatar))return;let{decorative:t,name:r,"aria-label":i,"aria-labelledby":a}=e.props;if(t||!_(a)){for(let e of[i,r])if(_(e))return e.trim()}}function y(e){if(typeof e==`string`||typeof e==`number`)return!0;if(!n.isElementOfType(e,p.Avatar))return!1;let{decorative:t,image:r,"aria-labelledby":i}=e.props;if(t)return!0;if(_(i))return!1;let a=m.isValidElement(r)?r.props:r;return!_(typeof a==`object`&&a&&`alt`in a?a.alt:void 0)}var b=({max:e,size:_=`medium`,overflowLabel:b,unnamedMemberLabel:x=g,className:S,children:C,ref:w,"aria-label":T,"aria-labelledby":E,...D})=>{let O=n.flattenChildren(C),k=e===void 0||Number.isNaN(e)?1/0:Math.max(0,Math.floor(e)),A=O.slice(0,k),j=O.slice(A.length),M=j.length,N=T===void 0&&E===void 0;m.useEffect(()=>{N&&r.warnOnce(`AvatarGroup:unnamed`,"AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.")},[N]);let P=a.useId(`avatar-group-overflow`),[F,I]=m.useState(!1);F&&M===0&&I(!1);let L=F&&M>0,R=typeof b==`function`?b(M):b??`${M} more`,z=m.useContext(l.DismissLayerContext),B=m.useRef(null),V=m.useRef(null),[H,U]=m.useState(null),{setReference:W,setFloating:G,floatingProps:K}=d.usePopupPosition({open:L,side:`bottom`,align:`start`}),{layerId:q}=l.useDismiss({open:L,onDismiss:()=>I(!1),refs:[B,V],anchorRef:B,focusOutside:!0});f.useRestoreFocus({enabled:L,container:H,triggerRef:B,onlyIfFocusInside:!0});let J=s.useMergedRefs(B,W),Y=s.useMergedRefs(V,G,U);m.useEffect(()=>{L&&H&&H.focus({preventScroll:!0})},[L,H]);let X=e=>{let t=B.current;if(e.key!==`Tab`||e.defaultPrevented||!t)return;let n=e.currentTarget,r=e.target;if(!r||typeof r.nodeType!=`number`||!n.contains(r))return;let i=o.getTabbableElements(n),a=i.findIndex(e=>e.contains(r))+(e.shiftKey?-1:1);if(a>=0&&a<i.length){e.preventDefault(),i[a].focus();return}let s=t;if(!e.shiftKey){let e=o.getTabbableElements(t.ownerDocument.body).filter(e=>!n.contains(e)),r=e.indexOf(t);s=r===-1?t:e[r+1],s&&z!==null&&!c.isInsideLayerTree(z,s)&&(s=void 0)}I(!1),s&&(e.preventDefault(),s.focus())},Z=L&&j.some(({node:e})=>v(e)===void 0&&y(e));return m.useEffect(()=>{Z&&r.warnOnce(`AvatarGroup:unnamed-member`,`AvatarGroup: a hidden member has no accessible name and is listed as "${x}". Give each member a \`name\` or \`aria-label\`.`)},[Z,x]),(0,h.jsxs)(`div`,{ref:w,role:`group`,"aria-label":T,"aria-labelledby":E,...D,className:t.cn(i.avatarGroupClassNames.root,`inline-flex items-center`,S),children:[A.map(({key:e,node:n},r)=>(0,h.jsx)(`span`,{className:t.cn(i.avatarGroupClassNames.item,`inline-flex rounded-full ring-2 ring-background`,r>0&&`-ms-2`),children:n},e)),M>0&&(0,h.jsxs)(`button`,{ref:J,type:`button`,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":L,"aria-controls":L?P:void 0,className:t.cn(i.avatarGroupClassNames.overflowButton,`inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold`,`bg-muted text-muted-foreground ring-2 ring-background`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,A.length>0&&`-ms-2`,p.avatarSizeClasses[_]),onClick:()=>I(e=>!e),children:[`+`,M]}),L&&(0,h.jsx)(u.Portal,{layerId:q,children:(0,h.jsx)(`div`,{ref:Y,id:P,role:`dialog`,"aria-label":R,tabIndex:-1,"data-state":`open`,...K,className:t.cn(i.avatarGroupClassNames.surface,`min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`),onKeyDown:X,children:(0,h.jsx)(`ul`,{className:t.cn(i.avatarGroupClassNames.list,`m-0 flex list-none flex-col gap-1 p-0`),children:j.map(({key:e,node:n})=>(0,h.jsx)(`li`,{className:t.cn(i.avatarGroupClassNames.listItem,`px-1 py-0.5`),children:v(n)??(y(n)?x:n)},e))})})})]})};b.displayName=`AvatarGroup`,exports.AvatarGroup=b;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/usePopupPosition.cjs"),l=require("../../lib/layers.cjs"),u=require("../../hooks/useDismiss.cjs"),d=require("../../hooks/useRestoreFocus.cjs");require("../../lib/styles.cjs");const f=require("../portal/Portal.cjs"),p=require("./Avatar.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=`Unnamed member`,_=e=>typeof e==`string`&&e.trim()!==``;function v(e){if(typeof e==`string`||typeof e==`number`)return String(e).trim()||void 0;if(!n.isElementOfType(e,p.Avatar))return;let{decorative:t,name:r,"aria-label":i,"aria-labelledby":a}=e.props;if(t||!_(a)){for(let e of[i,r])if(_(e))return e.trim()}}function y(e){if(typeof e==`string`||typeof e==`number`)return!0;if(!n.isElementOfType(e,p.Avatar))return!1;let{decorative:t,image:r,"aria-labelledby":i}=e.props;if(t)return!0;if(_(i))return!1;let a=m.isValidElement(r)?r.props:r;return!_(typeof a==`object`&&a&&`alt`in a?a.alt:void 0)}var b=({max:e,size:_=`medium`,overflowLabel:b,unnamedMemberLabel:x=g,className:S,children:C,ref:w,"aria-label":T,"aria-labelledby":E,...D})=>{let O=n.flattenChildren(C),k=e===void 0||Number.isNaN(e)?1/0:Math.max(0,Math.floor(e)),A=O.slice(0,k),j=O.slice(A.length),M=j.length,N=T===void 0&&E===void 0;m.useEffect(()=>{N&&r.warnOnce(`AvatarGroup:unnamed`,"AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.")},[N]);let P=a.useId(`avatar-group-overflow`),[F,I]=m.useState(!1);F&&M===0&&I(!1);let L=F&&M>0,R=typeof b==`function`?b(M):b??`${M} more`,z=m.useContext(u.DismissLayerContext),B=m.useRef(null),V=m.useRef(null),[H,U]=m.useState(null),{setReference:W,setFloating:G,floatingProps:K}=c.usePopupPosition({open:L,side:`bottom`,align:`start`}),{layerId:q}=u.useDismiss({open:L,onDismiss:()=>I(!1),refs:[B,V],anchorRef:B,focusOutside:!0});d.useRestoreFocus({enabled:L,container:H,triggerRef:B,onlyIfFocusInside:!0});let J=s.useMergedRefs(B,W),Y=s.useMergedRefs(V,G,U);m.useEffect(()=>{L&&H&&H.focus({preventScroll:!0})},[L,H]);let X=e=>{let t=B.current;if(e.key!==`Tab`||e.defaultPrevented||!t)return;let n=e.currentTarget,r=e.target;if(!r||typeof r.nodeType!=`number`||!n.contains(r))return;let i=o.getTabbableElements(n),a=i.findIndex(e=>e.contains(r))+(e.shiftKey?-1:1);if(a>=0&&a<i.length){e.preventDefault(),i[a].focus();return}let s=t;if(!e.shiftKey){let e=o.getTabbableElements(t.ownerDocument.body).filter(e=>!n.contains(e)),r=e.indexOf(t);s=r===-1?t:e[r+1],s&&z!==null&&!l.isInsideLayerTree(z,s)&&(s=void 0)}I(!1),s&&(e.preventDefault(),s.focus())},Z=L&&j.some(({node:e})=>v(e)===void 0&&y(e));return m.useEffect(()=>{Z&&r.warnOnce(`AvatarGroup:unnamed-member`,`AvatarGroup: a hidden member has no accessible name and is listed as "${x}". Give each member a \`name\` or \`aria-label\`.`)},[Z,x]),(0,h.jsxs)(`div`,{ref:w,role:`group`,"aria-label":T,"aria-labelledby":E,...D,className:t.cn(i.avatarGroupClassNames.root,`inline-flex items-center`,S),children:[A.map(({key:e,node:n},r)=>(0,h.jsx)(`span`,{className:t.cn(i.avatarGroupClassNames.item,`inline-flex rounded-full ring-2 ring-background`,r>0&&`-ms-2`),children:n},e)),M>0&&(0,h.jsxs)(`button`,{ref:J,type:`button`,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":L,"aria-controls":L?P:void 0,className:t.cn(i.avatarGroupClassNames.overflowButton,`inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold`,`bg-muted text-muted-foreground ring-2 ring-background`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,A.length>0&&`-ms-2`,p.avatarSizeClasses[_]),onClick:()=>I(e=>!e),children:[`+`,M]}),L&&(0,h.jsx)(f.Portal,{layerId:q,children:(0,h.jsx)(`div`,{ref:Y,id:P,role:`dialog`,"aria-label":R,tabIndex:-1,"data-state":`open`,...K,className:t.cn(i.avatarGroupClassNames.surface,`min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`),onKeyDown:X,children:(0,h.jsx)(`ul`,{className:t.cn(i.avatarGroupClassNames.list,`m-0 flex list-none flex-col gap-1 p-0`),children:j.map(({key:e,node:n})=>(0,h.jsx)(`li`,{className:t.cn(i.avatarGroupClassNames.listItem,`px-1 py-0.5`),children:v(n)??(y(n)?x:n)},e))})})})]})};b.displayName=`AvatarGroup`,exports.AvatarGroup=b;
 //# sourceMappingURL=AvatarGroup.cjs.map

package/dist/components/data-display/AvatarGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.cjs","names":["isElementOfType","Avatar","React","flattenChildren","useId","DismissLayerContext","usePopupPosition","useDismiss","useMergedRefs","getTabbableElements","isInsideLayerTree","cn","avatarGroupClassNames","avatarSizeClasses","Portal","require_runtime","require_cn","require_children","require_dev","require_classNames","require_useId","require_focus","require_useMergedRefs","require_layers","require_useDismiss","require_Portal","require_usePopupPosition","require_useRestoreFocus","require_Avatar","react","react_jsx_runtime","DEFAULT_UNNAMED_MEMBER_LABEL","nonBlank","value","getMemberName","member","label","labelledBy","decorative","name","rendersUnnamed","imageProps","image","AvatarGroup","ariaLabel","ariaLabelledBy","props","items","children","limit","max","visible","hidden","overflow","unnamed","popupId","open","setOpen","isOpen","overflowLabel","parentLayerId","triggerRef","surfaceRef","surface","setSurface","triggerRefs","setReference","surfaceRefs","setFloating","handleSurfaceKeyDown","trigger","event","popup","origin","inner","next","el","target","order","index","hasUnnamedMember","node","unnamedMemberLabel","className","i","key","size","floatingProps"],"sources":["../../../src/components/data-display/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { avatarGroupClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { isInsideLayerTree } from '../../lib/layers';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { DismissLayerContext, useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport { Avatar, avatarSizeClasses } from './Avatar';\nimport type { AvatarProps } from './Avatar';\n\n/** Properties for the AvatarGroup component. */\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum number of avatars to display. The others are replaced by an overflow button that\n   * lists their names. `0` or a negative value shows only the overflow button, a fraction is\n   * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment\n   * count one by one.\n   */\n  max?: number;\n  /** Size of the overflow button (match it to the avatars).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Accessible name of the overflow button (and its popup). A function receives the number of\n   * hidden members. Localise it here.\n   * @default (count) => `${count} more`\n   */\n  overflowLabel?: string | ((count: number) => string);\n  /**\n   * Text listed in the overflow popup for a hidden member that has no accessible name (an\n   * `Avatar` without `name`, `aria-label`, `aria-labelledby` or image `alt`, or blank text).\n   * Localise it here; better still, give every member a name (a development warning asks for it).\n   * @default 'Unnamed member'\n   */\n  unnamedMemberLabel?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Default text listed for a hidden member that would render with no accessible name. */\nconst DEFAULT_UNNAMED_MEMBER_LABEL = 'Unnamed member';\n\nconst nonBlank = (value: unknown): value is string =>\n  typeof value === 'string' && value.trim() !== '';\n\n/**\n * The text name of a member for the overflow list: the text of a text member, or the accessible\n * name of an `Avatar` given by its props (`aria-label` before `name`). An `Avatar` labelled by\n * `aria-labelledby` (unless `decorative`) and every other element have none: they are rendered as\n * they are, so a link keeps working and keeps its own label.\n */\nfunction getMemberName(member: React.ReactNode): string | undefined {\n  if (typeof member === 'string' || typeof member === 'number') {\n    return String(member).trim() || undefined;\n  }\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return undefined;\n  const { decorative, name, 'aria-label': label, 'aria-labelledby': labelledBy } = member.props;\n  if (!decorative && nonBlank(labelledBy)) return undefined;\n  for (const value of [label, name]) {\n    if (nonBlank(value)) return value.trim();\n  }\n  return undefined;\n}\n\n/**\n * Whether a member without a {@link getMemberName} name would render with no accessible name,\n * so its list item would be empty for assistive technology: blank text, or an `Avatar` that is\n * neither labelled by `aria-labelledby` nor named by its image's `alt` (or is `decorative`).\n * Other elements are rendered as they are, since their content is unknown here.\n */\nfunction rendersUnnamed(member: React.ReactNode): boolean {\n  if (typeof member === 'string' || typeof member === 'number') return true;\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return false;\n  const { decorative, image, 'aria-labelledby': labelledBy } = member.props;\n  if (decorative) return true;\n  if (nonBlank(labelledBy)) return false;\n  const imageProps: unknown = React.isValidElement(image) ? image.props : image;\n  const alt =\n    typeof imageProps === 'object' && imageProps !== null && 'alt' in imageProps\n      ? imageProps.alt\n      : undefined;\n  return !nonBlank(alt);\n}\n\n/**\n * A row of overlapping avatars (`role=\"group\"`; name it with `aria-label`).\n *\n * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` (\"+3\", named\n * \"3 more\", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an\n * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`\n * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or\n * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.\n * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to\n * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered\n * members); Tab from the last one closes the popup and moves on to the element after the button,\n * Shift+Tab from the first one closes it and returns to the button. When the button is the last\n * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to\n * the browser or the enclosing focus trap.\n *\n * @example\n * <AvatarGroup aria-label=\"Project team\" max={3}>\n *   <Avatar name=\"Ada Lovelace\" />\n *   <Avatar name=\"Alan Turing\" />\n * </AvatarGroup>\n */\nexport const AvatarGroup = ({\n  max,\n  size = 'medium',\n  overflowLabel,\n  unnamedMemberLabel = DEFAULT_UNNAMED_MEMBER_LABEL,\n  className,\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: AvatarGroupProps) => {\n  // Fragments are flattened, so each member counts, overlaps and is listed on its own (C-COMPOUND).\n  const items = flattenChildren(children);\n  const limit = max === undefined || Number.isNaN(max) ? Infinity : Math.max(0, Math.floor(max));\n  const visible = items.slice(0, limit);\n  const hidden = items.slice(visible.length);\n  const overflow = hidden.length;\n\n  const unnamed = ariaLabel === undefined && ariaLabelledBy === undefined;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'AvatarGroup:unnamed',\n        'AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.',\n      );\n    }\n  }, [unnamed]);\n\n  const popupId = useId('avatar-group-overflow');\n  const [open, setOpen] = React.useState(false);\n  // Nothing is hidden any more: close, so the popup does not reappear when members overflow again.\n  if (open && overflow === 0) setOpen(false);\n  const isOpen = open && overflow > 0;\n  const label =\n    typeof overflowLabel === 'function'\n      ? overflowLabel(overflow)\n      : (overflowLabel ?? `${overflow} more`);\n\n  // The layer the group is rendered in (a dialog or popover), if any: the popup's parent layer.\n  const parentLayerId = React.useContext(DismissLayerContext);\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: () => setOpen(false),\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  useRestoreFocus({ enabled: isOpen, container: surface, triggerRef, onlyIfFocusInside: true });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating, setSurface);\n\n  // Move focus into the popup once it is mounted, so its list is read next.\n  React.useEffect(() => {\n    if (isOpen && surface) surface.focus({ preventScroll: true });\n  }, [isOpen, surface]);\n\n  // The popup is portaled, so native tabbing would leave it for the end of the page. Tab moves\n  // through the popup's own tab stops (a rendered member can be a link); leaving the last one\n  // closes the popup and moves on from the button instead (Shift+Tab before the first one: back to\n  // the button), like a focus trap does for a popup anchored in a dialog. When nothing tabbable\n  // follows the button, Tab is not prevented: focus returns to the button as the popup closes and\n  // the browser (leaving the page) or an enclosing focus trap (wrapping) takes it from there.\n  // Inside a parent layer (a dialog, a popover), a tab stop after the button that lies outside that\n  // layer is treated the same way: a focus trap that leaves the page outside it interactive would\n  // pull focus back from there, while its descendant-layer rule (§2.4) wraps from the button.\n  // Tab stops are computed at keydown time, never cached (§2.2 focus utilities). A key that\n  // bubbles through React from a portal a member opened is not the popup's: it is ignored.\n  const handleSurfaceKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const trigger = triggerRef.current;\n    if (event.key !== 'Tab' || event.defaultPrevented || !trigger) return;\n    const popup = event.currentTarget;\n    // Duck typed (`nodeType`), not `instanceof Node`: a popup portaled into another document (an\n    // iframe, a popout window) holds nodes of that realm.\n    const origin = event.target as Partial<Node> | null;\n    if (!origin || typeof origin.nodeType !== 'number' || !popup.contains(origin as Node)) return;\n    const inner = getTabbableElements(popup);\n    // -1 while focus is on the popup itself (or on something that is not a tab stop).\n    const current = inner.findIndex((el) => el.contains(origin as Node));\n    const next = current + (event.shiftKey ? -1 : 1);\n    if (next >= 0 && next < inner.length) {\n      event.preventDefault();\n      inner[next]!.focus();\n      return;\n    }\n    let target: HTMLElement | undefined = trigger;\n    if (!event.shiftKey) {\n      const order = getTabbableElements(trigger.ownerDocument.body).filter(\n        (el) => !popup.contains(el),\n      );\n      const index = order.indexOf(trigger);\n      target = index === -1 ? trigger : order[index + 1];\n      if (target && parentLayerId !== null && !isInsideLayerTree(parentLayerId, target)) {\n        target = undefined;\n      }\n    }\n    setOpen(false);\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n  };\n\n  const hasUnnamedMember =\n    isOpen && hidden.some(({ node }) => getMemberName(node) === undefined && rendersUnnamed(node));\n  React.useEffect(() => {\n    if (hasUnnamedMember) {\n      warnOnce(\n        'AvatarGroup:unnamed-member',\n        `AvatarGroup: a hidden member has no accessible name and is listed as \"${unnamedMemberLabel}\". Give each member a \\`name\\` or \\`aria-label\\`.`,\n      );\n    }\n  }, [hasUnnamedMember, unnamedMemberLabel]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      className={cn(avatarGroupClassNames.root, 'inline-flex items-center', className)}\n    >\n      {visible.map(({ key, node }, i) => (\n        <span\n          key={key}\n          className={cn(\n            avatarGroupClassNames.item,\n            'inline-flex rounded-full ring-2 ring-background',\n            i > 0 && '-ms-2',\n          )}\n        >\n          {node}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <button\n          ref={triggerRefs}\n          type=\"button\"\n          aria-label={label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? popupId : undefined}\n          className={cn(\n            avatarGroupClassNames.overflowButton,\n            'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold',\n            'bg-muted text-muted-foreground ring-2 ring-background',\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n            focusRing,\n            visible.length > 0 && '-ms-2',\n            avatarSizeClasses[size],\n          )}\n          onClick={() => setOpen((value) => !value)}\n        >\n          +{overflow}\n        </button>\n      )}\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={popupId}\n            role=\"dialog\"\n            aria-label={label}\n            tabIndex={-1}\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              avatarGroupClassNames.surface,\n              'min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16',\n              focusRing,\n            )}\n            onKeyDown={handleSurfaceKeyDown}\n          >\n            <ul className={cn(avatarGroupClassNames.list, 'm-0 flex list-none flex-col gap-1 p-0')}>\n              {hidden.map(({ key, node }) => (\n                <li key={key} className={cn(avatarGroupClassNames.listItem, 'px-1 py-0.5')}>\n                  {getMemberName(node) ?? (rendersUnnamed(node) ? unnamedMemberLabel : node)}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.cjs","names":["isElementOfType","Avatar","React","flattenChildren","useId","DismissLayerContext","usePopupPosition","useDismiss","useMergedRefs","getTabbableElements","isInsideLayerTree","cn","avatarGroupClassNames","avatarSizeClasses","Portal","require_runtime","require_cn","require_children","require_dev","require_classNames","require_useId","require_focus","require_useMergedRefs","require_usePopupPosition","require_layers","require_useDismiss","require_useRestoreFocus","require_Portal","require_Avatar","react","react_jsx_runtime","DEFAULT_UNNAMED_MEMBER_LABEL","nonBlank","value","getMemberName","member","label","labelledBy","decorative","name","rendersUnnamed","imageProps","image","AvatarGroup","ariaLabel","ariaLabelledBy","props","items","children","limit","max","visible","hidden","overflow","unnamed","popupId","open","setOpen","isOpen","overflowLabel","parentLayerId","triggerRef","surfaceRef","surface","setSurface","triggerRefs","setReference","surfaceRefs","setFloating","handleSurfaceKeyDown","trigger","event","popup","origin","inner","next","el","target","order","index","hasUnnamedMember","node","unnamedMemberLabel","className","i","key","size","floatingProps"],"sources":["../../../src/components/data-display/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { avatarGroupClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { isInsideLayerTree } from '../../lib/layers';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { DismissLayerContext, useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport { Avatar, avatarSizeClasses } from './Avatar';\nimport type { AvatarProps } from './Avatar';\n\n/** Properties for the AvatarGroup component. */\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum number of avatars to display. The others are replaced by an overflow button that\n   * lists their names. `0` or a negative value shows only the overflow button, a fraction is\n   * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment\n   * count one by one.\n   */\n  max?: number;\n  /** Size of the overflow button (match it to the avatars).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Accessible name of the overflow button (and its popup). A function receives the number of\n   * hidden members. Localise it here.\n   * @default (count) => `${count} more`\n   */\n  overflowLabel?: string | ((count: number) => string);\n  /**\n   * Text listed in the overflow popup for a hidden member that has no accessible name (an\n   * `Avatar` without `name`, `aria-label`, `aria-labelledby` or image `alt`, or blank text).\n   * Localise it here; better still, give every member a name (a development warning asks for it).\n   * @default 'Unnamed member'\n   */\n  unnamedMemberLabel?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Default text listed for a hidden member that would render with no accessible name. */\nconst DEFAULT_UNNAMED_MEMBER_LABEL = 'Unnamed member';\n\nconst nonBlank = (value: unknown): value is string =>\n  typeof value === 'string' && value.trim() !== '';\n\n/**\n * The text name of a member for the overflow list: the text of a text member, or the accessible\n * name of an `Avatar` given by its props (`aria-label` before `name`). An `Avatar` labelled by\n * `aria-labelledby` (unless `decorative`) and every other element have none: they are rendered as\n * they are, so a link keeps working and keeps its own label.\n */\nfunction getMemberName(member: React.ReactNode): string | undefined {\n  if (typeof member === 'string' || typeof member === 'number') {\n    return String(member).trim() || undefined;\n  }\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return undefined;\n  const { decorative, name, 'aria-label': label, 'aria-labelledby': labelledBy } = member.props;\n  if (!decorative && nonBlank(labelledBy)) return undefined;\n  for (const value of [label, name]) {\n    if (nonBlank(value)) return value.trim();\n  }\n  return undefined;\n}\n\n/**\n * Whether a member without a {@link getMemberName} name would render with no accessible name,\n * so its list item would be empty for assistive technology: blank text, or an `Avatar` that is\n * neither labelled by `aria-labelledby` nor named by its image's `alt` (or is `decorative`).\n * Other elements are rendered as they are, since their content is unknown here.\n */\nfunction rendersUnnamed(member: React.ReactNode): boolean {\n  if (typeof member === 'string' || typeof member === 'number') return true;\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return false;\n  const { decorative, image, 'aria-labelledby': labelledBy } = member.props;\n  if (decorative) return true;\n  if (nonBlank(labelledBy)) return false;\n  const imageProps: unknown = React.isValidElement(image) ? image.props : image;\n  const alt =\n    typeof imageProps === 'object' && imageProps !== null && 'alt' in imageProps\n      ? imageProps.alt\n      : undefined;\n  return !nonBlank(alt);\n}\n\n/**\n * A row of overlapping avatars (`role=\"group\"`; name it with `aria-label`).\n *\n * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` (\"+3\", named\n * \"3 more\", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an\n * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`\n * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or\n * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.\n * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to\n * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered\n * members); Tab from the last one closes the popup and moves on to the element after the button,\n * Shift+Tab from the first one closes it and returns to the button. When the button is the last\n * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to\n * the browser or the enclosing focus trap.\n *\n * @example\n * <AvatarGroup aria-label=\"Project team\" max={3}>\n *   <Avatar name=\"Ada Lovelace\" />\n *   <Avatar name=\"Alan Turing\" />\n * </AvatarGroup>\n */\nexport const AvatarGroup = ({\n  max,\n  size = 'medium',\n  overflowLabel,\n  unnamedMemberLabel = DEFAULT_UNNAMED_MEMBER_LABEL,\n  className,\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: AvatarGroupProps) => {\n  // Fragments are flattened, so each member counts, overlaps and is listed on its own (C-COMPOUND).\n  const items = flattenChildren(children);\n  const limit = max === undefined || Number.isNaN(max) ? Infinity : Math.max(0, Math.floor(max));\n  const visible = items.slice(0, limit);\n  const hidden = items.slice(visible.length);\n  const overflow = hidden.length;\n\n  const unnamed = ariaLabel === undefined && ariaLabelledBy === undefined;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'AvatarGroup:unnamed',\n        'AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.',\n      );\n    }\n  }, [unnamed]);\n\n  const popupId = useId('avatar-group-overflow');\n  const [open, setOpen] = React.useState(false);\n  // Nothing is hidden any more: close, so the popup does not reappear when members overflow again.\n  if (open && overflow === 0) setOpen(false);\n  const isOpen = open && overflow > 0;\n  const label =\n    typeof overflowLabel === 'function'\n      ? overflowLabel(overflow)\n      : (overflowLabel ?? `${overflow} more`);\n\n  // The layer the group is rendered in (a dialog or popover), if any: the popup's parent layer.\n  const parentLayerId = React.useContext(DismissLayerContext);\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: () => setOpen(false),\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  useRestoreFocus({ enabled: isOpen, container: surface, triggerRef, onlyIfFocusInside: true });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating, setSurface);\n\n  // Move focus into the popup once it is mounted, so its list is read next.\n  React.useEffect(() => {\n    if (isOpen && surface) surface.focus({ preventScroll: true });\n  }, [isOpen, surface]);\n\n  // The popup is portaled, so native tabbing would leave it for the end of the page. Tab moves\n  // through the popup's own tab stops (a rendered member can be a link); leaving the last one\n  // closes the popup and moves on from the button instead (Shift+Tab before the first one: back to\n  // the button), like a focus trap does for a popup anchored in a dialog. When nothing tabbable\n  // follows the button, Tab is not prevented: focus returns to the button as the popup closes and\n  // the browser (leaving the page) or an enclosing focus trap (wrapping) takes it from there.\n  // Inside a parent layer (a dialog, a popover), a tab stop after the button that lies outside that\n  // layer is treated the same way: a focus trap that leaves the page outside it interactive would\n  // pull focus back from there, while its descendant-layer rule (§2.4) wraps from the button.\n  // Tab stops are computed at keydown time, never cached (§2.2 focus utilities). A key that\n  // bubbles through React from a portal a member opened is not the popup's: it is ignored.\n  const handleSurfaceKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const trigger = triggerRef.current;\n    if (event.key !== 'Tab' || event.defaultPrevented || !trigger) return;\n    const popup = event.currentTarget;\n    // Duck typed (`nodeType`), not `instanceof Node`: a popup portaled into another document (an\n    // iframe, a popout window) holds nodes of that realm.\n    const origin = event.target as Partial<Node> | null;\n    if (!origin || typeof origin.nodeType !== 'number' || !popup.contains(origin as Node)) return;\n    const inner = getTabbableElements(popup);\n    // -1 while focus is on the popup itself (or on something that is not a tab stop).\n    const current = inner.findIndex((el) => el.contains(origin as Node));\n    const next = current + (event.shiftKey ? -1 : 1);\n    if (next >= 0 && next < inner.length) {\n      event.preventDefault();\n      inner[next]!.focus();\n      return;\n    }\n    let target: HTMLElement | undefined = trigger;\n    if (!event.shiftKey) {\n      const order = getTabbableElements(trigger.ownerDocument.body).filter(\n        (el) => !popup.contains(el),\n      );\n      const index = order.indexOf(trigger);\n      target = index === -1 ? trigger : order[index + 1];\n      if (target && parentLayerId !== null && !isInsideLayerTree(parentLayerId, target)) {\n        target = undefined;\n      }\n    }\n    setOpen(false);\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n  };\n\n  const hasUnnamedMember =\n    isOpen && hidden.some(({ node }) => getMemberName(node) === undefined && rendersUnnamed(node));\n  React.useEffect(() => {\n    if (hasUnnamedMember) {\n      warnOnce(\n        'AvatarGroup:unnamed-member',\n        `AvatarGroup: a hidden member has no accessible name and is listed as \"${unnamedMemberLabel}\". Give each member a \\`name\\` or \\`aria-label\\`.`,\n      );\n    }\n  }, [hasUnnamedMember, unnamedMemberLabel]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      className={cn(avatarGroupClassNames.root, 'inline-flex items-center', className)}\n    >\n      {visible.map(({ key, node }, i) => (\n        <span\n          key={key}\n          className={cn(\n            avatarGroupClassNames.item,\n            'inline-flex rounded-full ring-2 ring-background',\n            i > 0 && '-ms-2',\n          )}\n        >\n          {node}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <button\n          ref={triggerRefs}\n          type=\"button\"\n          aria-label={label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? popupId : undefined}\n          className={cn(\n            avatarGroupClassNames.overflowButton,\n            'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold',\n            'bg-muted text-muted-foreground ring-2 ring-background',\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n            focusRing,\n            visible.length > 0 && '-ms-2',\n            avatarSizeClasses[size],\n          )}\n          onClick={() => setOpen((value) => !value)}\n        >\n          +{overflow}\n        </button>\n      )}\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={popupId}\n            role=\"dialog\"\n            aria-label={label}\n            tabIndex={-1}\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              avatarGroupClassNames.surface,\n              'min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16',\n              focusRing,\n            )}\n            onKeyDown={handleSurfaceKeyDown}\n          >\n            <ul className={cn(avatarGroupClassNames.list, 'm-0 flex list-none flex-col gap-1 p-0')}>\n              {hidden.map(({ key, node }) => (\n                <li key={key} className={cn(avatarGroupClassNames.listItem, 'px-1 py-0.5')}>\n                  {getMemberName(node) ?? (rendersUnnamed(node) ? unnamedMemberLabel : node)}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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"}

package/dist/components/data-display/AvatarGroup.mjs

@@ -6,12 +6,12 @@ import { avatarGroupClassNames as i } from "../../lib/classNames.mjs";
 import { useId as a } from "../../hooks/useId.mjs";
 import { getTabbableElements as o } from "../../lib/focus.mjs";
 import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
-import { isInsideLayerTree as c } from "../../lib/layers.mjs";
-import { DismissLayerContext as l, useDismiss as u } from "../../hooks/useDismiss.mjs";
-import { Portal as d } from "../portal/Portal.mjs";
+import { usePopupPosition as c } from "../../hooks/usePopupPosition.mjs";
+import { isInsideLayerTree as l } from "../../lib/layers.mjs";
+import { DismissLayerContext as u, useDismiss as d } from "../../hooks/useDismiss.mjs";
+import { useRestoreFocus as f } from "../../hooks/useRestoreFocus.mjs";
 import "../../lib/styles.mjs";
-import { usePopupPosition as f } from "../../hooks/usePopupPosition.mjs";
-import { useRestoreFocus as p } from "../../hooks/useRestoreFocus.mjs";
+import { Portal as p } from "../portal/Portal.mjs";
 import { Avatar as m, avatarSizeClasses as h } from "./Avatar.mjs";
 import * as g from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
@@ -41,18 +41,18 @@ var C = ({ max: n, size: m = "medium", overflowLabel: b, unnamedMemberLabel: C =
 	}, [F]);
 	let I = a("avatar-group-overflow"), [L, R] = g.useState(!1);
 	L && P === 0 && R(!1);
-	let z = L && P > 0, B = typeof b == "function" ? b(P) : b ?? `${P} more`, V = g.useContext(l), H = g.useRef(null), U = g.useRef(null), [W, G] = g.useState(null), { setReference: K, setFloating: q, floatingProps: J } = f({
+	let z = L && P > 0, B = typeof b == "function" ? b(P) : b ?? `${P} more`, V = g.useContext(u), H = g.useRef(null), U = g.useRef(null), [W, G] = g.useState(null), { setReference: K, setFloating: q, floatingProps: J } = c({
 		open: z,
 		side: "bottom",
 		align: "start"
-	}), { layerId: Y } = u({
+	}), { layerId: Y } = d({
 		open: z,
 		onDismiss: () => R(!1),
 		refs: [H, U],
 		anchorRef: H,
 		focusOutside: !0
 	});
-	p({
+	f({
 		enabled: z,
 		container: W,
 		triggerRef: H,
@@ -75,7 +75,7 @@ var C = ({ max: n, size: m = "medium", overflowLabel: b, unnamedMemberLabel: C =
 		let s = t;
 		if (!e.shiftKey) {
 			let e = o(t.ownerDocument.body).filter((e) => !n.contains(e)), r = e.indexOf(t);
-			s = r === -1 ? t : e[r + 1], s && V !== null && !c(V, s) && (s = void 0);
+			s = r === -1 ? t : e[r + 1], s && V !== null && !l(V, s) && (s = void 0);
 		}
 		R(!1), s && (e.preventDefault(), s.focus());
 	}, $ = z && N.some(({ node: e }) => x(e) === void 0 && S(e));
@@ -104,7 +104,7 @@ var C = ({ max: n, size: m = "medium", overflowLabel: b, unnamedMemberLabel: C =
 				onClick: () => R((e) => !e),
 				children: ["+", P]
 			}),
-			z && /* @__PURE__ */ _(d, {
+			z && /* @__PURE__ */ _(p, {
 				layerId: Y,
 				children: /* @__PURE__ */ _("div", {
 					ref: Z,

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

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),ee=require("../../lib/aria.cjs"),te=require("../../hooks/usePresence.cjs"),ne=require("../../hooks/useDismiss.cjs"),c=require("../portal/Portal.cjs"),l=require("../../lib/styles.cjs"),u=require("../../lib/icons.cjs"),d=require("../../hooks/usePopupPosition.cjs"),f=require("../../hooks/useRestoreFocus.cjs"),p=require("../../hooks/useHoverIntent.cjs"),m=require("../overlays/Popover.shared.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _={small:{size:12,margin:`-my-1`},medium:{size:16,margin:`-my-0.5`},large:{size:20,margin:`-my-px`}},v=250,y=h.createContext(null);y.displayName=`InfoNoteClassContext`;var b=({info:e,size:b,openOnHover:x=!0,id:re,type:ie=`button`,"aria-label":ae,"aria-labelledby":S,"aria-describedby":C,className:w,disabled:T,onClick:oe,onFocus:se,onBlur:ce,onKeyDown:le,onPointerDown:ue,onMouseDown:de,onPointerEnter:fe,onPointerMove:pe,onPointerLeave:me,ref:he,...E})=>{let D=b===`small`||b===`large`?b:`medium`,O=a.useId(`info-button`),k=re||O,A=h.useContext(y),j=A?.buttonId===k?A.className:void 0,M=ae||`Information`,N=a.useId(`info-note`),P=a.useId(`info`),[F,I]=h.useState(null),L=F!==null,R=h.useRef(null),z=h.useRef(null),B=h.useRef(null),[ge,_e]=h.useState(null),[V,H]=h.useState(null),U=h.useRef(F);h.useLayoutEffect(()=>{U.current=F});let W=h.useRef(!1),G=h.useRef(!1),K=h.useRef(void 0),q=h.useRef(!1),{isMounted:J,ref:ve,presenceProps:ye}=te.usePresence(L),{setReference:be,setFloating:xe,floatingProps:Se,arrowStyles:Ce,side:we}=d.usePopupPosition({open:L,side:`top`,align:`center`,offset:8,arrowRef:B}),{layerId:Y}=ne.useDismiss({open:L,onDismiss:e=>{e!==`focus-outside`&&(W.current=!0),q.current=!1,Q(),I(null)},refs:[R,z],anchorRef:R,focusOutside:!0});f.useRestoreFocus({enabled:L,container:V,triggerRef:R,onlyIfFocusInside:!0,isHoverClose:()=>q.current});let{triggerHandlers:X,surfaceHandlers:Z,cancel:Q}=p.useHoverIntent({enabled:x&&!T,open:L,openDelay:v,closeDelay:v,trigger:ge,surface:V,onOpen:()=>{q.current=!1,I(e=>e??`hover`)},onClose:()=>{q.current=!0,I(e=>e===`hover`?null:e)},canClose:()=>U.current===`hover`&&!m.isFocusInSurfaceTree(V,Y)});h.useEffect(()=>()=>clearTimeout(K.current),[]),h.useEffect(()=>{if(!V)return;let e=e=>{let t=e.relatedTarget;!t||V.contains(t)||R.current?.contains(t)||(W.current=!1)};return V.addEventListener(`focusout`,e),()=>V.removeEventListener(`focusout`,e)},[V]);let Te=i.useEventCallback(()=>{Q(),q.current=!1;let e=F===`click`;e&&(W.current=!0),I(e?null:`click`)}),Ee=i.useEventCallback(()=>{!x||G.current||W.current&&!L||(q.current=!1,Q(),I(e=>e===`click`?e:`focus`))}),De=i.useEventCallback(e=>{let t=e.currentTarget,n=e.relatedTarget;n&&V?.contains(n)||(n||t.ownerDocument.activeElement!==t)&&(W.current=!1)}),$=i.useEventCallback(()=>{G.current=!0,clearTimeout(K.current),K.current=setTimeout(()=>{K.current=void 0,G.current=!1},0)}),Oe=e=>{if(e.key!==`Tab`||e.shiftKey||!L||!V)return;let t=o.getFirstTabbable(V);t&&(e.preventDefault(),t.focus())},ke=m.usePopoverTabOrder({enabled:L,surface:V,anchorRef:R,getPreviousStop:()=>R.current}),Ae=s.useMergedRefs(he,R,_e,be),je=s.useMergedRefs(z,H,xe,ve);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`button`,{type:ie,id:k,"data-size":D,...E,ref:Ae,disabled:T,"aria-label":M,"aria-labelledby":S,"aria-describedby":ee.joinIds(C,P),"aria-expanded":L,"aria-controls":L?N:void 0,className:t.cn(r.infoButtonClassNames.root,`inline-flex size-6 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground`,_[D].margin,`not-disabled:not-aria-disabled:hover:text-foreground`,l.focusRing,w),onClick:n.composeEventHandlers(oe,Te),onFocus:n.composeEventHandlers(se,Ee),onKeyDown:n.composeEventHandlers(le,Oe),onPointerEnter:n.composeEventHandlers(fe,X.onPointerEnter),onPointerMove:n.composeEventHandlers(pe,X.onPointerMove),onPointerLeave:n.composeEventHandlers(me,X.onPointerLeave),onBlur:n.composeEventHandlers(ce,De,{checkDefaultPrevented:!1}),onPointerDown:n.composeEventHandlers(ue,$,{checkDefaultPrevented:!1}),onMouseDown:n.composeEventHandlers(de,$,{checkDefaultPrevented:!1}),children:(0,g.jsx)(u.InfoIcon,{size:_[D].size})}),(0,g.jsx)(`span`,{id:J?void 0:P,hidden:!0,children:J?null:e}),J&&(0,g.jsx)(c.Portal,{layerId:Y,children:(0,g.jsxs)(`div`,{ref:je,id:N,role:`note`,"aria-labelledby":S||k,"data-wave-infolabel-surface":``,"data-state":L?`open`:`closed`,...ye,...Se,onKeyDown:ke,onPointerEnter:Z.onPointerEnter,onPointerLeave:Z.onPointerLeave,className:t.cn(r.infoButtonClassNames.info,j,`w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16`),children:[(0,g.jsx)(m.PopoverBeak,{ref:B,side:we,style:Ce,"data-wave-popover-arrow":``,className:r.infoButtonClassNames.beak}),(0,g.jsx)(`div`,{id:P,children:e})]})})]})};b.displayName=`InfoButton`,exports.InfoButton=b,exports.InfoNoteClassContext=y;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),ee=require("../../lib/aria.cjs"),te=require("../../hooks/usePresence.cjs"),ne=require("../../hooks/usePopupPosition.cjs"),c=require("../../hooks/useDismiss.cjs"),l=require("../../hooks/useRestoreFocus.cjs"),u=require("../../lib/styles.cjs"),d=require("../portal/Portal.cjs"),f=require("../../lib/icons.cjs"),p=require("../../hooks/useHoverIntent.cjs"),m=require("../overlays/Popover.shared.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _={small:{size:12,margin:`-my-1`},medium:{size:16,margin:`-my-0.5`},large:{size:20,margin:`-my-px`}},v=250,y=h.createContext(null);y.displayName=`InfoNoteClassContext`;var b=({info:e,size:b,openOnHover:x=!0,id:re,type:ie=`button`,"aria-label":ae,"aria-labelledby":S,"aria-describedby":C,className:w,disabled:T,onClick:oe,onFocus:se,onBlur:ce,onKeyDown:le,onPointerDown:ue,onMouseDown:de,onPointerEnter:fe,onPointerMove:pe,onPointerLeave:me,ref:he,...E})=>{let D=b===`small`||b===`large`?b:`medium`,O=a.useId(`info-button`),k=re||O,A=h.useContext(y),j=A?.buttonId===k?A.className:void 0,M=ae||`Information`,N=a.useId(`info-note`),P=a.useId(`info`),[F,I]=h.useState(null),L=F!==null,R=h.useRef(null),z=h.useRef(null),B=h.useRef(null),[ge,_e]=h.useState(null),[V,H]=h.useState(null),U=h.useRef(F);h.useLayoutEffect(()=>{U.current=F});let W=h.useRef(!1),G=h.useRef(!1),K=h.useRef(void 0),q=h.useRef(!1),{isMounted:J,ref:ve,presenceProps:ye}=te.usePresence(L),{setReference:be,setFloating:xe,floatingProps:Se,arrowStyles:Ce,side:we}=ne.usePopupPosition({open:L,side:`top`,align:`center`,offset:8,arrowRef:B}),{layerId:Y}=c.useDismiss({open:L,onDismiss:e=>{e!==`focus-outside`&&(W.current=!0),q.current=!1,Q(),I(null)},refs:[R,z],anchorRef:R,focusOutside:!0});l.useRestoreFocus({enabled:L,container:V,triggerRef:R,onlyIfFocusInside:!0,isHoverClose:()=>q.current});let{triggerHandlers:X,surfaceHandlers:Z,cancel:Q}=p.useHoverIntent({enabled:x&&!T,open:L,openDelay:v,closeDelay:v,trigger:ge,surface:V,onOpen:()=>{q.current=!1,I(e=>e??`hover`)},onClose:()=>{q.current=!0,I(e=>e===`hover`?null:e)},canClose:()=>U.current===`hover`&&!m.isFocusInSurfaceTree(V,Y)});h.useEffect(()=>()=>clearTimeout(K.current),[]),h.useEffect(()=>{if(!V)return;let e=e=>{let t=e.relatedTarget;!t||V.contains(t)||R.current?.contains(t)||(W.current=!1)};return V.addEventListener(`focusout`,e),()=>V.removeEventListener(`focusout`,e)},[V]);let Te=i.useEventCallback(()=>{Q(),q.current=!1;let e=F===`click`;e&&(W.current=!0),I(e?null:`click`)}),Ee=i.useEventCallback(()=>{!x||G.current||W.current&&!L||(q.current=!1,Q(),I(e=>e===`click`?e:`focus`))}),De=i.useEventCallback(e=>{let t=e.currentTarget,n=e.relatedTarget;n&&V?.contains(n)||(n||t.ownerDocument.activeElement!==t)&&(W.current=!1)}),$=i.useEventCallback(()=>{G.current=!0,clearTimeout(K.current),K.current=setTimeout(()=>{K.current=void 0,G.current=!1},0)}),Oe=e=>{if(e.key!==`Tab`||e.shiftKey||!L||!V)return;let t=o.getFirstTabbable(V);t&&(e.preventDefault(),t.focus())},ke=m.usePopoverTabOrder({enabled:L,surface:V,anchorRef:R,getPreviousStop:()=>R.current}),Ae=s.useMergedRefs(he,R,_e,be),je=s.useMergedRefs(z,H,xe,ve);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`button`,{type:ie,id:k,"data-size":D,...E,ref:Ae,disabled:T,"aria-label":M,"aria-labelledby":S,"aria-describedby":ee.joinIds(C,P),"aria-expanded":L,"aria-controls":L?N:void 0,className:t.cn(r.infoButtonClassNames.root,`inline-flex size-6 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground`,_[D].margin,`not-disabled:not-aria-disabled:hover:text-foreground`,u.focusRing,w),onClick:n.composeEventHandlers(oe,Te),onFocus:n.composeEventHandlers(se,Ee),onKeyDown:n.composeEventHandlers(le,Oe),onPointerEnter:n.composeEventHandlers(fe,X.onPointerEnter),onPointerMove:n.composeEventHandlers(pe,X.onPointerMove),onPointerLeave:n.composeEventHandlers(me,X.onPointerLeave),onBlur:n.composeEventHandlers(ce,De,{checkDefaultPrevented:!1}),onPointerDown:n.composeEventHandlers(ue,$,{checkDefaultPrevented:!1}),onMouseDown:n.composeEventHandlers(de,$,{checkDefaultPrevented:!1}),children:(0,g.jsx)(f.InfoIcon,{size:_[D].size})}),(0,g.jsx)(`span`,{id:J?void 0:P,hidden:!0,children:J?null:e}),J&&(0,g.jsx)(d.Portal,{layerId:Y,children:(0,g.jsxs)(`div`,{ref:je,id:N,role:`note`,"aria-labelledby":S||k,"data-wave-infolabel-surface":``,"data-state":L?`open`:`closed`,...ye,...Se,onKeyDown:ke,onPointerEnter:Z.onPointerEnter,onPointerLeave:Z.onPointerLeave,className:t.cn(r.infoButtonClassNames.info,j,`w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16`),children:[(0,g.jsx)(m.PopoverBeak,{ref:B,side:we,style:Ce,"data-wave-popover-arrow":``,className:r.infoButtonClassNames.beak}),(0,g.jsx)(`div`,{id:P,children:e})]})})]})};b.displayName=`InfoButton`,exports.InfoButton=b,exports.InfoNoteClassContext=y;
 //# sourceMappingURL=InfoButton.cjs.map