@ahrowe/ui 0.40.0 → 0.41.1

package/dist/types/common/ahroweProvider/ahroweProvider.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AhroweProviderProps } from './ahroweProvider.types.js';
+declare function AhroweProvider({ children, themes, currentThemeId, defaultProps, presentation, toast, scrollbars, }: AhroweProviderProps): ReactElement;
+export default AhroweProvider;

package/dist/types/common/ahroweProvider/ahroweProvider.types.d.ts

@@ -0,0 +1,12 @@
+import { ConfigProviderProps } from '../configProvider/configProvider.types.js';
+import { ThemeProviderProps } from '../themeProvider/theme.types.js';
+import { ToastContextConfig } from '../toast/toast.types.js';
+export interface AhroweProviderProps extends ConfigProviderProps, ThemeProviderProps {
+    /** Defaults for every toast `showToast` shows. Read by the outermost provider only. */
+    toast?: ToastContextConfig;
+    /**
+     * Styles every scrollbar inside the app, portalled panels included, in the theme's colours.
+     * Defaults to `true`. Read by the outermost provider only.
+     */
+    scrollbars?: boolean;
+}

package/dist/types/common/ahroweProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ahroweProvider.js';
+export * from './ahroweProvider.types.js';

package/dist/types/common/bodyEnd/portalHostContext.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The element `AhroweProvider` portals into. `undefined` means there is no provider, so BodyEnd
+ * falls back to `#bodyEnd`; `null` means a provider that cannot portal yet, on the server and
+ * while hydrating, and must not be reported missing.
+ */
+export declare const PortalHostContext: import('react').Context<HTMLElement | null | undefined>;

package/dist/types/common/errorBoundary/errorBoundary.types.d.ts

