@pexip/components 20.1.0 → 20.2.0

package/CHANGELOG.md

@@ -1,5 +1,183 @@
 # Changelog
 
+## 20.2.0
+
+### Minor Changes
+
+- bb40023: Add optional `hasDivider` prop to `ActionsRow` component. Defaults to
+  `true` to preserve existing behavior. Set to `false` to hide the divider.
+- 54883ee: Add `IconSupportAgent` and `IconTranslation`.
+- ca742b0: Fix shrinking icon in `ListLink`. Support `fontVariant` in
+  `PlainMenuEntry` in `Menu`.
+- 35a460a: Add `descriptionUrlLinks` prop to `ConfirmationModal` to control
+  whether URLs in the description are rendered as clickable links
+- db2c663: Add `presentationElementClassName` prop to `Modal`.
+- cbe8f20: Export `MultiselectCore` so apps can reuse the shared select trigger
+  with a custom menu.
+- 593d327: Add nested submenu support to `AriaMenu`, including:
+
+  - Item and custom-content submenus
+  - Configurable back navigation
+  - Accessible labelling and keyboard navigation
+  - Focus restoration and scrollable overflow
+  - Optional submenu indicators and trailing icons
+
+  Also expose scrollbar styling on `Panel` and keep portalled tooltips
+  interactive inside React Aria overlays.
+
+- 031693b: Export `buttonVariantsValues`.
+- 81f985c: Add `titleWordBreak` prop to `ConfirmationModal`
+- 27917fb: Add `ToggleSwitchDisplay` presentational component for rendering
+  toggle state without interactive elements. Refactor `ToggleSwitch` to compose
+  `ToggleSwitchDisplay` internally.
+- ee5a093: Hand tooltip positioning over to react-aria's `useOverlayPosition`.
+
+  - `Tooltip`, `CustomTooltip` and `NotificationTooltip` are now positioned,
+    flipped and kept inside the viewport by react-aria instead of hard-coded CSS
+    offsets. This fixes tooltips escaping the viewport, e.g. at 400% browser
+    zoom.
+  - The arrow is placed with react-aria's `arrowProps` and oriented with the
+    resolved `data-placement`, so it stays attached to and pointing at the
+    trigger.
+  - The CSS placement classes on the tooltip content were removed in favour of
+    `data-placement`.
+  - The in-meeting control tooltips now hide with the rest of the UI when it
+    auto-hides, which they no longer inherited once portalled.
+  - **Breaking:** the `usePortal` prop was removed from `NotificationTooltip`;
+    the tooltip is always rendered in a portal.
+
+- e4a320d: Add renderText prop to PreferenceInput to allow replacing the value's
+  Text element
+
+### Patch Changes
+
+- 8ef9f04: `AriaMenu` items accept an `isChecked` prop, which renders the item
+  as a `menuitemcheckbox` and reports its state. Use it for items that toggle
+  something, so the state is announced on the focusable item rather than on a
+  presentational control inside it.
+- b1f3f9e: Improve accessible danger styling for shared menu and select
+  components. AriaMenu now supports a danger state for menu items, and Select
+  updates its danger tokens to use higher-contrast colors.
+- 3e652a1: Update Captions header layout to show speakers on the left with
+  ellipsis truncation and timestamp on the right. Add `timestamp` prop for
+  `Captions` component.
+- 8ef9f04: `CondensedTabs` now exposes its selected state to assistive
+  technology. Tabs carry `aria-selected`, the tablist is a single tab stop with
+  a roving `tabindex`, and arrow/Home/End keys move between tabs.
+- 380b19c: Draggable: added support for [data-drag-handle] and [data-no-drag]
+  regions — pointer-down inside a no-drag region is ignored unless it originates
+  from a drag handle, with matching grab/grabbing cursor styling.
+
+  AriaMenu: menu items now support an optional description rendered below the
+  label; preventFocusOnPress is stripped from the DOM button props.
+
+  Modal: added withAlternativeMaskColor prop and a new
+  alternative-modal-mask-color token.
+
+  Sheet: added withMask, withShadow, innerFullHeight, and custom
+  heightPortrait/heightLandscape (dvh) props with orientation-based media
+  queries.
+
+  Added a new md (36px) avatar/circle size (Avatar, RoundIndicator, sizes,
+  design tokens) and an $alpha-70 token.
+
+  Added and exported a new useBoundingRect hook (observes an element's bounding
+  rect via ResizeObserver, polls ref.current, with optional
+  window-resize/orientation updates); also exported the KEYBOARD_EVENT_KEY
+  constant.
+
+  Scrollbars: removed the redundant children prop from its type.
+
+- 1c01e62: Add `language` icon
+- 8f2380a: Default button type "button" for `ListBoxLink` to prevent it being a
+  submit type.
+- 3dba14c: Fix horizontal scroll on multiselect dropdown
+- 542adab: Fix crash in `AriaMenu` when items are hidden via branding
+  `hiddenFunctionality`. Items whose `data-testid` is overridden to a Fragment
+  are now filtered out before entering the react-aria collection, preventing a
+  null ref focus crash on keyboard navigation.
+- 33cba9e: Fix copyStyles test to use a lightweight DOM mock that avoids
+  triggering happy-dom resource loading.
+- f378928: Stop `aria-label` from overriding visible text in
+  `MultistepIndicator`:
+
+  - Steps no longer carry a 0-based `step N` label that hides the visible step
+    name. A label is only set when the step name is not rendered, and it uses
+    the same 1-based number as the visible step.
+  - The wrapping list is no longer named after the current step; an `aria-label`
+    can be supplied by the consumer instead.
+
+- 571f17c: Fix CSP style-src-elem violation in PopOutWindow when rendering into
+  an about:blank window by inlining stylesheet rules instead of using link
+  elements.
+- d066ed1: Restore borders and selection states in forced colors (high contrast)
+  mode for `Box` (and so `Panel`/`Modal`), `Button`, `Tabs`, `CondensedTabs`,
+  `ToggleSwitch`, `Pill` (and so `Toast`/`NotificationToast`) and `InfoCard`
+- a84b03f: Adds top and bottom margin to `Divider` inside `InnerAriaMenuItem`.
+- 265c898: Migrate test runner from Jest to Vitest.
+- 55018dc: Fix `Modal` becoming non-interactive when opened over a react-aria
+  modal overlay (e.g. the mobile participants panel). The modal portal is now
+  flagged as a react-aria top layer so it is no longer marked `inert`, which
+  previously made its buttons unresponsive and, on touch, caused taps to fall
+  through and close the modal without running the action.
+- 3dba14c: Fix clicking an option label in `Multiselect` and
+  `ConfirmableMultiselect` not toggling the checkbox. The label was passed to
+  `Checkbox` as an inline component, which made React remount it on every render
+  and prevented the browser from firing a `click` event on it.
+
+  `DropContent` now keeps `onContentVisibilityChange` in a ref, so passing an
+  inline callback no longer re-runs the effect on every render.
+
+- 8b420de: allow for containerRef on Input, setting a ref on the container for
+  the input element
+- 5650609: Remove the unused `@types/prettier` dev dependency. It shadowed the
+  optional `@types/prettier` peer of `storybook`, which made Yarn resolve a
+  second virtual instance of `storybook` for this package and duplicated
+  `storybook/theming` in Storybook production builds.
+- e0979b2: Fixed `Draggable` cancelling the first drag. The drag effect tracked
+  the element through `ref.current`, which is `null` on the initial render and
+  only populated on the next render, causing the effect to tear down and re-arm
+  mid-drag. The element is now held in state via a merged callback ref, so the
+  first drag completes reliably.
+- 1d41a9d: - CondensedTabs: updated active tab contrast to meet WCAG non-text
+  contrast requirements
+  - AriaMenu: active/highlighted item now uses accent background with white text
+    for contrast; disabled items are excluded from keyboard focus navigation;
+    focus indicator uses configurable box-shadow mixin with suppress-on-hover to
+    avoid conflicts with hover state
+  - Button: translucent button active state uses accent surface background and
+    white text
+  - Input: focus outline added via the configurable focus mixin; light and dark
+    focused stories added
+  - ToggleSwitch: focus styling migrated to the configurable box-shadow mixin
+    with reduced shadow widths; light/dark checked/unchecked focus stories added
+  - Select: focus styling consolidated into the configurable box-shadow mixin,
+    removing hardcoded box-shadow overrides
+  - Focus mixin (\_focus.scss): refactored to accept `$border-width`,
+    `$shadow-width-inset`, `$shadow-width`, `suppress-on-hover`, and
+    `color-scheme` parameters for per-component customization
+- b3eedbb: Migrate stories to Storybook 10: import `action` from
+  `storybook/actions`, testing helpers from `storybook/test` and doc blocks from
+  `@storybook/addon-docs/blocks`, replace the per-story `backgrounds` parameter
+  with the `backgrounds` global, and drop the removed
+  `@storybook/addon-actions`, `@storybook/blocks` and `@storybook/test` dev
+  dependencies.
+- 8f82582: Change colors of the `MultiStepIndicator` steps to be white
+- 62e149e: Checkbox now correctly applies visible focus styling by importing
+  Checkbox token definitions into the module stylesheet.
+
+  Added a dedicated test id on the Checkbox checkmark container span to make
+  focus-state assertions more stable in end-to-end tests.
+
+  New Checkbox Storybook stories for focus verification in both light and dark
+
+- Updated dependencies [5a17991]
+- Updated dependencies [380b19c]
+- Updated dependencies [265c898]
+  - @pexip/utils@17.4.1
+  - @pexip/hooks@21.0.9
+  - @pexip/signal@16.9.6
+
 ## 20.1.0
 
 ### Minor Changes

