@geoffcox/sterling-svelte 2.0.14 → 2.0.16

package/dist/Radio.svelte

@@ -1,15 +1,16 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+  import type { ChangeEventHandler } from 'svelte/elements';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
   import type { RadioProps } from './Radio.types';
+  import { onMount } from 'svelte';
 
   const uuid = $props.id();
 
   let {
     id,
     children,
-    checked,
     class: _class,
     disabled = false,
     group = $bindable(),
@@ -25,8 +26,6 @@
     }
   });
 
-  // ----- Methods ----- //
-
   export const blur = () => {
     inputRef?.blur();
   };
@@ -38,6 +37,12 @@
   export const focus = (options?: FocusOptions) => {
     inputRef?.focus(options);
   };
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.currentTarget.checked) {
+      group = value;
+    }
+  };
 </script>
 
 <!--
@@ -53,13 +58,14 @@
   <div class="container">
     <input
       bind:this={inputRef}
-      {checked}
+      checked={group === value}
       {disabled}
-      bind:group
+      {group}
       {id}
       type="radio"
       {value}
       {...rest}
+      onchange={onChange}
     />
     <div class="indicator"></div>
   </div>

package/dist/Radio.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { RadioProps } from './Radio.types';
 /** A styled HTML input type=radio element with optional label. */
-declare const Radio: import("svelte").Component<RadioProps, {
+declare const Radio: import("svelte").Component<import("svelte/elements").HTMLInputAttributes, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Radio.types.d.ts

@@ -1,4 +1,2 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-export type RadioProps = HTMLInputAttributes & {
-    group?: any | null;
-};
+export type RadioProps = HTMLInputAttributes;

package/dist/Slider.svelte

@@ -73,7 +73,7 @@
 
   // Raise change event when value changes
   $effect(() => {
-    value && onChange?.(value);
+    onChange?.(value);
   });
 
   // ----- Size tracking ----- //
@@ -165,7 +165,7 @@
       }
 
       if (change !== 0) {
-        setValue(value + change);
+        setValue((value || 0) + change);
         event.preventDefault();
         event.stopPropagation();
       }

package/dist/Slider.types.d.ts

@@ -8,5 +8,5 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & {
     step?: number;
     value?: number;
     vertical?: boolean | null;
-    onChange?: (value: number) => void;
+    onChange?: (value?: number) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",