@@ -19,9 +19,9 @@ export interface ErrorBoundaryLabels {
     copied?: string;
     /** Reset button label. Default: "Try again". */
     reset?: string;
-    /** Toast shown after a successful copy (only visible if `ToastProvider` is mounted). */
+    /** Toast shown after a successful copy, when the boundary is inside an `AhroweProvider`. */
     copySuccessToast?: string;
-    /** Toast shown if the copy fails (only visible if `ToastProvider` is mounted). */
+    /** Toast shown if the copy fails, when the boundary is inside an `AhroweProvider`. */
     copyErrorToast?: string;
 }
 export interface ErrorBoundaryProps extends Omit<HtmlProps, 'title' | 'onError'> {

package/dist/types/common/hooks/useOverlay.d.ts

@@ -6,7 +6,10 @@ export interface UseOverlayArgs {
     containerRef: RefObject<HTMLElement | null>;
     /** Called when Escape is pressed while this is the topmost overlay. Omit to not handle Escape. */
     onEscape?: () => void;
-    /** Keep Tab inside the panel and restore focus to the previously focused element on close. */
+    /**
+     * Keep Tab inside the panel and restore focus to the previously focused element on close, unless
+     * an overlay opened after this one is still open.
+     */
     trapFocus?: boolean;
     /** Prevent the page behind the overlay from scrolling. */
     lockScroll?: boolean;

package/dist/types/common/popover/popover.types.d.ts

@@ -53,7 +53,7 @@ export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     offset?: number;
     /** Render the arrow pointing at the trigger (default `true`). */
     withArrow?: boolean;
-    /** Close when clicking outside the panel (default `true`). */
+    /** Close on a click outside, or when focus leaves the trigger and panel (default `true`). */
     closeOnOutsideClick?: boolean;
     /** Close when pressing Escape (default `true`). */
     closeOnEscape?: boolean;

package/dist/types/common/themeProvider/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './themeProvider.js';
 export { defaultTheme } from './defaultTheme.js';
 export { lightTheme } from './lightTheme.js';
-export type { Theme, ThemeVariables } from './theme.types.js';
+export type { Theme, ThemeProviderProps, ThemeVariables } from './theme.types.js';

package/dist/types/common/themeProvider/theme.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 /**
  * All CSS custom properties used by the component library.
  * Every key is optional so a theme only needs to declare the variables it overrides.
@@ -278,3 +279,10 @@ export interface Theme {
     baseThemeId?: string;
     variables: ThemeVariables;
 }
+export interface ThemeProviderProps {
+    children: ReactNode;
+    /** The themes to choose from. Defaults to `[defaultTheme]`. */
+    themes?: Theme[];
+    /** The `id` of the theme to apply, from `themes`. */
+    currentThemeId?: string;
+}

package/dist/types/common/themeProvider/themeProvider.d.ts

@@ -1,10 +1,6 @@
 import { default as React, Component } from 'react';
-import { Theme } from './theme.types.js';
-interface Props {
-    children: React.ReactNode;
-    themes?: Theme[];
-    currentThemeId?: string;
-}
+import { Theme, ThemeProviderProps } from './theme.types.js';
+import { ThemeVariablesContext } from './themeVariablesContext.js';
 interface State {
     resolvedVariables: Record<string, string>;
     colorFadeActive: boolean;
@@ -15,15 +11,17 @@ interface State {
         currentThemeId: string | undefined;
     };
 }
-declare class ThemeProvider extends Component<Props, State> {
+declare class ThemeProvider extends Component<ThemeProviderProps, State> {
+    static contextType: React.Context<Record<string, string> | null>;
+    context: React.ContextType<typeof ThemeVariablesContext>;
     state: State;
     private colorFadeTimeout;
     private wrapperRef;
     private themeColorMeta;
     private createdThemeColorMeta;
-    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
+    static getDerivedStateFromProps(props: ThemeProviderProps, state: State): Partial<State> | null;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentDidUpdate(prevProps: ThemeProviderProps, prevState: State): void;
     componentWillUnmount(): void;
     /**
      * Replaces the former react-helmet usage: keep a single

package/dist/types/common/themeProvider/themeVariablesContext.d.ts

@@ -1,8 +1,8 @@
 /**
  * The nearest ThemeProvider's resolved variables, for content that renders outside its DOM
  * subtree. Theme variables reach a component by CSS inheritance, which a portal breaks: a
- * `BodyEnd` child lands wherever `#bodyEnd` happens to be, so it picks up whatever provider
- * wraps *that* node rather than the one it was written under.
+ * `BodyEnd` child lands wherever the portal target is, so it picks up whatever provider wraps
+ * *that* node rather than the one it was written under.
  *
  * Deliberately its own module rather than a member of `themeProvider.tsx`: BodyEnd needs the
  * context and nothing else, and importing the component for it would pull the whole

package/dist/types/common/toast/index.d.ts

@@ -1,3 +1,2 @@
-export { default } from './toastProvider.js';
 export { showToast } from './toastService.js';
-export type { ToastProviderProps, ToastContextConfig, ToastOptions, ToastType, ToastPosition, ToastSlots, } from './toast.types.js';
+export type { ToastContextConfig, ToastLabels, ToastOptions, ToastType, ToastPosition, ToastSlots, } from './toast.types.js';

package/dist/types/common/toast/toast.types.d.ts

@@ -19,17 +19,17 @@ export interface ToastContextConfig {
     /** Pause the auto-dismiss timer while the toast is hovered or focused. */
     pauseOnHover?: boolean;
     /**
-     * Overrides the text a toast renders of its own. Set on `ToastProvider` for
-     * the whole app, or per toast through `showToast` options.
+     * Overrides the text a toast renders of its own. Set in `AhroweProvider`'s
+     * `toast` for the whole app, or per toast through `showToast` options.
      */
     labels?: ToastLabels;
 }
-export interface ToastOptions extends ToastContextConfig {
+export interface ToastOptions extends Omit<ToastContextConfig, 'allowStacking'> {
     type?: ToastType;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }
-export interface ToastProviderProps extends ToastContextConfig {
+export interface ToastHostProps extends ToastContextConfig {
     children: ReactNode;
 }
 export interface ToastItem extends Pick<ToastOptions, 'labels'> {

package/dist/types/common/toast/toastHost.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ToastHostProps } from './toast.types.js';
+declare function ToastHost({ children, position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover, labels, }: ToastHostProps): React.JSX.Element;
+export default ToastHost;

package/dist/types/common/toast/toastService.d.ts

@@ -2,6 +2,6 @@ import { ReactNode } from 'react';
 import { ToastOptions } from './toast.types.js';
 type ShowToastFn = (content: ReactNode, options?: ToastOptions) => void;
 export declare function _registerToastHandler(fn: ShowToastFn): void;
-export declare function _unregisterToastHandler(): void;
+export declare function _unregisterToastHandler(fn: ShowToastFn): void;
 export declare function showToast(content: ReactNode, options?: ToastOptions): void;
 export {};

package/dist/types/index.d.ts

@@ -3,6 +3,8 @@ export * from './common/accordion/index.js';
 export * from './common/actionButtons/index.js';
 export { default as ActionIcon } from './common/actionIcon/index.js';
 export * from './common/actionIcon/index.js';
+export { default as AhroweProvider } from './common/ahroweProvider/index.js';
+export * from './common/ahroweProvider/index.js';
 export { default as Alert } from './common/alert/index.js';
 export * from './common/alert/index.js';
 export { default as AnimatedLogo } from './common/animatedLogo/index.js';
@@ -144,7 +146,6 @@ export { default as Timeline } from './common/timeline/index.js';
 export * from './common/timeline/index.js';
 export { default as Timer } from './common/timer/index.js';
 export * from './common/timer/index.js';
-export { default as ToastProvider } from './common/toast/index.js';
 export * from './common/toast/index.js';
 export { default as Tooltip } from './common/tooltip/index.js';
 export * from './common/tooltip/index.js';

package/docs/AhroweProvider.md

@@ -0,0 +1,90 @@
+# AhroweProvider
+
+**When to use:** The one wrapper an app needs, at its root: it applies the theme, sets default props for every component, shows toasts and renders the element that Modal, Tooltip, Popover, Menu and Toast portal into. Nest another one for a section with its own theme or defaults.
+
+**Keywords:** setup, getting started, install, bootstrap, app shell, dark mode, notifications
+
+**Import:** `import { AhroweProvider } from '@ahrowe/ui'`  
+**Types:** `import type { AhroweProviderProps } from '@ahrowe/ui'`
+
+```tsx
+import '@ahrowe/ui/style.css';
+import { AhroweProvider, defaultTheme, lightTheme, useTheme } from '@ahrowe/ui';
+
+// Keep `themes` stable, here at module scope: a new array on every render reads as a theme change.
+const THEMES = [defaultTheme, lightTheme];
+
+function Root() {
+  const { currentThemeId } = useTheme();
+
+  return (
+    <AhroweProvider
+      themes={THEMES}
+      currentThemeId={currentThemeId}
+      defaultProps={{ Input: { alwaysFloatLabel: true } }}
+      toast={{ position: 'bottom-right', duration: 3000 }}
+    >
+      <App />
+    </AhroweProvider>
+  );
+}
+```
+
+Every prop is optional. `<AhroweProvider><App /></AhroweProvider>` applies `defaultTheme` and shows toasts with their built-in settings.
+
+**Key props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `themes` | `Theme[]` | `[defaultTheme]` | The themes to choose from. See [ThemeProvider.md](ThemeProvider.md) |
+| `currentThemeId` | `string` | the first theme without a `baseThemeId` | The `id` of the theme to apply |
+| `defaultProps` | `ComponentDefaults` | | Default props per component. See [ConfigProvider.md](ConfigProvider.md) |
+| `presentation` | `Presentation` | | How every sheet-capable component presents. See [ConfigProvider.md](ConfigProvider.md) |
+| `toast` | `ToastContextConfig` | | Settings for every toast `showToast` shows. See [Toast.md](Toast.md) |
+| `scrollbars` | `boolean` | `true` | Styles every scrollbar inside the app in the theme's colours. See **Scrollbars** |
+
+## What it renders
+
+The theme's wrapper `div`. Inside it, in a `display: contents` element that styles the scrollbars (unless `scrollbars={false}`), come an empty `<template>`, your app and, after it, the element everything portalled renders into. That is why no `<div id="bodyEnd" />` is needed. Portalled panels stay inside the theme's wrapper and come after the app, so they paint above it. Each one gets the font and colours of the theme it was written under, a nested one included.
+
+On the server, and while hydrating, nothing is portalled: the server has nowhere to put it. Panels appear on the render right after hydration.
+
+## Nesting
+
+A nested `AhroweProvider` applies its `themes`, `currentThemeId`, `defaultProps` and `presentation` to its section. Its `defaultProps` merge with the outer ones per component, the same as nested `ConfigProvider`s. Toasts, scrollbars and the portal element stay with the outermost provider, so a nested `toast` or `scrollbars` is ignored, with a warning.
+
+Only a provider inside another `AhroweProvider` counts as nested. Put the outer one at the root first: one placed around a section of an app that has none renders the portal element inside that section, where an `overflow: hidden` or a `transform` around it clips every panel.
+
+`ThemeProvider` and `ConfigProvider` still work on their own, for a section that needs only one of the two.
+
+## Scrollbars
+
+Every scrollbar inside the provider, portalled panels included, is thin, with a rounded thumb in the theme's `--background-accent-light`. The page's own scrollbar, when the window itself scrolls, gets the same thumb colour: it belongs to `<html>`, outside the provider, so the provider hands the colour up in `--ahrowe-page-scrollbar-thumb`. A browser without `scrollbar-color` keeps its own page scrollbar.
+
+None of this outweighs a rule of yours. Every one of these rules has zero specificity, so any scrollbar rule on an element, on `<html>` or on `:root` wins. `scrollbars={false}` turns all of it off; `ScrollbarProvider` then styles one region at a time.
+
+## Migrating from separate providers
+
+```tsx
+// Before
+<ThemeProvider themes={THEMES} currentThemeId={currentThemeId}>
+  <ConfigProvider defaultProps={defaults}>
+    <ToastProvider position="bottom-right">
+      <App />
+    </ToastProvider>
+  </ConfigProvider>
+  <div id="bodyEnd" />
+</ThemeProvider>
+
+// After
+<AhroweProvider
+  themes={THEMES}
+  currentThemeId={currentThemeId}
+  defaultProps={defaults}
+  toast={{ position: 'bottom-right' }}
+>
+  <App />
+</AhroweProvider>
+```
+
+Delete the `<div id="bodyEnd" />`, including one in `index.html`: inside `AhroweProvider` nothing renders into it. Delete a `ScrollbarProvider` around the app too, or, if the app had none, pass `scrollbars={false}` to keep the browser's scrollbars. `ToastProvider` was removed in 0.41, and its props are the keys of `toast`.

package/docs/BodyEnd.md

@@ -1,19 +1,12 @@
 # BodyEnd
 
-**When to use:** Renders children via a React portal into a `#bodyEnd` DOM node. Use for modals, toasts, tooltips, or any UI that must escape the stacking context of its parent.
+**When to use:** Renders children through a React portal, to the end of the app. Use for modals, toasts, tooltips, or any UI that must escape the stacking context of its parent.
 
 **Keywords:** teleport
 
 **Import:** `import { BodyEnd } from '@ahrowe/ui'`
 
-**Setup required:** Add `<div id="bodyEnd"></div>` inside your topmost `ThemeProvider` (usually as the last child) so portalled content inherits the theme's CSS variables.
-
-```tsx
-<ThemeProvider>
-  <App />
-  <div id="bodyEnd"></div>
-</ThemeProvider>
-```
+**Setup:** none inside [AhroweProvider](AhroweProvider.md), which renders the element BodyEnd portals into. Without it, BodyEnd looks for an element with `id="bodyEnd"`: put `<div id="bodyEnd"></div>` inside your topmost `ThemeProvider`, as the last child, so portalled content inherits the theme.
 
 ```tsx
 import { BodyEnd } from '@ahrowe/ui';
@@ -27,9 +20,9 @@ import { BodyEnd } from '@ahrowe/ui';
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `children` | `ReactNode` | Content rendered into `#bodyEnd` |
+| `children` | `ReactNode` | Content rendered at the end of the app |
 
-**Note:** Returns `null` silently if `#bodyEnd` doesn't exist in the DOM.
+**Note:** Outside `AhroweProvider` and without a `#bodyEnd`, it renders nothing and logs an error in development.
 
-**Theming crosses the portal.** Children keep the variables of the nearest `ThemeProvider` they were *written* under, not the one that happens to wrap `#bodyEnd`. BodyEnd applies them through a `display: contents` wrapper, which generates no box — positioning, stacking and clipping are unchanged — while custom properties still inherit. Variables that theme leaves unset fall through to whatever wraps `#bodyEnd`, the same cascade the children would have seen rendered in place. With no `ThemeProvider` above, no wrapper is added at all.
+**Theming crosses the portal.** Children keep the variables of the nearest `ThemeProvider` they were *written* under, not the one that happens to wrap the element it portals into. BodyEnd applies them through a `display: contents` wrapper, which generates no box — positioning, stacking and clipping are unchanged — while custom properties still inherit. Variables that theme leaves unset fall through to whatever wraps that element, the same cascade the children would have seen rendered in place. With no `ThemeProvider` above, no wrapper is added at all.
 

package/docs/Breadcrumb.md

@@ -80,8 +80,6 @@ function Example() {
 />
 ```
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML when `maxItems` is used and the trail actually collapses (the hidden-items menu is a `Popover`, which renders via portal).
-
 **BreadcrumbItem:**
 
 | Field | Type | Description |

package/docs/CLAUDE.md

@@ -9,13 +9,14 @@ enums and slot names. Do not infer props from a component's name.
 
 ## Rules for every component
 
-- **`ThemeProvider` is required.** It injects the CSS variables every component paints with;
-  without it they render unstyled. Wrap the app once. Two themes ship, `defaultTheme` (dark) and
-  `lightTheme`; a custom theme is `{ id, variables: { '--primary-color': '#6200ea', … } }` passed
-  through `themes`, selected with `currentThemeId`. `useTheme()` switches at runtime. The variable
-  list is in ThemeProvider.md.
-- **Portals need a host.** Modal, Tooltip, Popover, Toast and Menu render into `<div id="bodyEnd" />`.
-  Put it inside `ThemeProvider`, once.
+- **`AhroweProvider` is required.** Wrap the app in it once (AhroweProvider.md). It injects the
+  CSS variables every component paints with, so without it they render unstyled; it renders the
+  element Modal, Tooltip, Popover, Toast and Menu portal into; and it shows toasts. Two themes
+  ship, `defaultTheme` (dark) and `lightTheme`; a custom theme is
+  `{ id, variables: { '--primary-color': '#6200ea', … } }` passed through `themes`, selected with
+  `currentThemeId`. `useTheme()` switches at runtime. The variable list is in ThemeProvider.md.
+  It already is a `ThemeProvider`, a `ConfigProvider`, a `ScrollbarProvider` and the toast host,
+  so do not add those or a `<div id="bodyEnd" />` beside it. A section with its own theme or defaults nests another one.
 - **Form components** (Input, NumberInput, Dropdown, MultiSelect, InputDropdown, Checkbox, Switch,
   RadioGroup, DatePicker, TimeInput, OtpInput, IconPicker) take `formValidator`, which then owns
   the value: `new FormValidator('', [Validators.required()])`. Whole forms use
@@ -29,7 +30,8 @@ enums and slot names. Do not infer props from a component's name.
   hit named inner elements. Slot names are on each doc's **Slots** line. Every native attribute of
   the root element passes through (`id`, `aria-*`, `data-*`, `on*`).
 - **Text a component renders itself** (close buttons, empty messages, page labels) is set with its
-  `labels` prop. App-wide defaults for any prop go through `ConfigProvider` (ConfigProvider.md).
+  `labels` prop. App-wide defaults for any prop go through `AhroweProvider`'s `defaultProps`
+  (ConfigProvider.md).
 - **Variants are enums**, not strings: `ButtonStyleType.Primary`, `ButtonSize.Small`. Each doc lists
   them under **Enums**.
 - **`icon` props** take a FontAwesome `IconDefinition` or any React element.
@@ -50,12 +52,13 @@ enums and slot names. Do not infer props from a component's name.
 | Accordion.md | Accordion | Collapsible sections for progressive disclosure — FAQs, settings panels, long-form content that users expand on demand |
 | ActionButtons.md | ActionButtons | Standardised Submit / Cancel button pair for forms, dialogs, and drawer footers |
 | ActionIcon.md | ActionIcon | Clickable icon button without a label — toolbar actions, table row actions, icon-only controls |
+| AhroweProvider.md | AhroweProvider | The one wrapper an app needs, at its root: it applies the theme, sets default props for every component, shows toasts and renders the element that Modal, Tooltip, Popover, Menu and Toast portal into |
 | Alert.md | Alert, AlertStyleType | A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices |
 | AnimatedLogo.md | AnimatedLogo | A self-drawing SVG mark for splash/loading screens, empty states, or anywhere a brand or icon mark should feel alive rather than static |
 | AnimatedText.md | AnimatedText, AnimatedTextVariant, AnimatedTextUnit | Decorative text entrance or emphasis effect, for hero headlines, empty-state messages, "premium"/"new" callouts, loading/decoding states |
 | Avatar.md | Avatar, AvatarGroup | User or entity image — profile pictures, comment authors, member lists |
 | Badge.md | Badge, BadgeStyleType, BadgePosition | Small count or status indicator — unread counts, notification dots, "new" markers |
-| BodyEnd.md | BodyEnd | Renders children via a React portal into a `#bodyEnd` DOM node |
+| BodyEnd.md | BodyEnd | Renders children through a React portal, to the end of the app |
 | Breadcrumb.md | Breadcrumb | A trail showing the current page's position within a hierarchy, with links back to each ancestor, such as a file browser path, a category/subcategory drill-down, or a multi-level settings page |
 | Button.md | Button, ButtonStyleType, ButtonSize, ButtonType | Primary interactive action trigger |
 | ButtonGroup.md | ButtonGroup, ButtonGroupOrientation | Joins a row (or column) of buttons into a single seamless control, merging their borders and rounding only the outer corners |
@@ -118,12 +121,12 @@ enums and slot names. Do not infer props from a component's name.
 | Switch.md | Switch | Sliding boolean toggle — settings panels, feature flags, preference lists |
 | TabHeader.md | TabHeader | A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages |
 | Textarea.md | Textarea | Multiline text input — comments, descriptions, notes, code snippets, long-form content |
-| ThemeProvider.md | ThemeProvider | Required wrapper for the entire component library |
+| ThemeProvider.md | ThemeProvider | Applies a theme to its subtree, injecting its CSS custom properties as inline styles so every component inside can use them |
 | Tilt.md | Tilt, TiltGroup | Wrap content that should tilt toward the cursor in 3D |
 | TimeInput.md | TimeInput | Time-of-day selection — appointment times, opening hours, shift starts, reminders |
 | Timeline.md | Timeline, TimelineAlignment, TimelineItemStatus | A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs |
 | Timer.md | Timer | A countdown timer with a depleting ring, add/remove-time and pause/cancel controls, and an imperative ref API |
-| Toast.md | ToastProvider, showToast | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
+| Toast.md | showToast | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
 | Tooltip.md | Tooltip | Contextual help, info icons, field explanations, error pointers |
 | Tree.md | Tree, flattenTree | A hierarchical list the user can expand, collapse and pick from: categories, nested locations, folder structures, org charts |
 | VirtualList.md | VirtualList | Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM |

package/docs/CommandPalette.md

@@ -7,8 +7,6 @@
 **Import:** `import { CommandPalette } from '@ahrowe/ui'`  
 **Types:** `import type { CommandPaletteProps, CommandPaletteLabels } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your app: the palette is a [Modal](Modal.md) and portals there.
-
 ```tsx
 import { CommandPalette, menuHotkeys, useHotkeys } from '@ahrowe/ui';
 import type { MenuEntry } from '@ahrowe/ui';

package/docs/ConfigProvider.md

@@ -7,16 +7,19 @@
 **Import:** `import { ConfigProvider } from '@ahrowe/ui'`
 **Types:** `import type { ComponentDefaults, ConfigProviderProps } from '@ahrowe/ui'`
 
-Place it inside `ThemeProvider` (it's a separate concern from theming — theme = CSS variables, config = default props):
+At the app root, pass `defaultProps` and `presentation` to [AhroweProvider](AhroweProvider.md), which includes a ConfigProvider. Use ConfigProvider on its own for a section with defaults of its own:
 
 ```tsx
-import { ThemeProvider, ConfigProvider } from '@ahrowe/ui';
+import { AhroweProvider, ConfigProvider } from '@ahrowe/ui';
 
-<ThemeProvider>
-  <ConfigProvider defaultProps={{ Input: { alwaysFloatLabel: true } }}>
-    <App />
-  </ConfigProvider>
-</ThemeProvider>
+<AhroweProvider defaultProps={{ Input: { alwaysFloatLabel: true } }}>
+  <App />
+</AhroweProvider>
+
+// Inside App: one form that wants different defaults
+<ConfigProvider defaultProps={{ Input: { alwaysFloatLabel: false } }}>
+  <SignupForm />
+</ConfigProvider>
 ```
 
 ## How defaults resolve
@@ -135,6 +138,6 @@ Every string a component renders of its own is set through its `labels` prop, an
 
 **Labels merge per key**, unlike every other default here. An instance that overrides one string keeps the provider's translations for the rest, so `<Alert labels={{ dismiss: 'Weg damit' }} />` under the provider above does not lose anything else Alert might have been given. Anything the component does not produce itself, a `title`, a column `label`, a button's children, is already yours and never appears in `labels`.
 
-`ColorPicker` and `VirtualList` appear in `ComponentDefaults` with their labels only: the first is configured elsewhere, the second has generic props that a per-key default map cannot express. `Calendar` is generic too, so its entry is the props that do not depend on the event type: `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays` and `scrollToHour`. `Toast` is not there at all, because `ToastProvider` is already its app-wide configuration and carries `labels` itself.
+`ColorPicker` and `VirtualList` appear in `ComponentDefaults` with their labels only: the first is configured elsewhere, the second has generic props that a per-key default map cannot express. `Calendar` is generic too, so its entry is the props that do not depend on the event type: `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays` and `scrollToHour`. `Toast` is not there at all, because `AhroweProvider`'s `toast` prop is already its app-wide configuration and carries `labels` itself.
 
 Each component's doc lists its own keys under **Labels:**.

package/docs/ConfirmModal.md

@@ -6,8 +6,6 @@
 
 **Import:** `import { ConfirmModal } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML (renders via portal).
-
 ```tsx
 import { ConfirmModal } from '@ahrowe/ui';
 

package/docs/ErrorBoundary.md

@@ -65,7 +65,9 @@ import { ErrorBoundary } from '@ahrowe/ui';
 </ErrorBoundary>
 ```
 
-The default fallback is a centered card with a tinted icon badge, an `Accordion` for the collapsible stack trace (with a `CopyButton` that also fires a `Toast` confirmation if `ToastProvider` is mounted), and a `Button` for "Try again".
+The default fallback is a centered card with a tinted icon badge, an `Accordion` for the collapsible stack trace (with a `CopyButton` that also fires a `Toast` confirmation when the boundary is inside `AhroweProvider`), and a `Button` for "Try again".
+
+Put an app-wide boundary inside `AhroweProvider`, not around it. Around it, the error has unmounted the provider by the time the fallback shows, so the fallback renders unthemed and its copy confirmation never appears.
 
 **Key props:**
 
@@ -89,7 +91,7 @@ The default fallback is a centered card with a tinted icon badge, an `Accordion`
 | `copy` | `"Copy"` | Copy button tooltip and accessible name before copying |
 | `copied` | `"Copied"` | Copy button tooltip and accessible name right after a successful copy |
 | `reset` | `"Try again"` | Reset button label |
-| `copySuccessToast` | `"Stack trace copied to clipboard"` | Toast shown after a successful copy (only visible if `ToastProvider` is mounted) |
-| `copyErrorToast` | `"Could not copy stack trace"` | Toast shown if the copy fails |
+| `copySuccessToast` | `"Stack trace copied to clipboard"` | Toast shown after a successful copy, inside `AhroweProvider` only |
+| `copyErrorToast` | `"Could not copy stack trace"` | Toast shown if the copy fails, inside `AhroweProvider` only |
 
 **Slots:** `root` `header` `badge` `icon` `title` `description` `stack` `stackHeader` `stackLabel` `stackTrace` `copyButton` `actions` `resetButton`

package/docs/FormValidatorGroup.md

@@ -71,7 +71,7 @@ const editForm = useFormValidatorGroup(fields, { initialValues: user, onSubmit:
 5. Otherwise calls `onSubmit(values, group)`. If it throws, the error is passed to `parseError(err, true)` to surface field-level or generic errors.
 6. Sets `isSubmitting` false.
 
-By default `onSubmitError` shows the first error as an error **toast** (requires a `ToastProvider` in the tree — see `Toast`). Override it via `options.onSubmitError`.
+By default `onSubmitError` shows the first error as an error **toast** (see `Toast`). Override it via `options.onSubmitError`.
 
 ## Options
 

package/docs/KlipyPicker.md

@@ -6,7 +6,7 @@
 
 **Import:** `import { KlipyPicker } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML when `isModal` is used (Modal renders via portal). A Klipy API token, passed as the `token` prop. There is no built-in key: without one the picker renders but every request fails.
+**Requires:** a Klipy API token, passed as the `token` prop. There is no built-in key: without one the picker renders but every request fails.
 
 ```tsx
 import { KlipyPicker } from '@ahrowe/ui';

package/docs/Menu.md

@@ -7,8 +7,6 @@
 **Import:** `import { Menu, menuHotkeys } from '@ahrowe/ui'`  
 **Types:** `import type { MenuProps, MenuEntry, MenuAction } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your app: the menu is portalled there, like every other anchored panel in the library.
-
 ```tsx
 import { Menu } from '@ahrowe/ui';
 import type { MenuEntry } from '@ahrowe/ui';

package/docs/Modal.md

@@ -6,11 +6,9 @@
 
 **Import:** `import { Modal } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML (renders via portal).
-
 The panel itself never scrolls: the header is fixed and the children scroll inside the `body` slot, so the title and close button stay visible no matter how long the content is. Pass `footer` for anything that should stay put below the content, typically the action buttons.
 
-While open, the modal traps focus (focus moves into the panel and returns to whatever was focused before on close), locks scrolling on the page behind it, and closes on Escape. Modals nest correctly: Escape closes only the topmost one, and the page stays locked until the last one closes. The same applies to anything opened from inside a modal — a `Menu`, `Dropdown` or `Popover` counts as the layer above it, so Escape closes that first, and the modal's focus trap leaves focus alone while it's open (all three render through the same portal, so their DOM sits beside the modal's panel rather than inside it).
+While open, the modal traps focus (focus moves into the panel and returns to whatever was focused before on close), locks scrolling on the page behind it, and closes on Escape. A key already held down when it opens does not repeat into it, so holding Enter on the button that opens it does not go on to press whatever the modal focused first. Modals nest correctly: Escape closes only the topmost one, and the page stays locked until the last one closes. The same applies to anything opened from inside a modal — a `Menu`, `Dropdown` or `Popover` counts as the layer above it, so Escape closes that first, and the modal's focus trap leaves focus alone while it's open (all three render through the same portal, so their DOM sits beside the modal's panel rather than inside it).
 
 ```tsx
 import { Modal, ActionButtons } from '@ahrowe/ui';

package/docs/MultiSelect.md

@@ -7,8 +7,6 @@
 **Import:** `import { MultiSelect } from '@ahrowe/ui'`  
 **Types:** `import type { MultiSelectProps, MultiSelectItem, MultiSelectValue } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your app — the panel renders through a portal.
-
 ```tsx
 import { useState } from 'react';
 import { MultiSelect } from '@ahrowe/ui';

package/docs/OtpInput.md

@@ -6,8 +6,6 @@
 
 **Import:** `import { OtpInput, OtpInputCharset } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML (the error message renders via `Tooltip`, which portals).
-
 **Charset:** `OtpInputCharset.Numeric` (default) | `OtpInputCharset.Alphanumeric`
 
 ```tsx

package/docs/Popover.md

@@ -65,7 +65,7 @@ const [anchor, setAnchor] = useState<HTMLElement | null>(null);
 | `onOpenChange` | `(isOpen, { fromKeyboard }) => void` | — | Open-state change callback. `fromKeyboard` says whether a key caused it, which is what a menu uses to decide between putting the focus on an entry and leaving it on the trigger |
 | `offset` | `number` | `10` | Gap in px between trigger and panel |
 | `withArrow` | `boolean` | `true` | Render the arrow pointing at the trigger |
-| `closeOnOutsideClick` | `boolean` | `true` | Close on click outside (ignored for hover trigger) |
+| `closeOnOutsideClick` | `boolean` | `true` | Close on a click outside, or when focus leaves the trigger and panel (ignored for hover trigger) |
 | `closeOnEscape` | `boolean` | `true` | Close on Escape |
 | `openDelay` | `number` | `100` | Hover open delay in ms |
 | `closeDelay` | `number` | `120` | Hover close delay in ms |
@@ -88,10 +88,8 @@ Only a `Click` trigger presents as a sheet. `Hover` and `Focus` open something s
 
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Popover: { presentation: Presentation.Auto } }}`, or `presentation={Presentation.Auto}` on the provider itself to set every sheet-capable component at once. See [ConfigProvider.md](ConfigProvider.md).
 
-Requires a `<div id="bodyEnd"></div>` at the app root — the panel is portaled there, same as `Tooltip` and `Menu`.
-
 **Scrolling:** where the browser supports CSS anchor positioning, including the trigger's transforms, the panel is anchored to the trigger in CSS, so it moves with a scrolling trigger in the same frame instead of catching up a frame later. Firefox resolves anchors without transforms, so it keeps the pixel positioning. While it is open the trigger carries an inline `anchor-name`, added to any inline one it already has; an `anchor-name` your stylesheet gives the trigger is overridden for that time.
 
-**Keyboard & focus (click trigger):** the panel is portaled to the end of the DOM, so Tab can't reach it naturally. When the panel has focusable content and the keyboard opened it (Enter or Space on the trigger, or ArrowDown/ArrowUp), focus moves to the first focusable element and the panel gets `role="dialog"`; a pointer click leaves the focus where it already is. `focusOnOpen` forces either. Tabbing past the last element closes the popover and moves focus to the element after the trigger; Shift+Tab past the first element, and Escape, close it and return focus to the trigger. This is non-modal: focus is not trapped, and hover/focus triggers don't steal focus. Escape closes only the innermost open layer, so a popover inside a `Modal` closes on the first press and leaves the modal open. Popovers with only static content don't manage focus or claim the dialog role.
+**Keyboard & focus (click trigger):** the panel is portaled to the end of the DOM, so Tab can't reach it naturally. When the panel has focusable content and the keyboard opened it (Enter or Space on the trigger, or ArrowDown/ArrowUp), focus moves to the first focusable element and the panel gets `role="dialog"`; a pointer click leaves the focus where it already is. `focusOnOpen` forces either. Tabbing past the last element closes the popover and moves focus to the element after the trigger; Shift+Tab past the first element, and Escape, close it and return focus to the trigger. However else it closes, such as a button inside it setting `isOpen` to `false`, focus that is still inside the panel goes back to the trigger too, as the native `hidePopover()` does; focus that has already moved elsewhere, or onto the page after a click outside, stays where it is. A key already held down when the panel opens does not repeat into it, so a held Enter does not go on to pick the first entry; in the field it opened from, such as one showing suggestions while you type, it keeps repeating. This is non-modal: focus is not trapped, and hover/focus triggers don't steal focus. Escape closes only the innermost open layer, so a popover inside a `Modal` closes on the first press and leaves the modal open. Popovers with only static content don't manage focus or claim the dialog role.
 
 **Anchored (`anchor`):** your code opens the panel, not a key event Popover sees, so the default `focusOnOpen` looks at the click that opened it: Enter or Space on the anchor or on something inside it (a click with `detail === 0`) moves the focus into the panel, a pointer click leaves it where it is, and an open with no click at all, such as suggestions appearing while the user types into an anchored field, never takes it. Escape, Tab and Shift+Tab out of the panel continue from the anchor as they would from a trigger: from the anchor itself when it takes focus, otherwise from the first focusable element inside it.

package/docs/RadioGroup.md

@@ -71,7 +71,7 @@ interface RadioOption {
 | `errorMessage` | `string` | Manual error message (when not using a `formValidator`) |
 | `isValid` | `boolean` | Manual valid state (default `true`) |
 
-**Validation:** like `Input`, an errored group shows an error `Tooltip` and turns its unselected circles red. With a `formValidator` the error surfaces only after the field is *touched* (focus leaves the group), then on focus or hover; requires `<div id="bodyEnd"></div>` at the app root for the tooltip portal.
+**Validation:** like `Input`, an errored group shows an error `Tooltip` and turns its unselected circles red. With a `formValidator` the error surfaces only after the field is *touched* (focus leaves the group), then on focus or hover.
 
 **Global defaults:** adopts `ConfigProvider` — e.g. `defaultProps={{ RadioGroup: { orientation: RadioGroupOrientation.Horizontal } }}`. See [ConfigProvider.md](ConfigProvider.md).
 

package/docs/ScrollbarProvider.md

@@ -20,3 +20,7 @@ import { ScrollbarProvider } from '@ahrowe/ui';
 |------|------|-------------|
 | `className` | `string` | Additional class on the wrapper |
 | `children` | `ReactNode` | Scrollable content |
+
+**Your own rules win.** Its rules have zero specificity, so any scrollbar rule of a component's or of yours, on an element inside it, takes precedence.
+
+**The whole app:** `AhroweProvider` already styles every scrollbar in the app, portalled panels included, unless it is given `scrollbars={false}`. Use `ScrollbarProvider` for one region in an app that turned that off.

package/docs/SplitButton.md

@@ -8,8 +8,6 @@
 **Types:** `import type { SplitButtonAction, SplitButtonProps } from '@ahrowe/ui'`  
 **Enums:** `import { PopoverAlign } from '@ahrowe/ui'` for `align`.
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML (the actions menu is a `Menu`, which portals).
-
 ```tsx
 import { SplitButton } from '@ahrowe/ui';
 import type { SplitButtonAction } from '@ahrowe/ui';