@marianmeres/stuic 3.172.0 → 3.173.0

package/docs/domains/attachments.md

@@ -15,10 +15,11 @@ re-exported from the package root (`src/lib/index.ts`).
 
 ## Available Attachments
 
-| Attachment   | Purpose                                                      | File             |
-| ------------ | ------------------------------------------------------------ | ---------------- |
-| `autoHeight` | Animate a host's height to its single child's natural height | `auto-height.ts` |
-| `longPress`  | Detect a touch/pen long-press on the host (factory)          | `long-press.ts`  |
+| Attachment   | Purpose                                                                   | File             |
+| ------------ | ------------------------------------------------------------------------- | ---------------- |
+| `autoHeight` | Animate a host's height to its single child's natural height              | `auto-height.ts` |
+| `longPress`  | Detect a touch/pen long-press on the host (factory)                       | `long-press.ts`  |
+| `resizable`  | Drag / keyboard resizable width or height, ARIA window splitter (factory) | `resizable.ts`   |
 
 ---
 
@@ -141,6 +142,67 @@ Options: `onLongPress` (required), `duration`, `moveTolerance`, `pointerTypes`,
 
 ---
 
+## `resizable`
+
+Factory returning an attachment that makes the host's **width** (`axis: "x"`, default) or
+**height** (`axis: "y"`) resizable by dragging its edge. The generalised core of the older
+`resizableWidth` action (now a thin wrapper over it) and of the `SplitPane` component.
+
+```svelte
+<script>
+	import { resizable } from "@marianmeres/stuic";
+</script>
+
+<!-- a draggable sidebar width -->
+<div class="flex">
+	<aside {@attach resizable({ initial: 300, min: 200, max: 600, key: "sidebar" })}>
+		…
+	</aside>
+	<main class="flex-1">…</main>
+</div>
+
+<!-- a draggable height, in % of the (definite-height) parent -->
+<div class="flex flex-col h-96">
+	<div {@attach resizable({ axis: "y", units: "%", initial: 40, max: 80 })}>…</div>
+	<div class="flex-1">…</div>
+</div>
+```
+
+Semantics worth knowing:
+
+- **The handle is an ARIA window splitter** — focusable `role="separator"` with
+  `aria-orientation`, `aria-label` (`label`, default "Resize"), `aria-valuenow` / `min` /
+  `max` / `valuetext` in `units` and `aria-controls` → the host (which gets an id if it has
+  none). Arrow keys along the axis move it by `step` (default `10` px / `1` %; Shift ×10),
+  Home / End go to `min` / `max` (or 0 / the container), Enter — like double-click — resets.
+  Pointer Events with capture cover mouse, touch and pen; `data-resizing` sits on the handle
+  while a drag is in progress, and the body gets a resize cursor + `user-select: none`.
+- **Created or provided handle.** By default a thin strip with a grip is appended inside the
+  host on the resized edge (`reverse` moves it to the start edge — left / top — and inverts
+  the drag, for a host sitting at the end of its container) and the host becomes
+  `position: relative`. Pass `handle` to drive an element of your own instead (a sibling
+  separator, say — what `SplitPane` does): it receives the semantics, the listeners and
+  `touch-action: none`, no styling; everything is restored on cleanup.
+- **Sizes are in `units`**: `px`, or `%` of the parent element along the axis (the parent
+  needs a definite height for `axis: "y"` + `%`). `min` / `max` clamp every path — drag,
+  keys, `api.set()`.
+- **`initial` vs stored.** `initial` (`0` = leave the CSS size alone) applies on setup unless
+  a size is stored under `key` (`resizable-width-<key>` / `resizable-height-<key>`;
+  `sessionStorage` by default, `storage: "local"` for localStorage). Reset restores
+  `resetTo`, which defaults to `initial`.
+- **Imperative api** through `onInit(api)`: `api.set(size)` (clamped, persisted, announced,
+  reported), `api.reset()`, `api.current`.
+- **Reactivity.** Options read in the template expression re-run the attachment, as do
+  reactive reads inside an options _function_ (`resizable(() => ({ … }))`). A re-run tears
+  the handle down and re-applies the (stored or initial) size, so don't feed it state that the
+  drag itself writes — read that with `untrack`, or pass it as `initial` once.
+
+Options: `enabled`, `axis`, `initial`, `min`, `max`, `units`, `reverse`, `key`, `storage`,
+`step`, `label`, `resetTo`, `handle`, `handleClass`, `handleDragClass`, `onResize`, `onInit`,
+`debug`.
+
+---
+
 ## Attachment File Pattern
 
 An attachment is a function `(node) => cleanup?`, typed `Attachment<T>` from `svelte/attachments`.
