@ahrowe/ui 0.42.0 → 0.43.0

package/docs/Chip.md

@@ -4,20 +4,22 @@
 
 **Keywords:** pill
 
-**Import:** `import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui'`
+**Import:** `import { Chip, ChipContainer, ChipStyleType, ThemeColor } from '@ahrowe/ui'`
 
-**Style variants:** `ChipStyleType.Default` (default) | `ChipStyleType.Primary` | `ChipStyleType.Info` | `ChipStyleType.Warn` | `ChipStyleType.Error`
+**Styles:** `ChipStyleType.Light` (default) | `ChipStyleType.Filled` | `ChipStyleType.Outlined`, in any `color`: a `ThemeColor` (default `Neutral`) or any CSS colour, see [ThemeColor.md](ThemeColor.md).
 
 ```tsx
-import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
+import { Chip, ChipContainer, ChipStyleType, ThemeColor } from '@ahrowe/ui';
 
 // Basic chip
 <Chip text="React" />
 
-// Coloured variants
-<Chip text="Primary" styleType={ChipStyleType.Primary} />
-<Chip text="Warning" styleType={ChipStyleType.Warn} />
-<Chip text="Error" styleType={ChipStyleType.Error} />
+// Colours: a light tint by default
+<Chip text="Warning" color={ThemeColor.Warn} />
+<Chip text="Error" color={ThemeColor.Error} />
+
+// A selected filter: filled in the primary colour
+<Chip text="Active" styleType={ChipStyleType.Filled} color={ThemeColor.Primary} onClick={toggle} />
 
 // Removable chip
 <Chip
@@ -47,14 +49,15 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 
 **Enums:**
 
-- `ChipStyleType`: `Default` (default) | `Primary` | `Info` | `Warn` | `Error`
+- `ChipStyleType`: `Light` (default) | `Filled` | `Outlined`
 
 **ChipProps:**
 
 | Prop | Type | Description |
 |------|------|-------------|
 | `text` | `string` | Chip label |
-| `styleType` | `ChipStyleType` | Colour variant (default `Default`) |
+| `styleType` | `ChipStyleType` | `Light` (default), `Filled` or `Outlined` |
+| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour |
 | `thumbnail` | `string` | Avatar image URL |
 | `labels.remove` | `string` | Accessible name for the remove button. Default: `'Remove'` |
 | `showRemoveIcon` | `boolean` | Show × icon |
@@ -70,3 +73,15 @@ import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui';
 **Labels:** `remove` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ChipLabels`.
 
 **Slots:** `root` `inner` `thumbnail` `text` `removeIcon`
+
+## Migration from colour styles
+
+Before 0.43, `ChipStyleType` was a colour, and `Primary` was filled while the others were a light
+tint. Style and colour are now separate props. The old members are gone and TypeScript points at
+each:
+
+| Before | After |
+|--------|-------|
+| `styleType={ChipStyleType.Default}` | nothing: `Light` `Neutral` is the default |
+| `styleType={ChipStyleType.Primary}` | `styleType={ChipStyleType.Filled} color={ThemeColor.Primary}` |
+| `styleType={ChipStyleType.Info}` (and `Warn`, `Error`) | `color={ThemeColor.Info}` |

package/docs/ConfigProvider.md

@@ -98,7 +98,7 @@ Each entry is a `Partial<...Props>`, so any of that component's props can be def
 - **Display:** `Button` · `CopyButton` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Accordion` · `Divider` · `Timer` · `WeatherIcon`
 - **Overlays:** `ConfirmModal` · `Modal` · `CommandPalette` · `Popover`
 - **Editors:** `RoomDrawer`, `RoomViewer`
-- **Scheduling:** `Calendar`, for `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays` and `scrollToHour` only (see below)
+- **Scheduling:** `Calendar`, for `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays`, `scrollToHour`, `workingHours` and `showWeekNumbers` only (see below)
 
 ```tsx
 <ConfigProvider
@@ -106,7 +106,7 @@ Each entry is a `Partial<...Props>`, so any of that component's props can be def
     Input: { alwaysFloatLabel: true },
     Dropdown: { useMatLabelStyle: true },
     NumberInput: { decimalScale: 2, thousandSeparator: '.' },
