@rogieking/figui3 8.9.30 → 8.9.32

package/.cursor/skills/fig-lab/SKILL.md

@@ -40,11 +40,13 @@ Full-surface `fig-field` wrappers. Prefer these over hand-rolled label+control r
 
 Shared:
 
-- `label`, `direction` (`horizontal` default for most), `size` (`""` | `large`), `disabled`
+- `label`, `direction` (`horizontal` default for most), `size` (`""` | `small`; `large` remains an alias for the default), `disabled`
+- `variant="minimal"` — removes vertical row padding and reveals the field background on hover
 - `default` — reset target (may differ from initial `value`)
 - Right-click **Reset** menu; `resetToDefault()`
 - `propskit-slider` also double-click resets
 - Forward remaining attrs to the inner control
+- Rows are large by default; `propskit-group size="small"` applies compact sizing to children without an authored size
 
 | Tag | Playground | Inner control | Notes |
 |---|---|---|---|
@@ -56,6 +58,7 @@ Shared:
 | `propskit-text` | `#propskit-text` | `fig-input-text` | `type`, `readonly` |
 | `propskit-number` | `#propskit-number` | `fig-input-number` | `min`, `max`, `step`, `precision`, `units`, `steppers` |
 | `propskit-slider` | `#propskit-slider` | `fig-slider` | `type` range/hue/delta/stepper/opacity; `elastic` default true |
+| `propskit-wheel` | `#propskit-wheel` | SVG wheel + `fig-input-number` | Generic numeric wheel with optional arbitrary `units`. Defaults: `value="0"`, no units, `label="Value"`, `step="1"`, `precision="0"`. Time aliases normalize to `s` / `ms` and default to `step="0.1"` / `precision="2"` for seconds or `step="100"` / `precision="0"` for milliseconds. Resisted handle drag + edge stretch + spring return (`elastic` default true). Optional `min`/`max` (omit = unbounded). No `fig-field` |
 | `propskit-position` | `#propskit-position` | two numbers | `x`, `y`, `units="percent"` |
 | `propskit-color-point` | `#propskit-color-point` | color + position | JSON `value`; `collapsible`, `open` |
 | `propskit-point-radius` | `#propskit-point-radius` | position + radius | JSON `value` |
@@ -140,6 +143,7 @@ These are layout shells. Wire behavior yourself.
 |---|---|
 | Labeled boolean | `propskit-switch` |
 | Labeled continuous number | `propskit-slider` |
+| Scrubbable number or time | `propskit-wheel` |
 | Labeled exact number | `propskit-number` |
 | Labeled text | `propskit-text` |
 | Labeled discrete list | `propskit-select` (not `fig-dropdown`) |

package/.cursor/skills/fig-lab/reference.md

@@ -10,6 +10,15 @@ Playground: `/propskit/lab#{id}`. Rules: `playground/src/lib/attributeRules.ts`.
 - Slider: double-click also resets
 - Equality helpers treat booleans and JSON objects
 
+## Propskit variants
+
+`variant="minimal"` is available on switch, color, fill, gradient, select, text, number, slider, position, and wheel controls. It removes vertical host padding, keeps the inner field transparent at rest, and restores the secondary field background on hover.
+
+PropsKit rows are large by default; explicit `size="large"` remains supported.
+`propskit-group size="small"` applies `size="small"` to nested controls that do
+not define their own size and removes generated sizes when the group returns to
+the default size.
+
 ## `propskit-select`
 
 Observed: `label`, `direction`, `aria-label`, `options`, `value`.
@@ -24,6 +33,17 @@ Playground attrs: `type` (`range`, `hue`, `delta`, `stepper`, `opacity`), `color
 
 Inner `fig-slider` still needs `min` / `max` / `step` / `value` as forwarded attrs.
 
+## `propskit-wheel`
+
+Observed: `label`, `units` (optional arbitrary string; `seconds`, `s`, `milliseconds`, and `ms` time aliases), `value`, `default`, `step`, `precision`, `min`, `max`, `elastic` (default true), `size`, `disabled`, `variant`.
+
+No `fig-field` / `fig-slider`. Host + `.propskit-wheel-surface` + SVG tick wheel + `fig-input-number`. Omitted `label` → `"Value"`; authored `label` (including blank) is used as-is. Value defaults to `0`; units are omitted by default and arbitrary values such as `px` pass through unchanged. Generic/no-unit defaults are `step="1"` and `precision="0"`. Full time unit names normalize to `s` / `ms`; seconds default to `step="0.1"` and `precision="2"`, while milliseconds default to `step="100"` and `precision="0"`. `precision` only controls the inner number's displayed decimals; scrubbing moves by `step` on every `input`, or `10× step` while Shift is held. Omitted `min`/`max` are unbounded. Wheel is a `spinbutton`; arrows step, Shift+arrow is 10×. Home/End jump to min/max when set. During horizontal scrubbing, the center handle follows the pointer with resisted movement (8px maximum by default), while the whole control stretches when the pointer passes an edge; both spring back on release unless `elastic="false"`. An unfocused number field also starts scrubbing after 4px of pointer travel; clicking without dragging focuses it for text editing.
+
+```html
+<propskit-wheel label="Duration" value="1.5" units="seconds"></propskit-wheel>
+<propskit-wheel label="Delay" value="240" units="ms"></propskit-wheel>
+```
+
 ## Point JSON shapes
 
 ```json

