@ixfx/components 0.6.2 → 0.7.1

package/docs-user/labelled-slider-input.md

@@ -0,0 +1,198 @@
+# `<ixfx-labelled-slider-input>`
+
+A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and editing the number moves the slider.
+
+## Basic usage
+
+```html
+<ixfx-labelled-slider-input label="Volume" value="0.5" min="0" max="1" step="0.01">
+</ixfx-labelled-slider-input>
+```
+
+## Layout
+
+Layout is driven by a container query on the component's own height.
+
+| Height          | Layout                          |
+|-----------------|---------------------------------|
+| >= 80px (default) | **Vertical** — label above slider |
+| < 80px          | **Horizontal** — label beside slider |
+
+The component defaults to `height: 100px`, so unconstrained usage shows the vertical layout. Constrain the height in your CSS to switch to horizontal.
+
+### Force a layout with `--flow`
+
+Override the container query entirely:
+
+```html
+<ixfx-labelled-slider-input style="--flow: row" ...>   <!-- always horizontal -->
+<ixfx-labelled-slider-input style="--flow: column" ...> <!-- always vertical   -->
+```
+
+### Control label width (horizontal layout)
+
+```html
+<ixfx-labelled-slider-input style="--label-width: 8em" ...>
+```
+
+## Mini mode
+
+When the component is very small the label is hidden and only the slider is shown.
+
+Mini mode activates when **both** of the following are true:
+- `width < mini-width-threshold` (default 120px)
+- `height < mini-height-threshold` (default 40px)
+
+Override with a CSS variable:
+
+```html
+<ixfx-labelled-slider-input style="--mini: 1" ...> <!-- always mini  -->
+<ixfx-labelled-slider-input style="--mini: 0" ...> <!-- never mini   -->
+```
+
+## Formatter
+
+Apply a function to format the displayed value. Set it as a JS property — it cannot be set as an HTML attribute.
+
+```js
+const el = document.querySelector('ixfx-labelled-slider-input');
+el.formatter = (v) => `${Math.round(Number(v))}%`;
+```
+
+The formatter receives the raw string value and returns the string to display in the editable-number label. Note the inner slider has no tooltip — the label already shows the value, so a tooltip would be redundant.
+
+## Properties / attributes
+
+| Attribute              | Type                                          | Default      | Description                                         |
+|------------------------|-----------------------------------------------|--------------|-----------------------------------------------------|
+| `label`                | `string`                                      | `""`         | Label text shown in the editable-number             |
+| `value`                | `number`                                      | `0`          | Current value                                       |
+| `min`                  | `number`                                      | `0`          | Minimum value                                       |
+| `max`                  | `number`                                      | `1`          | Maximum value                                       |
+| `step`                 | `number`                                      | `0.01`       | Step increment                                      |
+| `stops`                | `number`                                      | —            | Quantise to N discrete positions                    |
+| `drag-sensitivity`     | `number`                                      | `1`          | Steps per pixel when dragging the number label      |
+| `precision`            | `number`                                      | `0`          | Decimal places shown                                |
+| `orientation`          | `"horizontal" \| "vertical"`                  | `"horizontal"` | Slider track orientation                          |
+| `single-style`         | `"range" \| "bipolar" \| "unipolar"`          | `"range"`    | How the value bar is drawn                          |
+| `marker-style`         | `"needle" \| "dot" \| "triangle" \| "none"`   | `"needle"`   | Marker shape                                        |
+| `disabled`             | `boolean`                                     | `false`      | Disables all interaction                            |
+| `swipeable`            | `boolean`                                     | `false`      | Swipe-to-draw gesture (step-sequencer layouts)      |
+| `switch-height`        | `number`                                      | `80`         | Height (px) at which layout switches vertical↔horizontal |
+| `mini-width-threshold` | `number`                                      | `120`        | Width (px) below which mini mode can activate       |
+| `mini-height-threshold`| `number`                                      | `40`         | Height (px) below which mini mode can activate      |
+| `display-text-logic`   | `"hidden" \| "show" \| "override" \| "transient"` | `"transient"` | Controls when label text vs value is shown    |
+| `formatter`            | `(value: string) => string`                   | —            | JS property only — formats value for display |
+| `lighttouch`           | `boolean`                                     | `false`      | Wheel adjusts the value on hover without focus      |
+
+### `display-text-logic` values
+
+| Value       | Behaviour                                              |
+|-------------|--------------------------------------------------------|
+| `transient` | Shows the label when idle, value on hover/interaction  |
+| `show`      | Always shows the value                                 |
+| `hidden`    | Always shows the label text, never the value           |
+| `override`  | Label text replaces value at all times                 |
+
+## Events
+
+| Event    | Detail                    | Description                                              |
+|----------|---------------------------|----------------------------------------------------------|
+| `change` | `{ value: string }`       | Fired when the value is committed (slider release or number edit) |
+| `input`  | `{ value: number }`       | Fired on every slider move                               |
+
+Both events bubble and are composed (cross shadow boundary).
+
+## CSS variables
+
+### Layout
+
+| Variable                 | Default      | Description                                               |
+|--------------------------|--------------|-----------------------------------------------------------|
+| `--height`               | `100px`      | Component height. Set to `100%` to fill a constrained parent |
+| `--width`                | `auto`       | Component width                                           |
+| `--min-height`           | `20px`       | Minimum height                                            |
+| `--min-width`            | `50px`       | Minimum width                                             |
+| `--flow`                 | *(container query)* | `row` or `column` — overrides the automatic layout |
+| `--label-width`          | `5ch`        | Width of the editable-number in horizontal layout         |
+| `--mini`                 | *(auto)*     | `1` to force mini mode, `0` to disable it                 |
+
+### Label (passed to `ixfx-editable-number`)
+
+| Variable              | Default                    | Description              |
+|-----------------------|----------------------------|--------------------------|
+| `--label-font-size`   | `var(--text-m)`            | Font size                |
+| `--label-font-family` | `var(--font-family)`       | Font family              |
+| `--label-color`       | `var(--surface-text)`      | Text colour              |
+| `--label-muted-color` | `var(--surface-muted-text)`| Muted text colour        |
+| `--label-padding`     | `var(--space-xs) var(--space-s)` | Padding             |
+| `--label-radius`      | `var(--radius-s)`          | Border radius            |
+| `--label-align`       | `center`                   | Text alignment           |
+
+### Slider (passed to `ixfx-slider-input`)
+
+| Variable                          | Default                  | Description                              |
+|-----------------------------------|--------------------------|------------------------------------------|
+| `--lane-track-color`              | `var(--surface-4)`       | Colour of the background track lane      |
+| `--lane-value-color`              | `var(--accent)`          | Colour of the value lane                 |
+| `--lane-color`                    | `var(--accent)`          | Fallback colour for custom lanes         |
+| `--lane-dasharray`                | `none`                   | Dash pattern for lanes                   |
+| `--marker-color`                  | `var(--accent)`          | Marker colour                            |
+| `--marker-thickness`              | `0.15`                   | Marker thickness (fraction of cross axis)|
+| `--marker-length`                 | `0.8`                    | Needle length (fraction of cross axis)   |
+| `--marker-offset`                 | `0`                      | Perpendicular offset from centreline     |
+| `--track-color`                   | `var(--surface-4)`       | Track stroke colour                      |
+| `--track-width`                   | `2`                      | Track stroke width (SVG units)           |
+
+See `ixfx-slider-input` for the full list of lane, marker, and midpoint variables.
+
+## Examples
+
+### Horizontal layout with percentage formatter
+
+```html
+<ixfx-labelled-slider-input
+  id="my-slider"
+  label="Mix"
+  value="0.75"
+  style="height: 50px"
+></ixfx-labelled-slider-input>
+
+<script type="module">
+  document.querySelector('#my-slider').formatter = (v) =>
+    `${Math.round(Number(v) * 100)}%`;
+</script>
+```
+
+### Custom slider colours
+
+```html
+<ixfx-labelled-slider-input
+  label="Intensity"
+  value="0.7"
+  style="
+    --lane-value-color: hsl(280, 80%, 60%);
+    --lane-track-color: hsl(280, 30%, 30%);
+    --marker-color: hsl(280, 100%, 70%);
+  "
+></ixfx-labelled-slider-input>
+```
+
+### Force mini mode
+
+```html
+<ixfx-labelled-slider-input label="Vol" value="0.5" style="--mini: 1">
+</ixfx-labelled-slider-input>
+```
+
+### Listen for changes
+
+```js
+const el = document.querySelector('ixfx-labelled-slider-input');
+
+// Committed value (slider release or number edit)
+el.addEventListener('change', (e) => console.log(e.detail.value));
+
+// Every slider move
+el.addEventListener('input', (e) => console.log(e.detail.value));
+```

