@ahrowe/ui 0.41.2 → 0.43.0

package/dist/types/common/fab/components/fabBase/fabBase.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonStyleType } from '../../../button/button.types.js';
+import { ButtonProps, ButtonStyleType } from '../../../button/button.types.js';
 export type FabBaseSize = 'default' | 'mini';
 export interface FabBaseProps {
     children?: ReactNode;
@@ -8,5 +8,6 @@ export interface FabBaseProps {
     /** Forwarded from Fab's `button` slot. */
     style?: CSSProperties;
     styleType?: ButtonStyleType;
+    color?: ButtonProps['color'];
     onClick?: () => void;
 }

package/dist/types/common/floorPlan/floorPlan.graph.d.ts

@@ -5,6 +5,13 @@ import { PlanEdit, PlanFloor, PlanIssue, PlanNode, PlanOpening, PlanPoint, PlanW
  * reproducible.
  */
 export declare function newId(prefix: string): string;
+/**
+ * The first of `nameFor(start)`, `nameFor(start + 1)`, … that `used` does not hold.
+ *
+ * Bounded because `nameFor` is the caller's: one that ignores its number would never reach a
+ * free name. An injective one always finds one within `used.size + 1` tries.
+ */
+export declare function freshName(nameFor: (n: number) => string, start: number, used: ReadonlySet<string>): string;
 /** Test-only: makes generated ids reproducible within a single test. */
 export declare function __resetIdSeq(): void;
 declare function wallLength(floor: PlanFloor, wall: PlanWall): number;
@@ -157,9 +164,9 @@ export declare function transformPlan(floor: PlanFloor, dx: number, dy: number):
 /**
  * Multiplies every coordinate and dimension by `factor`.
  *
- * The one place a scale factor belongs: converting a unitless legacy plan into the
- * module's millimetre invariant, once, at the import boundary. The caller picks the
- * factor, because nothing in the old data says what it should be.
+ * The one place a scale factor belongs: converting geometry drawn in another unit into
+ * the module's millimetre invariant, once, where it enters. The caller picks the factor,
+ * because nothing in the data says what it should be.
  */
 export declare function scalePlan(floor: PlanFloor, factor: number): PlanFloor;
 export declare function addOpening(floor: PlanFloor, opening: Omit<PlanOpening, 'id'>): PlanEdit<{

package/dist/types/common/floorPlan/floorPlan.plan.d.ts

@@ -34,6 +34,11 @@ export declare function floorIndex(plan: FloorPlan, floorId: string): number;
 export declare function floorBelow(plan: FloorPlan, floorId: string): PlanFloor | null;
 export interface AddFloorOptions {
     label?: string;
+    /**
+     * Names the floor when `label` is not given. `n` is the floor count plus one, moved past
+     * any number whose name is taken. Default `` (n) => `Floor ${n}` ``.
+     */
+    nameFor?: (n: number) => string;
     /** Millimetres. Defaults to the storey height of the floor it is added above. */
     height?: number;
     /** Where to put it. Defaults to directly above `aboveFloorId`, else on top. */

package/dist/types/common/floorPlan/floorPlan.rooms.d.ts

@@ -22,8 +22,12 @@ export declare function derivePlan(floor: PlanFloor): PlanDerivation;
 /** Test-only: makes the room sequence counter reproducible. */
 export declare function __resetRoomSeq(): void;
 export interface CommitDerivationOptions {
-    /** Names new rooms. Receives the 1-based index among rooms created in this call. */
-    nameFor?: (index: number, face: DerivedRoom) => string;
+    /**
+     * Names a new room. `n` is the floor's room count plus one, moved past any number whose
+     * name is taken, so `` (n) => `Raum ${n}` `` numbers rooms the way the default does.
+     * Default `` (n) => `Room ${n}` ``.
+     */
+    nameFor?: (n: number, face: DerivedRoom) => string;
 }
 /**
  * Mints a `PlanRoom` for every face that matched nothing.

package/dist/types/common/floorPlan/floorPlan.snap.d.ts

@@ -35,7 +35,7 @@ export interface SnapOptions {
 export declare const DEFAULT_SNAP_OPTIONS: SnapOptions;
 export interface SnapContext {
     floor: PlanFloor;
-    /** World units per screen pixel at the current zoom. See `screenScale`. */
+    /** World units per screen pixel at the current zoom: `1 / view.zoom`. */
     pxToWorld: number;
     /** The anchored point. Required for angle lock; also enables the length readout. */
     origin?: PlanPoint;
@@ -70,8 +70,6 @@ export interface SnapResult {
      */
     angleRelativeTo?: 'world' | 'reference';
 }
-/** World units per screen pixel, from the element's current transform. */
-export declare function screenScale(svg: SVGSVGElement): number;
 /**
  * Client (screen) coordinates to world coordinates. Pure conversion, no snapping.
  *

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

@@ -18,7 +18,7 @@ export { HIT_PX, HIT_PX_COARSE, hitTest, selectionsEqual, worldTolerances } from
 export type { HitTestOptions, HitTolerances } from './floorPlan.hit.js';
 export { DEFAULT_WALL_ATTRS, addOpening, addRect, addWall, cleanupPlan, detachWall, dissolveNode, mergeNodes, moveNode, removeOpening, removeWall, scalePlan, splitWall, transformPlan, updateOpening, validatePlan, wallLength, weldShortWalls, } from './floorPlan.graph.js';
 export type { DetachWallResult, DissolveNodeOptions, ResolveNodeResult, SplitWallResult, WallAttrs, } from './floorPlan.graph.js';
-export { DEFAULT_SNAP_OPTIONS, SnapKind, clientToWorld, resolveSnap, screenScale } from './floorPlan.snap.js';
+export { DEFAULT_SNAP_OPTIONS, SnapKind, clientToWorld, resolveSnap } from './floorPlan.snap.js';
 export type { SnapContext, SnapGuide, SnapOptions, SnapResult } from './floorPlan.snap.js';
 export { buildWallPaths, openingGeometry, wallCentrelineSpans } from './floorPlan.path.js';
 export type { BuildWallPathsOptions, WallCapLine, WallCapReason, WallPathGroup, WallPathResult, } from './floorPlan.path.js';
@@ -26,5 +26,3 @@ export { PLAN_FORMAT_VERSION, planFromJson, planToJson } from './floorPlan.json.
 export type { PlanParseResult } from './floorPlan.json.js';
 export { buildPlanMesh } from './floorPlan.mesh.js';
 export type { BuildPlanMeshOptions, PlanMesh, PlanMeshGroup, PlanMeshPart } from './floorPlan.mesh.js';
-export { planFromLegacySvg } from './legacySvg.js';
-export type { LegacyImportOptions } from './legacySvg.js';

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

@@ -33,7 +33,7 @@ export interface PlanCanvasProps {
         area: number;
         faceId: string;
     }) => ReactNode;
-    /** Accessible name for a room. */
+    /** Accessible name for an interactive room. RoomViewer supplies the default, from its labels. */
     getRoomLabel?: (room: PlanRoom | null, context: {
         area: number;
     }) => string;

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

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
 import { ProgressBarProps } from './progressBar.types.js';
-export declare function getContrastColor(hexColor: string): string;
 declare function ProgressBar({ className, total, progress, style, classNames, styles: slotStyles, ...rest }: ProgressBarProps): ReactElement;
 export default ProgressBar;

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

@@ -1,8 +1,10 @@
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export interface Progress {
     amount: number;
     label?: string;
-    color?: string;
+    /** A `ThemeColor` or any CSS colour; its label is black or white, whichever reads. Default `--primary-color`. */
+    color?: ColorValue;
     class?: string;
 }
 export type ProgressBarSlots = 'root' | 'fill' | 'label';

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

@@ -27,7 +27,10 @@ export interface RoomDrawerChangeMeta {
     /** Ids of whatever the change touched, for syncing an external selection. */
     targetIds: string[];
 }
-/** Every string the drawer's own chrome renders, for localisation. */
+/**
+ * Every string the drawer produces of its own, for localisation: its chrome, and the names it
+ * gives the rooms and floors it creates, which are stored in the plan.
+ */
 export interface RoomDrawerLabels {
     /** The toolbar, read out by screen readers. */
     tools?: string;
@@ -54,12 +57,21 @@ export interface RoomDrawerLabels {
     floorHeight?: string;
     moveFloorUp?: string;
     moveFloorDown?: string;
+    /** Name of a new room. `n` counts the floor's rooms, skipping names already taken. */
+    newRoomName?: (n: number) => string;
+    /** Name of a floor added with the `+` button. `n` counts the floors, skipping names already taken. */
+    newFloorName?: (n: number) => string;
+    /** Name of a copied floor, from the name of the floor it copies. */
+    copiedFloorName?: (name: string) => string;
+    /** Name of the one floor an empty plan starts with, uncontrolled or after `clear()`. */
+    initialFloorName?: string;
     /** The inspector's noun for a floor, shown when nothing is selected. */
     selectedFloor?: string;
     /** Shown in the hint line when an opened file could not be read at all. */
     importFailed?: string;
     snap?: string;
-    angleLock?: string;
+    /** The angle lock toggle, given `constrainAngle`. */
+    angleLock?: (angle: number) => string;
     grid?: string;
     zoomIn?: string;
     zoomOut?: string;
@@ -69,22 +81,27 @@ export interface RoomDrawerLabels {
     thickness?: string;
     width?: string;
     sill?: string;
-    head?: string;
     deleteSelection?: string;
-    /** Shown when several things are selected. `{count}` is replaced with the number. */
-    selectedCount?: string;
+    /** What the inspector calls several things selected at once. */
+    selectedCount?: (count: number) => string;
     /** What the inspector calls the current selection. */
-    selectedNothing?: string;
     selectedRoom?: string;
     selectedWall?: string;
     selectedCorner?: string;
-    /** Overrides the opening's own kind, which is used by default. */
-    selectedOpening?: string;
+    selectedDoor?: string;
+    selectedWindow?: string;
+    selectedArchway?: string;
+    selectedGap?: string;
+    /** Hint for the select tool with `multiSelect` on. */
     hintSelect?: string;
+    /** Hint for the select tool with `multiSelect` off. */
+    hintSelectSingle?: string;
     hintWall?: string;
     hintRect?: string;
     hintMeasure?: string;
     hintOpening?: string;
+    /** A drawing angle measured from the previous wall, given the formatted angle. */
+    relativeAngle?: (angle: string) => string;
 }
 /** Every icon in the chrome is overridable. */
 export interface RoomDrawerIcons {
@@ -259,6 +276,10 @@ export interface RoomDrawerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChan
     showMeasurements?: boolean;
     formatLength?: (lengthMm: number) => string;
     formatArea?: (areaMm2: number) => string;
+    /** A drawing angle, in degrees from -180 to 180. */
+    formatAngle?: (degrees: number) => string;
+    /** The zoom readout. `zoom` is screen pixels per millimetre, so `1` reads as 100%. */
+    formatZoom?: (zoom: number) => string;
     showToolbar?: boolean;
     showInspector?: boolean;
     showHint?: boolean;

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

@@ -10,8 +10,10 @@ export interface RoomViewerLabels {
     zoomOut?: string;
     fit?: string;
     empty?: string;
-    /** Announced when a room is selected. `{name}` and `{area}` are replaced. */
-    selectedRoom?: string;
+    /** Stands in for the name of a room that has none. */
+    unnamedRoom?: string;
+    /** Announced when a room is selected, given its name and its formatted area. */
+    selectedRoom?: (name: string, area: string) => string;
     /** Announced when the selection is cleared. */
     noRoomSelected?: string;
 }

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

@@ -1,7 +1,7 @@
 import { PopoverAlign } from '../popover/popover.types.js';
 import { CSSProperties, ReactNode } from 'react';
 import { IconContent } from '../types/icon.types.js';
-import { ButtonStyleType, ButtonSize } from '../button/button.types.js';
+import { ButtonProps, ButtonStyleType, ButtonSize } from '../button/button.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
 export interface SplitButtonAction {
     id: string;
@@ -20,7 +20,10 @@ export interface SplitButtonProps extends HtmlProps {
     children?: ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
     actions: SplitButtonAction[];
+    /** Default `Filled`. */
     styleType?: ButtonStyleType;
+    /** A `ThemeColor` or any CSS colour, shared by both buttons (default `Primary`). */
+    color?: ButtonProps['color'];
     size?: ButtonSize;
     disabled?: boolean;
     isLoading?: boolean;

package/dist/types/common/styles/tone.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { ColorValue } from '../themeProvider/color.types.js';
+/** The class, and for a colour of the caller's own the inline style, that set the --tone properties. */
+export declare function toneProps(color: ColorValue): {
+    className: string;
+    style?: CSSProperties;
+};
+/** A colour as a CSS value, for a component that paints it itself rather than through --tone. */
+export declare function cssColor(color: ColorValue): string;
+/** Warns in development about a value that can never be a colour. A var() passes: it only resolves on screen. */
+export declare function useToneCheck(component: string, colors: (ColorValue | undefined)[]): void;

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

@@ -0,0 +1,20 @@
+/** The theme's named colours, shared by every component that takes a `color`. */
+export declare enum ThemeColor {
+    /** `--primary-color`. */
+    Primary = "primary",
+    /** The surrounding text colour, with `--border-color` for an outline. */
+    Neutral = "neutral",
+    /** `--success-color`. */
+    Success = "success",
+    /** `--info-color`. */
+    Info = "info",
+    /** `--warn-color`. */
+    Warn = "warn",
+    /** `--error-color`. */
+    Error = "error"
+}
+/**
+ * A `ThemeColor`, or any CSS colour such as `'var(--brand)'` or `'#7c3aed'`.
+ * `string & {}` rather than `string`, which would swallow the enum into one plain string type.
+ */
+export type ColorValue = ThemeColor | (string & {});

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

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

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

@@ -106,15 +106,10 @@ export interface ThemeVariables {
      * the device's own safe-area inset where that is larger. Modal sets --modal-padding on its own
      * panel, so this does not reach a Modal sheet. */
     '--sheet-safe-padding'?: string;
-    /** Default-style button background. Falls back to transparent when unset. */
-    '--button-default-background'?: string;
-    /** Default-style button text colour. Falls back to --text-color when unset. */
-    '--button-default-color'?: string;
-    /** Default-style button border (full `border` shorthand, e.g. `1px solid var(--border-color)`). Falls back to a transparent 1px border when unset. */
-    '--button-default-border'?: string;
     '--card-shadow'?: string;
     '--background-card-elevated'?: string;
     '--background-card-outlined'?: string;
+    /** Surface of a Neutral Light card, named after the old Filled style. Unset, it is the text-colour tint every Light uses; defaultTheme sets --background-accent. */
     '--background-card-filled'?: string;
     /** Slider track (unfilled) colour. Falls back to --background-accent-light. */
     '--slider-track-color'?: string;
@@ -214,6 +209,8 @@ export interface ThemeVariables {
     '--calendar-now-color'?: string;
     /** Corner radius of an event. Falls back to 6px. */
     '--calendar-event-radius'?: string;
+    /** The hours outside `workingHours` in the week and day views. Falls back to --background-accent. */
+    '--calendar-off-hours-color'?: string;
     /** Page button size. Falls back to 36px. */
     '--pagination-size'?: string;
     /** Gap between page buttons. Falls back to 4px. */

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 /** Layout of entries relative to the connecting line. */
 export declare enum TimelineAlignment {
     /** Line and markers on the left, content to the right (the default). */
@@ -10,14 +11,6 @@ export declare enum TimelineAlignment {
     /** Line down the center, entries alternating left/right. */
     Alternate = "alternate"
 }
-/** Semantic colour for an entry's marker, matching the theme's status colours. */
-export declare enum TimelineItemStatus {
-    Default = "default",
-    Primary = "primary",
-    Success = "success",
-    Warn = "warn",
-    Error = "error"
-}
 export type TimelineSlots = 'root' | 'item' | 'marker' | 'dot' | 'connector' | 'content' | 'title' | 'description' | 'timestamp';
 export interface TimelineItem {
     /** Stable identity for the entry, used as its React key. Falls back to its array index when omitted; pass one whenever `items` can be reordered or have entries prepended (e.g. a live "newest first" audit log), so React doesn't misattribute row state across the shift. */
@@ -30,8 +23,8 @@ export interface TimelineItem {
     timestamp?: React.ReactNode;
     /** Icon shown in the marker instead of a plain dot — a FontAwesome icon or any node. */
     icon?: IconContent;
-    /** Semantic marker colour (default `Default`). */
-    status?: TimelineItemStatus;
+    /** The marker's colour: a `ThemeColor` or any CSS colour. Unset, it is `--timeline-dot-color`. */
+    color?: ColorValue;
     /** Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar. */
     content?: React.ReactNode;
     /** Makes the whole entry clickable (e.g. to open the full record), rendering it as an accessible button. */

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

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

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ToastType = 'default' | 'info' | 'success' | 'error' | 'warn';
 export type ToastSlots = 'root' | 'icon' | 'content' | 'closeButton' | 'progressBar';
 /** Text Toast renders of its own, for translating it. */
 export interface ToastLabels {
@@ -25,7 +25,11 @@ export interface ToastContextConfig {
     labels?: ToastLabels;
 }
 export interface ToastOptions extends Omit<ToastContextConfig, 'allowStacking'> {
-    type?: ToastType;
+    /**
+     * A `ThemeColor` (default `Primary`) or any CSS colour. A ThemeColor also picks the icon; any
+     * other colour shows a bell.
+     */
+    color?: ColorValue;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }
@@ -44,7 +48,7 @@ export interface ResolvedToastOptions {
     showRemainingTime: boolean;
     showCloseButton: boolean;
     pauseOnHover: boolean;
-    type: ToastType;
+    color: ColorValue;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }

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

@@ -2,6 +2,6 @@ import { IconContent } from './icon.types.js';
 /** A single icon-triggered action, rendered as an `ActionIcon` */
 export interface IconAction {
     title?: string;
-    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     icon: IconContent;
 }

package/dist/types/common/utils/dismissClick.d.ts

@@ -0,0 +1,4 @@
+/** Records that the release just dispatched closed an overlay, which marks the click it raises. */
+export declare function markDismiss(): void;
+/** Whether the click `event` ends a press that closed an overlay. */
+export declare function isDismissClick(event: Event): boolean;

package/dist/types/common/utils/isDev.d.ts

@@ -0,0 +1 @@
+export declare function isDev(): boolean;

package/docs/Accordion.md

@@ -4,25 +4,60 @@
 
 **Keywords:** collapse, dropdown panel
 
-**Import:** `import { Accordion } from '@ahrowe/ui'`
+**Import:** `import { Accordion, AccordionStyleType, ThemeColor } from '@ahrowe/ui'`
 
-**Style variants:** `AccordionStyleType.Default` | `AccordionStyleType.Primary` | `AccordionStyleType.Plain`
+**Styles:** the library's own, meaning what they mean on Button, Badge and Chip, applied to the
+header; `color` is the colour they use (a `ThemeColor`, default `Neutral`, or any CSS colour, see
+[ThemeColor.md](ThemeColor.md)). The body is ordinary text on the page in every style. There is no
+`Filled`: an accordion structures content, and a solid header would compete with the page's main
+action.
+
+- `AccordionStyleType.Outlined` (default): a border in the colour, the header's text in the colour
+- `AccordionStyleType.Light`: the header in a light tint of the colour, its text in the colour
+- `AccordionStyleType.Plain`: the header's text in the colour, no chrome and no padding, for a disclosure inside other content
+
+Each accordion is one section; render several directly next to each other for a list, without a
+wrapper around each one, and the arrow keys move between their headers. **Neighbours** keep a
+small gap by default. With `joined` they make one block instead: one line between each, in the
+border colour for Outlined and in the page colour for Light, open or closed. Two neighbours join
+only when both are joined.
 
 ```tsx
-import { Accordion, AccordionStyleType } from '@ahrowe/ui';
+import { Accordion, AccordionStyleType, ThemeColor } from '@ahrowe/ui';
 
 // Uncontrolled — manages its own open state
 <Accordion title="Section title">
   <p>Content goes here</p>
 </Accordion>
 
+// A list of separate sections
+{faqs.map((faq) => (
+  <Accordion key={faq.id} title={faq.question}>
+    {faq.answer}
+  </Accordion>
+))}
+
+// The same list as one bordered control
+{faqs.map((faq) => (
+  <Accordion key={faq.id} title={faq.question} joined>
+    {faq.answer}
+  </Accordion>
+))}
+
+// Headers tinted in the primary colour
+{steps.map((step) => (
+  <Accordion key={step.id} title={step.title} styleType={AccordionStyleType.Light} color={ThemeColor.Primary}>
+    {step.body}
+  </Accordion>
+))}
+
 // Controlled
 <Accordion
   id="section-1"
   title="Controlled section"
   expanded={isOpen}
   onHeaderClicked={(id, isExpanded) => setIsOpen(isExpanded)}
-  styleType={AccordionStyleType.Primary}
+  styleType={AccordionStyleType.Light}
 >
   Content
 </Accordion>
@@ -36,7 +71,9 @@ import { Accordion, AccordionStyleType } from '@ahrowe/ui';
 | `expanded` | `boolean \| null` | Controlled open state |
 | `startOpen` | `boolean` | Uncontrolled initial state |
 | `onHeaderClicked` | `(id, isExpanded) => void` | Toggle callback |
-| `styleType` | `AccordionStyleType` | Visual variant |
+| `styleType` | `AccordionStyleType` | `Outlined` (default), `Light` or `Plain` |
+| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour |
+| `joined` | `boolean` | Joins the section to joined neighbours into one block. Default `false`: a small gap |
 | `hideHeader` | `boolean` | Hide the clickable header |
 | `id` | `string` | Passed back in `onHeaderClicked` |
 
@@ -49,8 +86,40 @@ a `role="region"` labelled by the header, so a screen reader can move between th
 An activation key pressed inside the body does not reach the header, so a Space typed into a
 field in an open section types a space instead of collapsing the section.
 
+**Arrow keys**, the optional keys of the
+[WAI-ARIA accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/): Down and Up
+move the focus to the next and previous header and wrap at the ends, Home and End to the first and
+last. They move among the accordions rendered beside each other under one parent, so a list nested
+inside a section's body is a set of its own, and a key pressed inside a body stays there.
+
+The pattern also wraps each header in a `role="heading"` with an `aria-level` that fits the page;
+this header is not, because only the page knows that level.
+
 **Slots:** `root` `header` `title` `icon` `body` `bodyInner`
 
 ## Sizing
 
 The header's font, padding and chevron follow `--default-font-size`, as does the body's padding. There is no fixed height: the header is that padding plus one line of text, so a larger base font simply makes it taller.
+
+**Theming:** every colour comes from `color`, through the variables listed in
+[ThemeColor.md](ThemeColor.md); in `Neutral` that is the surrounding text colour and a
+`--border-color` outline. The header tints on hover in its own text colour and shows a
+`--focus-border-color` ring inside its edge on keyboard focus.
+
+## Migration from `Default`, `Primary` and `Plain`
+
+Before 0.43 the styles were `Default` (bordered sections that moved apart when one opened),
+`Primary` (borderless until open, then framed in `--primary-color`) and `Plain`. The styles are
+now the library's shared ones, and `Default` and `Primary` are gone, so TypeScript points at each
+use:
+
+| Before | After |
+|--------|-------|
+| `styleType={AccordionStyleType.Default}` | `joined`: `Outlined` is the default style, and `joined` keeps neighbours in one box |
+| `styleType={AccordionStyleType.Primary}` | `color={ThemeColor.Primary}`: Outlined, bordered in the primary colour |
+| `styleType={AccordionStyleType.Plain}` | unchanged, with a small gap added above its body |
+
+An Accordion without `styleType` compiles unchanged and looks different in a list: neighbours
+used to join into one box and now keep a small gap. Add `joined` to every one in the list to keep
+the box, now with square corners at each join; an open one stays in the box instead of moving
+apart from the others.

package/docs/ActionButtons.md

@@ -7,7 +7,7 @@
 **Import:** `import { ActionButtons } from '@ahrowe/ui'`
 
 ```tsx
-import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
+import { ActionButtons, ThemeColor } from '@ahrowe/ui';
 
 <ActionButtons
   labels={{ submit: 'Save', cancel: 'Discard' }}
@@ -19,7 +19,7 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 // Destructive action
 <ActionButtons
   labels={{ submit: 'Delete' }}
-  submitButtonStyle={ButtonStyleType.Delete}
+  submitButtonColor={ThemeColor.Error}
   onSubmit={handleDelete}
   onClose={onClose}
 />
@@ -41,7 +41,10 @@ import { ActionButtons, ButtonStyleType } from '@ahrowe/ui';
 | `onClose` | `() => void` | Secondary button click |
 | `labels.submit` | `ReactNode \| string` | Primary button label |
 | `labels.cancel` | `ReactNode \| string` | Secondary button label |
-| `submitButtonStyle` | `ButtonStyleType` | `Primary` (default), `Delete`, `Default` |
+| `submitButtonStyle` | `ButtonStyleType` | Default `Filled` |
+| `submitButtonColor` | `ColorValue` | Default `Primary`; `Error` for a destructive confirm; or any CSS colour |
+| `cancelButtonStyle` | `ButtonStyleType` | Default `Outlined` |
+| `cancelButtonColor` | `ColorValue` | Default `Primary`; or any CSS colour |
 | `isSubmitButtonLoading` | `boolean` | Shows spinner on primary button |
 | `isSubmitButtonDisabled` | `boolean` | |
 | `isCancelButtonLoading` | `boolean` | |

package/docs/ActionIcon.md

@@ -1,22 +1,28 @@
 # ActionIcon
 
-**When to use:** Clickable icon button without a label — toolbar actions, table row actions, icon-only controls.
+**When to use:** Clickable icon button without a label — toolbar actions, table row actions, close buttons, icon-only controls.
 
-**Keywords:** toolbar button
+**Keywords:** toolbar button, icon button, close, ghost
 
 **Import:** `import { ActionIcon } from '@ahrowe/ui'`
 
 **Requires:** `@fortawesome/free-solid-svg-icons` peer dependency.
 
+An ActionIcon is a [Button](Button.md) holding only an icon and sized by it: a real `<button>`
+with Button's hover, focus ring and ripple. It takes Button's `styleType` and `color`, plain and
+in the surrounding text colour by default, so it fits whatever it sits on.
+
 ```tsx
-import { ActionIcon } from '@ahrowe/ui';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
-
-<ActionIcon
-  icon={faTrash}
-  title="Delete item"
-  onClick={(e) => handleDelete(e)}
-/>
+import { ActionIcon, ButtonStyleType, ThemeColor } from '@ahrowe/ui';
+import { faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+<ActionIcon icon={faXmark} aria-label="Close" onClick={onClose} />
+
+// A destructive row action
+<ActionIcon icon={faTrash} color={ThemeColor.Error} title="Delete item" onClick={handleDelete} />
+
+// Filled, for an action that should stand out
+<ActionIcon icon={faTrash} styleType={ButtonStyleType.Filled} color={ThemeColor.Error} aria-label="Delete" />
 ```
 
 **Key props:**
@@ -24,9 +30,28 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 | Prop | Type | Description |
 |------|------|-------------|
 | `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element (required) |
-| `title` | `string` | Tooltip / accessible label |
-| `onClick` | `(event: MouseEvent) => void` | Click handler |
-| `className` | `string` | Root element class |
-| `ref` | `Ref<HTMLDivElement>` | Ref to the root element |
+| `styleType` | `ButtonStyleType` | Default `Plain`; any of Button's styles |
+| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour, see [ThemeColor.md](ThemeColor.md) |
+| `title` | `string` | Tooltip. Give an icon-only button an `aria-label` as well |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void \| Promise<void>` | Click handler |
+| `disabled` | `boolean` | Fades it and blocks clicks |
+| `ref` | `Ref<HTMLButtonElement>` | Ref to the button |
+
+Every other Button prop and native `<button>` attribute passes through, except `size`,
+`children` and `isLoading`. The box is the icon plus `4px` on each side; set `width` and `height`
+for a different one.
 
 **Slots:** `root` `icon`
+
+## Migration from the div
+
+Before 0.43 an ActionIcon was a `div` with a button role and no colour of its own.
+
+- **Types:** `ref` is `Ref<HTMLButtonElement>` and `onClick` receives a
+  `MouseEvent<HTMLButtonElement>`. A handler annotated with `HTMLDivElement` no longer compiles;
+  drop the annotation or change it. The same goes for the `onClick` of Card and SectionHeader
+  `actions`, which render ActionIcons.
+- **Layout:** it is inline, like a button, where the div was a block of its own width. In a flex
+  row nothing changes; on its own in a block it now sits in the line.
+- **Look:** it has Button's hover tint, focus ring and ripple, where the div only darkened on
+  hover. It takes the surrounding text colour as before; a colour of its own is now `color`.