@@ -171,8 +233,9 @@ it needs `$state` / `$derived` / a nested `$effect`.
 
 ## Key Files
 
-| File                               | Purpose                        |
-| ---------------------------------- | ------------------------------ |
-| src/lib/attachments/index.ts       | All attachment exports         |
-| src/lib/attachments/auto-height.ts | Height-animation attachment    |
-| src/lib/attachments/long-press.ts  | Long-press detection (factory) |
+| File                               | Purpose                            |
+| ---------------------------------- | ---------------------------------- |
+| src/lib/attachments/index.ts       | All attachment exports             |
+| src/lib/attachments/auto-height.ts | Height-animation attachment        |
+| src/lib/attachments/long-press.ts  | Long-press detection (factory)     |
+| src/lib/attachments/resizable.ts   | Resizable width / height (factory) |

package/docs/domains/components.md

@@ -2,45 +2,48 @@
 
 ## Overview
 
-75 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
+78 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
 
 ## Component Categories
 
 ### Layout
 
-| Component                | Purpose                                            |
-| ------------------------ | -------------------------------------------------- |
-| AppShell, AppShellSimple | Page layouts with header/sidebar/content           |
-| Header                   | Responsive nav header with hamburger collapse      |
-| Modal, ModalDialog       | Overlay containers                                 |
-| Drawer                   | Side panel overlay                                 |
-| Backdrop                 | Semi-transparent overlay with escape/focus trap    |
-| Collapsible              | Expandable sections                                |
-| Accordion                | Exclusive/multi-open expandable sections           |
-| SlidingPanels            | Panel transitions                                  |
-| TabbedMenu               | Tab navigation                                     |
-| Nav                      | Navigation wrapper                                 |
-| Breadcrumbs              | Breadcrumb trail (collapse + JSON-LD helpers)      |
-| WithSidePanel            | Two-column layout with collapsible/resizable panel |
+| Component                | Purpose                                                                    |
+| ------------------------ | -------------------------------------------------------------------------- |
+| AppShell, AppShellSimple | Page layouts with header/sidebar/content                                   |
+| Header                   | Responsive nav header with hamburger collapse                              |
+| Modal, ModalDialog       | Overlay containers                                                         |
+| Drawer                   | Side panel overlay                                                         |
+| Backdrop                 | Semi-transparent overlay with escape/focus trap                            |
+| Collapsible              | Expandable sections                                                        |
+| Accordion                | Exclusive/multi-open expandable sections                                   |
+| SlidingPanels            | Panel transitions                                                          |
+| TabbedMenu               | Tab navigation                                                             |
+| Nav                      | Navigation wrapper                                                         |
+| Breadcrumbs              | Breadcrumb trail (collapse + JSON-LD helpers)                              |
+| WithSidePanel            | Two-column layout with collapsible/resizable panel                         |
+| SplitPane                | Two panes, a draggable keyboard-operable separator (horizontal / vertical) |
 
 ### Interactive
 
