@geoffcox/sterling-svelte 2.0.7 → 2.0.9

package/dist/Radio.svelte

@@ -50,7 +50,7 @@
   class:using-keyboard={$usingKeyboard}
 >
   <div class="container">
-    <input bind:this={inputRef} checked {disabled} bind:group {id} type="radio" {...rest} />
+    <input bind:this={inputRef} {checked} {disabled} bind:group {id} type="radio" {...rest} />
     <div class="indicator"></div>
   </div>
   {#if children}

package/dist/Slider.svelte

@@ -12,6 +12,7 @@
     max = 100,
     onChange,
     precision = 0,
+    reverse,
     step = 1,
     value = $bindable(0),
     vertical,
@@ -87,9 +88,17 @@
     if (!disabled) {
       event.currentTarget.setPointerCapture(event.pointerId);
       if (vertical) {
-        setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        if (reverse) {
+          setValueByOffset(event.y - sliderRef.getBoundingClientRect().top);
+        } else {
+          setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        }
       } else {
-        setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        if (reverse) {
+          setValueByOffset(sliderRef.getBoundingClientRect().right - event.x);
+        } else {
+          setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        }
       }
       event.preventDefault();
       focus();
@@ -101,9 +110,17 @@
   const onPointerMove: PointerEventHandler<HTMLDivElement> = (event) => {
     if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
       if (vertical) {
-        setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        if (reverse) {
+          setValueByOffset(event.y - sliderRef.getBoundingClientRect().top);
+        } else {
+          setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        }
       } else {
-        setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        if (reverse) {
+          setValueByOffset(sliderRef.getBoundingClientRect().right - event.x);
+        } else {
+          setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        }
       }
       event.preventDefault();
     }
@@ -149,6 +166,7 @@
   class={['sterling-slider', _class]}
   class:disabled
   class:horizontal={!vertical}
+  class:reverse
   class:vertical
   role="slider"
   tabindex={!disabled ? 0 : undefined}
@@ -163,15 +181,10 @@
     bind:this={sliderRef}
     bind:clientWidth={sliderWidth}
     bind:clientHeight={sliderHeight}
+    style={`--valueOffset: ${valueOffset}px`}
   >
     <div class="track"></div>
-    <div
-      class="fill"
-      style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`}
-    ></div>
-    <div
-      class="thumb"
-      style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`}
-    ></div>
+    <div class="fill"></div>
+    <div class="thumb"></div>
   </div>
 </div>

package/dist/Slider.types.d.ts

@@ -4,6 +4,7 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & {
     min?: number;
     max?: number;
     precision?: number;
+    reverse?: boolean | null;
     step?: number;
     value?: number;
     vertical?: boolean | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -74,7 +74,7 @@
     "@eslint/js": "^9.18.0",
     "@fontsource/atkinson-hyperlegible": "^5.1.1",
     "@fontsource/source-code-pro": "^4.5.14",
-    "@geoffcox/sterling-svelte-themes": "^2.0.2",
+    "@geoffcox/sterling-svelte-themes": "^2.0.3",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",