package/api-docs/README.mdx

@@ -80,6 +80,8 @@ import '@pexip/components/dist/index.css';
 | [StatusItem](type-aliases/StatusItem.mdx) | - |
 | [ActivityCardAction](type-aliases/ActivityCardAction.mdx) | - |
 | [AriaMenuProps](type-aliases/AriaMenuProps.mdx) | - |
+| [AriaSubMenuContentHelpers](type-aliases/AriaSubMenuContentHelpers.mdx) | Helpers passed to a submenu's `content` render function, allowing the content to close the whole menu or navigate back to the previous level. |
+| [AriaSubMenu](type-aliases/AriaSubMenu.mdx) | A submenu that opens in place inside an [AriaMenu](variables/AriaMenu.mdx) when its parent item is clicked. A submenu can either render a nested list of [AriaMenuItem](type-aliases/AriaMenuItem.mdx) (which can themselves open further submenus) or arbitrary React content. When a submenu is open, a back button is rendered at the top of the menu to return to the previous level. |
 | [AriaMenuItem](type-aliases/AriaMenuItem.mdx) | The structure of a menu item that can be used to create a dropdown menu. |
 | [BreadcrumbItem](type-aliases/BreadcrumbItem.mdx) | - |
 | [DropContentPosition](type-aliases/DropContentPosition.mdx) | - |