-| Component            | Purpose                                                                                   |
-| -------------------- | ----------------------------------------------------------------------------------------- |
-| Button               | Actions with intent/variant/size                                                          |
-| CopyButton           | Click-to-copy Button with copied/error feedback; `copyToClipboard()` util for code        |
-| ButtonGroupRadio     | Toggle group (single selection)                                                           |
-| Switch               | Boolean toggle                                                                            |
-| Slider               | Fancy range input (fill + optional thumb)                                                 |
-| TwCheck              | Styled checkbox/radio                                                                     |
-| DropdownMenu         | Popover menu                                                                              |
-| ContextMenu          | Right-click / long-press menu at the cursor (the DropdownMenu engine + trigger semantics) |
-| CommandMenu          | Command palette (keyboard-driven)                                                         |
-| Pagination           | Standalone pager: compact prev/next or windowed page numbers; DataTable-compatible        |
-| Stepper              | Numbered step indicator for wizard/checkout flows; optional click navigation              |
-| TypeaheadInput       | Autocomplete input                                                                        |
-| ColorScheme          | Dark/light mode management with persistence                                               |
-| HoverExpandableWidth | Width-expanding container on hover                                                        |
+| Component            | Purpose                                                                                         |
+| -------------------- | ----------------------------------------------------------------------------------------------- |
+| Button               | Actions with intent/variant/size                                                                |
+| CopyButton           | Click-to-copy Button with copied/error feedback; `copyToClipboard()` util for code              |
+| ButtonGroupRadio     | Toggle group (single selection)                                                                 |
+| Switch               | Boolean toggle                                                                                  |
+| Slider               | Fancy range input (fill + optional thumb)                                                       |
+| RangeSlider          | Dual-thumb Slider: `start` ≤ `end` on one track, no crossing, `minRange`, two hidden inputs     |
+| Rating               | Star rating: radiogroup input (half steps, hover preview, form + validate) or read-only display |
+| TwCheck              | Styled checkbox/radio                                                                           |
+| DropdownMenu         | Popover menu                                                                                    |
+| ContextMenu          | Right-click / long-press menu at the cursor (the DropdownMenu engine + trigger semantics)       |
+| CommandMenu          | Command palette (keyboard-driven)                                                               |
+| Pagination           | Standalone pager: compact prev/next or windowed page numbers; DataTable-compatible              |
+| Stepper              | Numbered step indicator for wizard/checkout flows; optional click navigation                    |
+| TypeaheadInput       | Autocomplete input                                                                              |
+| ColorScheme          | Dark/light mode management with persistence                                                     |
+| HoverExpandableWidth | Width-expanding container on hover                                                              |
 
 ### Feedback
 
@@ -152,7 +155,7 @@ Use `validate={false}` to bypass stuic's validation entirely.
 
 > **Why default-on?** Hidden-input field components (`FieldPhoneNumber`,
 > `FieldCountry`, `FieldObject`, `FieldAssets`, `FieldInputLocalized`,
-> `FieldKeyValues`, `FieldLikeButton`, `FieldDate`, `FieldDateRange`) _must_ be default-on because hidden
+> `FieldKeyValues`, `FieldLikeButton`, `FieldDate`, `FieldDateRange`, `Rating`) _must_ be default-on because hidden
 > inputs are excluded from native browser constraint validation — without the
 > stuic action enforcing `required` in a `customValidator`, the attribute is a
 > silent no-op. Plain-input field components were harmonized to the same
@@ -1051,6 +1054,146 @@ Prefix: `--stuic-pagination-*`
 
 ---
 