package/docs-user/llms.txt

@@ -19,6 +19,8 @@ import '@ixfx/components/data-grid';
 - [crumbs](docs-user/crumbs.md): Breadcrumb navigation with lazy-loading child support. Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`, allowing easy swapping between the two components.
 - [data-display](docs-user/data-display.md): A debug data display component that renders key-value pairs from a plain object. Supports 7 inline render modes (`led`, `plot`, `plot-xy`, `plot-heat`, `plot-histogram`, `time-elapsed`, `hide`) via `c
 - [data-grid](docs-user/data-grid.md): A virtualised data grid with sortable/resizable/reorderable columns, single/multi selection, grouping, and inline cell editing. Handles 200+ rows with windowed rendering and keyboard navigation.
+- [detail-list](docs-user/detail-list.md): A list that scales horizontally, not vertically. Items are laid out in equal-width columns; they flow top→bottom down a column, then wrap to the top of the next column to the right. The component has 
+- [dock](docs-user/dock.md): Dockable, movable panels like VS Code / Photoshop. Drag a panel by its
 - [editable-label](docs-user/editable-label.md): Inline editable text components. `ixfx-editable-number` extends `ixfx-editable-label` with drag-to-adjust and fill-bar visualization.
 - [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
 - [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
@@ -26,6 +28,7 @@ import '@ixfx/components/data-grid';
 - [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.
 - [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 
 - [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
+- [labelled-slider-input](docs-user/labelled-slider-input.md): A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and ed
 - [led](docs-user/led.md): An LED indicator component with color mixing and optional blinking animation.
 - [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
@@ -42,13 +45,15 @@ import '@ixfx/components/data-grid';
 - [slider-input](docs-user/slider-input.md): A linear SVG-based slider. Supports horizontal and vertical orientations, three value modes (single/dual/triple), three single-mode styles (range/bipolar/unipolar), triangle/needle/dot markers, and `v
 - [snackbar](docs-user/snackbar.md): A small floating toolbar anchored in visual proximity to another element on the page (the "target"), built on the native Popover and CSS Anchor Positioning APIs.
 - [snap-container](docs-user/snap-container.md): A container that positions its child element at configurable snap positions along an axis. The child can be dragged, clicked to snap, or controlled via keyboard.
-- [split-layout](docs-user/split-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
+- [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
 - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
+- [titlebar](docs-user/titlebar.md): Standalone titlebar chrome extracted from `ixfx-panel`: title text, icon, toolbar slot, close button and an optional collapse/expand caret. Use it when you need a panel-style header without the collap
 - [toolbar](docs-user/toolbar.md): Two components for building toolbars:
 - [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
+- [twosplit-layout](docs-user/twosplit-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
 - [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically.
 - [xy-pad](docs-user/xy-pad.md): A 2D touch-friendly XY pad for controlling two parameters simultaneously. Each axis supports independent linear/logarithmic scaling.

package/docs-user/panel.md

@@ -2,6 +2,8 @@
 
 An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.
 
+The header chrome is an `ixfx-titlebar` (see [`ixfx-titlebar`](../titlebar/README.md)); the panel adds the collapsible content area beneath it.
+
 ```html
 <ixfx-panel title="Settings">
   <p>Panel content goes here.</p>
@@ -17,6 +19,7 @@ An collapsible panel component with support for titles, icons, toolbars, and mul
 | Attribute / Property      | Type                                              | Default       | Description                                      |
 |--------------------------|---------------------------------------------------|---------------|--------------------------------------------------|
 | `collapsed`              | boolean                                           | `false`       | Whether the panel is collapsed (content hidden)  |
+| `collapsible`            | boolean                                           | `true`        | Whether the caret is shown and the panel can be toggled (opt-out) |
 | `orientation`            | `'horizontal'` \| `'vertical'`                    | `'horizontal'`| Layout direction of title bar                   |
 | `title`                  | string                                            | `''`          | Panel title text                                |
 | `icon-name`              | string                                            | `''`          | Icon name from the registry                      |
@@ -32,6 +35,18 @@ An collapsible panel component with support for titles, icons, toolbars, and mul
 | `explicit` | Only clicking the caret button toggles the panel                         |
 | `disabled` | Caret is hidden; no user toggle possible (programmatic only)          |
 
+Set `collapsible` to `false` (via property binding or JS — `collapsible` defaults to `true`, so a bare `collapsible="false"` attribute would still count as present) or use `toggle-interaction="disabled"` for a fixed header with no user toggle:
+
+```html
+<ixfx-panel id="fixed" title="Fixed" toggle-interaction="disabled">
+  <p>This panel cannot be collapsed by the user.</p>
+</ixfx-panel>
+<script>
+  // Opt out of collapsing entirely (hides the caret):
+  document.querySelector('#fixed').collapsible = false;
+</script>
+```
+
 ### Slots
 
 | Slot        | Description                                      |
@@ -184,6 +199,7 @@ A container component that manages multiple panels with exclusive open behavior
 | `variant`              | `'titlebar'` \| `'midline'`                       | `'titlebar'`   | Visual style applied to all child panels                     |
 | `toggle-interaction`   | `'implicit'` \| `'explicit'` \| `'disabled'`     | `'implicit'`   | Toggle behavior applied to all child panels                   |
 | `allow-multiple`       | boolean                                           | `false`        | Allow multiple panels to be open simultaneously              |
+| `collapsible`          | boolean                                           | `true`         | Collapse behaviour propagated to child panels                |
 | `gap`                  | string                                            | `'var(--space-m)'` | CSS gap between panels                                     |
 
 ### Group orientation vs child panel orientation
@@ -225,7 +241,7 @@ By default, only one panel can be open at a time. Set `allow-multiple` to allow
 
 ### Group-propagated properties
 
-When you set `variant` or `toggle-interaction` on the group, those values are automatically applied to all child panels that don't have an explicit value set. This simplifies declaration when all panels in a group share the same styling:
+When you set `variant`, `toggle-interaction` or `collapsible` on the group, those values are automatically applied to all child panels that don't have an explicit value set. This simplifies declaration when all panels in a group share the same styling:
 
 ```html
 <ixfx-panel-group variant="midline" toggle-interaction="explicit">
@@ -241,10 +257,13 @@ When you set `variant` or `toggle-interaction` on the group, those values are au
 
 ```ts
 import type { PanelOrientation, PanelVariant, PanelToggleInteraction, PanelToggleDetail, PanelGroupOrientation } from 'ixfxfun-components';
+// Canonical titlebar types (Panel* are aliases):
+import type { TitlebarOrientation, TitlebarVariant, TitlebarToggleInteraction, TitlebarToggleDetail } from 'ixfxfun-components';
 ```
 
 ---
 
 ## See also
 
+- [`ixfx-titlebar`](../titlebar/README.md) — Standalone titlebar chrome composed by this panel
 - [`ixfx-icon`](../icons/README.md) — Icon component used by panel

package/docs-user/slider-input.md

@@ -10,7 +10,7 @@ A linear SVG-based slider. Supports horizontal and vertical orientations, three
 <ixfx-slider-input min="0" max="100" value-a="50"></ixfx-slider-input>
 ```
 
-The component defaults to `200px` wide and `24px` tall (the horizontal cross axis). Set width and height via CSS:
+The component defaults to `200px` wide and `12px` tall (the horizontal cross axis). The SVG box hugs its content (see Implementation Notes), so rows pack densely — e.g. in step-sequencer layouts. Set width and height via CSS:
 
 ```html
 <ixfx-slider-input min="0" max="100" value-a="50" style="width: 320px;"></ixfx-slider-input>
@@ -22,14 +22,14 @@ Vertical orientation swaps the dimensions and rotates interaction to up/down:
 <ixfx-slider-input
   orientation="vertical"
   min="0" max="100" value-a="30"
-  style="width: 24px; height: 200px;"
+  style="width: 12px; height: 200px;"
 ></ixfx-slider-input>
 ```
 
 To fill a container, set both `width: 100%` and `height: 100%`:
 
 ```html
-<div style="width: 100%; height: 24px;">
+<div style="width: 100%; height: 12px;">
   <ixfx-slider-input min="0" max="100" value-a="50" style="width: 100%; height: 100%;"></ixfx-slider-input>
 </div>
 ```
@@ -57,14 +57,16 @@ To fill a container, set both `width: 100%` and `height: 100%`:
 | `value-min` | `number` | `1` | Minimum gap between A and B in value units (dual/triple) |
 | `value-c-follow` | `"none"` \| `"proportional"` | `"none"` | How C follows when A/B move the band (triple mode) |
 | `disabled` | `boolean` | `false` | Disables all interaction. Reflected as attribute |
+| `swipeable` | `boolean` | `false` | Swipe-to-draw gesture (no pointer capture; press or enter with pointer down sets value). Reflected as attribute |
+| `lighttouch` | `boolean` | `false` | Wheel adjusts the value on hover instead of requiring focus |
 
 ### Sizing
 
-Size via CSS `width`/`height`. The horizontal default is 200×24, vertical 24×200. Both can be overridden freely.
+Size via CSS `width`/`height`. The horizontal default is 200×12, vertical 12×200. Both can be overridden freely.
 
 ```html
-<!-- Thin (16px tall) -->
-<ixfx-slider-input style="height: 16px;" min="0" max="100" value-a="60"></ixfx-slider-input>
+<!-- Thin (8px tall) -->
+<ixfx-slider-input style="height: 8px;" min="0" max="100" value-a="60"></ixfx-slider-input>
 
 <!-- Large (32px tall) -->
 <ixfx-slider-input style="height: 32px;" min="0" max="100" value-a="60"></ixfx-slider-input>
@@ -104,10 +106,28 @@ Size via CSS `width`/`height`. The horizontal default is 200×24, vertical 24×2
 
 **Wheel** (when focused or `lighttouch` is on):
 
-Wheel forward increases the value, wheel backward decreases it (sign is platform-agnostic — both `deltaY` and `deltaX` are considered so Mac shift-scrolls are handled correctly). Shift narrows the step to 1/10th.
+Wheel forward increases the value, wheel backward decreases it (sign is platform-agnostic — both `deltaY` and `deltaX` are considered so Mac shift-scrolls are handled correctly). Shift narrows the step to 1/10th. Add the `lighttouch` attribute to step on hover without focusing first:
+
+```html
+<ixfx-slider-input lighttouch min="0" max="100" step="5" value-a="50"></ixfx-slider-input>
+```
 
 Step size priority: `stops` > explicit `step` > 10% of range.
 
+### Swipeable mode (step sequencer)
+
+Mirrors `ixfx-range-input[swipeable]`. When the `swipeable` attribute is present, pressing down on the slider or entering it while the pointer is pressed sets the value from the cursor coordinate. Pointer capture is NOT held, so the cursor can move to adjacent swipeable sliders and update them too. Leaving the slider (above/below for horizontal, left/right for vertical) freezes the value; re-entering re-engages. `input` fires continuously; `change` fires debounced 150 ms after interaction, as usual.
+
+Single mode sets value-A directly. Dual/triple modes move the nearest handle to the cursor.
+
+```html
+<div id="sequencer" style="display:flex; flex-direction:column; gap:2px;">
+  <ixfx-slider-input swipeable min="0" max="1" step="0.05" value-a="0.5"></ixfx-slider-input>
+  <ixfx-slider-input swipeable min="0" max="1" step="0.05" value-a="0.3"></ixfx-slider-input>
+  <ixfx-slider-input swipeable min="0" max="1" step="0.05" value-a="0.7"></ixfx-slider-input>
+</div>
+```
+
 ---
 
 ## Value Modes
@@ -256,8 +276,11 @@ slider.addEventListener('change', (e: SliderInputChangeEvent) => {
 | Variable | Default | Description |
 |---|---|---|
 | `--track-color` | `var(--surface-4)` | Stroke colour of the central track rect |
-| `--track-width` | `2` | Stroke width of the track (SVG units) |
+| `--track-width` | `0` | Stroke width of the track (SVG units). Defaults to 0 — the `track`/`value` lanes carry the default visuals, so the rect is an opt-in backdrop (combine with `--track-fill`). Set it for an outlined band behind the lanes |
 | `--track-fill` | `transparent` | Fill colour of the track rect |
+| `--track-margin` | `0` | Extra inline-direction margin at both track ends (SVG units), added to the computed marker inset |
+| `--track-margin-start` | `--track-margin` | Margin at the low-value end (left / bottom) |
+| `--track-margin-end` | `--track-margin` | Margin at the high-value end (right / top) |
 
 ```html
 <ixfx-slider-input
@@ -266,6 +289,17 @@ slider.addEventListener('change', (e: SliderInputChangeEvent) => {
 ></ixfx-slider-input>
 ```
 
+### Track margins (inline direction)
+
+The track hugs the host by default, inset only for marker clearance. If a custom lane overhangs the value at the extremes — e.g. an `anchored` tolerance band centred on the marker — reserve room so it never leaves the component bounds. Margins shorten and offset the track along its axis (start = low-value end):
+
+```html
+<ixfx-slider-input
+  min="0" max="100" value-a="50"
+  style="--track-margin: 7;"
+></ixfx-slider-input>
+```
+
 ### Lanes
 
 Lanes are line segments drawn over the track. The built-in lanes are `track` (the grey background) and `value` (the accent-coloured progress bar). Custom lanes can be added at runtime (see [Data Lanes](#data-lanes-programmatic-api)).
@@ -277,6 +311,8 @@ Lanes are line segments drawn over the track. The built-in lanes are `track` (th
 | `--lane-color` | `var(--accent)` | Fallback colour for custom lanes |
 | `--lane-<key>-color` | — | Per-lane colour override (e.g. `--lane-sweep-color`) |
 | `--lane-<key>-width` | — | Per-lane width override (e.g. `--lane-sweep-width`) |
+| `--lane-track-width` | `0.08` | Thickness of the `track` lane (fraction of cross axis) |
+| `--lane-value-width` | follows track (`0.12`) | Thickness of the `value` lane. Falls back to `--lane-track-width` when unset, so a thick track automatically gets a matching value bar; set it explicitly to diverge |
 | `--lane-dasharray` | `none` | SVG `stroke-dasharray` applied to all lanes |
 | `--lane-dashoffset` | `0` | SVG `stroke-dashoffset` — animate for marching-ants effect |
 
@@ -295,10 +331,12 @@ Dashed lanes:
 ```html
 <ixfx-slider-input
   min="0" max="100" value-a="60"
-  style="--track-width: 6; --lane-track-width: 0.4; --lane-value-width: 0.4;"
+  style="--track-width: 6; --lane-track-width: 0.7;"
 ></ixfx-slider-input>
 ```
 
+The `value` lane follows `--lane-track-width` here — no need to set `--lane-value-width` unless you want it to differ from the track.
+
 ### Marker (value indicator)
 
 | Variable | Default | Description |
@@ -387,7 +425,7 @@ With a border halo (useful for contrast against coloured lanes):
 
 ### `dot`
 
-A filled circle placed at the value's track position. `--marker-offset` shifts it perpendicular to the track (0 = on the centreline, positive = away from the centreline in the track's perpendicular direction).
+A filled circle placed at the value's track position. `--marker-offset` shifts it perpendicular to the track (0 = on the centreline, positive = away from the centreline in the track's perpendicular direction). The radius follows `--marker-thickness` with a screen-px floor (widest lane + 2px), so the dot always reads larger than the value track it sits on. It renders as an aspect-corrected ellipse in viewBox units, so it stays circular on screen despite the stretched viewBox.
 
 ```html
 <!-- Dot on the track -->
@@ -595,12 +633,12 @@ The track, value bar, and markers all use the same `CROSS` axis for their perpen
 
 ### SVG gradient on the value bar
 
-Define gradients in a hidden `<svg>` at the top of the page using `gradientUnits="userSpaceOnUse"` anchored to the slider's viewBox, then reference them via `--lane-value-color`:
+Define gradients in a hidden `<svg>` at the top of the page using `gradientUnits="userSpaceOnUse"` spanning the full viewBox long axis (`0`–`100`; the track insets itself slightly for marker clearance, so full-bleed coordinates stay correct for any marker style), then reference them via `--lane-value-color`:
 
 ```html
 <svg width="0" height="0" style="position:absolute" aria-hidden="true">
   <defs>
-    <linearGradient id="slider-grad-h" gradientUnits="userSpaceOnUse" x1="5" y1="0" x2="95" y2="0">
+    <linearGradient id="slider-grad-h" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100" y2="0">
       <stop offset="0%" stop-color="oklch(70% 0.22 25)" />
       <stop offset="100%" stop-color="oklch(75% 0.22 145)" />
     </linearGradient>
@@ -618,13 +656,15 @@ Define gradients in a hidden `<svg>` at the top of the page using `gradientUnits
 
 These are lessons learned from building the component — useful context when building a similar thing from scratch.
 
-### SVG in a fixed `100×24` viewBox
+### SVG in a dynamic viewBox (tight cross axis + tight end inset)
+
+All geometry is computed in a `100×cross` viewBox coordinate space for horizontal, or `cross×100` for vertical, with the track running along the long axis. Only `LONG = 100` stays fixed. Each render computes the tightest cross that fits the actual content — markers (`--marker-length/thickness/offset`), lane widths/offsets, and `--track-width` — as the fixed point `cross = pad / (0.5 − F)` where `F` is the largest fractional half-extent and `pad = 2` covers strokes/linecaps (clamped to 4…40, fractions capped at 0.45). The default needle slider lands around `cross ≈ 6.7` instead of the legacy `CROSS = 24`, so the element's block size hugs the track instead of reserving 7 units of dead air per side. `marker-style="none"` with thin lanes collapses to the minimum. The long-axis end insets are computed the same way from the markers' along-axis extent (dot/triangle caps extend past the track ends; needles need only the stroke pad), clamped to 1…5, so the track uses the full available width. Authored `--track-margin` / `--track-margin-start` / `--track-margin-end` are added on top per end (scaled back proportionally only if the track span would drop below 10 units). Pointer mapping is calibrated to the drawn track span, not the host edges, so the visible track ends hit min/max exactly. The SVG `viewBox` attribute handles scaling to actual DOM pixels, so every calculation stays coordinate-system-agnostic. Because the inset is dynamic, gradients should span the full `0`–`100` long axis rather than the old fixed `5`–`95` track span.
 
-All geometry is computed in a fixed `100×24` viewBox coordinate space for horizontal, or `24×100` for vertical, with the track running along the long axis. The `CROSS = 24` constant sets the perpendicular dimension, and `LONG = 100` sets the long axis. The SVG `viewBox` attribute handles scaling to actual DOM pixels, so every calculation stays coordinate-system-agnostic. The path is always `(viewBox-relative) × (host size / viewBox size)` regardless of the host's rendered size.
+Lane stroke widths resolve to screen px per render (`width fraction × measured cross px`, emitted as a px number with `vector-effect: non-scaling-stroke` so it paints verbatim). A `calc(var * 24%)` percentage cannot do this job: percentages resolve against the host-size-independent viewBox diagonal (~71 units), so documented 0..1 fractions painted ~10x too thin and never scaled with the host. Because strokes are px-per-render, a host `ResizeObserver` re-renders on size changes to keep them (and the measured box) exact. Dashes stay frozen via the same `non-scaling-stroke`, so `--lane-dasharray` values keep their px meaning.
 
 ### Lane offset needs a CSS unit
 
-`transform: translateY(${offset})` (unitless) is **invalid** CSS — a `<length>` is required, otherwise the whole `transform` declaration is dropped and the lane renders on the centreline. The code uses `translateY(${offset * CROSS / 2}px)` so the offset is expressed in viewBox units (with `px` suffix for CSS), making the offset stable across host sizes.
+`transform: translateY(${offset})` (unitless) is **invalid** CSS — a `<length>` is required, otherwise the whole `transform` declaration is dropped and the lane renders on the centreline. The code uses `translateY(${offset * crossPx / 2}px)` so the offset stays a true fraction of the measured cross axis (with `px` suffix for CSS).
 
 ### Marker rendering uses `part` + per-handle CSS variable patterns