@rogieking/figui3 11.3.0 → 11.3.2

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,31 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.3.2]
+
+### Changed
+
+- Refined the default slider track, thumb, and tick proportions.
+
+### Fixed
+
+- Aligned generated default ticks with snapped slider values and variant-specific endpoints.
+
+## [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,7 +3157,7 @@ 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-track-color: var(--figma-color-bg-secondary);
   --slider-percent: calc(var(--slider-complete) * 100%);
@@ -3332,6 +3332,7 @@ fig-slider {
       cursor: default;
       box-shadow: var(--slider-handle-shadow);
       opacity: var(--slider-thumb-opacity);
+      transform: translateX(calc(var(--slider-complete) * 50% - 25%));
     }
 
     &:disabled::-webkit-slider-thumb {
@@ -3383,6 +3384,7 @@ fig-slider {
       cursor: default;
       box-shadow: var(--slider-handle-shadow);
       opacity: var(--slider-thumb-opacity);
+      transform: translateX(calc(var(--slider-complete) * 50% - 25%));
     }
 
     &:disabled::-moz-range-thumb {
@@ -3422,11 +3424,13 @@ fig-slider {
     margin: 0;
     border: 0;
     appearance: none;
-    padding: 0 var(--slider-stepper-padding);
+    padding: 0;
     height: var(--slider-height);
     pointer-events: none;
     justify-content: space-between;
-    width: 100%;
+    width: auto;
+    left: calc(var(--slider-height) / 2);
+    right: calc(var(--slider-height) / 2);
 
     & option {
       appearance: none;
@@ -3438,6 +3442,7 @@ fig-slider {
       font-size: 0;
       background: var(--figma-color-icon-tertiary);
       opacity: var(--slider-tick-opacity);
+      box-shadow: 0 0 0 0.75px rgba(0, 0, 0, 0.075);
       display: block;
       &[default] {
         background: var(--figma-color-icon);
@@ -3449,16 +3454,37 @@ fig-slider {
     }
   }
 
+  datalist[data-generated="slider-default"] {
+    left: calc(var(--slider-height) / 2);
+    right: calc(var(--slider-height) / 2);
+    width: auto;
+    padding-inline: 0;
+
+    option:first-child:last-child {
+      position: absolute;
+      margin: 0;
+      left: var(--start-percent);
+      top: calc(50% - var(--slider-tick-height) / 2);
+      transform: translateX(-50%);
+    }
+  }
+
+  &:not([variant="classic"]):is(:not([min]), [min="0"])
+    datalist[data-generated="slider-default"]
+    option[value="0"] {
+    transform: translateX(-0.125rem);
+  }
+
   &: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-height: 0.5rem;
+    --slider-thumb-size: 0.875rem;
+    --slider-tick-width: calc(var(--slider-height) - 4px);
+    --slider-tick-height: calc(var(--slider-height) - 4px);
     --slider-number-width: var(--input-opacity-width);
     --handle-transition: none;
     --slider-transition: none;
     --slider-handle-shadow:
-      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
+      inset 0 0 0 calc(var(--slider-thumb-size) / 2 + 0.5rem * var(--unchanged))
         var(--slider-thumb-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-100);