@@ -89,6 +91,7 @@ import '@pexip/components/dist/index.css';
 | [MenuAction](type-aliases/MenuAction.mdx) | - |
 | [MenuContent](type-aliases/MenuContent.mdx) | - |
 | [ModalProps](type-aliases/ModalProps.mdx) | - |
+| [MultiselectCoreProps](type-aliases/MultiselectCoreProps.mdx) | - |
 | [MultistepIndicatorProps](type-aliases/MultistepIndicatorProps.mdx) | - |
 | [NotificationToastMessage](type-aliases/NotificationToastMessage.mdx) | - |
 | [NotificationToastSignal](type-aliases/NotificationToastSignal.mdx) | - |
@@ -152,7 +155,7 @@ import '@pexip/components/dist/index.css';
 | [CoreHeader](variables/CoreHeader.mdx) | - |
 | [Divider](variables/Divider.mdx) | - |
 | [DragAndDrop](variables/DragAndDrop.mdx) | - |
-| [Draggable](variables/Draggable.mdx) | - |
+| [Draggable](variables/Draggable.mdx) | A wrapper that makes its children draggable via pointer (and, when `isMoveableWithArrowKeys` is set, the keyboard). |
 | [FileUpload](variables/FileUpload.mdx) | - |
 | [Heading](variables/Heading.mdx) | - |
 | [Icon](variables/Icon.mdx) | - |
@@ -182,6 +185,7 @@ import '@pexip/components/dist/index.css';
 | [TextHeading](variables/TextHeading.mdx) | - |
 | [TextLink](variables/TextLink.mdx) | - |
 | [ToggleSwitch](variables/ToggleSwitch.mdx) | - |
+| [ToggleSwitchDisplay](variables/ToggleSwitchDisplay.mdx) | Presentational version of ToggleSwitch that renders only the visual toggle indicator and label text — it does not render an `<input>` or manage any interaction/state itself. |
 | [CustomTooltip](variables/CustomTooltip.mdx) | - |
 | [NotificationTooltip](variables/NotificationTooltip.mdx) | - |
 | [Tooltip](variables/Tooltip.mdx) | Tooltips need to be accessible to keyboard and screen reader users, so we ensure that they are only placed on focusable and hoverable elements. For example, plain text and disabled buttons aren't focusable, meaning keyboard and screen reader users would be unable to access the information in that tooltip. |