package/README.md

@@ -104,6 +104,7 @@ Minimal example:
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
 | [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled field + slider combo |
+| [Propskit Wheel](#propskit-wheel) | `<propskit-wheel>` | Generic numeric scrubber with tick wheel |
 | [Propskit Color](#propskit-color) | `<propskit-color>` | Full-surface labeled color control |
 | [Propskit Fill](#propskit-fill) | `<propskit-fill>` | Full-surface labeled fill control |
 | [Propskit Gradient](#propskit-gradient) | `<propskit-gradient>` | Full-surface labeled gradient control |
@@ -355,6 +356,8 @@ Author options in `<fig-select-options>`, or pass `options`. Use `label` on `<fi
 
 For `type="range"`, omitting `value` follows native range behavior and starts at the midpoint of `min` and `max`. Arrow keys move by `step`; hold Shift to move by a larger step.
 
+Full-surface `propskit-*` controls support `variant="minimal"`. The minimal variant removes vertical row padding and keeps the field background transparent until hover. It is available on switch, color, fill, gradient, select, text, number, slider, position, and wheel controls.
+
 ---
 
 #### Propskit Number
@@ -363,18 +366,21 @@ For `type="range"`, omitting `value` follows native range behavior and starts at
 
 Composes a `<fig-field>` and `<fig-input-number>` into a full-surface property control. Number attributes are forwarded to the inner input.
 
-PropsKit controls use the compact default layout when `size` is omitted. Set
-`size="large"` for the 40px row layout.
+PropsKit controls use the 40px large layout when `size` is omitted. Set
+`size="small"` for the compact 32px row layout. Explicit `size="large"`
+remains supported as an alias for the default layout.
 
 All PropsKit inputs expose `defaultValue`, `isDefault`, and `resetToDefault()`. A
 `propskit-group` uses this shared contract to track its `dirty` state and reset
-each nested input to its own current `default`.
+each nested input to its own current `default`. Set `size="small"` on a
+`propskit-group` to apply the compact layout to nested controls that do not
+define their own size.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
 | `direction` | string | `"horizontal"` | Field layout direction |
-| `size` | string | default | Set to `"large"` for the expanded layout |
+| `size` | string | default | Set to `"small"` for the compact layout |
 | `default` | number/string | initial `value` | Right-click reset target |
 | `disabled` | boolean | `false` | Disable interaction |
 | *number attrs* | — | — | All `<fig-input-number>` attributes are forwarded |
@@ -442,7 +448,7 @@ Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property
 | `edit` | boolean/string | `"picker"` | `true` (inline stops), `false`, or `"picker"` |
 | `mode` | string | `"handle"` | `"handle"` or `"tip"` stop presentation |
 | `disabled` | boolean | `false` | Disabled state |
-| `size` | string | default | Set to `"large"` for the expanded layout |
+| `size` | string | default | Set to `"small"` for the compact layout |
 
 **Events:** `input`, `change` — bubbling, composed events with `{ type: "gradient", gradient }` in `event.detail`.
 
@@ -534,7 +540,7 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
 |---|---|---|---|
 | `label` | string | — | Field label text |
 | `direction` | string | `"column"` | Layout direction |
-| `size` | string | default | Set to `"large"` for the expanded layout |
+| `size` | string | default | Set to `"small"` for the compact layout |
 | `default` | number/string | initial `value` | Double-click and right-click reset target |
 | `disabled` | boolean | `false` | Disable interaction |
 | *slider attrs* | — | — | All `<fig-slider>` attributes except host-only PropsKit attributes are forwarded |
@@ -551,6 +557,38 @@ Double-click or right-click and choose **Reset** to restore `default`, falling b
 
 ---
 
+#### Propskit Wheel
+
+`<propskit-wheel>`
+
+A generic numeric scrubber with optional arbitrary units. The host is the row chrome; an inner `.propskit-wheel-surface` holds a projected SVG tick wheel and a `fig-input-number`. There is no `fig-field` or `fig-slider`.
+
+Omitted `label` renders `"Value"`. If `label` is set, including `label=""`, that exact value is used. Units are omitted by default and arbitrary values such as `px` pass through unchanged. Time aliases receive time-focused defaults.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `label` | string | `"Value"` when omitted | Authored values (including blank) are used as-is |
+| `units` | string | — | Optional arbitrary units. `seconds` / `milliseconds` normalize to `s` / `ms` |
+| `value` | number | `0` | Numeric value in `units`. Unbounded unless `min`/`max` are set |
+| `min` | number | — | Inclusive lower bound. Omit for no minimum |
+| `max` | number | — | Inclusive upper bound. Omit for no maximum |
+| `step` | number | `1`; `0.1` (`s`) / `100` (`ms`) | Drag, keyboard, and mouse wheel increment |
+| `precision` | number | `0`; `2` (`s`) / `0` (`ms`) | Displayed decimal places on the inner number |
+| `elastic` | boolean/string | `true` | Resisted handle movement, edge stretch, and spring return while scrubbing; set `"false"` to disable |
+| `size` | string | default | Set to `"small"` for the compact layout |
+| `default` | number/string | initial `value` | Right-click reset target |
+| `disabled` | boolean | `false` | Disable wheel and number |
+| `variant` | string | — | `"minimal"` removes vertical padding |
+
+**Events:** `input` while dragging or typing; `change` on commit. Dragging moves by `step` on every `input`; hold Shift to scrub at `10× step`. `precision` only formats the displayed number. Arrow keys on the focused wheel move by `step`; Shift+arrow moves by `10× step`.
+
+```html
+<propskit-wheel label="Duration" value="1.5" default="0" units="seconds"></propskit-wheel>
+<propskit-wheel label="Delay" value="240" default="0" min="0" max="1000" units="ms"></propskit-wheel>
+```
+
+---
+
 #### Propskit Position
 
 `<propskit-position>`
@@ -564,7 +602,7 @@ A compact X/Y field with optional percentage units.
 | `default` | JSON string | initial `{ x, y }` | Right-click and group reset target |
 | `label` | string | `"Position"` | Field label; empty values use the semantic default |
 | `units` | string | — | `"percent"` shows `%`; omit for no units |
-| `size` | string | default | Set to `"large"` for the expanded row |
+| `size` | string | default | Set to `"small"` for the compact row |
 | `disabled` | boolean | `false` | Disable both number inputs |
 
 **Properties and methods:** `x`, `y`, and `value` expose the current coordinates; `defaultValue` returns the normalized reset object; `isDefault` compares both coordinates; `resetToDefault()` restores both values.
@@ -1093,6 +1131,8 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 | `drag` | boolean | `false` | Enable drag-to-scroll |
 | `overflow` | string | — | Overflow behavior |
 | `loop` | boolean | `false` | Loop keyboard navigation |
+| `auto-scroll` | boolean | `true` | Automatically center the selection after selection, layout, resize, or media changes. Set to `"false"` to disable. |
+| `scroll-behavior` | string | `"smooth"` | Selection and overflow-button scrolling behavior: `"smooth"` or `"auto"`. The CSS `scroll-behavior` property can also override it. |
 
 **fig-choice attributes:**
 
@@ -1104,6 +1144,10 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 
 **Events (on fig-chooser):** `input`, `change` — detail is the selected value string.
 
+Selection follows the native `<select>` pattern: set `chooser.value` with a choice value, or set `chooser.selectedChoice` with a choice element. Neither programmatic selection nor scrolling emits events.
+
+When `auto-scroll="false"`, reveal the current selection explicitly with `chooser.scrollSelectionIntoView(options?)`. It accepts native-style `ScrollIntoViewOptions` (`behavior`, `block`, and `inline`) and centers by default.
+
 ```html
 <fig-chooser value="opt1">
   <fig-choice value="opt1">Option 1</fig-choice>

package/components.css

@@ -5017,9 +5017,18 @@ fig-chooser {
   overflow: hidden auto;
   padding: 0;
   margin: 0 var(--fig-chooser-inline-margin);
+  scroll-behavior: smooth;
   scrollbar-width: none;
   width: calc(100% - var(--fig-chooser-inline-margin) * 2);
 
+  &[scroll-behavior="auto"] {
+    scroll-behavior: auto;
+  }
+
+  &[scroll-behavior="smooth"] {
+    scroll-behavior: smooth;
+  }
+
   fig-field > &{
     --fig-chooser-inline-margin:0;
   }
@@ -5184,6 +5193,12 @@ fig-chooser {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  fig-chooser:not([scroll-behavior="smooth"]) {
+    scroll-behavior: auto;
+  }
+}
+
 fig-card {
   --fig-card-label-line-clamp: 1;
   --fig-card-media-radius: var(--radius-medium);