-    Button: { styleType: ButtonStyleType.Primary },
+    Button: { styleType: ButtonStyleType.Filled },
     Card: { styleType: CardStyleType.Outlined },
     Skeleton: { animation: SkeletonAnimation.Pulse },
   }}
@@ -138,6 +138,6 @@ Every string a component renders of its own is set through its `labels` prop, an
 
 **Labels merge per key**, unlike every other default here. An instance that overrides one string keeps the provider's translations for the rest, so `<Alert labels={{ dismiss: 'Weg damit' }} />` under the provider above does not lose anything else Alert might have been given. Anything the component does not produce itself, a `title`, a column `label`, a button's children, is already yours and never appears in `labels`.
 
-`ColorPicker` and `VirtualList` appear in `ComponentDefaults` with their labels only: the first is configured elsewhere, the second has generic props that a per-key default map cannot express. `Calendar` is generic too, so its entry is the props that do not depend on the event type: `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays` and `scrollToHour`. `Toast` is not there at all, because `AhroweProvider`'s `toast` prop is already its app-wide configuration and carries `labels` itself.
+`ColorPicker` and `VirtualList` appear in `ComponentDefaults` with their labels only: the first is configured elsewhere, the second has generic props that a per-key default map cannot express. `Calendar` is generic too, so its entry is the props that do not depend on the event type: `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays`, `scrollToHour`, `workingHours` and `showWeekNumbers`. `Toast` is not there at all, because `AhroweProvider`'s `toast` prop is already its app-wide configuration and carries `labels` itself.
 
 Each component's doc lists its own keys under **Labels:**.

package/docs/CopyButton.md

@@ -8,7 +8,7 @@
 **Types:** `import type { CopyButtonProps, CopyButtonLabels } from '@ahrowe/ui'`
 
 ```tsx
-import { CopyButton, Input } from '@ahrowe/ui';
+import { CopyButton, Input, ThemeColor, showToast } from '@ahrowe/ui';
 
 <span>
   {invoice.number} <CopyButton value={invoice.number} />
@@ -18,10 +18,10 @@ import { CopyButton, Input } from '@ahrowe/ui';
 <Input label='API key' value={apiKey} readOnly suffix={<CopyButton value={apiKey} />} />
 
 // a toast on success, where the button is not where the user is looking
-<CopyButton value={url} onCopy={() => showToast('Link copied', { type: 'success' })} />
+<CopyButton value={url} onCopy={() => showToast('Link copied', { color: ThemeColor.Success })} />
 ```
 
-After a click the icon rotates into a check (through `AnimatedIcon`, held still under `prefers-reduced-motion`) for `timeout` ms, the accessible name and tooltip read "Copied", and a polite live region announces it, because a swapped icon or a changed `aria-label` alone is not read out. A refused write (an insecure context, a blocked iframe) announces "Could not copy" and calls `onError`; the icon stays as it was. `CopyButton` shows no toast of its own: pass one through `onCopy` / `onError` if you want it.
+It is an [ActionIcon](ActionIcon.md), so it takes the same `styleType` and `color`, and turns `Success` while copied. After a click the icon rotates into a check (through `AnimatedIcon`, held still under `prefers-reduced-motion`) for `timeout` ms, the accessible name and tooltip read "Copied", and a polite live region announces it, because a swapped icon or a changed `aria-label` alone is not read out. A refused write (an insecure context, a blocked iframe) announces "Could not copy" and calls `onError`; the icon stays as it was. `CopyButton` shows no toast of its own: pass one through `onCopy` / `onError` if you want it.
 
 The live region is rendered as a sibling of the button, so `CopyButton` returns two elements. It is visually hidden and takes no space.
 
@@ -35,8 +35,9 @@ The live region is rendered as a sibling of the button, so `CopyButton` returns
 | `copiedIcon` | `IconDefinition \| ReactElement` | Icon while copied (default `faCheck`) |
 | `onCopy` | `(value: string) => void` | Called after a successful copy |
 | `onError` | `() => void` | Called when the clipboard refuses the write. `useClipboard` returns the reason |