@@ -202,7 +206,7 @@ import '@pexip/components/dist/index.css';
 | [Accordion](variables/Accordion.mdx) | - |
 | [ActivityCard](variables/ActivityCard.mdx) | - |
 | [ariaMenuOpenStateSignal](variables/ariaMenuOpenStateSignal.mdx) | - |
-| [AriaMenu](variables/AriaMenu.mdx) | AriaMenu component represents a dropdown menu. |
+| [AriaMenu](variables/AriaMenu.mdx) | AriaMenu component represents a dropdown menu. Menu items can open submenus in place, rendering either a nested list of items or arbitrary React content, with a back button to return to the previous level. |
 | [AspectRatio](variables/AspectRatio.mdx) | A wrapper that makes its children element bound to an aspect ratio. Default ration is 16:9, `{width: 16, height: 9}` |
 | [ColorPickerPreviewButton](variables/ColorPickerPreviewButton.mdx) | - |
 | [ImagePreviewButton](variables/ImagePreviewButton.mdx) | - |
@@ -236,6 +240,7 @@ import '@pexip/components/dist/index.css';
 | [HotKey](variables/HotKey.mdx) | - |
 | [ConfirmableMultiselect](variables/ConfirmableMultiselect.mdx) | - |
 | [Multiselect](variables/Multiselect.mdx) | - |
+| [MultiselectCore](variables/MultiselectCore.mdx) | - |
 | [MultistepIndicator](variables/MultistepIndicator.mdx) | - |
 | [NotificationToast](variables/NotificationToast.mdx) | The NotificationToast component works like a normal toast, except it displays data received via a signal, and it stores the messages as an array, displaying one at a time. |
 | [notificationToastSignal](variables/notificationToastSignal.mdx) | - |
@@ -277,11 +282,13 @@ import '@pexip/components/dist/index.css';
 | [UserMenuButton](variables/UserMenuButton.mdx) | - |
 | [UserMenuDropContent](variables/UserMenuDropContent.mdx) | - |
 | [VideoWrapper](variables/VideoWrapper.mdx) | - |
+| [KEYBOARD\_EVENT\_KEY](variables/KEYBOARD_EVENT_KEY.mdx) | - |
 | [themeValues](variables/themeValues.mdx) | - |
 | [ThemeContext](variables/ThemeContext.mdx) | - |
 | [ThemeConsumer](variables/ThemeConsumer.mdx) | - |
 | [ThemeProvider](variables/ThemeProvider.mdx) | - |
 | [TooltipPositionValue](variables/TooltipPositionValue.mdx) | - |
+| [buttonVariantsValues](variables/buttonVariantsValues.mdx) | - |
 
 ## Functions
 
@@ -318,6 +325,7 @@ import '@pexip/components/dist/index.css';
 | [useXlDown](functions/useXlDown.mdx) | - |
 | [useXlUp](functions/useXlUp.mdx) | - |
 | [useXs](functions/useXs.mdx) | - |
+| [useBoundingRect](functions/useBoundingRect.mdx) | Observes a HTMLElement and returns its bounding rect. Updates when the element's size changes. |
 | [useBreakpointChange](functions/useBreakpointChange.mdx) | - |
 | [useFocusFrom](functions/useFocusFrom.mdx) | This hook gives the ability to set the focus on an element which is then blurred right away, thereby effectively resetting the focus order. The next focusable element that comes after this element will be focused on the next tab. |
 | [useFocusFromOpened](functions/useFocusFromOpened.mdx) | Use this hook to set the focus point on an element when something becomes opened, e.g. set focus on a panel container or menu container when it becomes visible so that the next time the user hits on the tab key the element that becomes focused on is potentially a tabbable element inside the container element. |

package/api-docs/enumerations/TestId.mdx

@@ -7,6 +7,7 @@
 | <a id="buttonthreecolumnselector"></a> `ButtonThreeColumnSelector` | `"button-three-column-selector"` |
 | <a id="buttoncollapsablecontainertoggle"></a> `ButtonCollapsableContainerToggle` | `"button-collapsable-container-toggle"` |
 | <a id="checkboxcheck"></a> `CheckboxCheck` | `"checkbox-check"` |
