@rogieking/figui3 11.3.0 → 11.3.1

package/.cursor/skills/figui3/components.md

@@ -219,6 +219,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `type` (`range`, `opacity`, `hue`, `stepper`, `delta`), `min`, `max`, `step`, `text`, `units`, `transform`, `color`, `default`, `variant` (`classic`), `placeholder`, `full`, `disabled`
+- A valid explicit `default` adds a tick and native snap target for range, opacity, and hue sliders. Inferred defaults do not render a tick.
 - Events: `input` / `change` → `currentTarget.value`
 - React: keep `value` a string; do not remount during drag. Opacity: set `color`. Delta: set `default`. Stepper: include a `<datalist>` of stops.
 

package/.cursor/skills/figui3/reference.md

@@ -55,6 +55,7 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 - Always set `min`, `max`, `step`; `units` when displayed
 - `transform` when internal scale ≠ UI scale
 - `variant="classic"` for the older appearance
+- Valid explicit `default` values add a tick and native snap target for range, opacity, and hue; inferred defaults do not
 - Opacity: set `color` and usually `units="%"`
 - Delta: include `default` and typically symmetric min/max
 - Stepper: include a `<datalist>` of stops

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.3.1]
+
+### Added
+
+- Added explicit `fig-slider` default ticks and native snap targets for valid range, hue, and opacity defaults.
+- Added an optional slider default control to the playground.
+
+### Changed
+
+- Made `fig-input-number` steppers repeat while held, emitting continuous input updates and one change event on release.
+
+### Fixed
+
+- Kept generated slider default ticks within variant-specific track endpoints.
+
 ## [11.3.0]
 
 ### Added

package/README.md

@@ -356,7 +356,7 @@ The suggestion trigger uses `fig-select` when `fig-editor.js` is registered and
 | `min` | number | `0` | Minimum |
 | `max` | number | `100` | Maximum |
 | `step` | number | `1` | Step increment |
-| `default` | number | — | Default/reset value (shown as marker) |
+| `default` | number | — | Explicit reference value; adds a tick and native snap target when valid |
 | `text` | boolean | `true` | Show text input; set `text="false"` to hide |
 | `placeholder` | string | `"##"` | Text input placeholder |
 | `units` | string | — | Unit label (e.g. `"%"`, `"px"`) |
@@ -369,12 +369,12 @@ The suggestion trigger uses `fig-select` when `fig-editor.js` is registered and
 **Events:** `input` (continuous), `change` (on release), with detail `{ value, angle, units }`. Event values are rounded to `precision`; the component retains its higher-precision internal value.
 
 ```html
-<fig-slider min="0" max="100" value="50" units="%"></fig-slider>
+<fig-slider min="0" max="100" value="50" default="25" units="%"></fig-slider>
 <fig-slider type="hue" value="180" text="false"></fig-slider>
 <fig-slider type="opacity" value="75" color="#FF5733" units="%"></fig-slider>
 ```
 
-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.
+For `type="range"`, omitting `value` follows native range behavior and starts at the midpoint of `min` and `max`. An explicitly authored, in-range, step-aligned `default` renders a tick and is passed to the native range input as a snap target; internally inferred defaults do not. Arrow keys move by `step`; hold Shift to move by a larger step.
 
 ---
 

package/components.css

@@ -3157,8 +3157,9 @@ fig-slider {
   --slider-tick-radius: 100%;
   --slider-border-radius: calc(var(--slider-height) / 2);
   --slider-stepper-padding: calc(
-    (var(--slider-height) / 2) - var(--slider-tick-width) / 2
+    (var(--slider-thumb-size) / 2) - var(--slider-tick-width) / 2
   );
+  --slider-default-tick-end-inset: calc(var(--slider-stepper-padding) * 2);
   --slider-track-color: var(--figma-color-bg-secondary);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
@@ -3449,11 +3450,25 @@ fig-slider {
     }
   }
 
+  datalist[data-generated="slider-default"] option:first-child:last-child {
+    position: absolute;
+    margin: 0;
+    left: clamp(
+      var(--slider-stepper-padding),
+      calc(var(--start-percent) - var(--slider-tick-width) / 2),
+      calc(100% - var(--slider-default-tick-end-inset))
+    );
+    top: calc(50% - var(--slider-tick-height) / 2);
+  }
+
   &:not([variant="classic"]) {
     --slider-height: 0.375rem;
     --slider-thumb-size: 0.75rem;
     --slider-tick-width: calc(var(--slider-height) / 2);
     --slider-tick-height: calc(var(--slider-height) / 2);
+    --slider-default-tick-end-inset: calc(
+      var(--slider-thumb-size) / 2 + var(--slider-tick-width) / 2 - 0.125rem
+    );
     --slider-number-width: var(--input-opacity-width);
     --handle-transition: none;
     --slider-transition: none;