@ahrowe/ui 0.42.0 → 0.44.0

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

@@ -1,6 +1,7 @@
 import { CSSProperties, MouseEvent, Ref } from 'react';
 import { IconContent } from '../types/icon.types.js';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ActionIconProps } from '../actionIcon/actionIcon.types.js';
 export type CopyButtonSlots = 'root' | 'icon';
 export interface CopyButtonLabels {
     /** Accessible name and tooltip before copying. Default: "Copy". */
@@ -10,7 +11,7 @@ export interface CopyButtonLabels {
     /** Announced when the copy fails. Default: "Could not copy". */
     failed?: string;
 }
-export interface CopyButtonProps extends Omit<HtmlProps<HTMLDivElement>, 'onCopy' | 'onError'> {
+export interface CopyButtonProps extends Omit<ActionIconProps, 'icon' | 'onCopy' | 'onError' | 'onClick' | 'ref' | 'classNames' | 'styles'> {
     /** Text written to the clipboard on click. */
     value: string;
     /** How long the copied state shows, in ms. Default: 2000. */
@@ -24,11 +25,11 @@ export interface CopyButtonProps extends Omit<HtmlProps<HTMLDivElement>, 'onCopy
     /** Called when the clipboard refuses the write, e.g. outside a secure context. */
     onError?: () => void;
     /** Called on every click, before the copy. */
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Text this component renders of its own. */
     labels?: CopyButtonLabels;
     /** Ref to the root element. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLButtonElement>;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<CopyButtonSlots>;

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

@@ -1,3 +1,3 @@
 import { FabBaseProps } from './fabBase.types.js';
-declare function FabBase({ style, children, size, className, styleType, onClick, }: FabBaseProps): import("react").JSX.Element;
+declare function FabBase({ style, children, size, className, styleType, color, onClick, }: FabBaseProps): import("react").JSX.Element;
 export default FabBase;

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/loader/index.d.ts

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

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

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LoaderProps } from './loader.types.js';
+declare function Loader(props: LoaderProps): ReactElement;
+export default Loader;

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

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'react';
+import { HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+export declare enum LoaderType {
+    /** An arc that grows and shrinks on a faint track. The default, and the one that reads at any size. */
+    Spinner = "spinner",
+    /** A glowing head trailing a fading tail round a ring. For a hero spot: a page, a panel, an overlay. */
+    Comet = "comet",
+    /** Three dots in a wave. For a line of text or a chat reply being written. */
+    Dots = "dots",
+    /** Bars rising and falling like an equaliser. For media, uploads and data being processed. */
+    Bars = "bars",
+    /** Rings rippling out from a core. For waiting on something outside the app: a device, a connection, a search. */
+    Pulse = "pulse"
+}
+export interface LoaderLabels {
+    /** The loader's accessible name. */
+    loading?: string;
+}
+export interface LoaderProps extends HtmlProps<HTMLSpanElement> {
+    /** The animation. Defaults to `LoaderType.Spinner`. */
+    type?: LoaderType;
+    /** Width and height: any CSS length, or a number of pixels. Defaults to `'2.5em'`, so it follows the font size around it. */
+    size?: number | string;
+    /** A `ThemeColor` or any CSS colour. Defaults to `ThemeColor.Primary`; `ThemeColor.Neutral` takes the colour of the text around it. */
+    color?: ColorValue;
+    /** Text the loader produces itself. See `LoaderLabels`. */
+    labels?: LoaderLabels;
+    className?: string;
+    style?: CSSProperties;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LoadingOverlayProps } from './loadingOverlay.types.js';
+declare function LoadingOverlay(props: LoadingOverlayProps): ReactElement;
+export default LoadingOverlay;

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

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type LoadingOverlaySlots = 'content' | 'backdrop' | 'panel' | 'message';
+export interface LoadingOverlayProps extends HtmlProps<HTMLDivElement> {
+    /** Covers the content, blocks the pointer and marks it `aria-busy`. Defaults to `false`. */
+    isLoading?: boolean;
+    /** What the overlay covers. */
+    children?: ReactNode;
+    /** Shown in place of the default `Loader`: a `Loader` of another type, an `AnimatedLogo`, anything. */
+    loader?: ReactNode;
+    /** Text under the loader, with a highlight sweeping across it. Also the default loader's accessible name. */
+    message?: ReactNode;
+    /** Milliseconds `isLoading` has to stay true before the overlay shows, so a fast load never flashes it. Once shown, it stays at least 400ms. Defaults to `200`. */
+    delay?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Classes for the inner elements. See `LoadingOverlaySlots`. */
+    classNames?: SlotClassNames<LoadingOverlaySlots>;
+    /** Inline styles for the inner elements. See `LoadingOverlaySlots`. */
+    styles?: SlotStyles<LoadingOverlaySlots>;
+}

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/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. */
@@ -235,6 +232,10 @@ export interface ThemeVariables {
     /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */
     '--kanban-empty-column-width'?: string;
     '--option-picker-padding'?: string;
+    /** Veil over the content while it loads. Falls back to --background at 50%. */
+    '--loading-overlay-background'?: string;
+    /** How far the content under the veil is blurred. Falls back to 4px; 0px turns the blur off. */
+    '--loading-overlay-blur'?: string;
     /** Track (unfilled) background colour. Falls back to --background-accent. */
     '--progress-bar-track-color'?: string;
     /** Canvas behind the plan. Falls back to --background. */

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/dist/types/index.d.ts

@@ -76,7 +76,10 @@ export { default as KanbanBoard } from './common/kanbanBoard/index.js';
 export * from './common/kanbanBoard/index.js';
 export { default as KlipyPicker } from './common/klipyPicker/index.js';
 export * from './common/klipyPicker/index.js';
-export * from './common/loading/index.js';
+export { default as Loader } from './common/loader/index.js';
+export * from './common/loader/index.js';
+export { default as LoadingOverlay } from './common/loadingOverlay/index.js';
+export * from './common/loadingOverlay/index.js';
 export { default as Menu } from './common/menu/index.js';
 export * from './common/menu/index.js';
 export { default as Modal } from './common/modal/index.js';

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`.