+| <a id="checkboxcheckcontainer"></a> `CheckboxCheckContainer` | `"checkbox-check-container"` |
 | <a id="confirmablemultiselectconfirm"></a> `ConfirmableMultiselectConfirm` | `"confirmable-multiselect-confirm"` |
 | <a id="headercore"></a> `HeaderCore` | `"header-core"` |
 | <a id="headercoreenhancers"></a> `HeaderCoreEnhancers` | `"header-core-enhancers"` |

package/api-docs/functions/useBoundingRect.mdx

@@ -0,0 +1,42 @@
+```ts
+function useBoundingRect(
+   element, 
+   updateOnWindowResize, 
+   windowResizeThrottle): DOMRect | undefined;
+```
+
+Observes a HTMLElement and returns its bounding rect.
+Updates when the element's size changes.
+
+If a ref to a HTMLElement is passed and ref.current is null it polls the ref to detect when
+the HTMLElement value gets assigned to ref.current, this is useful in case the Component
+using this hook does not rerender when ref.current changes.
+
+## Parameters
+
+| Parameter | Type | Default value | Description |
+| ------ | ------ | ------ | ------ |
+| `element` | `HTMLElement \| RefObject<HTMLElement` | null\>` \\| `null` \| `undefined` | The HTMLElement, null, or a ref to an HTMLElement to observe |
+| `updateOnWindowResize` | `boolean` | `false` | Whether to update the rect on window resize (default: false) |
+| `windowResizeThrottle` | `number` | `0` | Throttle interval in ms for window resize updates (default: 0) |
+
+## Returns
+
+```ts
+DOMRect | undefined
+```
+
+The DOMRect of the element, or undefined if element is not available
+
+## Example
+
+```ts
+const ref = useRef<HTMLDivElement>(null);
+const rect = useBoundingRect(ref);
+
+const [element, setElement] = useState<HTMLDivElement | null>(null);
+const rect2 = useBoundingRect(element);
+
+// Update on window resize with 150ms throttle
+const rect3 = useBoundingRect(ref, true, 150);
+```

package/api-docs/interfaces/IconCollection.mdx

@@ -80,6 +80,7 @@
 | <a id="iconimport"></a> `IconImport` | [`IconSource`](IconSource.mdx) |
 | <a id="iconinforound"></a> `IconInfoRound` | [`IconSource`](IconSource.mdx) |
 | <a id="iconkey"></a> `IconKey` | [`IconSource`](IconSource.mdx) |
+| <a id="iconlanguage"></a> `IconLanguage` | [`IconSource`](IconSource.mdx) |
 | <a id="iconleave"></a> `IconLeave` | [`IconSource`](IconSource.mdx) |
 | <a id="iconlink"></a> `IconLink` | [`IconSource`](IconSource.mdx) |
 | <a id="iconlivecaption"></a> `IconLiveCaption` | [`IconSource`](IconSource.mdx) |
@@ -135,11 +136,13 @@
 | <a id="iconstar"></a> `IconStar` | [`IconSource`](IconSource.mdx) |
 | <a id="iconstopround"></a> `IconStopRound` | [`IconSource`](IconSource.mdx) |
 | <a id="iconsupport"></a> `IconSupport` | [`IconSource`](IconSource.mdx) |
+| <a id="iconsupportagent"></a> `IconSupportAgent` | [`IconSource`](IconSource.mdx) |
 | <a id="icontestscripticon"></a> `IconTestScriptIcon` | [`IconSource`](IconSource.mdx) |
 | <a id="iconthumbsdown"></a> `IconThumbsDown` | [`IconSource`](IconSource.mdx) |
 | <a id="iconthumbsup"></a> `IconThumbsUp` | [`IconSource`](IconSource.mdx) |
 | <a id="icontimer"></a> `IconTimer` | [`IconSource`](IconSource.mdx) |
 | <a id="icontranscript"></a> `IconTranscript` | [`IconSource`](IconSource.mdx) |
+| <a id="icontranslation"></a> `IconTranslation` | [`IconSource`](IconSource.mdx) |
 | <a id="icontrash"></a> `IconTrash` | [`IconSource`](IconSource.mdx) |
 | <a id="iconunlock"></a> `IconUnlock` | [`IconSource`](IconSource.mdx) |
 | <a id="iconvideooff"></a> `IconVideoOff` | [`IconSource`](IconSource.mdx) |

package/api-docs/type-aliases/AriaMenuItem.mdx

@@ -10,15 +10,20 @@ The structure of a menu item that can be used to create a dropdown menu.
 | ------ | ------ | ------ |
 | `key` | `string` | The unique key for the item. |
 | `label` | `React.ReactNode` | The label of the item. |
+| `description?` | `React.ReactNode` | Optional description of the item. This will be displayed below the menu item. |
 | `testId?` | `string` | The test id for the item. |
 | `onItemClick()?` | `() => void` | If set, this function will be called when the user clicks this item. |
 | `closeMenuOnItemClick?` | `boolean` | If set to false, the menu will not close when the user clicks this item. |
+| `subMenu?` | [`AriaSubMenu`](AriaSubMenu.mdx) | If set, clicking the item runs `onItemClick` (if provided) and opens a submenu in place. The submenu can render a nested list of `AriaMenuItem` or arbitrary React content, and a back button is rendered at the top of the menu to return to the previous level. The menu is not closed when a submenu is opened. |
 | `icon?` | `React.ReactNode` | The icon to display next to the item. |
+| `iconPosition?` | `"start" \| "end"` | Where to place the `icon` relative to the label. `'start'` (the default) renders the icon before the label; `'end'` renders it after the label, pushed to the far end of the item. |
 | `alternativeHoverClassName?` | `string` | Class name that is used to override the default hover style. |
 | `alternativeHoverStyle?` | `CSSProperties` | Style that is used to override the default hover style. |
 | `className?` | `string` | The class name for the item. |
 | `style?` | `CSSProperties` | The style for the item. |
 | `isActive?` | `boolean` | Sets the `data-active` attribute to `true` and applies styling |
 | `isDisabled?` | `boolean` | If set to true, the item will be disabled. |
+| `isDanger?` | `boolean` | If set to true, the item uses the danger text color. |
+| `isChecked?` | `boolean` | Marks the item as a checkable menu item and reports the given state. |
 | `withTopDivider?` | `boolean` | If set to true, a divider will be rendered above the item. |
 | `withBottomDivider?` | `boolean` | If set to true, a divider will be rendered below the item. |

package/api-docs/type-aliases/AriaMenuProps.mdx

@@ -8,6 +8,7 @@ type AriaMenuProps = object;
 | ------ | ------ | ------ |
 | <a id="items"></a> `items` | [`AriaMenuItem`](AriaMenuItem.mdx)[] | An array of menu items. |
 | <a id="button"></a> `button` | `ReactElement` | The react element that triggers the menu. |
+| <a id="renderbutton"></a> `renderButton?` | `(triggerButton) => ReactNode` | Optionally wraps the rendered menu trigger. **Example** `renderButton={triggerButton => ( <Tooltip text="Settings">{triggerButton}</Tooltip> )}` |
 | <a id="headercontent"></a> `headerContent?` | `ReactElement` | Optional content to show above the menu items. |
 | <a id="onopenchange"></a> `onOpenChange?` | `(isOpen) => void` | Callback function called when the menu open state changes. |
 | <a id="testid"></a> `testId?` | `string` | The test id for the menu. |
@@ -16,3 +17,6 @@ type AriaMenuProps = object;
 | <a id="popoveroffset"></a> `popoverOffset?` | `number` | The offset for the popover. |
 | <a id="menuclassname"></a> `menuClassName?` | `string` | The class name for the menu. |
 | <a id="itemclassname"></a> `itemClassName?` | `string` | The class name for the menu item. |
+| <a id="backbuttonlabel"></a> `backButtonLabel?` | `string` | Default aria label for the back button rendered at the top of a submenu. |
+| <a id="ongoback"></a> `onGoBack?` | `() => void` | Callback function called when the user navigates back one level via the back button rendered at the top of a submenu. |
+| <a id="showsubmenuindicator"></a> `showSubMenuIndicator?` | `boolean` | Whether to show the chevron indicator on menu items that open a submenu. Defaults to `true`. |

package/api-docs/type-aliases/AriaSubMenu.mdx

@@ -0,0 +1,27 @@
+```ts
+type AriaSubMenu = object & 
+  | {
+  items: AriaMenuItem[];
+  content?: never;
+}
+  | {
+  content: React.ReactNode | (helpers) => React.ReactNode;
+  items?: never;
+};
+```
+
+A submenu that opens in place inside an [AriaMenu](../variables/AriaMenu.mdx) when its parent item
+is clicked. A submenu can either render a nested list of [AriaMenuItem](AriaMenuItem.mdx)
+(which can themselves open further submenus) or arbitrary React content. When
+a submenu is open, a back button is rendered at the top of the menu to return
+to the previous level.
+
+## Type Declaration
+
+| Name | Type | Description |
+| ------ | ------ | ------ |
+| `title?` | `React.ReactNode` | Optional title shown next to the back button at the top of the submenu. |
+| `titleTestId?` | `string` | The test id applied to the submenu title. |
+| `testId?` | `string` | The test id applied to the submenu container. |
+| `backButtonLabel?` | `string` | Aria label for the back button rendered at the top of the submenu. Overrides the menu-level `backButtonLabel`. |
+| `backButtonTestId?` | `string` | The test id for the back button rendered at the top of the submenu. |

package/api-docs/type-aliases/AriaSubMenuContentHelpers.mdx

@@ -0,0 +1,13 @@
+```ts
+type AriaSubMenuContentHelpers = object;
+```
+
+Helpers passed to a submenu's `content` render function, allowing the content
+to close the whole menu or navigate back to the previous level.
+
+## Properties
+
+| Property | Type | Description |
+| ------ | ------ | ------ |
+| <a id="close"></a> `close` | `() => void` | Closes the whole menu. |
+| <a id="goback"></a> `goBack` | `() => void` | Navigates back to the previous level. |

package/api-docs/type-aliases/MenuItem.mdx

@@ -15,8 +15,9 @@ type MenuItem<T> = object;
 | <a id="clickaction"></a> `clickAction?` | `React.MouseEventHandler<HTMLElement>` |
 | <a id="colorscheme"></a> `colorScheme?` | [`ColorScheme`](ColorScheme.mdx) |
 | <a id="icon"></a> `icon?` | [`IconSource`](../interfaces/IconSource.mdx) |
-| <a id="iconcolor"></a> `iconColor?` | `string` |
 | <a id="iconalignedstart"></a> `iconAlignedStart?` | `boolean` |
+| <a id="iconcolor"></a> `iconColor?` | `string` |
+| <a id="iconsize"></a> `iconSize?` | `React.ComponentProps`\<*typeof* [`Icon`](../variables/Icon.mdx)\>\[`"size"`\] |
 | <a id="isariachecked"></a> `isAriaChecked?` | `boolean` |
 | <a id="isariaselected"></a> `isAriaSelected?` | `boolean` |
 | <a id="isdisabled"></a> `isDisabled?` | `boolean` |

package/api-docs/type-aliases/MultiselectCoreProps.mdx

@@ -0,0 +1,3 @@
+```ts
+type MultiselectCoreProps = React.ComponentProps<typeof MultiselectCore>;
+```

package/api-docs/variables/AriaMenu.mdx

@@ -2,4 +2,6 @@
 const AriaMenu: React.FC<AriaMenuProps>;
 ```
 