+## RangeSlider
+
+The dual-thumb sibling of `Slider`: two values (`start` ≤ `end`) on one track, the fill spanning the selected range — price filters, "between" queries, min/max limits. Same construction: the root owns the pointer machinery (the nearest thumb jumps to a track press, grabbing a thumb drags it from the grab point, thumbs never cross — `minRange` apart when set; two stacked thumbs are told apart by the side that is pressed or, when pressed on, by the first move's direction), while two visually hidden native `<input type="range">` — one per thumb, each covering the track from its end up to the midpoint between the thumbs — provide per-thumb keyboard interaction, the slider roles for assistive tech (explore-by-touch lands on the slider of the side touched) and form participation (`nameStart` / `nameEnd`). The bound ends are two plain numbers (`bind:start` / `bind:end`, the `FieldDateRange` shape); non-finite / out-of-range / off-grid writes are normalized back into the bindings and a reversed pair is reordered.
+
+### Exports
+
+| Export                     | Kind      | Description                                                       |
+| -------------------------- | --------- | ----------------------------------------------------------------- |
+| `RangeSlider`              | component | Main component                                                    |
+| `RangeSliderProps`         | type      | Props type                                                        |
+| `RangeSliderIntent`        | type      | Fill intent union                                                 |
+| `RangeSliderOrientation`   | type      | `"horizontal" \| "vertical"`                                      |
+| `RangeSliderThumb`         | type      | `"start" \| "end"`                                                |
+| `RangeSliderValue`         | type      | `{ start: number; end: number }` — callback and validator payload |
+| `RangeSliderRenderCtx`     | type      | Snippet context (one render per thumb)                            |
+| `createRangeSliderT`       | function  | Builds the `t` prop from a (partial) message catalog              |
+| `RANGE_SLIDER_MESSAGES_EN` | constant  | Built-in English catalog (also the fallback)                      |
+| `RANGE_SLIDER_MESSAGES_SK` | constant  | Bundled Slovak catalog (opt-in)                                   |
+| `RangeSliderMessageKey`    | type      | Message key union                                                 |
+| `RangeSliderMessages`      | type      | One locale's catalog                                              |
+
+### Key Props
+
+| Prop                                   | Type                                                         | Default                             | Description                                                                                                                   |
+| -------------------------------------- | ------------------------------------------------------------ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `start` / `end`                        | `number`                                                     | `min` / `max`                       | Bindable ends — always finite, in range, on grid, ordered and `minRange` apart (writes are normalized back)                   |
+| `min` / `max` / `step`                 | `number` / `number` / `number \| "any"`                      | `0` / `100` / `1`                   | Bounds and snap increment (`"any"` = continuous)                                                                              |
+| `minRange`                             | `number`                                                     | `0`                                 | Minimum distance between the values; rounded up onto the step grid, capped at the span                                        |
+| `orientation`                          | `"horizontal" \| "vertical"`                                 | `"horizontal"`                      | Vertical fills bottom-up                                                                                                      |
+| `size` / `intent`                      | `"sm" \| "md" \| "lg"` / intent                              | `"md"` / —                          | Thickness preset; fill color                                                                                                  |
+| `thumb`                                | `boolean \| Snippet<[RangeSliderRenderCtx]>`                 | `true`                              | `false` = fill-only (linear mapping); a snippet renders inside each thumb, `ctx.thumb` says which                             |
+| `fillRounded` / `ticks` / `valueLabel` |                                                              |                                     | As on `Slider`; value labels render once per thumb (they overlap when the thumbs are close)                                   |
+| `label` / `labelStart` / `labelEnd`    | `string`                                                     | — / `t("minimum")` / `t("maximum")` | Group name (`role="group"`); accessible names of the two inputs                                                               |
+| `nameStart` / `nameEnd`                | `string`                                                     | —                                   | Form field names of the hidden inputs                                                                                         |
+| `oninput` / `onchange`                 | `(value: RangeSliderValue, thumb: RangeSliderThumb) => void` | —                                   | Every change / every commit, with the pair and the thumb that moved (native-faithful: an unchanged commit fires nothing)      |
+| `validate` / `setValidationResult`     |                                                              |                                     | Validate action on the start input, re-run on either thumb's commit; **`customValidator` receives the `{ start, end }` pair** |
+| `t`                                    | `TranslateFn`                                                | English                             | Default thumb names ("Minimum" / "Maximum")                                                                                   |
+
+Class slots: `class`, `trackClass`, `fillClass`, `thumbClass`, `tickClass`, `valueClass`. Reserved root handlers: `onpointerdown/move/up/cancel`. Imperative `validate()` / `clearValidation()` / `getValidation()` / `focus()` / `scrollIntoView()` via `bind:this`. Root data attributes: `data-thumbs` (`"true"` / `"false"`), `data-dragging` / `data-ring` / `data-active-thumb` (each naming a thumb), plus `data-orientation`, `data-size`, `data-intent`, `data-disabled`, `data-fill-rounded`; thumbs, value labels and inputs carry `data-thumb="start|end"`, tick layers `data-layer="before|on-fill|after"`. The per-thumb ratios and their midpoint are written inline as `--_ratio-start` / `--_ratio-end` / `--_mid` (survive `unstyled`; the functional CSS — `touch-action`, the inputs' hit areas — hangs off `data-stuic-range-slider`).
+
+### CSS Tokens
+
+Prefix: `--stuic-range-slider-*`
+
+`track`, `fill`, `thumb`, `thumb-foreground`, `tick`, `tick-on-fill`, `tick-size`, `ring-width`, `ring-color`, `thickness` (`size` presets 1.25 / 2 / 3rem), `length`, `thumb-inset`, `radius`, `fill-radius`, `thumb-radius`, `thumb-shadow`, `value-gap`, `transition`
+
+Deliberately its own token set, not derived from `--stuic-slider-*` (a theme restyles both explicitly). Falls back to shared `--stuic-shadow` and `--stuic-transition`.
+
+---
+
+## Rating
+
+Star rating — input and display in one. Input mode is a `role="radiogroup"` of `role="radio"` buttons (one per symbol, two with `allowHalf`), each labeled "N of M stars": hover preview, roving tabindex + arrow/Home/End/Delete keys, click-the-selected-again-to-clear (`allowClear`), a hidden input for `name`/value and the `validate` action with `required` enforced (hidden inputs skip native constraint validation). `readonly` is the display variant: `role="img"` with the value announcement, any fraction rendered (4.2 → a 20% fifth star). Symbols are two stacked copies of an svg (empty muted below, filled clipped to the value on top), so any `currentColor` icon works; the filled color is a fixed star amber by design (theme-independent — monochrome themes grey out the warning intent), `intent` colors by theme instead.
+
+### Exports
+
+| Export               | Kind      | Description                                            |
+| -------------------- | --------- | ------------------------------------------------------ |
+| `Rating`             | component | Main component                                         |
+| `RatingProps`        | type      | Props type                                             |
+| `RatingSize`         | type      | `"sm" \| "md" \| "lg"`                                 |
+| `RatingItemState`    | type      | `"full" \| "partial" \| "empty"` (symbol `data-state`) |
+| `createRatingT`      | function  | Builds the `t` prop from a (partial) message catalog   |
+| `RATING_MESSAGES_EN` | constant  | Built-in English catalog (also the fallback)           |
+| `RATING_MESSAGES_SK` | constant  | Bundled Slovak catalog (opt-in)                        |
+| `RatingMessageKey`   | type      | Message key union                                      |
+| `RatingMessages`     | type      | One locale's catalog                                   |
+
+`iconStar` / `iconStarFill` (Bootstrap) are on the icons barrel — the filled one is the default symbol, the outline one the usual `iconEmpty`.
+
+### Key Props
+
+| Prop                                                  | Type                      | Default | Description                                                                                                                                    |
+| ----------------------------------------------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                                               | `number`                  | `0`     | Bindable; 0 = none. Rendered clamped to `[0, max]`, snapped to whole/half in input mode                                                        |
+| `max`                                                 | `number`                  | `5`     | Number of symbols                                                                                                                              |
+| `allowHalf`                                           | `boolean`                 | `false` | Half-symbol values (two hit zones per symbol, arrows step 0.5)                                                                                 |
+| `allowClear`                                          | `boolean`                 | `true`  | Re-click the selected symbol / Delete / Backspace → 0                                                                                          |
+| `readonly`                                            | `boolean`                 | `false` | Display variant (`role="img"`, fractional fill, no input)                                                                                      |
+| `intent`                                              | `IntentColorKey`          | —       | Theme color of the filled symbols (unset = fixed amber `--stuic-rating-icon-color`)                                                            |
+| `icon` / `iconEmpty`                                  | `string`                  | star    | Raw svg/html of the filled / empty symbol (empty defaults to the same icon, muted)                                                             |
+| `name`, `required`, `validate`, `setValidationResult` |                           |         | Form integration — same contract as the `Field*` components; imperative `validate()` / `clearValidation()` / `getValidation()` via `bind:this` |
+| `onchange`                                            | `(value: number) => void` | —       | User-driven value changes                                                                                                                      |
+| `t`                                                   | `TranslateFn`             | English | i18n: group label, "{value} of {max} stars" announcements, required message                                                                    |
+
+Class slots: `class`, `classItem`, `classIcon`. Reserved root handlers: `onkeydown`, `onpointerleave`. The component writes `--stuic-rating-fill` (0–100%) inline on every symbol wrapper (survives `unstyled`).
+
+### CSS Tokens
+
+Prefix: `--stuic-rating-*`
+
+`size` (unset; `size` presets 1.125 / 1.5 / 2rem), `gap`, `icon-color`, `icon-color-empty`, `icon-scale-hover`, `ring-width`, `ring-color`, `radius`, `transition`, `opacity-disabled`
+
+---
+
+## SplitPane
+
+Two panes with one draggable separator between them — `horizontal` puts them side by side and resizes the primary pane's width, `vertical` stacks them and resizes its height; the other pane flexes into the rest (`min-width/height: 0`, `overflow: auto`, so long content scrolls inside a pane). Nestable. Built on the `resizable` attachment with the separator as its `handle`, so the separator is an ARIA window splitter: focusable `role="separator"`, `aria-orientation`, `aria-valuenow` / `min` / `max` in `units`, `aria-controls` → the primary pane; arrows along the axis (Shift ×10), Home / End to the bounds, Enter (or double-click) resets; Pointer Events with capture for mouse / touch / pen. `bind:size` mirrors every resize and writing it resizes (clamped, persisted, announced); a size stored under `key` wins on mount and is written back; `reset()` (and Enter) restore the size the component mounted with. `disabled` keeps the layout and renders the separator inert.
+
+### Exports
+
+| Export                   | Kind      | Description                                          |
+| ------------------------ | --------- | ---------------------------------------------------- |
+| `SplitPane`              | component | Main component                                       |
+| `SplitPaneProps`         | type      | Props type                                           |
+| `SplitPaneOrientation`   | type      | `"horizontal" \| "vertical"`                         |
+| `SplitPanePrimary`       | type      | `"start" \| "end"`                                   |
+| `createSplitPaneT`       | function  | Builds the `t` prop from a (partial) message catalog |
+| `SPLIT_PANE_MESSAGES_EN` | constant  | Built-in English catalog (also the fallback)         |
+| `SPLIT_PANE_MESSAGES_SK` | constant  | Bundled Slovak catalog (opt-in)                      |
+| `SplitPaneMessageKey`    | type      | Message key union                                    |
+| `SplitPaneMessages`      | type      | One locale's catalog                                 |
+
+### Key Props
+
+| Prop              | Type                                        | Default             | Description                                                                                                          |
+| ----------------- | ------------------------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `start` / `end`   | `Snippet`                                   | —                   | The two panes' content (left / right, or top / bottom when vertical)                                                 |
+| `orientation`     | `"horizontal" \| "vertical"`                | `"horizontal"`      | Side by side (a width) or stacked (a height — the container then needs a definite height)                            |
+| `primary`         | `"start" \| "end"`                          | `"start"`           | Which pane carries the size; the other one fills the rest (`end` puts the separator on the second pane's start edge) |
+| `size`            | `number`                                    | `50`                | Bindable size of the primary pane in `units`; a stored size wins on mount; writes are clamped and written back       |
+| `units`           | `"%" \| "px"`                               | `"%"`               | Of the container, or px                                                                                              |
+| `min` / `max`     | `number`                                    | `0` / `0`           | Bounds in `units` (`0` = none; `%` caps at 100)                                                                      |
+| `step`            | `number`                                    | `1` (%) / `10` (px) | Keyboard step; Shift ×10                                                                                             |
+| `key` / `storage` | `string \| number` / `"local" \| "session"` | — / `"session"`     | Persist the size (`resizable-width-<key>` / `resizable-height-<key>`)                                                |
+| `disabled`        | `boolean`                                   | `false`             | Inert separator (no drag / keys / focus, no grip); the layout stays and `size` writes still land                     |
+| `label`           | `string`                                    | `t("resize")`       | Accessible name of the separator                                                                                     |
+| `onResize`        | `(info: ResizableInfo) => void`             | —                   | Every applied size: mount, drag, keys, reset, `size` writes                                                          |
+| `t`               | `TranslateFn`                               | English             | The separator's default name ("Resize")                                                                              |
+
+Class slots: `class`, `startClass`, `endClass`, `separatorClass`. Imperative `reset()` via `bind:this`. Bindable `el` / `separatorEl`. Root data attributes: `data-orientation`, `data-disabled`; the panes carry `data-pane="start|end"` and the sized one `data-primary`; the separator `data-separator`, plus `data-resizing` while dragged. The size lands as an inline `width` / `height` on the primary pane (survives `unstyled`).
+
+### CSS Tokens
+
+Prefix: `--stuic-split-pane-*`
+
+`separator-color`, `separator-color-hover` (hover / focus / drag), `separator-thickness`, `separator-hit-area` (invisible grab zone on each side), `grip-color`, `grip-color-hover`, `grip-border-color`, `grip-length`, `grip-thickness`, `grip-radius`, `ring-color`, `transition` (falls back to `--stuic-transition`). The defaults reproduce the `resizable` attachment's built-in handle (a faint 1px line, a small rounded grip; `:root.dark` variants), palette-based rather than theme-based
+
+---
+
 ## Stepper
 
 Numbered multi-step progress header for wizard/checkout flows. Accessible `<nav>` landmark with an ordered list: completed steps get a check mark and filled connector, the current step is highlighted (`aria-current="step"`), upcoming steps stay muted; per-step `error` renders a destructive "×". Display-only by default; `onSelect` makes steps clickable (completed-only by default, `clickable="all"` for free navigation). `current` is a zero-based index — exactly `@marianmeres/wizard`'s `step.index` (`steps.length` = all done).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.172.0",
+	"version": "3.173.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -141,8 +141,8 @@
 		"@codemirror/lang-markdown": "^6.5.2",
 		"@codemirror/language": "^6.12.4",
 		"@codemirror/language-data": "^6.5.2",
-		"@codemirror/state": "^6.7.1",
-		"@codemirror/view": "^6.43.9",
+		"@codemirror/state": "^6.7.2",
+		"@codemirror/view": "^6.43.10",
 		"@eslint/js": "^9.39.5",
 		"@marianmeres/random-human-readable": "^1.10.2",
 		"@marianmeres/trend-chart": "^0.5.0",
@@ -177,7 +177,7 @@
 		"tailwindcss": "^4.3.3",
 		"tsx": "^4.23.13",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.68.0",
+		"typescript-eslint": "^8.69.0",
 		"vite": "^7.3.6",
 		"vitest": "^4.1.11",
 		"vitest-browser-svelte": "^2.2.1"
@@ -187,7 +187,7 @@
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/countries": "^1.1.0",
 		"@marianmeres/cron-parser": "^1.0.1",
-		"@marianmeres/design-tokens": "^1.17.0",
+		"@marianmeres/design-tokens": "^1.18.0",
 		"@marianmeres/icons-fns": "^6.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",