@ahrowe/ui 0.13.0 → 0.14.0

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

@@ -0,0 +1,28 @@
+import { CSSProperties, ReactNode } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ButtonStyleType, ButtonSize } from '../button/button.types';
+import { Align } from '../floatingMenu/floatingMenu.types';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+export interface SplitButtonAction {
+    id: string;
+    label: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: IconDefinition;
+}
+export type SplitButtonSlots = 'root' | 'primaryButton' | 'triggerButton' | 'menu' | 'menuItem';
+export interface SplitButtonProps extends HtmlProps {
+    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
+    actions: SplitButtonAction[];
+    styleType?: ButtonStyleType;
+    size?: ButtonSize;
+    disabled?: boolean;
+    isLoading?: boolean;
+    /** Alignment of the actions menu relative to the trigger button (default `Align.Right`) */
+    align?: Align;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<SplitButtonSlots>;
+    styles?: SlotStyles<SplitButtonSlots>;
+}

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

@@ -56,6 +56,7 @@ export interface ThemeVariables {
     '--error-border-color'?: string;
     '--input-label-resting-color'?: string;
     '--input-label-floating-color'?: string;
+    '--search-input-color'?: string;
     '--default-border-radius'?: string;
     '--padding-sides'?: string;
     '--margin-top'?: string;

package/dist/types/package/common/virtualList/useRowDrag.d.ts

@@ -19,9 +19,13 @@ interface UseRowDragArgs {
 /** The drag-related props the parent spreads onto a given row. */
 export interface RowDragProps {
     reorderable: boolean;
+    /** Native mouse DnD is active for the list (independent of which row is armed). */
+    mouseDragEnabled: boolean;
     draggable: boolean | undefined;
     isDragging: boolean;
     onMouseDown: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    onMouseOver: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    onMouseLeave: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
     onDragStart: ((e: React.DragEvent<HTMLDivElement>) => void) | undefined;
     onDragOver: ((e: React.DragEvent<HTMLDivElement>) => void) | undefined;
     onDragEnd: (() => void) | undefined;

package/dist/types/package/common/virtualList/useVirtualWindow.d.ts

@@ -10,6 +10,8 @@ interface UseVirtualWindowArgs<T> {
     overscan: number;
     onLoadMore?: () => Promise<void>;
     loadMoreThreshold: number;
+    /** Initial/filter load in progress — the body is replaced by a spinner. */
+    isLoading: boolean;
 }
 interface UseVirtualWindowResult {
     rootRef: React.RefObject<HTMLDivElement | null>;
@@ -37,5 +39,5 @@ interface UseVirtualWindowResult {
  * scroll handle. Mode-agnostic — knows nothing about columns, selection or
  * dragging.
  */
-export declare function useVirtualWindow<T>({ items, keys, getItemKey, estimatedRowHeight, rowGap, overscan, onLoadMore, loadMoreThreshold, }: UseVirtualWindowArgs<T>): UseVirtualWindowResult;
+export declare function useVirtualWindow<T>({ items, keys, getItemKey, estimatedRowHeight, rowGap, overscan, onLoadMore, loadMoreThreshold, isLoading, }: UseVirtualWindowArgs<T>): UseVirtualWindowResult;
 export {};

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

@@ -132,7 +132,11 @@ export interface VirtualListProps<T> extends HtmlProps {
     /** Show the gear column-toggle button in the header. Default: true when columns present. */
     showColumnToggle?: boolean;
     /**
-     * Called when the user scrolls within `loadMoreThreshold` px of the bottom.
+     * Called when the user scrolls within `loadMoreThreshold` px of the bottom, and
+     * repeatedly while the rows don't fill the viewport — a list too short to scroll
+     * would otherwise never ask for a second batch. Each row count is asked at most
+     * once, so the loop ends as soon as a call appends nothing; pass `undefined`
+     * once the source is exhausted to skip even that final probe.
      * Must return a Promise that resolves once new items have been appended to `items`.
      * A spinner is shown at the bottom while the Promise is pending.
      */

package/dist/types/package/common/virtualList/virtualRow.d.ts

@@ -16,10 +16,17 @@ export interface VirtualRowProps {
     ariaSetSize?: number;
     rowRole: 'row' | 'listitem';
     reorderable?: boolean;
+    /**
+     * Native mouse DnD is active for the list. Distinct from `draggable`, which in
+     * `dragHandle` mode is only set on the row the pointer has armed.
+     */
+    mouseDragEnabled?: boolean;
     draggable?: boolean;
     isDragging?: boolean;
     reserveToggleGutter?: boolean;
     onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
     onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
     onDragEnd?: () => void;
@@ -38,5 +45,5 @@ export interface VirtualRowProps {
  * grid (table mode), registering itself with the shared ResizeObserver and
  * carrying all the drag / drop-indicator wiring the parent assigns it.
  */
-declare function VirtualRow({ index, top, padding, columnTemplate, isSelected, showDivider, hover, onClick, observer, ariaRowIndex, ariaPosInSet, ariaSetSize, rowRole, reorderable, draggable, isDragging, reserveToggleGutter, onMouseDown, onDragStart, onDragOver, onDragEnd, onDrop, onTouchStart, dropPosition, dropIndentPx, dropIndicatorClassName, dropIndicatorStyle, rowClassName, rowStyle, children, }: VirtualRowProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualRow({ index, top, padding, columnTemplate, isSelected, showDivider, hover, onClick, observer, ariaRowIndex, ariaPosInSet, ariaSetSize, rowRole, reorderable, mouseDragEnabled, draggable, isDragging, reserveToggleGutter, onMouseDown, onMouseOver, onMouseLeave, onDragStart, onDragOver, onDragEnd, onDrop, onTouchStart, dropPosition, dropIndentPx, dropIndicatorClassName, dropIndicatorStyle, rowClassName, rowStyle, children, }: VirtualRowProps): import("react/jsx-runtime").JSX.Element;
 export default VirtualRow;

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

@@ -19,6 +19,8 @@ export { default as Breadcrumb } from './common/breadcrumb';
 export * from './common/breadcrumb';
 export { default as Button } from './common/button';
 export * from './common/button';
+export { default as ButtonGroup } from './common/buttonGroup';
+export * from './common/buttonGroup';
 export { default as Card } from './common/card';
 export * from './common/card';
 export { default as Carousel } from './common/carousel';
@@ -98,6 +100,8 @@ export { default as Skeleton } from './common/skeleton';
 export * from './common/skeleton';
 export { default as Slider } from './common/slider';
 export * from './common/slider';
+export { default as SplitButton } from './common/splitButton';
+export * from './common/splitButton';
 export { default as Stepper } from './common/stepper';
 export * from './common/stepper';
 export { default as Sticky } from './common/sticky';

package/docs/ButtonGroup.md

@@ -0,0 +1,90 @@
+# ButtonGroup
+
+**When to use:** Joins a row (or column) of buttons into a single seamless control, merging their borders and rounding only the outer corners. Use for a segmented toggle ("Day / Week / Month"), an icon toolbar (bold/italic/underline), or any set of related actions that should read as one control rather than separate buttons. Purely a layout wrapper, no interaction logic of its own, so any button-like children work, not just `Button`.
+
+**Import:** `import { ButtonGroup, ButtonGroupOrientation } from '@ahrowe/ui'`
+
+**Orientation:** `ButtonGroupOrientation.Horizontal` (default) | `ButtonGroupOrientation.Vertical`
+
+```tsx
+import { ButtonGroup, ButtonGroupOrientation, Button, ButtonStyleType } from '@ahrowe/ui';
+
+// Segmented toggle
+<ButtonGroup>
+  <Button styleType={ButtonStyleType.Default}>Day</Button>
+  <Button styleType={ButtonStyleType.Default}>Week</Button>
+  <Button styleType={ButtonStyleType.Default}>Month</Button>
+</ButtonGroup>
+
+// Icon toolbar
+<ButtonGroup>
+  <Button styleType={ButtonStyleType.Default} icon={faBold} aria-label="Bold" />
+  <Button styleType={ButtonStyleType.Default} icon={faItalic} aria-label="Italic" />
+  <Button styleType={ButtonStyleType.Default} icon={faUnderline} aria-label="Underline" />
+</ButtonGroup>
+
+// Vertical
+<ButtonGroup orientation={ButtonGroupOrientation.Vertical}>
+  <Button styleType={ButtonStyleType.Default}>Bold</Button>
+  <Button styleType={ButtonStyleType.Default}>Italic</Button>
+  <Button styleType={ButtonStyleType.Default}>Underline</Button>
+</ButtonGroup>
+
+// With a separator — filled styles (Primary/Delete) have no border of their own to merge,
+// so a vertical Divider gives adjacent buttons a visible seam instead of blending together
+import { Divider, DividerOrientation } from '@ahrowe/ui';
+
+<ButtonGroup>
+  <Button styleType={ButtonStyleType.Primary}>Save</Button>
+  <Divider orientation={DividerOrientation.Vertical} />
+  <Button styleType={ButtonStyleType.Primary}>Save & new</Button>
+</ButtonGroup>
+
+// Nested groups — a toolbar made of two self-contained sub-groups, spaced apart rather
+// than merged into one continuous strip
+<ButtonGroup>
+  <ButtonGroup>
+    <Button styleType={ButtonStyleType.Default} icon={faBold} aria-label="Bold" />
+    <Button styleType={ButtonStyleType.Default} icon={faItalic} aria-label="Italic" />
+    <Button styleType={ButtonStyleType.Default} icon={faUnderline} aria-label="Underline" />
+  </ButtonGroup>
+  <ButtonGroup>
+    <Button styleType={ButtonStyleType.Default} icon={faAlignLeft} aria-label="Align left" />
+    <Button styleType={ButtonStyleType.Default} icon={faAlignCenter} aria-label="Align center" />
+    <Button styleType={ButtonStyleType.Default} icon={faAlignRight} aria-label="Align right" />
+  </ButtonGroup>
+</ButtonGroup>
+
+// With an Input — a search bar. Input's visible border lives on its own container/fieldset
+// elements, not its root, so (like SplitButton) the side touching the button needs a manual
+// corner override via Input's own slots rather than ButtonGroup's automatic ones
+import { Input } from '@ahrowe/ui';
+
+const groupedInputStyle = { borderTopRightRadius: 0, borderBottomRightRadius: 0 };
+
+<ButtonGroup>
+  <Input
+    placeholder="Search…"
+    useMatLabelStyle={false}
+    value={search}
+    onChange={setSearch}
+    styles={{ container: groupedInputStyle, fieldset: groupedInputStyle }}
+  />
+  <Button styleType={ButtonStyleType.Primary} icon={faMagnifyingGlass} aria-label="Search" />
+</ButtonGroup>
+```
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | The buttons (or button-like elements) to join, in order |
+| `orientation` | `ButtonGroupOrientation` | Layout direction (default `Horizontal`) |
+
+**How it works:** the first and last children keep rounded outer corners; every child in between is flattened on both sides. Adjacent borders are collapsed with a `-1px` margin so two 1px borders don't stack into a visible double line, and whichever child is hovered/focused gets a `z-index` bump so its border/focus ring isn't clipped by its neighbors.
+
+**Separators:** any child with `role="separator"` (what `Divider` sets) is excluded from that border-collapsing margin, on both sides — it stays fully visible between its neighbors instead of being partially hidden under one of them. Use a vertical `Divider` (see [Divider.md](Divider.md)) between two buttons when their style has no visible border of its own to merge (`Primary`, `Delete`), so there's still a clear seam between them.
+
+**Note:** the corner-flattening rules key off DOM position (`:first-child`/`:last-child`), so they work for direct `Button` children out of the box. A child that renders as a wrapper around its own button (e.g. a component that portals its real content elsewhere) won't get the flattening automatically. `SplitButton` is exactly that case (its second child is a `FloatingMenu`-wrapped button), which is why it sets its own corner overrides directly rather than relying on `ButtonGroup`'s automatic ones. See [SplitButton.md](SplitButton.md).
+
+**Slots:** none — `ButtonGroup` has no named inner elements, only `className`/`style` on the root.

package/docs/CLAUDE.md

@@ -103,6 +103,7 @@ Slot keys per component are documented in each component's doc file below.
 @BodyEnd.md
 @Breadcrumb.md
 @Button.md
+@ButtonGroup.md
 @Card.md
 @Carousel.md
 @Checkbox.md
@@ -145,6 +146,7 @@ Slot keys per component are documented in each component's doc file below.
 @SectionHeader.md
 @Skeleton.md
 @Slider.md
+@SplitButton.md
 @Stepper.md
 @Sticky.md
 @Switch.md

package/docs/Divider.md

@@ -1,13 +1,15 @@
 # Divider
 
-**When to use:** A horizontal rule that fills the width of its parent — separating sections of content. Optionally label it with text (e.g. "OR", a date, a section name); the line splits around the text, leaving a gap for it.
+**When to use:** A rule that separates sections of content — horizontal by default, filling the width of its parent. Optionally label it with text (e.g. "OR", a date, a section name); the line splits around the text, leaving a gap for it. Set `orientation` to `Vertical` for a vertical line filling the height of its parent instead, e.g. as a separator between two buttons in a `ButtonGroup`.
 
-**Import:** `import { Divider, DividerTextPosition } from '@ahrowe/ui'`
+**Import:** `import { Divider, DividerTextPosition, DividerOrientation } from '@ahrowe/ui'`
 
 **Text position:** `DividerTextPosition.Left` | `DividerTextPosition.Center` (default) | `DividerTextPosition.Right`
 
+**Orientation:** `DividerOrientation.Horizontal` (default) | `DividerOrientation.Vertical`
+
 ```tsx
-import { Divider, DividerTextPosition } from '@ahrowe/ui';
+import { Divider, DividerTextPosition, DividerOrientation } from '@ahrowe/ui';
 
 // Plain line
 <Divider />
@@ -20,6 +22,13 @@ import { Divider, DividerTextPosition } from '@ahrowe/ui';
 
 // Text near the right edge
 <Divider text="March 2026" textPosition={DividerTextPosition.Right} />
+
+// Vertical — fills the height of its (flex/grid) parent, e.g. between two buttons
+<ButtonGroup>
+  <Button>Save</Button>
+  <Divider orientation={DividerOrientation.Vertical} />
+  <Button>Save & new</Button>
+</ButtonGroup>
 ```
 
 **Key props:**
@@ -28,6 +37,9 @@ import { Divider, DividerTextPosition } from '@ahrowe/ui';
 |------|------|-------------|
 | `text` | `ReactNode` | Text (or any node) rendered on the line. Omit for a plain full-width line |
 | `textPosition` | `DividerTextPosition` | Where `text` sits along the line (default `Center`) |
+| `orientation` | `DividerOrientation` | `Horizontal` (default, fills width) or `Vertical` (fills height) |
 | `className` / `style` | | Root element |
 
+**Vertical orientation:** stretches to fill the height of a flex or grid parent (`align-self: stretch`), the same way `Button`s in a `ButtonGroup` do. Outside a flex/grid context, give it an explicit height via `style`, since a vertical line has no natural height of its own the way a horizontal one has a natural width (`100%` of its block-level parent).
+
 **Slots:** `root` `line` (the line segment(s) either side of `text`) `content` (the `text` wrapper)

package/docs/FloatingMenu.md

@@ -29,7 +29,9 @@ import { FloatingMenu, Align } from '@ahrowe/ui';
   <ActionIcon icon={faEllipsis} />
 </FloatingMenu>
 
-// Keep open when clicking inside content
+// Keep open through several interactions with content — a column-visibility toggle where
+// checking one box shouldn't close the whole menu — or when re-clicking the trigger itself
+// (e.g. DatePicker re-clicking its own input) shouldn't close it either
 <FloatingMenu dontCloseOnChildClick content={<Form />}>
   <button>Open form</button>
 </FloatingMenu>
@@ -46,8 +48,10 @@ import { FloatingMenu, Align } from '@ahrowe/ui';
 | `align` | `Align` | Popover alignment relative to trigger |
 | `isOpen` | `boolean` | Controlled open state |
 | `onOpenChange` | `(isOpen: boolean) => void` | Open state change callback |
-| `dontCloseOnChildClick` | `boolean` | Prevent close when clicking inside content |
+| `dontCloseOnChildClick` | `boolean` | Keep the menu open when its own content is clicked, and when the trigger itself is re-clicked while already open (default `false`) |
 
 **Slots:** `root` `trigger` `menu` `menuContainer`
 
-**Nested overlays in `content`:** a click anywhere inside `content` never closes the menu on its own — including inside a nested overlay that renders through its own portal (e.g. a `Dropdown` or another `FloatingMenu` used inside `content`), even though that overlay's DOM lives outside `content`'s own subtree. Closing on a selection is opt-in: have the handler that reacts to the selection call `onOpenChange(false)` (or your own state setter) explicitly, the way a calendar's day-selection handler would, while a nested month/year `Dropdown` inside the same menu is left alone.
+**Closing behaviour:** by default, clicking anywhere in `content` closes the menu — including inside a nested overlay that renders through its own portal (e.g. a `Dropdown` or another `FloatingMenu` used inside `content`), even though that overlay's DOM lives outside `content`'s own subtree. Re-clicking the trigger while open is a clean toggle: it closes the menu (unless `dontCloseOnChildClick` is set, in which case it's a no-op — the trigger owns its own open/close entirely, so it never fights with an outside-click check). Set `dontCloseOnChildClick` when `content` needs several interactions before the user is done (a multi-checkbox toggle, a color picker's slider, a calendar) — the consumer is then responsible for closing explicitly, e.g. calling `onOpenChange(false)` from the handler that reacts to a final selection.
+
+**Keyboard:** the menu is portaled to the end of the DOM, so Tab can't reach it in visual order on its own. When `content` has real focusable elements, Escape closes the menu and returns focus to the trigger; Tab past the last focusable element (or Shift+Tab past the first) closes the menu and continues focus as if it sat right after the trigger. This doesn't include auto-focusing the first element on open — content ranges from menus to live controls (e.g. `ColorPicker`'s hue slider), where grabbing focus on open would let a stray arrow-key press change a value the user never touched. A consumer that wants that (like `SplitButton` focusing its first enabled action) implements it itself.

package/docs/Input.md

@@ -17,14 +17,13 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 // Password
 <Input label="Password" type={InputType.Password} value={pw} onChange={setPw} />
 
-// Search with clear button
+// Search — clear button appears automatically once there's a value, and clears itself;
+// onClearClicked is optional, only needed to react to the clear beyond the value itself
 <Input
   type={InputType.Search}
   label="Search"
   value={query}
   onChange={setQuery}
-  showCancel
-  onClearClicked={() => setQuery('')}
 />
 
 // Multiline (textarea)
@@ -38,10 +37,34 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 
 // Row layout
 <Input label="Name" isRow value={name} onChange={setName} />
+
+// Custom icon on the left instead of the default right — the field's padding, the material
+// label (resting and floated), and the native placeholder all shift out of its way automatically
+<Input
+  label="Search"
+  icon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+  iconPosition={InputIconPosition.Left}
+  value={query}
+  onChange={setQuery}
+/>
+
+// A decorative type icon (Email/Phone/Edit) on the left, no custom icon needed
+<Input label="Email" type={InputType.Email} iconPosition={InputIconPosition.Left} />
+
+// A custom icon replaces Email's built-in envelope outright — there's nothing functional to lose
+<Input label="Email" type={InputType.Email} icon={<FontAwesomeIcon icon={faAt} />} />
 ```
 
 **InputType enum:** `Edit` | `Phone` | `Email` | `Iban` | `Date` | `HasNoIcon` | `Search` | `Password`
 
+**InputIconPosition enum:** `Left` | `Right` — which side the input's icon renders on, whichever icon is currently showing (built-in type icon or custom `icon`). Defaults to `Left` for `Email`/`Phone`/`Search` once `useMatLabelStyle` is off (their historical placement), `Right` otherwise; pass it explicitly to move any type's icon to either side regardless of `useMatLabelStyle`.
+
+**Custom icon vs. built-in type icon:** passing `icon` alongside a decorative type (`Edit`, `Phone`, `Email`) replaces that type's built-in icon outright, since there's nothing functional attached to it to lose. `Search` and `Password` ignore `icon` — their icon is functional (clear button, show/hide toggle), not decorative, so it always renders regardless of whether `icon` is set.
+
+**Search clear icon:** `InputType.Search` shows a magnifying glass that animates into a clear (×) button once the field has a value, rather than the browser's own native search-cancel decoration, which is suppressed so it doesn't clash with the theme.
+
+**Mobile keyboard layout:** `Email`, `Phone`, and `Search` each set the matching `inputMode` (`email` / `tel` / `search`), so mobile browsers show the right on-screen keyboard — an `@`-and-`.com` layout for email, a numeric dial pad for phone, a "Go"/search action key for search. `Email`'s native `type` is deliberately left as `text` rather than `email`, to avoid the browser's own "please match the requested format" validation UI fighting the `formValidator`-driven error tooltip this component already shows — `inputMode="email"` alone is enough to get the correct keyboard. Pass `inputMode` directly to override the computed default for any other case.
+
 **Key props:**
 
 | Prop | Type | Description |
@@ -58,12 +81,13 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 | `rows` | `number` | Textarea row count |
 | `autoResize` | `boolean` | Textarea grows with content |
 | `suffix` | `string \| ReactNode` | Right-side suffix |
-| `icon` | `ReactElement` | Custom icon element, positioned absolute on the right (the field is padded to match); clickable via `onIconClick` |
+| `icon` | `ReactElement` | Custom icon, positioned absolute on the side set by `iconPosition`; clickable via `onIconClick`. Replaces the built-in icon for `Edit`/`Phone`/`Email`; ignored for `Search`/`Password` (see below) |
+| `iconPosition` | `InputIconPosition` | Side the input's icon renders on — built-in or custom, whichever is showing (see enum above for the default). On the left, the material label (resting and floated) and the fieldset notch shift right to clear it too |
 | `onIconClick` | `() => void` | Click handler for the custom `icon` |
 | `upperRightLabel` | `string \| ReactNode` | Small label above right |
-| `showCancel` | `boolean` | Show clear icon when focused |
+| `showCancel` | `boolean` | Show clear icon when focused (ignored for `InputType.Search`, which always shows it once there's a value — see below) |
 | `alwaysShowCancel` | `boolean` | Always show clear icon |
-| `onClearClicked` | `() => void` | Clear button handler |
+| `onClearClicked` | `() => void` | Called after the clear button clears the value. Optional — clicking clear always empties the field itself, whether or not this is set |
 | `isRow` | `boolean` | Horizontal layout |
 | `labelInBorder` | `boolean` | Label inside fieldset border |
 | `alwaysFloatLabel` | `boolean` | Keep the material label floated in the border notch even when empty and unfocused, so an empty field reads as blank instead of showing the label as if it were a value. Only applies with `useMatLabelStyle` (default) |

package/docs/NumberInput.md

@@ -55,3 +55,5 @@ const priceValidator = new FormValidator<number | undefined>(undefined, [Validat
 | `readOnly` | `boolean` | Make the field read-only — typing is blocked, and the arrow steppers (`showArrows`) and ↑/↓ keys are disabled. Default: `false` |
 | `placeholder` | `string` | |
 | `error` | `string` | Manual error message |
+
+**Mobile keyboard layout:** shows the numeric on-screen keyboard automatically (`inputMode="numeric"` when `decimalScale={0}`, `"decimal"` otherwise, so a decimal separator key is available whenever fractional values are allowed). Pass `inputMode` directly to override.

package/docs/SearchInput.md

@@ -33,6 +33,12 @@ import { SearchInput } from '@ahrowe/ui';
 />
 ```
 
+**Theming:** override theme-wide via `ThemeProvider`'s `variables`; no built-in fallback, so it's unset in the default theme until set:
+
+| Variable | Falls back to |
+|----------|---------------|
+| `--search-input-color` | *(none — unset by default)* |
+
 **Key props:**
 
 | Prop | Type | Description |

package/docs/SplitButton.md

@@ -0,0 +1,79 @@
+# SplitButton
+
+**When to use:** A primary action button with a small attached dropdown for closely related secondary actions, e.g. "Save ▾" opening "Save as draft" / "Save and close". Built from `Button`, `ButtonGroup`, and `FloatingMenu` internally, rather than a mechanism of its own.
+
+**Import:** `import { SplitButton } from '@ahrowe/ui'`
+**Types:** `import type { SplitButtonAction, SplitButtonProps } from '@ahrowe/ui'`
+
+**Requires:** `<div id="bodyEnd"></div>` in your HTML (the actions menu renders via `FloatingMenu`, which portals).
+
+```tsx
+import { SplitButton } from '@ahrowe/ui';
+import type { SplitButtonAction } from '@ahrowe/ui';
+
+const actions: SplitButtonAction[] = [
+  { id: 'draft', label: 'Save as draft', onClick: () => saveDraft() },
+  { id: 'close', label: 'Save and close', onClick: () => saveAndClose() },
+];
+
+<SplitButton actions={actions} onClick={() => save()}>
+  Save
+</SplitButton>
+
+// Destructive style, matching Button's own style variants
+import { ButtonStyleType } from '@ahrowe/ui';
+
+<SplitButton
+  actions={[{ id: 'archive', label: 'Archive instead', onClick: () => archive() }]}
+  styleType={ButtonStyleType.Delete}
+  onClick={() => deleteItem()}
+>
+  Delete
+</SplitButton>
+
+// A disabled action within the menu
+<SplitButton
+  actions={[
+    { id: 'draft', label: 'Save as draft', onClick: () => saveDraft() },
+    { id: 'archive', label: 'Archive instead', onClick: () => archive(), disabled: true },
+  ]}
+  onClick={() => save()}
+>
+  Save
+</SplitButton>
+
+// Loading / disabled — both the primary and trigger button reflect the state
+<SplitButton actions={actions} onClick={() => save()} isLoading>
+  Save
+</SplitButton>
+<SplitButton actions={actions} onClick={() => save()} disabled>
+  Save
+</SplitButton>
+```
+
+**SplitButtonAction:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | `string` | Stable key for the action |
+| `label` | `ReactNode` | Text shown in the dropdown |
+| `onClick` | `() => void` | Called when the action is picked; the dropdown closes automatically afterward |
+| `disabled` | `boolean` | Dims the action and prevents it from firing |
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | The primary button's label |
+| `onClick` | `(event) => void \| Promise<void>` | The primary button's click handler |
+| `actions` | `SplitButtonAction[]` | Secondary actions shown in the dropdown |
+| `styleType` | `ButtonStyleType` | Visual variant, shared by both the primary and trigger button (default `Primary`) |
+| `size` | `ButtonSize` | Size variant, shared by both buttons |
+| `disabled` | `boolean` | Disables both the primary and trigger button |
+| `isLoading` | `boolean` | Shows a spinner on the primary button (same as `Button`'s own `isLoading`) |
+
+**`isLoading` vs. `disabled`:** `isLoading` only affects the primary button — the trigger and its menu stay usable while the primary action is in flight, e.g. to cancel via a menu action. To lock the whole control during the async action instead, pass both: `isLoading={isSaving} disabled={isSaving}`. Setting `disabled` also closes the menu if it happened to be open already, and blocks any in-flight click on a menu action.
+
+**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ SplitButton: { styleType: ButtonStyleType.Default } }}`. See [ConfigProvider.md](ConfigProvider.md).
+
+**Slots:** `root` `primaryButton` `triggerButton` `menu` `menuItem`

package/docs/VirtualList.md

@@ -58,7 +58,7 @@ const columns: VirtualListColumn<User>[] = [
 <VirtualList
   items={items}
   columns={columns}
-  onLoadMore={async () => { await fetchNextPage(); }}
+  onLoadMore={hasMore ? async () => { await fetchNextPage(); } : undefined}
   isLoading={isInitialLoading}
   height="100%"
 />
@@ -123,6 +123,7 @@ const columns: VirtualListColumn<User>[] = [
 | `rowGap` | `number \| string` | Gap between rows — number = px; string = any CSS length (`'1em'`, `'var(--spacing-s)'`). Default `0` |
 | `rowPadding` | `number \| string` | Padding on every row — number = px; string = any CSS padding value (`'8px 12px'`, `'var(--spacing-s)'`) |
 | `showDivider` | `boolean` | Row divider lines (default `true`) |
+| `rowHover` | `boolean` | Highlight rows on hover (default `true`). Set `false` when the row content brings its own hover affordance (e.g. a `Card` per row) so the two don't fight |
 | `getItemKey` | `(item, index) => string \| number` | Stable key per item |
 | `selectedKey` | `string \| number \| null` | Controlled single-select key |
 | `onRowClick` | `(item, index) => void` | Row click handler |
@@ -132,10 +133,13 @@ const columns: VirtualListColumn<User>[] = [
 | `showColumnToggle` | `boolean` | Show gear button to show/hide columns (default `true` when columns present) |
 | `visibleColumnKeys` | `string[]` | Controlled visible column keys |
 | `onVisibleColumnsChange` | `(keys) => void` | Column visibility change callback |
-| `onLoadMore` | `() => Promise<void>` | Triggered near the bottom — append items in the handler |
+| `persistColumnsKey` | `string` | Save column visibility to `localStorage` under this key and restore it on the next mount of a list using the same key. Uncontrolled mode only (ignored alongside `visibleColumnKeys`); columns added since the settings were saved fall back to their `defaultHidden` |
+| `onLoadMore` | `() => Promise<void>` | Triggered near the bottom, and repeatedly while the rows don't fill the viewport — append items in the handler |
 | `loadMoreThreshold` | `number` | Distance from bottom that triggers `onLoadMore` (default `100`) |
 | `isLoading` | `boolean` | Replaces list body with a full-height spinner |
 
+Drag-and-drop reordering adds `reorderable`, `treeReorder`, `dragHandle`, and their callbacks — see **Row reordering** below.
+
 **Imperative handle (`ref`):**
 
 Pass a `ref` typed as `VirtualListHandle` to control the list imperatively:
@@ -160,6 +164,85 @@ listRef.current?.scrollToKey(user.id, { align: 'center' });
 | `getScrollElement` | `() => HTMLDivElement \| null` | The underlying scroll container, for advanced use |
 | `recalculateColumns` | `() => void` | Re-measure `fit` columns on the next layout. Only needed after an out-of-band content change that doesn't flow through a new `items` array or `columns` set — those re-measure automatically, as does content first appearing in a cell |
 
-**Slots:** `root` `header` `headerCell` `headerToggle` `togglePopover` `toggleItem` `body` `row` `cell` `selectCell` `loadingIndicator`
+**Row reordering:** two modes, both drag-and-drop, both mouse and touch. Set exactly one:
+
+- **`reorderable`** — flat reorder. Rows move **live** as you drag, so `onReorder` fires repeatedly and you apply each move immediately.
+- **`treeReorder`** — drop `before`, `after`, or `inside` another row. Rows do **not** move during the drag; a drop indicator is shown and `onTreeDrop` fires **once** on release.
+
+If both are set, `treeReorder` wins. In either mode, pass `getItemKey` so rows keep their measured heights across the reorder.
+
+```tsx
+// Flat: onReorder fires live, on every position change
+const [rows, setRows] = useState(initialRows);
+
+<VirtualList
+  items={rows}
+  renderRow={(row) => <div>{row.label}</div>}
+  getItemKey={(row) => row.id}
+  reorderable
+  onReorder={(from, to) => setRows((prev) => move(prev, from, to))}
+  height={400}
+/>
+```
+
+The list is always a flat array, including in tree mode. Keep the real tree in your own state, flatten the expanded nodes into `items` tagging each with its depth, and re-flatten after applying a drop:
+
+```tsx
+// Tree: onTreeDrop fires once, on release
+<VirtualList
+  items={flattenedRows}                        // each row carries its own depth
+  renderRow={(row) => (
+    <div style={{ paddingLeft: row.depth * 24 }}>
+      <span data-drag-handle>⠿</span>
+      {row.label}
+    </div>
+  )}
+  getItemKey={(row) => row.id}
+  getItemDepth={(row) => row.depth}
+  isGroup={(row) => row.hasChildren}           // only groups offer an `inside` drop
+  treeReorder
+  dragHandle
+  treeIndentPx={24}                            // match the row content's per-level padding
+  onTreeDrop={(dragKey, target) => applyDrop(dragKey, target)}
+  height={400}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `reorderable` | `boolean` | Flat drag-to-reorder. The whole row is draggable unless `dragHandle` is set |
+| `onReorder` | `(fromIndex, toIndex) => void` | Fires **live** during a flat drag, once per position change. Apply it straight away |
+| `treeReorder` | `boolean` | Tree drag-and-drop: `before` / `after` / `inside` drops instead of a flat move. Wins over `reorderable` |
+| `onTreeDrop` | `(dragKey, target: TreeDropTarget) => void` | Fires **once** on release. Never called when the target is the dragged node itself or one of its descendants |
+| `getItemDepth` | `(item, index) => number` | Each row's depth in the tree, `0` = root (default `0` for every row). Aligns the drop indicator and blocks dropping a node into its own subtree |
+| `isGroup` | `(item, index) => boolean` | Whether a row can take children, i.e. whether hovering its middle third offers an `inside` drop (default `false`, leaf) |
+| `treeIndentPx` | `number` | Px per depth level used to indent the `before`/`after` drop line so it lines up with where the dropped content starts (default `24`) |
+| `dragHandle` | `boolean` | Only elements marked `data-drag-handle` start a drag, instead of the whole row. Applies to both modes, mouse and touch |
+| `longPressDelay` | `number` | Touch only: press-and-hold duration in ms before drag mode arms, so a normal swipe still scrolls (default `400`) |
+
+**`TreeDropTarget`** (`import type { TreeDropTarget, TreeDropPosition } from '@ahrowe/ui'`):
+
+```ts
+interface TreeDropTarget {
+  key: string | number;                          // getItemKey of the row dropped on
+  position: 'before' | 'inside' | 'after';       // TreeDropPosition
+}
+```
+
+`before`/`after` place the dragged node as a sibling at the target's depth; `inside` makes it a child (only offered when `isGroup` is true for that row).
+
+**Use `dragHandle` for rows containing inputs or other interactive controls.** Without it the whole row is draggable, which swallows clicking, typing, and text selection inside those controls. Render a handle in the row yourself and mark it: `<span data-drag-handle>⠿</span>`. With `dragHandle` the grab cursor is yours to style on the handle; without it, the list puts it on the whole row.
+
+**Touch:** a press-and-hold of `longPressDelay` lifts a floating copy of the row that follows your finger, with auto-scroll near the list's top and bottom edges. A swipe before the hold completes scrolls the list as normal instead of starting a drag. With `dragHandle`, only a press that starts on the handle arms it, so the rest of the row stays tappable.
+
+**Lazy loading:** `onLoadMore` fires when the user scrolls within `loadMoreThreshold` px of the bottom, **and** repeatedly whenever the rows don't fill the list's viewport. That second trigger matters because a list shorter than its own height can't be scrolled at all, so a first batch smaller than the viewport would otherwise be the last batch ever loaded. The list keeps asking for pages until the content overflows; each row count is asked at most once, so the loop ends as soon as a call appends nothing. Gate the prop on your own "has more" flag to skip even that last probe:
+
+```tsx
+<VirtualList items={items} onLoadMore={hasMore ? loadNextPage : undefined} height={600} />
+```
+
+This needs the list to have a **bounded height** (the default `height="100%"` inside a sized parent, or an explicit `height`). With a height that grows with its content, there is no empty space to detect and only the scroll trigger applies. Nothing fires while `isLoading` is set, and only one load runs at a time.
+
+**Slots:** `root` `header` `headerCell` `headerToggle` `togglePopover` `toggleItem` `body` `row` `cell` `selectCell` `loadingIndicator` `dropIndicator` `columnChip`
 
 **In-row popovers:** Rows support inline popover content that overflows the row's bottom edge — e.g. a `Dropdown`, `InputDropdown`, `Tooltip`, or `FloatingMenu` whose list opens below its trigger. All four render their popover through a `BodyEnd` portal and track their trigger's position directly, so they always escape row/cell clipping and paint above the rows below, regardless of focus — no special CSS is needed on the row or cell for this. Cells still clip their own content by default (ellipsis / neighbour-spill guard); that's unaffected. This works in both list mode (`renderRow`) and table mode (`columns`). Stop the row's click handler from firing when interacting with the control (`onClick={(e) => e.stopPropagation()}` on the cell) if the row is also selectable.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "publishConfig": {
     "access": "public"
   },