-| `onClick` | `(event: MouseEvent) => void` | Called on every click, before the copy |
-| `ref` | `Ref<HTMLDivElement>` | Ref to the button |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | Called on every click, before the copy |
+| `color` | `ColorValue` | Its colour at rest (default `Neutral`); `Success` while copied |
+| `ref` | `Ref<HTMLButtonElement>` | Ref to the button |
 
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ CopyButton: { timeout: 1500 } }}`. See [ConfigProvider.md](ConfigProvider.md).
 

package/docs/ProgressBar.md

@@ -7,15 +7,15 @@
 **Import:** `import { ProgressBar } from '@ahrowe/ui'`
 
 ```tsx
-import { ProgressBar } from '@ahrowe/ui';
+import { ProgressBar, ThemeColor } from '@ahrowe/ui';
 
 // Simple percentage
 <ProgressBar progress={75} total={100} />
 
-// Single progress with label and custom colour
+// Single progress with label, in a theme colour
 <ProgressBar
   total={100}
-  progress={{ amount: 60, label: 'Used', color: '#6200ea' }}
+  progress={{ amount: 60, label: 'Used', color: ThemeColor.Warn }}
 />
 
 // Stacked / segmented bar
@@ -39,9 +39,12 @@ import { ProgressBar } from '@ahrowe/ui';
 **Progress object:**
 
 ```ts
-{ amount: number; label?: string; color?: string; class?: string }
+{ amount: number; label?: string; color?: ColorValue; class?: string }
 ```
 
+`color` is a `ThemeColor` or any CSS colour (see [ThemeColor.md](ThemeColor.md)), `--primary-color`
+when unset. A label on a coloured segment is black or white, whichever reads on it.
+
 **Theming:** override theme-wide via `ThemeProvider`'s `variables`, or per instance via `style`; falls back to a built-in default when unset:
 
 | Variable | Falls back to |

package/docs/SectionHeader.md