-AriaMenu component represents a dropdown menu.
+AriaMenu component represents a dropdown menu. Menu items can open submenus in
+place, rendering either a nested list of items or arbitrary React content,
+with a back button to return to the previous level.

package/api-docs/variables/Draggable.mdx

@@ -1,3 +1,54 @@
 ```ts
 const Draggable: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & object, "ref"> & RefAttributes<HTMLDivElement>>;
 ```
+
+A wrapper that makes its children draggable via pointer (and, when
+`isMoveableWithArrowKeys` is set, the keyboard).
+
+By default the **entire** surface of the Draggable starts a drag on
+pointer-down. The two opt-in `data-*` attributes below let you refine which
+parts of the content are draggable. Neither is required — omit them when the
+whole element should be draggable.
+
+```ts
+- data-no-drag: Marks a descendant region that should *not* initiate a
+```
+  drag. Add it to interactive controls nested inside the Draggable (buttons,
+  links, inputs, sliders, menus, etc.) so they stay usable without
+  accidentally moving the element.
+```ts
+- data-drag-handle: Marks a descendant that *can* initiate a drag even
+```
+  when it sits inside a `data-no-drag` region. Use it to expose a dedicated
+  grab handle within an otherwise non-draggable area.
+
+Both attributes are resolved with `Element.closest`, so they apply to the
+tagged element and everything nested within it.
+
+## Examples
+
+```ts
+// Whole card is draggable (no attributes needed):
+<Draggable>
+    <Card />
+</Draggable>
+```
+
+```ts
+// Card is draggable, but the close button stays clickable:
+<Draggable>
+    <Card>
+        <button data-no-drag onClick={onClose}>Close</button>
+    </Card>
+</Draggable>
+```
+
+```ts
+// Only the header acts as a drag handle inside an otherwise no-drag body:
+<Draggable>
+    <div data-no-drag>
+        <div data-drag-handle>Drag me</div>
+        <Body />
+    </div>
+</Draggable>
+```

