@ahrowe/ui 0.34.0 → 0.36.0

package/docs/Modal.md

@@ -2,13 +2,13 @@
 
 **When to use:** Full overlay dialog — forms, detail views, confirmations, wizards that need to block the rest of the UI.
 
-**Keywords:** popup, dialog, overlay, escape, focus trap, scroll lock, sticky header, bottom sheet, action sheet, mobile, touch
+**Keywords:** popup, dialog, overlay, escape, focus trap, scroll lock, sticky header, sticky footer, actions, buttons, bottom sheet, action sheet, mobile, touch
 
 **Import:** `import { Modal } from '@ahrowe/ui'`
 
 **Requires:** `<div id="bodyEnd"></div>` in your HTML (renders via portal).
 
-The panel itself never scrolls: the header is fixed and the children scroll inside the `body` slot, so the title and close button stay visible no matter how long the content is.
+The panel itself never scrolls: the header is fixed and the children scroll inside the `body` slot, so the title and close button stay visible no matter how long the content is. Pass `footer` for anything that should stay put below the content, typically the action buttons.
 
 While open, the modal traps focus (focus moves into the panel and returns to whatever was focused before on close), locks scrolling on the page behind it, and closes on Escape. Modals nest correctly: Escape closes only the topmost one, and the page stays locked until the last one closes. The same applies to anything opened from inside a modal — a `Menu`, `Dropdown` or `Popover` counts as the layer above it, so Escape closes that first, and the modal's focus trap leaves focus alone while it's open (all three render through the same portal, so their DOM sits beside the modal's panel rather than inside it).
 
@@ -23,16 +23,18 @@ const [isOpen, setIsOpen] = useState(false);
   isOpen={isOpen}
   title="Edit Profile"
   onClose={() => setIsOpen(false)}
+  footer={
+    <ActionButtons
+      onSubmit={handleSubmit}
+      onClose={() => setIsOpen(false)}
+      isSubmitButtonLoading={isSaving}
+    />
+  }
 >
   <form onSubmit={handleSubmit}>
     <Input label="Name" formValidator={nameValidator} />
     <Input label="Email" type={InputType.Email} formValidator={emailValidator} />
   </form>
-  <ActionButtons
-    onSubmit={handleSubmit}
-    onClose={() => setIsOpen(false)}
-    isSubmitButtonLoading={isSaving}
-  />
 </Modal>
 
 // Modal without header
@@ -48,11 +50,12 @@ const [isOpen, setIsOpen] = useState(false);
 | `isOpen` | `boolean` | Controls visibility |
 | `title` | `string` | Header title |
 | `onClose` | `() => void` | Called when the backdrop is clicked, the close button is pressed, or Escape is pressed |
+| `footer` | `ReactNode` | Pinned below the scrolling body, e.g. action buttons. Nothing renders when omitted |
 | `hideHeader` | `boolean` | Removes the header bar |
 | `closeOnEscape` | `boolean` | Close on Escape while this is the topmost modal. Default `true` |
 | `presentation` | `Presentation` | Present as a bottom sheet, always (`Sheet`) or only on a small touch screen (`Auto`). `Default`, or omitting it, is the centred dialog |
 
-**Bottom sheet:** `presentation={Presentation.Sheet}` pins the dialog to the bottom of the screen instead of centring it — full width up to 560px, rounded on its top corners only, sliding up rather than scaling in, and lifted above an open on-screen keyboard, shrinking to fit the space that leaves rather than running off the top of the screen. Nothing else changes: the header stays fixed and the body scrolls, which is what a sheet needs anyway, and the backdrop, focus trap, scroll lock and Escape all behave exactly as they do centred. `Presentation.Auto` applies it only when the pointer is coarse *and* the screen is under 768px wide.
+**Bottom sheet:** `presentation={Presentation.Sheet}` pins the dialog to the bottom of the screen instead of centring it — full width up to 560px, rounded on its top corners only, sliding up rather than scaling in, and lifted above an open on-screen keyboard, shrinking to fit the space that leaves rather than running off the top of the screen. Nothing else changes: the header and footer stay fixed and the body scrolls, which is what a sheet needs anyway, and the backdrop, focus trap, scroll lock and Escape all behave exactly as they do centred. `Presentation.Auto` applies it only when the pointer is coarse *and* the screen is under 768px wide.
 
 `Presentation.Default` means "wherever the component normally puts it", which for a Modal is centred rather than anchored to anything — so an app-wide `<ConfigProvider presentation={Presentation.Default}>` switches sheets off everywhere, this included.
 
@@ -64,12 +67,33 @@ import { Modal, Presentation } from '@ahrowe/ui';
 </Modal>
 ```
 
-A sheet-presented Modal takes 90% of the screen height rather than the 70% a menu-sized sheet uses, since it carries forms and detail views. Override either with the `--sheet-max-height` and `--sheet-safe-padding` custom properties, per instance via `style` or theme-wide via `ThemeProvider`. `--sheet-max-height` is a ceiling, not a height: whatever it's set to, a sheet never grows past the area actually visible, which is measured live and so accounts for an open keyboard that no viewport unit can see.
+A sheet-presented Modal takes 90% of the screen height rather than the 70% a menu-sized sheet uses, since it carries forms and detail views, and it takes its bottom safe-area padding from `--modal-padding`, so the panel's own spacing carries down to the screen edge. It sets both on the panel itself, so a `ThemeProvider` value for `--sheet-max-height` or `--sheet-safe-padding` never reaches a Modal sheet: override those two per instance via `style`. `--sheet-max-width` it leaves alone, so that one works theme-wide as well. A sheet spans the full width up to it (560px) and centres beyond, full-bleed on a phone and a centred panel on anything wider. `--sheet-max-height` is a ceiling, not a height: whatever it's set to, a sheet never grows past the area actually visible, which is measured live and so accounts for an open keyboard that no viewport unit can see.
+
+**Theming:** override these CSS variables theme-wide via `ThemeProvider` or per instance via `style`; each falls back to a built-in default:
+
+| Variable | Falls back to |
+|----------|---------------|
+| `--modal-padding` | `var(--spacing-l)` |
+| `--modal-gap` | `var(--spacing-l)` — the gap between header, body and footer |
+| `--modal-max-width` | `calc(100% - 2 * var(--modal-padding))` |
+| `--modal-max-height` | `calc(100% - 2 * var(--modal-padding))` |
+| `--modal-body-bleed` | `calc(var(--modal-gap) / 2)` |
+| `--modal-scroll-fade` | `calc(var(--modal-gap) + var(--modal-body-bleed))` — `0px` switches the fade off |
+
+The panel has no width of its own, so it grows to whatever its content asks for up to `--modal-max-width`. Give a text-heavy dialog an explicit `width` (or set `--modal-max-width` app-wide) rather than letting a long paragraph decide how wide the dialog is.
+
+The cap is the same at every screen size: the panel never comes closer to the edge than its own padding. There is no breakpoint, so a phone and a desktop leave the same gap and the backdrop stays visible around the panel on both.
+
+`--modal-body-bleed` is how far the body reaches past its own edge, as a negative margin cancelled by an equal padding, so a focus ring or a floating label on the first element inside isn't clipped by the scroll container. Adjust it through this variable rather than setting `padding` on the `body` slot, which drops the negative half and brings the clipping back. Because the two cancel, content always rests exactly `--modal-gap` from the header and footer whatever the bleed is; what the bleed sets is where scrolling content is *clipped*, at `gap - bleed` from each. It defaults to half the gap, putting that edge midway between the chrome and where the content rests.
+
+**Scrolling.** Content dissolves into the edge it is scrolling past rather than being cut off against it: a `mask-image` fades the top of the body while content is hidden above, and the bottom while content continues below. Each end is independent, and both are fully opaque on a dialog that doesn't scroll, so a short modal renders exactly as before. A line sliced clean in half is what a rule or a shadow at that boundary would leave in place, which is why neither is used. Set `styles={{ body: { overflow: 'hidden' } }}` — for content that scrolls itself, say a `VirtualList` — and the fade goes quiet with it, rather than dimming content nobody can scroll to.
+
+To switch it off and go back to a hard edge, set `--modal-scroll-fade: 0px`, per instance via `style` or across an app via `ThemeProvider`. It is also off automatically under `prefers-contrast: more`, since fading text costs contrast at exactly the edge someone may be reading.
 
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Modal: { presentation: Presentation.Auto } }}` — which also covers `DatePicker`, `TimeInput` and `KlipyPicker` when they open in a Modal via their own `isModal`. `presentation={Presentation.Auto}` on the provider itself sets every sheet-capable component at once. See [ConfigProvider.md](ConfigProvider.md).
 
 The panel also takes the full native `div` attribute set (`id`, `role`, `aria-*`, `data-*`, …). Pass `aria-label` when using `hideHeader`, since there is then no title to label the dialog with.
 
-**Slots:** `container` `backdrop` `modal` `header` `title` `closeButton` `body`
+**Slots:** `container` `backdrop` `modal` `header` `title` `closeButton` `body` `footer`
 
 **Labels:** `close` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `ModalLabels`.

package/docs/MultiSelect.md

@@ -31,7 +31,7 @@ const [value, setValue] = useState<MultiSelectValue[]>([]);
 <MultiSelect items={countries} searchable labels={{ searchPlaceholder: 'Filter countries…' }} />
 
 // Tag entry: type a value that isn't in `items` and pick the "add" row
-<MultiSelect items={commonTags} allowCustomValues labels={{ create: (value) => `Neu: ${value }}`} />
+<MultiSelect items={commonTags} allowCustomValues labels={{ create: (value) => `Neu: ${value}` }} />
 
 // Cap the selection — unselected options disable once the cap is reached
 <MultiSelect items={items} maxSelected={3} />
@@ -84,7 +84,7 @@ import { Presentation } from '@ahrowe/ui';
 | `errorMessage` | `string` | Manual error, shown in a tooltip when there's no validator |
 | `isValid` | `boolean` | Manual valid state (default `true`) |
 
-**Keyboard:** `↓` or `Enter` opens the panel. `↑`/`↓` move the highlight and wrap around, `Home`/`End` jump to the ends, `Enter` toggles the highlighted option, `Escape` closes. `Backspace` removes the last selection when the search box is empty. With `searchable`, focus moves into the search box on open and the same keys work from there.
+**Keyboard:** `↓` or `Enter` opens the panel. `↑`/`↓` move the highlight and wrap around, skipping options that cannot be picked — a disabled one, or any unselected one once `maxSelected` is reached. `Home`/`End` jump to the ends, `Enter` toggles the highlighted option, `Escape` closes. The panel scrolls to keep the highlighted option in view. `Backspace` removes the last selection when the search box is empty. With `searchable`, focus moves into the search box on open and the same keys work from there.
 
 **Accessibility:** the control is a `role="combobox"` with `aria-expanded`, `aria-haspopup="listbox"` and `aria-controls`; the panel is a `role="listbox"` with `aria-multiselectable="true"`, and each option carries `aria-selected`. The highlighted option is reported through `aria-activedescendant`, so focus stays on the control (or the search box) rather than moving between options. Each chip's remove button is labelled `Remove <label>`.
 

package/docs/NumberInput.md

@@ -76,6 +76,7 @@ const priceValidator = new FormValidator<number | undefined>(undefined, [Validat
 | `arrowsLayout` | `'auto' \| 'stacked' \| 'split'` | Stepper layout. Default: `'auto'` |
 | `labels.increase` | `string` | Accessible name for the increase button. Default: `'Increase'` |
 | `labels.decrease` | `string` | Accessible name for the decrease button. Default: `'Decrease'` |
+| `ref` | `Ref<HTMLInputElement>` | Ref to the inner `<input>` |
 
 **Steppers (`showArrows`):** two layouts, picked by `arrowsLayout`:
 

package/docs/OtpInput.md

@@ -88,6 +88,7 @@ const codeValidator = new FormValidator('', [Validators.required(), Validators.m
 | `clearErrorDelay` | `number` | Delay in ms before `clearOnError` clears the boxes (default `900`) |
 | `disabled` | `boolean` | |
 | `autoFocus` | `boolean` | Focuses the first empty box (or the first box) on mount |
+| `ref` | `Ref<HTMLDivElement>` | Ref to the root element |
 
 **Slots:** `root` `label` `inputs` `input` `separator`
 

package/docs/Pagination.md

@@ -1,6 +1,6 @@
 # Pagination
 
-**When to use:** Move through server-paged results a page at a time — a results list, an admin table, a report. For endless scrolling instead, use `InfiniteBlock`; for a long list that's all in memory, use `VirtualList`.
+**When to use:** Move through server-paged results a page at a time — a results list, an admin table, a report. For endless scrolling instead, or for a long list that's all in memory, use `VirtualList`.
 
 **Keywords:** pager, paging, page numbers, next page, previous page, page navigation, offset, results
 

package/docs/Popover.md

@@ -69,6 +69,8 @@ import { Popover, PopoverPlacement, PopoverAlign, PopoverTrigger } from '@ahrowe
 
 **Bottom sheet:** `presentation={Presentation.Sheet}` drops the anchoring and the arrow, and pins the panel to the bottom of the screen instead — full width up to 560px, behind a backdrop, scrolling internally past 70% of the viewport height, lifted above an open on-screen keyboard, and shrunk to fit the space that leaves rather than running off the top of the screen. Scrolling on the page behind it is locked while it's open, and tapping the backdrop closes it without pressing whatever sits behind it (`closeOnOutsideClick={false}` leaves the backdrop inert but still blocking). `Presentation.Auto` applies that only when the pointer is coarse *and* the screen is under 768px wide.
 
+**Sheet dimensions:** as a sheet it spans the full width up to `--sheet-max-width` (560px) and centres beyond it, caps its height at `--sheet-max-height` (70dvh) of the space actually visible, and clears a phone's home indicator with `--sheet-safe-padding` (8px, or the device's own safe-area inset where that is larger). Set any of them per instance via `style` or theme-wide via `ThemeProvider`.
+
 Only a `Click` trigger presents as a sheet. `Hover` and `Focus` open something small next to whatever caused them, which is the opposite of a screen-owning sheet, so they stay anchored regardless of `presentation`.
 
 **Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Popover: { presentation: Presentation.Auto } }}`, or `presentation={Presentation.Auto}` on the provider itself to set every sheet-capable component at once. See [ConfigProvider.md](ConfigProvider.md).

package/docs/RadioGroup.md

@@ -66,7 +66,7 @@ interface RadioOption {
 | `onChange` | `(value, event?) => void` | Fires with the newly selected value |
 | `orientation` | `RadioGroupOrientation` | Layout direction (default `Vertical`) |
 | `disabled` | `boolean` | Disable the whole group |
-| `size` | `string` | Diameter of the radio circle (default `'18px'`) |
+| `size` | `string` | Diameter of the radio circle. Defaults to `1.125em` of `--default-font-size`, i.e. 18px at a 16px base |
 | `formValidator` | `FormValidator` | Connects to form validation |
 | `errorMessage` | `string` | Manual error message (when not using a `formValidator`) |
 | `isValid` | `boolean` | Manual valid state (default `true`) |

package/docs/Rating.md

@@ -2,6 +2,8 @@
 
 **When to use:** A star rating input or display, for review scores, feedback prompts, and quality indicators. Use `readOnly` to just show an existing rating (e.g. a product's average score) rather than collect one.
 
+**Keywords:** stars, ranking, thumbs up
+
 **Import:** `import { Rating } from '@ahrowe/ui'`
 **Types:** `import type { RatingProps } from '@ahrowe/ui'`
 

package/docs/Ripple.md

@@ -6,6 +6,9 @@
 
 **Import:** `import { Ripple } from '@ahrowe/ui'`
 
+A click on a control inside the rippling element does not ripple: the ripple answers for the
+element it wraps, and a field or a button inside it answers for itself.
+
 ```tsx
 import { Ripple } from '@ahrowe/ui';
 

package/docs/RoomViewer.md

@@ -1,13 +1,11 @@
 # RoomViewer
 
-**When to use:** to show a floor plan someone can look at and click, without letting them change it — a building directory, a booking screen, a dashboard beside a room list.
+**When to use:** Shows a floor plan someone can look at and click, without letting them change it — a building directory, a booking screen, a dashboard beside a room list.
 
 **Keywords:** map, site plan, wayfinding, hotspot, clickable regions, blueprint, storey, apartment, read-only
 
-```tsx
-import { RoomViewer } from '@ahrowe/ui';
-import type { RoomViewerProps, RoomViewerHandle } from '@ahrowe/ui';
-```
+**Import:** `import { RoomViewer } from '@ahrowe/ui'`  
+**Types:** `import type { RoomViewerProps, RoomViewerHandle } from '@ahrowe/ui'`
 
 It renders a **`FloorPlan`** — the same document [RoomDrawer](./RoomDrawer.md) edits and downloads, drawn on the same canvas — so the two can never drift apart. See [FloorPlan](./FloorPlan.md) for the model.
 

package/docs/ScrollFade.md

@@ -0,0 +1,77 @@
+# ScrollFade
+
+**When to use:** A scrollable box whose content dissolves at the edge it is scrolling past, instead of being cut off mid-line against it. Use it for a bounded list, a long block of text, a chip or tab row that scrolls sideways — anywhere the hard edge of a scroll container makes content look damaged rather than continued. For a whole page section that pins on scroll use [Sticky](Sticky.md); for thousands of rows use [VirtualList](VirtualList.md).
+
+**Keywords:** scroll shadow, scroll indicator, overflow, edge, gradient, mask, cut off, more content, scrollable list, overscroll hint
+
+**Import:** `import { ScrollFade, ScrollFadeAxis } from '@ahrowe/ui'`
+**Types:** `import type { ScrollFadeProps } from '@ahrowe/ui'`
+
+`ScrollFade` **is** the scroll container, not a wrapper around one. Give it a bound — a `maxHeight`, a `height`, or a flex parent that constrains it — or it grows to its content and never scrolls.
+
+```tsx
+import { ScrollFade, ScrollFadeAxis } from '@ahrowe/ui';
+
+// A bounded list: the bottom fades until you reach the end, the top once you have left it
+<ScrollFade style={{ maxHeight: 280 }}>
+  {items.map((item) => (
+    <Row key={item.id} item={item} />
+  ))}
+</ScrollFade>
+
+// Sideways, for a chip or tab row
+<ScrollFade axis={ScrollFadeAxis.Horizontal} style={{ maxWidth: '100%' }}>
+  <ChipContainer inline>
+    {tags.map((tag) => (
+      <Chip key={tag} text={tag} />
+    ))}
+  </ChipContainer>
+</ScrollFade>
+
+// A longer fade, for larger text
+<ScrollFade fadeLength='48px' style={{ maxHeight: 400 }}>
+  <Article />
+</ScrollFade>
+
+// Both ends faded at all times, no measuring — for a strip whose own padding already
+// holds its first and last item clear of the fade
+<ScrollFade axis={ScrollFadeAxis.Horizontal} isAlwaysFaded style={{ paddingInline: 24 }}>
+  <Thumbnails />
+</ScrollFade>
+```
+
+**Enums:**
+
+- `ScrollFadeAxis`: `Vertical` (default) | `Horizontal`
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | The scrolling content |
+| `axis` | `ScrollFadeAxis` | Which way it scrolls (default `Vertical`) |
+| `fadeLength` | `string` | How far the fade runs from each edge, any CSS length (default `24px`) |
+| `isAlwaysFaded` | `boolean` | Fade both ends whether or not content is hidden there, which skips the measuring entirely (default `false`). Pair it with padding equal to `fadeLength`, so the first and last item start out clear of the fade and only dissolve once scrolled into it — that is how `Carousel` fades its dot strip |
+| `ref` | `Ref<HTMLDivElement>` | The scrolling element itself, for `scrollTo` and friends |
+
+Each end is measured independently, so the fade says which way there is more to go: only the bottom at the top of a list, only the top at the end of it, both in between, and neither on content that fits. Nothing fades while it does not scroll, so a `ScrollFade` around short content looks exactly like a plain `div`. Each end eases in and out over 200ms rather than switching, so reaching an edge doesn't snap. Nothing fades on an axis that cannot scroll: override the overflow to `hidden` or `clip` and the fade goes quiet, since there would be no way to reach what it was hiding.
+
+**How it fades:** a `mask-image`, not a gradient overlay. An overlay has to be painted in the container's own background colour, which a reusable component cannot know; a mask works over a card, a sheet or a photo alike.
+
+The mask covers the whole element, which has two consequences worth knowing. Its own `background`, `border` and `border-radius` fade along with the content, so a bordered box should put the border on a wrapper around `ScrollFade` rather than on `ScrollFade` itself:
+
+```tsx
+<div className="framed">
+  <ScrollFade style={{ maxHeight: 240 }}>{rows}</ScrollFade>
+</div>
+```
+
+And the scrollbar fades with everything else. That is usually invisible with overlay scrollbars; hide the scrollbar on a strip where it shows.
+
+Under `prefers-contrast: more` the fade switches itself off and the edge goes hard again, since fading text costs contrast at exactly the edge someone may be reading. `fadeLength='0px'` turns it off outright.
+
+In a browser without `mask-image` the fade simply does not appear and the box scrolls normally. In one without `@property` it appears and disappears instantly instead of easing, since an unregistered custom property has no type for the browser to interpolate.
+
+**Theming:** `--scroll-fade-length` sets the same distance as the `fadeLength` prop, and can be set theme-wide via `ThemeProvider` or on any ancestor. The prop wins where both are set. It reaches `ScrollFade` only: `Modal` and `Carousel` fade their own scroll ports from `--modal-scroll-fade` and from a length tuned to the dot strip, and neither hands its length down to a `ScrollFade` nested inside it.
+
+**Slots:** none — `ScrollFade` renders a single element around its children, so `className`/`style` on the root is the whole surface.

package/docs/ScrollbarProvider.md

@@ -2,6 +2,8 @@
 
 **When to use:** Applies custom scrollbar styling to a scrollable region — use to keep scrollbar appearance consistent with the theme.
 
+**Keywords:** overflow, scroll area, thin
+
 **Import:** `import { ScrollbarProvider } from '@ahrowe/ui'`
 
 ```tsx

package/docs/SearchInput.md

@@ -40,6 +40,7 @@ import { SearchInput } from '@ahrowe/ui';
 | Variable | Falls back to |
 |----------|---------------|
 | `--search-input-color` | *(none — unset by default)* |
+| `ref` | `Ref<HTMLInputElement>` | Ref to the inner `<input>`, for focusing the field |
 
 **Key props:**
 

package/docs/Slider.md

@@ -80,7 +80,7 @@ const [value, setValue] = useState(40);
 | `marks` | `SliderMark[]` | Tick marks, `{ value, label? }` |
 | `showValue` | `boolean` | Show the current value in a bubble above the thumb |
 | `formatValue` | `(value: number) => ReactNode` | Format the bubble text and `aria-valuetext` |
-| `size` | `string` | Thumb diameter, any CSS length (default `'18px'`) |
+| `size` | `string` | Thumb diameter, any CSS length. Defaults to `1.125em` of `--default-font-size`, i.e. 18px at a 16px base |
 | `aria-label` | `string` | Accessible label |
 
 **Accessibility:** renders `role="slider"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow` (and `aria-valuetext` when `formatValue` returns a string/number). Give it an `aria-label` (or wire up your own visible label). Respects `prefers-reduced-motion` (no thumb/fill transition).

package/docs/Switch.md

@@ -46,6 +46,7 @@ const notifyValidator = new FormValidator(false);
 | `disabled` | `boolean` | |
 | `children` | `ReactNode` | Custom label content (overrides `label`) |
 | `tabIndex` | `number` | |
+| `ref` | `Ref<HTMLDivElement>` | Ref to the root element |
 
 **Sizing:** the track and thumb are dimensioned in `em`, so the whole switch scales with the inherited `font-size` — no dedicated size prop. Use `style={{ fontSize: ... }}` to scale everything together, or the `track`/`thumb` slots (`classNames`/`styles`) to resize just those parts.
 

package/docs/Textarea.md

@@ -40,5 +40,6 @@ const descValidator = new FormValidator('', [Validators.required(), Validators.m
 | `formValidator` | `FormValidator` | Connects to validation |
 | `placeholder` | `string` | |
 | `readOnly` | `boolean` | |
+| `ref` | `Ref<HTMLTextAreaElement>` | Ref to the inner `<textarea>` |
 
 **Slots:** Same as `Input` — `label` `container` `input` `suffix` `upperRightLabel` `fieldset`

package/docs/ThemeProvider.md

@@ -5,7 +5,8 @@
 **Keywords:** theming, dark mode, gradient
 
 **Import:** `import { ThemeProvider } from '@ahrowe/ui'`  
-**Types:** `import type { Theme, ThemeVariables } from '@ahrowe/ui'`
+**Types:** `import type { Theme, ThemeVariables } from '@ahrowe/ui'`  
+**Built-in themes:** `import { defaultTheme, lightTheme } from '@ahrowe/ui'`
 
 ```tsx
 import { ThemeProvider } from '@ahrowe/ui';
@@ -50,6 +51,34 @@ const darkTheme: Theme = {
 </ThemeProvider>
 ```
 
+## The two built-in themes
+
+The package ships a pair. `defaultTheme` is dark and is what `ThemeProvider` applies when you pass
+no `themes` at all. `lightTheme` is its light sibling: same brand colour, inverted surfaces. Pass
+both to let the user choose.
+
+```tsx
+import { ThemeProvider, defaultTheme, lightTheme, useTheme } from '@ahrowe/ui';
+
+function App() {
+  const { currentThemeId, setCurrentThemeId } = useTheme(defaultTheme.id);
+
+  return (
+    <ThemeProvider themes={[defaultTheme, lightTheme]} currentThemeId={currentThemeId}>
+      <button onClick={() => setCurrentThemeId(currentThemeId === 'light' ? 'default' : 'light')}>
+        Toggle theme
+      </button>
+      <App />
+    </ThemeProvider>
+  );
+}
+```
+
+`lightTheme` declares only the twenty-odd variables that have to flip and inherits the rest through
+`baseThemeId: 'default'`. That is the shape to copy for your own theme: override what your brand
+changes, inherit everything else, so a new variable added to the library reaches your theme without
+you touching it.
+
 **Theme type:**
 
 ```ts

package/docs/Timer.md

@@ -94,7 +94,7 @@ function Example() {
 | `maxSeconds` | `number` | Optional cap on remaining time when adding |
 | `label` | `ReactNode` | Text under the time readout, inside the ring |
 | `formatTime` | `(remainingMs: number) => ReactNode` | Overrides the default `MM:SS` / `H:MM:SS` formatter |
-| `size` | `string` | Ring diameter, any CSS length (default `'160px'`) |
+| `size` | `string` | Ring diameter, any CSS length. Defaults to `10em`, i.e. 160px at a 16px base |
 | `strokeWidth` | `number` | Ring stroke width in px (default `10`) |
 | `counterClockwise` | `boolean` | Depletes counter-clockwise instead of the default clockwise sweep (default `false`) |
 | `urgentThreshold` | `number` | Fraction (0–1) of the original duration at which the urgent colour/pulse kicks in (default `0.1`) |

package/docs/Tooltip.md

@@ -4,7 +4,8 @@
 
 **Keywords:** hint, help text, info bubble
 
-**Import:** `import { Tooltip } from '@ahrowe/ui'`
+**Import:** `import { Tooltip } from '@ahrowe/ui'`  
+**Types:** `import type { TooltipProps, TooltipVariant, TooltipLabels } from '@ahrowe/ui'`
 
 ```tsx
 import { Tooltip } from '@ahrowe/ui';
@@ -39,6 +40,27 @@ import { Tooltip } from '@ahrowe/ui';
 | `iconPosition` | `string` | CSS positioning for the icon |
 | `tooltipPosition` | `string` | CSS positioning for the bubble |
 | `onClick` | `() => void` | Click handler on the icon |
+| `labels` | `TooltipLabels` | Overrides the text Tooltip renders of its own. Merged per key |
+
+**Labels:** `details` (accessible name of the `details` variant's `?` badge, default `More information`).
+
+## Accessibility
+
+The bubble carries `role="tooltip"`, and while it is shown the element it sits inside gains an
+`aria-describedby` pointing at it, so a screen reader reads the tooltip as the description of the
+field or control it explains. The attribute is removed again when the bubble goes.
+
+The `error` variant is `role="alert"` instead: it appears in answer to something the user just
+did, and a description is only read out when its trigger is focused, which a field the user has
+already left is not.
+
+The `details` badge is a real control. It takes focus, opens on focus as well as hover, toggles on
+Enter and Space, and reports its state through `aria-expanded`. Give it a translated name through
+`labels.details`.
+
+```tsx
+<Tooltip variant="details" message="Last updated: 2 hours ago" labels={{ details: 'Mehr Informationen' }} />
+```
 
 The bubble is rendered through a portal and tracks its trigger's position directly, so it always escapes clipping ancestors (cards, scroll containers, virtualized lists) — no `position: relative` wrapper is required. It flips to the opposite side automatically when there's no room in its preferred direction, and hides (without losing state) if the trigger itself scrolls behind a clipping ancestor, reappearing once it's back in view.
 

package/docs/Wizard.md

@@ -41,4 +41,4 @@ const [step, setStep] = useState(0);
 | `renderStep` | `(stepIndex: number) => ReactNode` | Render function called per step |
 | `className` | `string` | Wrapper class |
 
-**Note:** Legacy JSX component. See [package/common/wizard/wizard.jsx](../common/wizard/wizard.jsx) for full implementation details.
+**Slots:** `root` `container` `step` `stepContent`

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
+    "agent",
+    "ai",
+    "claude",
+    "claude-code",
     "components",
     "css-modules",
+    "design-system",
+    "mcp",
     "react",
     "theming",
     "typescript",
     "ui"
   ],
-  "homepage": "https://github.com/AndreasWeinzierl/ahrowe-ui#readme",
+  "homepage": "https://ahrowe.com/packages/ui/demo/",
   "bugs": {
     "url": "https://github.com/AndreasWeinzierl/ahrowe-ui/issues"
   },
   "license": "MIT",
-  "author": "AndreasWeinzierl",
+  "author": "ahrowe <dev@ahrowe.com>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/AndreasWeinzierl/ahrowe-ui"
+    "url": "git+https://github.com/AndreasWeinzierl/ahrowe-ui.git"
   },
   "style": "./dist/style.css",
   "bin": {
@@ -35,11 +41,17 @@
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/types/index.d.ts"
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs-types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
@@ -55,14 +67,20 @@
     "run-stylelint": "stylelint --cache --fix \"package/**/*.pcss\" \"src/**/*.css\"",
     "run-oxfmt": "oxfmt --write .",
     "run-tsc": "tsc --noEmit",
+    "check-oxlint": "oxlint .",
+    "check-stylelint": "stylelint \"package/**/*.pcss\" \"src/**/*.css\"",
+    "check-oxfmt": "oxfmt --check .",
     "format": "oxfmt --write .",
     "lint": "run-p run-tsc run-oxlint run-stylelint run-oxfmt",
+    "check": "run-p run-tsc check-oxlint check-stylelint check-oxfmt",
     "gen-barrel": "tsx scripts/gen-barrel.ts",
     "gen-theme-map": "tsx scripts/gen-theme-map.ts",
+    "gen-component-table": "tsx scripts/gen-component-table.ts",
     "gc": "tsx scripts/generate-component.ts",
     "changeset": "changeset",
     "release": "bash src/scripts/release.sh",
     "verify-package": "bash src/scripts/verify-package.sh",
+    "check-package": "bash src/scripts/check-package.sh",
     "test": "vitest run",
     "test:browser": "vitest run --config vitest.browser.config.ts",
     "test:watch": "vitest",
@@ -74,18 +92,16 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@modelcontextprotocol/sdk": "^1.30.0",
-    "@mona-health/react-input-mask": "^3.0.3",
     "classnames": "^2.5.1",
-    "downshift": "^9.4.0",
-    "react-number-format": "^5.4.5",
-    "zod": "^4.6.5"
+    "react-number-format": "^5.4.5"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
     "@changesets/cli": "^3.0.3",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
     "@fortawesome/free-solid-svg-icons": "^7.3.1",
     "@fortawesome/react-fontawesome": "^3.5.0",
+    "@modelcontextprotocol/sdk": "^1.30.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -109,10 +125,13 @@
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
     "postcss-nested": "^8.0.1",
+    "publint": "^0.3.24",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-element-to-jsx-string": "^17.0.1",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
     "stylelint": "^17.15.0",
     "stylelint-config-standard": "^40.0.0",
     "three": "^0.186.0",
@@ -120,16 +139,20 @@
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
     "vite-plugin-dts": "^5.1.0",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.1",
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": ">=6.0.0",
     "@fortawesome/free-solid-svg-icons": ">=6.0.0",
     "@fortawesome/react-fontawesome": ">=0.2.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": "vitest related --run"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs

@@ -1,2 +0,0 @@
-import e from"../loading/spinnerLoading/index.mjs";import t from"./infiniteBlock.module.mjs";import n,{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(e){return e==null||typeof e==`boolean`?``:typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(d).join(``):n.isValidElement(e)?d(e.props.children):``}function f(e,t,n){return e===-1?t>0?0:n-1:(e+t+n)%n}function p(e,t,n){let[r,s]=o(!1),c=a(!1),l=a(null),u=a(t);return i(()=>{u.current=t}),i(()=>{let t=e.current,r=l.current;if(n||!t||!r)return;let i=!1,a=()=>{c.current||(c.current=!0,s(!0),u.current().catch(()=>null).finally(()=>{i||(c.current=!1,s(!1),o.unobserve(r),o.observe(r))}))},o=new IntersectionObserver(([e])=>{e.isIntersecting&&a()},{root:t});return o.observe(r),()=>{i=!0,o.disconnect()}},[e,n]),{isLoading:r,sentinelRef:l}}function m(e,t){let i=a(null),o=a(-1),s=a(null);return{containerRef:i,onKeyDown:r(r=>{let a=i.current;if(!a)return;let c=n.Children.toArray(e);if(c.length===0)return;let l=o.current;if(r.key===`ArrowDown`)r.preventDefault(),l=f(l,1,c.length);else if(r.key===`ArrowUp`)r.preventDefault(),l=f(l,-1,c.length);else if(r.key.length===1){let e=r.key.toLowerCase(),t=s.current===r.key?l+1:0,n=t=>d(t).toLowerCase().startsWith(e),i=c.slice(t).findIndex(n),a=i===-1?c.slice(0,t).findIndex(n):t+i;if(s.current=r.key,a===-1)return;l=a}else return;s.current=r.key,o.current=l;let u=a.children[l];if(u){let e=u.offsetTop,t=e+u.offsetHeight;e<a.scrollTop?a.scrollTop=e:t>a.scrollTop+a.clientHeight&&(a.scrollTop=t-a.clientHeight)}t(l)},[e,t])}}function h({children:n,onScroll:r,className:i=``,style:a,isDataLoading:o=!1,setHighlightedIndex:d=()=>null}){let{containerRef:f,onKeyDown:h}=m(n,d),{isLoading:g,sentinelRef:_}=p(f,r,o);return l(`div`,{className:s(t.infiniteBlock,i),style:a,onKeyDown:h,tabIndex:0,ref:f,children:o?l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})}):u(c,{children:[n,l(`div`,{ref:_,className:t.sentinel,"aria-hidden":`true`}),g&&l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})})]})})}export{h as default};
-//# sourceMappingURL=infiniteBlock.mjs.map

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"infiniteBlock.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './infiniteBlock.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport type { InfiniteBlockProps } from './infiniteBlock.types';\n\n// Flattens a React node down to the text it renders, so keyboard type-ahead can match\n// against whatever a child actually displays — a plain string, a number, or something\n// wrapped in nested elements/fragments/arrays (e.g. an icon + label pair).\nfunction getNodeText(node: React.ReactNode): string {\n  if (node === null || node === undefined || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getNodeText).join('');\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n  return '';\n}\n\n// Cycles the index by `change`, wrapping directly from last to first (and first to last) —\n// no \"nothing highlighted\" stop in between, in either direction. `-1` means nothing is\n// highlighted yet: ArrowDown from there starts at the first item, ArrowUp at the last.\nfunction clampIndex(index: number, change: number, length: number): number {\n  if (index === -1) return change > 0 ? 0 : length - 1;\n  return (index + change + length) % length;\n}\n\n// Loads more items once a sentinel element at the end of the list scrolls into view.\n// IntersectionObserver only fires on a change of intersection state, so if a page of\n// freshly-loaded items still doesn't fill the container, the sentinel stays visible and\n// we have to re-arm the observer ourselves to pick up the next page.\nfunction useInfiniteScroll(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  onScroll: () => Promise<void>,\n  disabled: boolean,\n) {\n  const [isLoading, setIsLoading] = useState(false);\n  const isLoadingRef = useRef(false);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  // Kept in a ref so a caller passing a fresh onScroll function each render doesn't\n  // tear down and recreate the observer every time.\n  const onScrollRef = useRef(onScroll);\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  });\n\n  useEffect(() => {\n    const root = containerRef.current;\n    const sentinel = sentinelRef.current;\n    if (disabled || !root || !sentinel) return undefined;\n\n    let cancelled = false;\n\n    const loadMore = () => {\n      if (isLoadingRef.current) return;\n      isLoadingRef.current = true;\n      setIsLoading(true);\n\n      onScrollRef\n        .current()\n        .catch(() => null)\n        .finally(() => {\n          if (cancelled) return;\n          isLoadingRef.current = false;\n          setIsLoading(false);\n          observer.unobserve(sentinel);\n          observer.observe(sentinel);\n        });\n    };\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) loadMore();\n      },\n      { root },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      cancelled = true;\n      observer.disconnect();\n    };\n  }, [containerRef, disabled]);\n\n  return { isLoading, sentinelRef };\n}\n\n// Arrow-key navigation plus type-ahead: pressing a character key jumps to the next child\n// whose text starts with it, cycling through repeats and wrapping at the end of the list.\nfunction useTypeaheadNav(children: React.ReactNode, setHighlightedIndex: (index: number) => void) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const indexRef = useRef(-1);\n  const lastKeyRef = useRef<string | null>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const childArray = React.Children.toArray(children);\n      if (childArray.length === 0) return;\n\n      let index = indexRef.current;\n\n      if (event.key === 'ArrowDown') {\n        // Without this, the browser's own native \"scroll a focused scrollable element on\n        // arrow keys\" behavior fires alongside our scrollIntoView math below, stacking an\n        // extra native scroll on top of ours on every press until the highlighted item is\n        // pushed out of view entirely.\n        event.preventDefault();\n        index = clampIndex(index, 1, childArray.length);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        index = clampIndex(index, -1, childArray.length);\n      } else if (event.key.length === 1) {\n        const key = event.key.toLowerCase();\n        const repeatingKey = lastKeyRef.current === event.key;\n        const searchStart = repeatingKey ? index + 1 : 0;\n        const startsWithKey = (child: React.ReactNode) => getNodeText(child).toLowerCase().startsWith(key);\n\n        const afterCurrent = childArray.slice(searchStart).findIndex(startsWithKey);\n        const match =\n          afterCurrent !== -1 ? searchStart + afterCurrent : childArray.slice(0, searchStart).findIndex(startsWithKey);\n\n        lastKeyRef.current = event.key;\n        if (match === -1) return;\n        index = match;\n      } else {\n        return;\n      }\n\n      lastKeyRef.current = event.key;\n      indexRef.current = index;\n\n      const child = container.children[index] as HTMLElement | undefined;\n      if (child) {\n        const childTop = child.offsetTop;\n        const childBottom = childTop + child.offsetHeight;\n        if (childTop < container.scrollTop) {\n          container.scrollTop = childTop;\n        } else if (childBottom > container.scrollTop + container.clientHeight) {\n          container.scrollTop = childBottom - container.clientHeight;\n        }\n      }\n      setHighlightedIndex(index);\n    },\n    [children, setHighlightedIndex],\n  );\n\n  return { containerRef, onKeyDown };\n}\n\nfunction InfiniteBlock({\n  children,\n  onScroll,\n  className = '',\n  style,\n  isDataLoading = false,\n  setHighlightedIndex = () => null,\n}: InfiniteBlockProps) {\n  const { containerRef, onKeyDown } = useTypeaheadNav(children, setHighlightedIndex);\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(containerRef, onScroll, isDataLoading);\n\n  return (\n    <div\n      className={cx(styles.infiniteBlock, className)}\n      style={style}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n      ref={containerRef}\n    >\n      {isDataLoading ? (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      ) : (\n        <>\n          {children}\n          <div ref={sentinelRef} className={styles.sentinel} aria-hidden='true' />\n          {showScrollSpinner && (\n            <div className={styles.spinnerWrapper}>\n              <SpinnerLoading className={styles.spinner} />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default InfiniteBlock;\n"],"mappings":"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"}

package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs

@@ -1,2 +0,0 @@
-var e=`infiniteBlock_dFv-h`,t=`sentinel_n-Zie`,n=`spinner-wrapper_hsgWz`,r=`spinner_VjUS2`,i={infiniteBlock:e,sentinel:t,"spinner-wrapper":`spinner-wrapper_hsgWz`,spinnerWrapper:n,spinner:r};export{i as default,e as infiniteBlock,t as sentinel,r as spinner,n as spinnerWrapper};
-//# sourceMappingURL=infiniteBlock.module.mjs.map

package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"infiniteBlock.module.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.module.pcss"],"sourcesContent":[".infiniteBlock {\n  position: relative;\n  max-height: none;\n}\n\n.sentinel {\n  height: 1px;\n}\n\n.spinner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n}\n\n.spinner {\n  width: 32px;\n  height: 32px;\n}\n"],"mappings":""}

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

@@ -1 +0,0 @@
-export { default } from './infiniteBlock';

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

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { InfiniteBlockProps } from './infiniteBlock.types';
-declare function InfiniteBlock({ children, onScroll, className, style, isDataLoading, setHighlightedIndex, }: InfiniteBlockProps): React.JSX.Element;
-export default InfiniteBlock;