@ixfx/components 0.10.5 → 0.10.6

package/docs-user/README.md

@@ -40,6 +40,7 @@ This directory contains documentation for each component and some architectural
 - [range-input](./range-input.md)
 - [rating](./rating.md)
 - [select-horiz](./select-horiz.md)
+- [shapefill-value](./shapefill-value.md)
 - [slider-input](./slider-input.md)
 - [snackbar](./snackbar.md)
 - [snap-container](./snap-container.md)

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.10.5",
-  "generated": "2026-09-15T20:31:17.553Z",
+  "version": "0.10.6",
+  "generated": "2026-09-16T09:39:40.476Z",
   "components": [
     {
       "name": "ac-text",
@@ -183,6 +183,11 @@
       "summary": "A horizontally scrolling, snap-to-center single-item picker. Children are ordinary elements you provide — the component doesn't render its own item markup, it just lays them out with scroll-snap, keep",
       "path": "docs-user/select-horiz.md"
     },
+    {
+      "name": "shapefill-value",
+      "summary": "A click-and-drag value input, sharing interaction semantics with `ixfx-radial-input`, but depicted as a shape outline (`rectangle` or `circle`) containing a concentric inner shape scaled to the curren",
+      "path": "docs-user/shapefill-value.md"
+    },
     {
       "name": "slider-input",
       "summary": "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",

package/docs-user/llms.txt

@@ -47,6 +47,7 @@ import '@ixfx/components/data-grid';
 - [range-input](docs-user/range-input.md): A label-free, fully styled range slider wrapping `<input type="range">`. Supports horizontal and vertical orientations, CSS variable theming, gradient fills, custom thumb shapes, and an optional value
 - [rating](docs-user/rating.md): A rating input that renders a row of glyphs (star / heart / square). Supports half-step increments, keyboard control, per-rank theming via CSS variables, and prominence-based hover feedback. Clicking 
 - [select-horiz](docs-user/select-horiz.md): A horizontally scrolling, snap-to-center single-item picker. Children are ordinary elements you provide — the component doesn't render its own item markup, it just lays them out with scroll-snap, keep
+- [shapefill-value](docs-user/shapefill-value.md): A click-and-drag value input, sharing interaction semantics with `ixfx-radial-input`, but depicted as a shape outline (`rectangle` or `circle`) containing a concentric inner shape scaled to the curren
 - [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.

package/docs-user/shapefill-value.md

@@ -0,0 +1,125 @@
+# ixfx-shapefill-value
+
+A click-and-drag value input, sharing interaction semantics with `ixfx-radial-input`, but depicted as a shape outline (`rectangle` or `circle`) containing a concentric inner shape scaled to the current value. A value of 50% draws an inner shape at half the outline's size.
+
+---
+
+## Basic Usage
+
+```html
+<ixfx-shapefill-value min="0" max="1" value="0.5"></ixfx-shapefill-value>
+```
+
+The component has an intrinsic size of `2em x 2em`. Set width/height via CSS to resize:
+
+```html
+<ixfx-shapefill-value display="rectangle" min="0" max="100" value="30" style="width: 60px; height: 60px;"></ixfx-shapefill-value>
+```
+
+To fill a container:
+
+```html
+<div style="width: 80px; height: 80px;">
+  <ixfx-shapefill-value min="0" max="1" value="0.5" style="width: 100%; height: 100%;"></ixfx-shapefill-value>
+</div>
+```
+
+---
+
+## Attributes & Properties
+
+| Attribute / Property | Type | Default | Description |
+|---|---|---|---|
+| `display` | `"circle"` \| `"rectangle"` | `"circle"` | Outline/fill shape |
+| `fill-mode` | `"centre"` \| `"left"` \| `"right"` | `"centre"` | How the inner shape grows (see [Fill Modes](#fill-modes)) |
+| `value` | `number` | `0` | Current value, within `min`…`max` |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `step` | `number` | `undefined` | Keyboard step size. If unset, defaults to 10% of range |
+| `stops` | `number` | `undefined` | Quantise to N discrete positions. Also sets keyboard step size |
+| `disabled` | `boolean` | `false` | Disables all interaction. Reflected as attribute |
+| `lighttouch` | `boolean` | `false` | Mouse wheel adjusts on hover, without requiring focus |
+
+### Sizing
+
+Size via CSS `width`/`height`.
+
+- `display="rectangle"` stretches to fill the host, so a landscape or portrait box produces a matching landscape or portrait rectangle:
+
+  ```html
+  <ixfx-shapefill-value display="rectangle" style="width: 160px; height: 60px;" min="0" max="1" value="0.6"></ixfx-shapefill-value>
+  ```
+
+- `display="circle"` always keeps a 1:1 aspect ratio and letterboxes within a non-square host, so it stays a true circle rather than an ellipse.
+
+---
+
+## Fill Modes
+
+- **`centre`** (default): the inner shape stays concentric with the outline, growing from the middle in all directions. A value of 50% is half the outline's size.
+- **`left`** / **`right`**: the inner shape grows from the outline's left or right edge (mirror images of each other).
+  - For `rectangle`, this is a classic slider-bar fill: fixed height, width scales with value.
+  - For `circle`, the value circle's x-origin travels from the outline's left/right perimeter (value 0%) to the outline's centre (value 100%), while its radius grows the same way as `centre` — the combined effect is a circle that inflates outward from that edge.
+
+```html
+<ixfx-shapefill-value display="rectangle" fill-mode="left" min="0" max="1" value="0.6"></ixfx-shapefill-value>
+<ixfx-shapefill-value display="rectangle" fill-mode="right" min="0" max="1" value="0.6"></ixfx-shapefill-value>
+<ixfx-shapefill-value display="circle" fill-mode="left" min="0" max="1" value="0.6"></ixfx-shapefill-value>
+<ixfx-shapefill-value display="circle" fill-mode="right" min="0" max="1" value="0.6"></ixfx-shapefill-value>
+```
+
+---
+
+## Styling
+
+CSS custom properties, set on the host:
+
+| Variable | Default | Description |
+|---|---|---|
+| `--shapefill-value-outline-color` | `var(--surface-4)` | Outline stroke colour |
+| `--shapefill-value-outline-width` | `2` | Outline stroke width (viewBox units) |
+| `--shapefill-value-fill-color` | `var(--accent)` | Inner shape fill colour |
+| `--shapefill-value-fill-transition` | `none` | Transition applied to the inner shape (e.g. `fill-opacity 0.15s ease`) |
+| `--shapefill-value-focus-outline` | `2px solid var(--accent)` | Focus ring |
+| `--shapefill-value-focus-outline-offset` | `2px` | Focus ring offset |
+
+```html
+<ixfx-shapefill-value
+  style="
+    --shapefill-value-outline-color: hsl(280, 30%, 40%);
+    --shapefill-value-fill-color: hsl(280, 100%, 60%);
+  "
+  min="0" max="1" value="0.6"
+></ixfx-shapefill-value>
+```
+
+---
+
+## Events
+
+| Event | Detail | Fired |
+|---|---|---|
+| `input` | `{ value, valueRelative }` | Continuously during user interaction (drag, keyboard, wheel) |
+| `change` | `{ value, valueRelative, previousValue }` | Debounced ~150ms after user interaction settles, or immediately for programmatic value changes |
+
+```typescript
+el.addEventListener('input', (event) => {
+  const { value, valueRelative } = event.detail;
+});
+```
+
+---
+
+## Interaction
+
+- **Mouse/touch:** press and drag vertically — up increases, down decreases. Full min-to-max range covers 2x the element's height. Hold Shift while dragging for finer control.
+- **Keyboard:** the element must have focus. Arrow Up/Right increases, Arrow Down/Left decreases, by `step` (or 10% of range if unset). Home/End jump to `min`/`max`. Hold Shift for a finer step.
+- **Mouse wheel:** requires focus by default; set `lighttouch` to react on hover instead.
+
+---
+
+## Disabled state
+
+```html
+<ixfx-shapefill-value disabled min="0" max="1" value="0.7"></ixfx-shapefill-value>
+```

package/llms.txt

@@ -47,6 +47,7 @@ import '@ixfx/components/data-grid';
 - [range-input](docs-user/range-input.md): A label-free, fully styled range slider wrapping `<input type="range">`. Supports horizontal and vertical orientations, CSS variable theming, gradient fills, custom thumb shapes, and an optional value
 - [rating](docs-user/rating.md): A rating input that renders a row of glyphs (star / heart / square). Supports half-step increments, keyboard control, per-rank theming via CSS variables, and prominence-based hover feedback. Clicking 
 - [select-horiz](docs-user/select-horiz.md): A horizontally scrolling, snap-to-center single-item picker. Children are ordinary elements you provide — the component doesn't render its own item markup, it just lays them out with scroll-snap, keep
+- [shapefill-value](docs-user/shapefill-value.md): A click-and-drag value input, sharing interaction semantics with `ixfx-radial-input`, but depicted as a shape outline (`rectangle` or `circle`) containing a concentric inner shape scaled to the curren
 - [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.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",