package/api-docs/variables/KEYBOARD_EVENT_KEY.mdx

@@ -0,0 +1,16 @@
+```ts
+const KEYBOARD_EVENT_KEY: object;
+```
+
+## Type Declaration
+
+| Name | Type | Default value |
+| ------ | ------ | ------ |
+| <a id="enter"></a> `enter` | `"Enter"` | `'Enter'` |
+| <a id="escape"></a> `escape` | `"Escape"` | `'Escape'` |
+| <a id="arrowup"></a> `arrowUp` | `"ArrowUp"` | `'ArrowUp'` |
+| <a id="arrowright"></a> `arrowRight` | `"ArrowRight"` | `'ArrowRight'` |
+| <a id="arrowdown"></a> `arrowDown` | `"ArrowDown"` | `'ArrowDown'` |
+| <a id="arrowleft"></a> `arrowLeft` | `"ArrowLeft"` | `'ArrowLeft'` |
+| <a id="home"></a> `home` | `"Home"` | `'Home'` |
+| <a id="end"></a> `end` | `"End"` | `'End'` |

package/api-docs/variables/MultiselectCore.mdx

@@ -0,0 +1,27 @@
+```ts
+const MultiselectCore: React.FC<{
+  buttonType?: React.ComponentProps<typeof DropContent>["type"];
+  className?: string;
+  colorScheme?: ColorScheme;
+  dropContentPosition?: DropContentPosition;
+  errorText?: string;
+  hasError?: boolean;
+  iconType?: IconSource;
+  isDisabled?: boolean;
+  isFullWidth?: boolean;
+  isOpen?: boolean;
+  isTruncated?: boolean;
+  label: string;
+  labelModifier?: LabelModifier;
+  menuComponent: DropContentType;
+  multipleSelectionText?: string;
+  noSelectionText?: string;
+  onContentVisibilityChange?: (isVisible) => void;
+  onOutsideClose?: () => void;
+  options: MultiselectOption[];
+  sizeModifier?: SizeModifier;
+  testId?: string;
+  value: string[] | undefined;
+  wrapContent?: boolean;
+}>;
+```

