@minimalstuff/ui 4.3.2 → 5.0.0

package/README.md

@@ -1,74 +1,78 @@
 # @minimalstuff/ui
 
-React UI component library.
+A small, unambitious React component library, styled with UnoCSS and focused on accessibility.
 
-## Installation
+Browse every component in the [Storybook](https://minimalstuff.github.io/ui/) (latest release), or the [`next` Storybook](https://minimalstuff.github.io/ui/next/) built from `main`.
+
+## Install
 
 ```bash
 pnpm add @minimalstuff/ui react react-dom
 ```
 
-Peer dependencies: React 19.
+Requires React 19.
 
-## Usage
+## Use the components
 
 ```tsx
 import { Button } from '@minimalstuff/ui';
 import '@minimalstuff/ui/style.css';
 
 export function App() {
-	return <Button variant="primary">Click me</Button>;
+	return <Button color="primary">Click me</Button>;
+}
+```
+
+The `@minimalstuff/ui/style.css` import is required for styles and icons to render. It can load before your app's own utilities (UnoCSS or Tailwind): component sizing does not depend on load order.
+
+### Mount the providers
+
+`Modal` and `ConfirmModal` are opened with `Modal.call(...)` and `ConfirmModal.call(...)`, and render where `<ModalProvider />` is mounted. `UIProvider` overrides the default English labels (close, confirm, no results…) for every component below it; mount `ModalProvider` inside it so modals receive the labels too.
+
+```tsx
+import { ModalProvider, UIProvider } from '@minimalstuff/ui';
+
+export function Root() {
+	return (
+		<UIProvider labels={{ close: 'Fermer' }}>
+			<App />
+			<ModalProvider />
+		</UIProvider>
+	);
 }
 ```
 
-The `@minimalstuff/ui/style.css` import is required for styles and icons to render.
+### Dark mode
 
-The stylesheet can be loaded before your app's own utilities (UnoCSS or Tailwind): component sizing does not depend on load order.
+Dark styles apply when `<html>` has the `dark` class. `useThemeStore` (and the `ThemeToggle` built on it) sets that class from the `light`, `dark` or `system` preference and keeps it in `localStorage`.
 
 ### Modals and drawers lock page scroll
 
 While a `Modal` or `Drawer` is open, page scroll is locked on `<html>`. The scrollbar width this frees is compensated with right padding on `<html>`, so the page does not shift. That padding does not move `position: fixed` elements: anchor right-aligned ones with `right: var(--scrollbar-compensation, 0px)`. Paint the page background on `<html>` or `<body>` rather than only on a wrapper element, or the padding shows the root's background as a strip on the right.
 
-## Development
+## Develop
 
 ```bash
 pnpm install
-pnpm run dev        # Storybook on :6006
-pnpm run lint
-pnpm run test
-pnpm run build      # Library build → dist/
+pnpm dev
 ```
 
-## Releasing
-
-CI (lint, test, build) and npm publish run together when a GitHub Release is published.
-
-### Prerequisites
-
-Publishing uses npm [trusted publishing](https://docs.npmjs.com/trusted-publishers) (OIDC), no token needed. On npmjs.com, `@minimalstuff/ui` > **Settings > Trusted publishing** must list GitHub Actions with organization `minimalstuff`, repository `ui` and workflow `publish.yml`.
+`pnpm dev` starts Storybook on port 6006.
 
-### Procedure
+Before pushing, run what CI runs (see [`ci.yml`](.github/workflows/ci.yml)):
 
-1. **Bump version** (optional if using tag-based versioning):
-
-   ```bash
-   pnpm version 1.2.0   # or 1.2.0-alpha.0 for prerelease
-   git push && git push --tags
-   ```
+```bash
+pnpm verify
+```
 
-2. **Create a GitHub Release**
-   **Releases → Draft a new release**:
-   - Choose or create a tag (e.g. `v1.2.0`). Use the same version as in `package.json` if you bumped it; otherwise the workflow sets the package version from the tag (e.g. `v1.2.0` → `1.2.0`).
-   - Add release notes and publish.
+`pnpm test:stories` runs the stories in a real browser and needs Playwright's Chromium once: `pnpm exec playwright install chromium`.
 
-3. **Workflow**
-   The **CI & Publish** workflow runs on **release published**. It sets the package version from the tag, runs lint, test, build, then `pnpm publish --no-git-checks`. The package is published under the tag `latest` (or the tag you set for prereleases).
+Releases follow [docs/releasing.md](docs/releasing.md). Changes are listed in the [CHANGELOG](CHANGELOG.md).
 
-### Prereleases
+## Report a bug
 
-Semver prereleases (e.g. `1.0.0-0`, `1.0.0-alpha.1`) are supported. To avoid making them the default install:
+Open an issue on [GitHub Issues](https://github.com/minimalstuff/ui/issues).
 
-- Publish with a dist-tag, e.g. `pnpm publish --tag next`, or
-- Rely on consumers installing an explicit version: `pnpm add @minimalstuff/ui@1.0.0-alpha.1`.
+## License
 
-If you want CI to publish prereleases automatically (e.g. on tag `v1.0.0-alpha.1`), add a separate workflow or extend the existing one to run on prerelease tags and use `--tag next`.
+[MIT](LICENSE)

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import type { HTMLAttributeAnchorTarget } from 'react';
 import { JSX } from 'react';
 import { JSXElementConstructor } from 'react';
 import type { MouseEvent as MouseEvent_2 } from 'react';
+import { MouseEventHandler } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
@@ -40,7 +41,7 @@ export declare interface AvatarProps {
 
 export declare type AvatarSize = ControlSize;
 
-export declare const Badge: ({ children, color, variant, size, radius, className, ...props }: Readonly<BadgeProps>) => JSX.Element;
+export declare const Badge: ({ children, color, variant, size, radius, unstyled, className, ...props }: Readonly<BadgeProps>) => JSX.Element;
 
 export declare interface BadgeProps extends ComponentPropsWithRef<'span'> {
     children: ReactNode;
@@ -48,13 +49,18 @@ export declare interface BadgeProps extends ComponentPropsWithRef<'span'> {
     variant?: BadgeVariant;
     size?: BadgeSize;
     radius?: Radius;
+    /**
+     * Strips the library's styling and keeps only `inline-flex items-center`.
+     * `color`, `variant`, `size` and `radius` then have no effect.
+     */
+    unstyled?: boolean;
 }
 
 export declare type BadgeSize = ControlSize;
 
 export declare type BadgeVariant = 'solid' | 'outline' | 'subtle';
 
-export declare const BASE_INPUT_STYLES = "w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+export declare const BASE_INPUT_STYLES = "w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
 
 export declare function Button(buttonProps: Readonly<ButtonProps>): JSX.Element;
 
@@ -140,7 +146,7 @@ export declare interface CharacterCountProps {
     className?: string;
 }
 
-export declare function Checkbox({ label, indeterminate, description, error, radius, unstyled, fullWidth, variant, className, wrapperClassName, checked, defaultChecked, onChange, id, 'aria-describedby': callerDescribedBy, ref, ...props }: Readonly<CheckboxProps>): JSX.Element;
+export declare function Checkbox({ label, indeterminate, description, error, radius, unstyled, fullWidth, variant, className, wrapperClassName, checked, defaultChecked, onChange, id, 'aria-describedby': callerDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ref, ...props }: Readonly<CheckboxProps>): JSX.Element;
 
 export declare type CheckboxOption = ChoiceOption;
 
@@ -193,7 +199,7 @@ export declare interface ClientOnlyProps extends React.PropsWithChildren {
     fallback?: React.ReactNode;
 }
 
-export declare function Combobox({ options, label, 'aria-label': ariaLabel, error, placeholder, noResultsText, clearLabel, radius, unstyled, disabled, required, className, wrapperClassName, value, defaultValue, onChange, id, }: Readonly<ComboboxProps>): JSX.Element;
+export declare function Combobox({ options, label, description, 'aria-label': ariaLabel, error, placeholder, noResultsText, clearLabel, radius, unstyled, disabled, required, className, wrapperClassName, value, defaultValue, onChange, id, }: Readonly<ComboboxProps>): JSX.Element;
 
 export declare interface ComboboxOption {
     value: string;
@@ -203,6 +209,7 @@ export declare interface ComboboxOption {
 export declare interface ComboboxProps {
     options: ComboboxOption[];
     label?: string | ReactNode;
+    description?: string | ReactNode;
     'aria-label'?: string;
     error?: string;
     placeholder?: string;
@@ -253,7 +260,7 @@ export declare type ConfirmModalResponse = boolean;
  * For a menu anchored to a specific button (e.g. a kebab icon) instead of a
  * right-click, use `Menu`.
  */
-export declare function ContextMenu({ children, items, radius, className, ref, 'aria-label': ariaLabel, }: Readonly<ContextMenuProps>): JSX.Element;
+export declare function ContextMenu({ children, items, radius, unstyled, panelClassName, className, ref, 'aria-label': ariaLabel, }: Readonly<ContextMenuProps>): JSX.Element;
 
 export declare interface ContextMenuProps {
     /** The area that opens the menu on right-click. */
@@ -262,6 +269,18 @@ export declare interface ContextMenuProps {
     items: ReactNode;
     radius?: Radius;
     className?: string;
+    /**
+     * Strips the panel's visual styling (border, background, shadow, blur,
+     * padding, radius, width bounds and the open/close animation). Positioning,
+     * the backdrop and the keyboard handling stay. `radius` is ignored.
+     */
+    unstyled?: boolean;
+    /**
+     * Styles the floating panel (`role="menu"`), with or without `unstyled`.
+     * Its position comes from inline floating styles: don't set
+     * `position`, `top` or `left` on it.
+     */
+    panelClassName?: string;
     ref?: Ref<HTMLDivElement>;
     /** Names the menu for assistive tech, since there is no trigger element to label it from. */
     'aria-label'?: string;
@@ -306,6 +325,12 @@ export declare interface DrawerProps {
     radius?: Radius;
     /** Applied to the scrollable body. */
     className?: string;
+    /** Applied to the `role=dialog` element. A `transform`, `filter` or `backdrop-filter` on the open panel makes it the containing block of `position: fixed` descendants, so Menus opened inside it get clipped. Keep these off the open state. Carries `data-state="open"` or `"closed"`, so `data-[state=closed]:` variants can animate it. Put your own transitions behind `motion-reduce:` variants, since `unstyled` drops the library's reduced-motion handling along with its animations. */
+    panelClassName?: string;
+    /** Applied to the backdrop element, which carries the click-to-dismiss. */
+    backdropClassName?: string;
+    /** Strips the library's visual styling (background, shadow, radius, slide transition, backdrop tint, header and body typography and padding), keeping layout, `side`, `size`, scrolling and behaviour. `radius` is ignored. The close button keeps a 24px minimum target size. */
+    unstyled?: boolean;
     /** `false` hides the close button and blocks Escape and backdrop dismissal. */
     dismissible?: boolean;
     closeLabel?: string;
@@ -322,12 +347,27 @@ declare interface GlobalHotkeysStore {
     setGlobalHotkeysEnabled: (value: boolean) => void;
 }
 
-declare function Highlight_2({ text, ranges }: Readonly<HighlightProps>): JSX.Element;
+declare function Highlight_2({ text, ranges, radius, unstyled, markClassName, }: Readonly<HighlightProps>): JSX.Element;
 export { Highlight_2 as Highlight }
 
 export declare interface HighlightProps {
     text: string;
     ranges: readonly number[];
+    /**
+     * Corner radius of each `<mark>`. The default (`sm`) renders the same
+     * `border-radius` as the previous hard-coded `rounded`. Ignored when
+     * `unstyled` is set.
+     */
+    radius?: Radius;
+    /**
+     * Removes the library's classes from each `<mark>` (radius, background and
+     * text colours). `radius` then has no effect. Matches then rely on
+     * `markClassName` (or the browser's default `<mark>` style) to stay visible,
+     * so a consumer who resets `mark` styles must style `markClassName`.
+     */
+    unstyled?: boolean;
+    /** Applied to every `<mark>`, whether or not `unstyled` is set. */
+    markClassName?: string;
 }
 
 export declare interface HighlightSegment {
@@ -371,7 +411,7 @@ declare interface IconButtonTooltipOptions {
     	content?: ReactNode;
 }
 
-export declare function Input({ label, description, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, 'aria-describedby': callerDescribedBy, ...props }: Readonly<InputProps>): JSX.Element;
+export declare function Input({ label, description, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, 'aria-describedby': callerDescribedBy, 'aria-label': ariaLabel, ...props }: Readonly<InputProps>): JSX.Element;
 
 export declare interface InputProps extends ComponentPropsWithRef<'input'> {
     label?: string | ReactNode;
@@ -422,7 +462,7 @@ export declare type KbdSize = ControlSize;
  * (a document listener), so the fading panel is inert. See
  * `menu_with_modal.test.tsx`.
  */
-export declare function Menu({ trigger, children, side, align, radius, className, ref, }: Readonly<MenuProps>): JSX.Element;
+export declare function Menu({ trigger, children, side, align, radius, unstyled, panelClassName, className, disabled, ref, }: Readonly<MenuProps>): JSX.Element;
 
 export declare type MenuAlign = 'start' | 'center' | 'end';
 
@@ -485,6 +525,20 @@ declare type MenuItemBaseProps = {
     	danger?: boolean;
     	disabled?: boolean;
     	children: ReactNode;
+    	/**
+     	 * Rounds the row, which shows on its hover and focus background. Unset by
+     	 * default (square corners). Ignored when `unstyled`.
+     	 */
+    	radius?: Radius;
+    	/**
+     	 * Strips the row's visual styling (padding, text colour and size, hover and
+     	 * focus backgrounds, icon and trailing colours) and keeps its layout, the
+     	 * disabled behaviour. The library's focus outline is removed, so the browser's
+     	 * native focus indicator applies. Don't add `outline-none` through `className`
+     	 * without your own `focus-visible:` indicator (WCAG 2.4.7). Style the row
+     	 * through `className`.
+     	 */
+    	unstyled?: boolean;
     	className?: string;
 };
 
@@ -520,6 +574,24 @@ export declare interface MenuProps {
     align?: MenuAlign;
     radius?: Radius;
     className?: string;
+    /**
+     * Strips the panel's visual styling (border, background, shadow, blur,
+     * padding, radius, width bounds and the open/close animation). Positioning,
+     * the backdrop and the keyboard handling stay. `radius` is ignored.
+     */
+    unstyled?: boolean;
+    /**
+     * Styles the floating panel (`role="menu"`), with or without `unstyled`.
+     * Its position comes from inline floating styles: don't set
+     * `position`, `top` or `left` on it.
+     */
+    panelClassName?: string;
+    /**
+     * Keeps the menu closed (and closes it if open): the trigger's click and
+     * ArrowDown/ArrowUp no longer open it. The trigger itself is left alone, so
+     * it can stay focusable; mark it `aria-disabled` or `disabled` yourself.
+     */
+    disabled?: boolean;
     /** Attaches to the wrapper `<span>` around `trigger`, alongside `Menu`'s own internal ref. */
     ref?: Ref<HTMLSpanElement>;
 }
@@ -540,6 +612,15 @@ export declare type MenuSide = 'top' | 'bottom' | 'left' | 'right';
 
 export declare const Modal: Callable<ModalProps, void, {}>;
 
+declare type ModalAccessibleName = {
+    title: NonNullable<ReactNode>;
+    'aria-label'?: undefined;
+} | {
+    title?: undefined;
+    /** Names the dialog when there is no `title`; ignored when `title` is set since the title labels it. */
+    'aria-label': string;
+};
+
 /**
  * Declares `children` as the modal's pinned footer, wherever this is
  * rendered in the content tree — including inside a separate content
@@ -555,23 +636,26 @@ export declare interface ModalFooterProps {
 
 export declare type ModalHeight = 'auto' | 'fixed';
 
-export declare interface ModalProps {
-    title?: ReactNode;
+export declare type ModalProps = {
     children: ModalRenderProp;
     size?: ModalSize;
     /** `fixed` gives the dialog a stable height so it does not jump when content changes; the content area stops scrolling and a child with `flex-1 min-h-0 overflow-y-auto` scrolls on its own. */
     height?: ModalHeight;
     radius?: Radius;
     className?: string;
+    /** Applied to the `role=dialog` element. A `transform`, `filter` or `backdrop-filter` on the open panel makes it the containing block of `position: fixed` descendants, so Menus opened inside it get clipped. Keep these off the open state. Carries `data-state="open"` or `"closed"`, so `data-[state=closed]:` variants can animate it. Put your own transitions behind `motion-reduce:` variants, since `unstyled` drops the library's reduced-motion handling along with its animations. */
+    panelClassName?: string;
+    /** Applied to the backdrop element, which carries the click-to-dismiss. */
+    backdropClassName?: string;
+    /** Strips the library's visual styling (background, shadow, radius, transitions, backdrop tint, header and content typography and padding), keeping layout, sizing, scrolling and behaviour. `radius` is ignored. The close button keeps a 24px minimum target size. */
+    unstyled?: boolean;
     dismissible?: boolean;
     closeLabel?: string;
     /** `alertdialog` for urgent messages that need a response (describes the dialog by its content); pair with `dismissible={false}` when it must not be dismissed. */
     role?: ModalRole;
     /** Wins over the first-tabbable rule for where focus lands on open; may point at an element in the content or in a `ModalFooter`. */
     initialFocusRef?: RefObject<HTMLElement | null>;
-    /** Names the dialog when there is no `title`; ignored when `title` is set since the title labels it. */
-    'aria-label'?: string;
-}
+} & ModalAccessibleName;
 
 export declare function ModalProvider(): JSX.Element;
 
@@ -586,7 +670,7 @@ export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
  * pills opens a searchable dropdown of checkbox-style options. Selecting an
  * option never closes the dropdown, unlike the single-select `Combobox`.
  */
-export declare function MultiCombobox({ options, label, 'aria-label': ariaLabel, error, placeholder, searchPlaceholder, noResultsText, clearLabel, clearText, maxSelectedValues, isOptionDisabled, maxDisplayedValues, formatOverflowCount, formatSelectedCount, formatMaxSelectedHint, radius, unstyled, disabled, required, className, wrapperClassName, values, defaultValues, onChange, onDropdownClose, id, }: Readonly<MultiComboboxProps>): ReactElement;
+export declare function MultiCombobox({ options, label, description, 'aria-label': ariaLabel, error, placeholder, searchPlaceholder, noResultsText, clearLabel, clearText, maxSelectedValues, isOptionDisabled, maxDisplayedValues, formatOverflowCount, formatSelectedCount, formatMaxSelectedHint, radius, unstyled, disabled, required, className, wrapperClassName, values, defaultValues, onChange, onDropdownClose, id, }: Readonly<MultiComboboxProps>): ReactElement;
 
 export declare interface MultiComboboxOption {
     value: string;
@@ -596,6 +680,7 @@ export declare interface MultiComboboxOption {
 export declare interface MultiComboboxProps {
     options: readonly MultiComboboxOption[];
     label?: string | ReactNode;
+    description?: string | ReactNode;
     'aria-label'?: string;
     error?: string;
     placeholder?: string;
@@ -651,7 +736,7 @@ export declare interface RadioOptionsProps extends Omit<ComponentPropsWithRef<'f
 
 declare type Radius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
-export declare function Select({ options, label, description, error, placeholder, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, 'aria-describedby': callerDescribedBy, ...props }: Readonly<SelectProps>): JSX.Element;
+export declare function Select({ options, label, description, error, placeholder, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, 'aria-describedby': callerDescribedBy, 'aria-label': ariaLabel, ...props }: Readonly<SelectProps>): JSX.Element;
 
 export declare interface SelectOption {
     value: string;
@@ -670,6 +755,49 @@ export declare interface SelectProps extends Omit<ComponentPropsWithRef<'select'
     wrapperClassName?: string;
 }
 
+/**
+ * A primary action joined to a chevron `Menu` trigger that offers secondary
+ * variants of that action. Both halves share variant, color, size and radius:
+ * the inner corners are square. The menu cannot open while `disabled` or
+ * `loading`; while loading, the trigger stays focusable as `aria-disabled`.
+ */
+export declare function SplitButton(splitButtonProps: Readonly<SplitButtonProps>): JSX.Element;
+
+export declare type SplitButtonProps = {
+    /** Label of the main button. */
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** `MenuItem`s, `MenuGroup`s and `MenuSeparator`s offered by the chevron trigger. */
+    menu: ReactNode;
+    /** Accessible name of the chevron trigger, also shown as its tooltip. */
+    menuLabel: string;
+    menuIcon?: string;
+    menuAlign?: MenuAlign;
+    startIcon?: string;
+    size?: ControlSize;
+    /** Shows the main button's loading state and keeps the menu closed. */
+    loading?: boolean;
+    /** Disables both halves. */
+    disabled?: boolean;
+    /** Accessible name of the group formed by both halves. */
+    'aria-label'?: string;
+    /** Id of the element that names the group. Takes precedence over `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Class on the wrapper around both halves. */
+    className?: string;
+    /** Ref to the main button. */
+    ref?: Ref<HTMLButtonElement>;
+} & SplitButtonStyle;
+
+declare type SplitButtonStyle = {
+    unstyled: true;
+} | {
+    unstyled?: false;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    radius?: Radius;
+};
+
 /**
  * Splits `text` into consecutive segments, flagging the ones covered by
  * `ranges` (flat `[start0, end0, start1, end1, ...]` pairs, ascending and
@@ -710,7 +838,7 @@ export declare function splitIntoHighlightSegments(
     	return segments;
 }
 
-export declare function Switch({ label, description, error, unstyled, fullWidth, className, wrapperClassName, checked, defaultChecked, onChange, id, 'aria-describedby': callerDescribedBy, ...props }: Readonly<SwitchProps>): JSX.Element;
+export declare function Switch({ label, description, error, unstyled, fullWidth, className, wrapperClassName, checked, defaultChecked, onChange, id, 'aria-describedby': callerDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: Readonly<SwitchProps>): JSX.Element;
 
 export declare interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'className'> {
     label?: string | ReactNode;
@@ -736,7 +864,7 @@ export declare interface TabItem {
     badge?: ReactNode;
 }
 
-export declare function Tabs({ items, value, defaultIndex, variant, orientation, size, radius, fullWidth, unstyled, animated, keepMounted, className, tabListClassName, panelClassName, onChange, }: Readonly<TabsProps>): JSX.Element;
+export declare function Tabs({ items, value, defaultIndex, variant, orientation, size, radius, fullWidth, unstyled, animated, keepMounted, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, tabListClassName, panelClassName, onChange, }: Readonly<TabsProps>): JSX.Element;
 
 export declare type TabsOrientation = 'horizontal' | 'vertical';
 
@@ -773,6 +901,10 @@ export declare interface TabsProps {
      * `false`.
      */
     keepMounted?: boolean;
+    /** Accessible name of the tablist. Distinguishes several tab sets on one page. */
+    'aria-label'?: string;
+    /** Id of the element that names the tablist. Takes precedence over `aria-label`. */
+    'aria-labelledby'?: string;
     className?: string;
     tabListClassName?: string;
     panelClassName?: string;
@@ -781,7 +913,7 @@ export declare interface TabsProps {
 
 export declare type TabsVariant = 'line' | 'segmented';
 
-export declare function Textarea({ label, description, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, 'aria-describedby': callerDescribedBy, ...props }: Readonly<TextareaProps>): JSX.Element;
+export declare function Textarea({ label, description, error, showCharCount, minLength, maxLength, radius, unstyled, className, wrapperClassName, value, defaultValue, onChange, id, 'aria-describedby': callerDescribedBy, 'aria-label': ariaLabel, ...props }: Readonly<TextareaProps>): JSX.Element;
 
 export declare interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     label?: string | ReactNode;
@@ -803,7 +935,7 @@ declare interface ThemeStore {
     setTheme: (theme: Theme) => void;
 }
 
-export declare function ThemeToggle({ isTransitionEnabled, transitionDuration, transitionEasing, size, radius, variant, getAriaLabel, tooltip, }: Readonly<ThemeToggleProps>): JSX.Element;
+export declare function ThemeToggle({ isTransitionEnabled, transitionDuration, transitionEasing, size, unstyled, radius, variant, getAriaLabel, tooltip, }: Readonly<ThemeToggleProps>): JSX.Element;
 
 export declare interface ThemeToggleProps {
     /**
@@ -818,6 +950,11 @@ export declare interface ThemeToggleProps {
     size?: 'sm' | 'md' | 'lg';
     radius?: Radius;
     variant?: ButtonVariant;
+    /**
+     * Strips the library's styling, including the icon colours. `variant` and
+     * `radius` are ignored when it is set. The view transition still runs.
+     */
+    unstyled?: boolean;
     getAriaLabel?: (theme: Theme) => string;
     tooltip?: IconButtonTooltip;
 }
@@ -855,7 +992,7 @@ export declare type ToolbarProps = Omit<ComponentPropsWithRef<'div'>, 'role' | '
  * `temporaryContent` is announced to screen readers through a polite status
  * region.
  */
-export declare function Tooltip({ content, children, position, showOnClick, temporaryContent, temporaryDuration, disabled, radius, onTemporaryShow, className, describeChild, portalContainer, ref, }: Readonly<TooltipProps>): JSX.Element;
+export declare function Tooltip({ content, children, position, showOnClick, temporaryContent, temporaryDuration, disabled, radius, unstyled, panelClassName, onTemporaryShow, className, describeChild, hoverable, portalContainer, ref, }: Readonly<TooltipProps>): JSX.Element;
 
 export declare type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 
@@ -868,6 +1005,15 @@ export declare interface TooltipProps {
     temporaryDuration?: number;
     disabled?: boolean;
     radius?: Radius;
+    /**
+     * Strips the bubble's visual styling (background, text colour and size,
+     * padding, radius, shadow, enter animation) and removes the arrow.
+     * Positioning, `data-state` and the hover handling stay. `radius` is
+     * ignored.
+     */
+    unstyled?: boolean;
+    /** Styles the bubble (`role="tooltip"`), with or without `unstyled`. */
+    panelClassName?: string;
     onTemporaryShow?: () => void;
     className?: string;
     /**
@@ -877,6 +1023,13 @@ export declare interface TooltipProps {
      * screen readers would otherwise announce twice.
      */
     describeChild?: boolean;
+    /**
+     * Keeps the tooltip open while the pointer moves onto it, so people who zoom
+     * can read long content (WCAG 1.4.13). The tooltip then captures the pointer
+     * and can block clicks on controls it covers: use it for long content away
+     * from other controls.
+     */
+    hoverable?: boolean;
     /**
      * Where the tooltip is rendered. Defaults to the trigger's closest
      * landmark or dialog (so it stays inside a landmark and inside an open
@@ -905,6 +1058,12 @@ export declare interface UILabels {
     	clear: string;
     	/** Screen-reader suffix of a required `CheckboxOptions` group. */
     	required: string;
+    	/** Screen-reader announcement of `CopyButton` after a successful copy. */
+    	copied: string;
+    	/** Screen-reader text added to a `Button` while it is loading. */
+    	loading: string;
+    	/** Screen-reader announcement of `CharacterCount` near and at the limit. */
+    	charactersRemaining: (remainingCount: number) => string;
     	/** Accessible name of `ThemeToggle` for the current theme. */
     	currentTheme: (theme: Theme) => string;
     	/** `MultiCombobox` badge summarising the values that do not fit. */