@@ -77,7 +77,7 @@ import { faFolder, faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
 interface SectionHeaderAction {
   title?: string;
   icon: IconDefinition | ReactElement;
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 ```
 

package/docs/SplitButton.md

@@ -9,7 +9,7 @@
 **Enums:** `import { PopoverAlign } from '@ahrowe/ui'` for `align`.
 
 ```tsx
-import { SplitButton } from '@ahrowe/ui';
+import { SplitButton, ThemeColor } from '@ahrowe/ui';
 import type { SplitButtonAction } from '@ahrowe/ui';
 
 const actions: SplitButtonAction[] = [
@@ -21,12 +21,12 @@ const actions: SplitButtonAction[] = [
   Save
 </SplitButton>
 
-// Destructive style, matching Button's own style variants
+// Destructive, with Button's own style and colour
 import { ButtonStyleType } from '@ahrowe/ui';
 
 <SplitButton
   actions={[{ id: 'archive', label: 'Archive instead', onClick: () => archive() }]}
-  styleType={ButtonStyleType.Delete}
+  color={ThemeColor.Error}
   onClick={() => deleteItem()}
 >
   Delete
@@ -68,7 +68,8 @@ import { ButtonStyleType } from '@ahrowe/ui';
 | `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`) |
+| `styleType` | `ButtonStyleType` | Shared by both the primary and trigger button (default `Filled`) |
+| `color` | `ColorValue` | Shared by both buttons (default `Primary`); or any CSS colour, as on Button |
 | `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`) |
@@ -76,7 +77,7 @@ import { ButtonStyleType } from '@ahrowe/ui';
 
 **`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).
+**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ SplitButton: { styleType: ButtonStyleType.Outlined } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Keyboard:** the list is a [Menu](Menu.md), so it behaves like one: `↓` `↑` move between actions and skip disabled ones, `Home` and `End` jump to either end, typing a letter jumps to the action that starts with it, `Enter` and `Space` run the focused action, and `Escape` closes and hands the focus back. A click opens the menu without taking the focus, so nothing is marked until you point at an action or press an arrow key; opening with the keyboard focuses the first action straight away. The trigger announces itself as a menu button.
 

package/docs/ThemeColor.md

@@ -0,0 +1,103 @@
+# ThemeColor
+
+**When to use:** The `color` prop of every component that takes one: the theme's named colours, or any CSS colour of your own.
+
+**Keywords:** colour, palette, tone, variant, status, semantic, danger, destructive, brand, custom
+
+**Import:** `import { ThemeColor } from '@ahrowe/ui'`
+**Types:** `import type { ColorValue } from '@ahrowe/ui'`
+
+Every `color` prop in the library takes the same `ColorValue`: one of the six `ThemeColor`s, or
+any CSS colour. A component's **style** (how much it stands out) is a separate prop, `styleType`,
+so any style works in any colour.
+
+```tsx
+import { Badge, Button, ButtonStyleType, ThemeColor, showToast } from '@ahrowe/ui';
+
+<Button styleType={ButtonStyleType.Filled} color={ThemeColor.Error}>Delete</Button>
+<Badge count={3} color={ThemeColor.Success} />
+showToast('Saved', { color: ThemeColor.Success });
+
+// Any CSS colour, a theme variable included
+<Button color="var(--brand)">Upgrade</Button>
+<Badge content="Beta" color="#7c3aed" />
+```
+
+**Enums:**
+
+- `ThemeColor`: `Primary` | `Neutral` | `Success` | `Info` | `Warn` | `Error`
+
+| Colour | Reads | Notes |
+|--------|-------|-------|
+| `Primary` | `--primary-color`, `--text-on-primary`, `--primary-gradient` | The fill paints the gradient when the theme sets one |
+| `Neutral` | the surrounding text colour, `--border-color` | Takes the colour of what it sits on: a close button on an Alert, a toolbar on a primary header. Its fill and tint are see-through mixes of that colour |
+| `Success` | `--success-color` | |
+| `Info` | `--info-color` | |
+| `Warn` | `--warn-color` | |
+| `Error` | `--error-color`, `--text-on-delete` | For destructive actions |
+
+**Where it applies:** Button, ActionIcon, CopyButton, SplitButton, ActionButtons (`submitButtonColor`,
+`cancelButtonColor`), Card and its actions, Badge, Chip, Accordion, Alert, Toast, Timeline items, Calendar
+events, ProgressBar segments and AnimatedLogo.
+
+**Styles share their names:** where two components offer the same look, it has the same name in
+each one's own `styleType` enum. Each component offers only the ones it can draw.
+
+| Style | Looks like | Offered by |
+|-------|------------|------------|
+| `Filled` | a solid fill, text in a contrasting colour | Button, Badge, Chip |
+| `Light` | a light tint of the colour, text in the colour | Button, Badge, Chip, Accordion (its header), Card (its surface, text unchanged) |
+| `Outlined` | a border and text in the colour | Button, Badge, Chip, Accordion, Card (its border, text unchanged) |
+| `Plain` | text in the colour only | Button, ActionIcon, Accordion |
+
+Alert, Toast and Timeline have a single look, so they take a `color` and no style.
+
+**Which style to use.** Every component offers the same few, so the choice is about emphasis,
+and a page stays consistent when each one means the same everywhere:
+
+- `Filled`: the one main action of a region, and counts. At most one `Filled` per region.
+- `Light`: status labels, a selected filter, secondary emphasis.
+- `Outlined`: secondary actions and grouped content. The default for Button and Accordion.
+- `Plain`: tertiary and toolbar actions, close buttons, a disclosure inside text.
+
+**How each is drawn.** `Light` is a 22% see-through tint of the colour (8% of the text colour for
+`Neutral`), the same for every colour. Text in the colour (`Light`, `Outlined`, `Plain`) is the
+colour moved a third of the way toward the page's text colour in lightness, keeping its
+saturation: the pure colour is often too faint to read as text, dark red on a dark theme most of
+all. Borders, bars, dots and icons keep the pure colour. Text on a fill is black or white, see
+below.
+
+## A colour of your own
+
+Pass any CSS colour. It replaces the theme's colour everywhere the component uses one, including
+the hover tint and the gradient, which a colour of your own does not get:
+
+```tsx
+<Button styleType={ButtonStyleType.Filled} color="var(--brand)">Upgrade</Button>
+```
+
+**Text on a fill** is white wherever it reaches a contrast of 3:1 on the colour, otherwise black,
+which then has at least 7:1: `color="#fde047"` gets black text and `color="#7c3aed"` white. On a
+mid-tone blue that keeps white, which reads better there than black, though it can fall short of
+WCAG's 4.5:1 for small text. It is worked out in CSS from the colour's relative luminance with
+relative colour syntax, so a `var()` that changes with the theme changes its text with it.
+A browser older than Chrome 119 or Firefox 128 gets `--text-on-primary` instead. To choose the
+text yourself, set `color` in the component's `style` or a class. A built-in colour keeps the theme's own `--text-on-primary` or
+`--text-on-delete`; a theme without them gets the same automatic choice.
+
+**A value that can never be a colour** (`color="eror"`) logs a warning in development. A `var()`
+cannot be checked until it renders.
+
+**For a whole section or the app**, set the default rather than repeating it:
+`defaultProps={{ Button: { color: 'var(--brand)' } }}` on `AhroweProvider`, or on a
+`ConfigProvider` around the section ([ConfigProvider.md](ConfigProvider.md)). A default prop does
+not change with the theme; for a colour that does, give each theme a variable of your own and
+pass that: `color: 'var(--app-button)'`.
+
+**A preset**, a fixed mix of props you use repeatedly, is a component in your app:
+
+```tsx
+export function DeleteIconButton(props: ActionIconProps) {
+  return <ActionIcon color={ThemeColor.Error} icon={faTrash} {...props} />;
+}
+```

package/docs/ThemeProvider.md

@@ -148,16 +148,16 @@ Surfaces that honour it:
 
 | Component | Surface |
 |-----------|---------|
-| `Button` | primary style |
-| `Chip` | primary style |
+| `Button` | `Filled` `Primary` |
+| `Chip` | `Filled` `Primary` |
 | `ProgressBar` | fill |
 | `Switch` | checked track |
 | `Slider` | filled range |
 | `Pagination` | active page |
 | `OptionPicker` | selected option |
-| `Badge` | primary style, except the `dot` variant |
-| `Alert` | default-style accent border |
-| `Toast` | default-style accent border |
+| `Badge` | `Filled` `Primary`, except a `dot` |
+| `Alert` | `Primary` accent border |
+| `Toast` | `Primary` accent border |
 | `TabHeader` | active tab indicator |
 
 Everything else stays flat: focus rings, outlines, icons, primary-coloured text, and small marks

package/docs/Timeline.md

@@ -1,25 +1,24 @@
 # Timeline
 
-**When to use:** A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs. Each entry can carry a title, timestamp, description, an icon or status colour, and arbitrary extra content.
+**When to use:** A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs. Each entry can carry a title, timestamp, description, an icon or a colour, and arbitrary extra content.
 
 **Keywords:** history log
 
-**Import:** `import { Timeline, TimelineAlignment, TimelineItemStatus } from '@ahrowe/ui'`
+**Import:** `import { Timeline, TimelineAlignment, ThemeColor } from '@ahrowe/ui'`
 **Types:** `import type { TimelineItem, TimelineProps } from '@ahrowe/ui'`
 
 **Enums:**
 - `TimelineAlignment`: `Left` (default) | `Right` | `Alternate`
-- `TimelineItemStatus`: `Default` (default) | `Primary` | `Success` | `Warn` | `Error`
 
 ```tsx
-import { Timeline, TimelineItemStatus } from '@ahrowe/ui';
+import { Timeline, ThemeColor } from '@ahrowe/ui';
 import type { TimelineItem } from '@ahrowe/ui';
 
 const items: TimelineItem[] = [
   { title: 'Invoice created', description: 'by Jane Doe', timestamp: '09:12' },
   { title: 'Invoice sent to client', description: 'via email', timestamp: '09:15' },
-  { title: 'Payment received', status: TimelineItemStatus.Success, timestamp: '2 days later' },
-  { title: 'Invoice closed', status: TimelineItemStatus.Success, timestamp: 'Today' },
+  { title: 'Payment received', color: ThemeColor.Success, timestamp: '2 days later' },
+  { title: 'Invoice closed', color: ThemeColor.Success, timestamp: 'Today' },
 ];
 
 // Default: left-aligned line and markers, content to the right
@@ -30,7 +29,7 @@ import { faUserPlus, faCheck } from '@fortawesome/free-solid-svg-icons';
 <Timeline
   items={[
     { title: 'Account created', icon: faUserPlus, timestamp: 'Mon' },
-    { title: 'Email verified', icon: faCheck, status: TimelineItemStatus.Success, timestamp: 'Wed' },
+    { title: 'Email verified', icon: faCheck, color: ThemeColor.Success, timestamp: 'Wed' },
   ]}
 />
 
@@ -88,7 +87,7 @@ function AuditLog() {
 | `description` | `ReactNode` | Secondary line under the title |
 | `timestamp` | `ReactNode` | Rendered next to the title, e.g. a date or relative time ("2 hours ago") |
 | `icon` | `IconDefinition \| ReactElement` | Icon shown in the marker instead of a plain dot — FontAwesome icon or any React element |
-| `status` | `TimelineItemStatus` | Semantic marker colour (default `Default`) |
+| `color` | `ColorValue` | The marker's colour: a `ThemeColor` or any CSS colour, see [ThemeColor.md](ThemeColor.md). Unset, it is `--timeline-dot-color` |
 | `content` | `ReactNode` | Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar |
 | `onClick` | `(event: MouseEvent<HTMLDivElement>) => void` | Makes the whole entry clickable, rendering it as an accessible button (`role="button"`, focusable, click and Enter both fire it). Omit to render a plain, non-interactive row |
 | `disabled` | `boolean` | Disables the entry: never clickable, dimmed. Only relevant alongside `onClick` |
@@ -113,7 +112,7 @@ function AuditLog() {
 | `--timeline-item-gap` | `20px` (vertical gap between entries) |
 | `--timeline-icon-dot-size` | `28px` (marker size when an entry has `icon`) |
 
-`TimelineItemStatus` values other than `Default` resolve directly to the matching theme colour (`--primary-color`, `--success-color`, `--warn-color`, `--error-color`) rather than a dedicated `--timeline-*` variable, so they always match the rest of the app's semantic colours.
+An entry's `color` replaces `--timeline-dot-color` for that marker, and an icon in it is black or white, whichever reads on the colour. A `ThemeColor` reads the theme's own colour, so it always matches the rest of the app.
 
 ```tsx
 // Theme-wide, via ThemeProvider: thicker line, larger dots
@@ -127,3 +126,13 @@ const theme: Theme = {
 ```
 
 **Slots:** `root` `item` `marker` `dot` `connector` `content` `title` `description` `timestamp`
+
+## Migration from `status`
+
+Before 0.43 an entry's marker colour was `status`, typed `TimelineItemStatus`. It is now `color`,
+typed `ColorValue`, and `TimelineItemStatus` is gone:
+
+| Before | After |
+|--------|-------|
+| `status: TimelineItemStatus.Default` | nothing: an unset `color` is `--timeline-dot-color` |
+| `status: TimelineItemStatus.Success` (and `Primary`, `Warn`, `Error`) | `color: ThemeColor.Success` |

package/docs/Toast.md

@@ -4,8 +4,8 @@
 
 **Keywords:** snackbar, notification popup
 
-**Import:** `import { showToast } from '@ahrowe/ui'`  
-**Types:** `import type { ToastOptions, ToastContextConfig, ToastLabels, ToastType, ToastPosition } from '@ahrowe/ui'`
+**Import:** `import { showToast, ThemeColor } from '@ahrowe/ui'`  
+**Types:** `import type { ToastOptions, ToastContextConfig, ToastLabels, ToastPosition, ColorValue } from '@ahrowe/ui'`
 
 **Setup:** [AhroweProvider](AhroweProvider.md) shows the toasts. Its `toast` prop sets the defaults for all of them:
 
@@ -22,16 +22,16 @@ import { AhroweProvider } from '@ahrowe/ui';
 **Usage:** Call `showToast` anywhere — no component hierarchy required:
 
 ```tsx
-import { showToast } from '@ahrowe/ui';
+import { showToast, ThemeColor } from '@ahrowe/ui';
 
-// Simple message
+// Simple message, in the primary colour
 showToast('Profile saved!');
 
-// With type
-showToast('Something went wrong.', { type: 'error' });
-showToast('3 items updated.', { type: 'info' });
-showToast('Your changes were saved.', { type: 'success' });
-showToast('Disk space is low.', { type: 'warn' });
+// Semantic colours, each with its own icon
+showToast('Something went wrong.', { color: ThemeColor.Error });
+showToast('3 items updated.', { color: ThemeColor.Info });
+showToast('Your changes were saved.', { color: ThemeColor.Success });
+showToast('Disk space is low.', { color: ThemeColor.Warn });
 
 // Persistent (no auto-dismiss)
 showToast('Processing…', { duration: 0, showCloseButton: true });
@@ -50,7 +50,7 @@ showToast('Copied!', { position: 'top-center', duration: 1500 });
 
 // With slot overrides
 showToast('Done', {
-  type: 'info',
+  color: ThemeColor.Info,
   classNames: { root: 'my-toast' },
   styles: { progressBar: { backgroundColor: '#6200ea' } },
 });
@@ -72,7 +72,7 @@ showToast('Done', {
 
 **ToastPosition:** `'top-left'` `'top-center'` `'top-right'` `'bottom-left'` `'bottom-center'` `'bottom-right'`
 
-**ToastType:** `'default'` `'info'` `'success'` `'error'` `'warn'`
+**color:** a `ThemeColor` (default `Primary`) or any CSS colour, see [ThemeColor.md](ThemeColor.md). A `ThemeColor` also picks the icon: a bell for `Primary` and `Neutral`, then info, check, warning and cross; any other colour shows the bell.
 
 **Slots:** `root` `icon` `content` `closeButton` `progressBar`
 
@@ -83,3 +83,17 @@ showToast('Done', {
 A toast is sized and spaced by its font: the padding, the gap, the body copy, the icon, the close button, the variant accent bar and the progress bar all scale with the theme's text, as does the gap between stacked toasts.
 
 Its `min-width` and `max-width` are `em` rather than pixels, so they bound the *measure* — roughly how many characters fit on a line — instead of a fixed width that would grow cramped as the text got larger.
+
+## Migration from `type`
+
+Before 0.43 a toast's colour was `type`, a string: `showToast('Saved', { type: 'success' })`. It
+is now `color`, and `ToastType` is gone:
+
+| Before | After |
+|--------|-------|
+| `{ type: 'default' }` | nothing: `Primary` is the default, with the same bell |
+| `{ type: 'success' }` (and `'info'`, `'warn'`, `'error'`) | `{ color: ThemeColor.Success }` |
+
+The string still works as a value, `{ color: 'success' }`, since a `ThemeColor` is that string.
+`type` itself does not: TypeScript reports it, and in plain JavaScript the toast falls back to the
+primary colour.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",
@@ -32,7 +32,8 @@
   },
   "files": [
     "dist",
-    "docs"
+    "docs",
+    "CHANGELOG.md"
   ],
   "type": "module",
   "sideEffects": false,

package/dist/esm/common/accordion/accordion.plain.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`accordion_wkZJf`,t=`accordion-title_-qwNy`,n=`accordion-active_t9-a2`,r=`accordion-header_-oST6`,i=`accordion-header-active_UvKis`,a=`accordion-body_ZagrJ`,o=`accordion-body-inner_HE7PL`,s=`accordion-icon_kHxym`,c=`accordion-icon-active_-L8BH`,l={accordion:e,"accordion-title":`accordion-title_-qwNy`,accordionTitle:t,"accordion-active":`accordion-active_t9-a2`,accordionActive:n,"accordion-header":`accordion-header_-oST6`,accordionHeader:r,"accordion-header-active":`accordion-header-active_UvKis`,accordionHeaderActive:i,"accordion-body":`accordion-body_ZagrJ`,accordionBody:a,"accordion-body-inner":`accordion-body-inner_HE7PL`,accordionBodyInner:o,"accordion-icon":`accordion-icon_kHxym`,accordionIcon:s,"accordion-icon-active":`accordion-icon-active_-L8BH`,accordionIconActive:c};export{e as accordion,n as accordionActive,a as accordionBody,o as accordionBodyInner,r as accordionHeader,i as accordionHeaderActive,s as accordionIcon,c as accordionIconActive,t as accordionTitle,l as default};
-//# sourceMappingURL=accordion.plain.module.mjs.map

package/dist/esm/common/accordion/accordion.plain.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.plain.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.plain.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border-radius: var(--default-border-radius);\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n\n    &-inner {\n      padding: 0;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion,\n  .accordion-header,\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/accordion/accordion.primary.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`accordion_X64Nz`,t=`accordion-title_2q-FF`,n=`accordion-active_72VwY`,r=`accordion-header_XuGF6`,i=`accordion-header-active_xf8Ch`,a=`accordion-body_0Jsco`,o=`accordion-body-inner_0UBPf`,s=`accordion-body-active_XFSy1`,c=`accordion-icon_W1mz5`,l=`accordion-icon-active_LI98q`,u={accordion:e,"accordion-title":`accordion-title_2q-FF`,accordionTitle:t,"accordion-active":`accordion-active_72VwY`,accordionActive:n,"accordion-header":`accordion-header_XuGF6`,accordionHeader:r,"accordion-header-active":`accordion-header-active_xf8Ch`,accordionHeaderActive:i,"accordion-body":`accordion-body_0Jsco`,accordionBody:a,"accordion-body-inner":`accordion-body-inner_0UBPf`,accordionBodyInner:o,"accordion-body-active":`accordion-body-active_XFSy1`,accordionBodyActive:s,"accordion-icon":`accordion-icon_W1mz5`,accordionIcon:c,"accordion-icon-active":`accordion-icon-active_LI98q`,accordionIconActive:l};export{e as accordion,n as accordionActive,a as accordionBody,s as accordionBodyActive,o as accordionBodyInner,r as accordionHeader,i as accordionHeaderActive,c as accordionIcon,l as accordionIconActive,t as accordionTitle,u as default};
-//# sourceMappingURL=accordion.primary.module.mjs.map

package/dist/esm/common/accordion/accordion.primary.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.primary.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.primary.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n    border: 2px solid var(--primary-color);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    /* There is no fixed height any more: the header is this padding plus the title's line. */\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 1em;\n    }\n\n    &-active {\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion,\n  .accordion-header,\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/alert/alert.types.mjs

@@ -1,2 +0,0 @@
-"use client";var e=function(e){return e.Default=`default`,e.Info=`info`,e.Success=`success`,e.Warn=`warn`,e.Error=`error`,e}({});export{e as AlertStyleType};
-//# sourceMappingURL=alert.types.mjs.map

package/dist/esm/common/alert/alert.types.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.types.mjs","names":[],"sources":["../../../../package/common/alert/alert.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum AlertStyleType {\n  Default = 'default',\n  Info = 'info',\n  Success = 'success',\n  Warn = 'warn',\n  Error = 'error',\n}\n\nexport type AlertSlots = 'root' | 'icon' | 'content' | 'title' | 'description' | 'closeButton';\n\n/** Text Alert renders of its own, for translating it. */\nexport interface AlertLabels {\n  /** Close button, read out by screen readers. */\n  dismiss?: string;\n}\n\nexport interface AlertProps extends Omit<HtmlProps, 'title'> {\n  title?: ReactNode;\n  children?: ReactNode;\n  styleType?: AlertStyleType;\n  icon?: IconContent;\n  hideIcon?: boolean;\n  onClose?: () => void;\n  className?: string;\n  style?: CSSProperties;\n  classNames?: SlotClassNames<AlertSlots>;\n  styles?: SlotStyles<AlertSlots>;\n  /** Overrides the text Alert renders of its own. Merged per key. */\n  labels?: AlertLabels;\n}\n"],"mappings":"aAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}