package/api-docs/variables/MultistepIndicator.mdx

@@ -1,5 +1,6 @@
 ```ts
 const MultistepIndicator: React.FC<{
+  aria-label?: string;
   className?: string;
   colorScheme?: ColorScheme;
   currentStepIndex?: number;

package/api-docs/variables/PreferenceInput.mdx

@@ -19,6 +19,7 @@ const PreferenceInput: React.FC<{
   placeholder?: string;
   shouldShowDenyAlert?: boolean;
   type?: "text" | "password" | "number" | "email" | "tel" | "url";
+  renderText?: typeof Text;
   onChange?: (e) => void;
   onConfirm?: (value?) => void;
   onEditingStateChange?: (isEditing) => void;

package/api-docs/variables/Sheet.mdx

@@ -1,3 +1,11 @@
 ```ts
-const Sheet: React.FC<React.ComponentProps<"div"> & object>;
+const Sheet: React.FC<React.ComponentProps<"div"> & object & 
+  | {
+  heightPortrait: number;
+  heightLandscape: number;
+}
+  | {
+  heightPortrait?: undefined;
+  heightLandscape?: undefined;
+}>;
 ```

package/api-docs/variables/ToggleSwitchDisplay.mdx

@@ -0,0 +1,16 @@
+```ts
+const ToggleSwitchDisplay: React.FC<ToggleSwitchDisplayProps>;
+```
+
+Presentational version of ToggleSwitch that renders only the visual toggle
+indicator and label text — it does not render an `<input>` or manage any
+interaction/state itself.
+
+Use this when the parent element (e.g. an AriaMenu item) already handles
+interaction and you only need to display the toggle state.
+
+## Example
+
+```ts
+<ToggleSwitchDisplay checked={isMuted} label="Mute all guests" isSmall />
+```

package/api-docs/variables/buttonVariantsValues.mdx

@@ -0,0 +1,3 @@
+```ts
+const buttonVariantsValues: readonly ["primary", "secondary", "tertiary", "neutral", "translucent", "transparent", "transparentAlternative", "text", "danger", "dangerBordered", "success"];
+```