@geoffcox/sterling-svelte 2.0.13 → 2.0.15

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 = $bindable(false),
     class: _class,
     disabled = false,
     group = $bindable(),
@@ -25,13 +26,6 @@
     }
   });
 
-  $effect(() => {
-    // checked isn't set by input type="radio"
-    checked = group === value;
-  });
-
-  // ----- Methods ----- //
-
   export const blur = () => {
     inputRef?.blur();
   };
@@ -43,6 +37,12 @@
   export const focus = (options?: FocusOptions) => {
     inputRef?.focus(options);
   };
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.currentTarget.checked) {
+      group = value;
+    }
+  };
 </script>
 
 <!--
@@ -51,20 +51,21 @@
 -->
 <div
   class={['sterling-radio', _class]}
-  class:checked
+  class:checked={group === value}
   class:disabled
   class:using-keyboard={$usingKeyboard}
 >
   <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,9 +1,8 @@
-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;
-}, "group" | "checked">;
+}, "group">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;

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

@@ -15,16 +15,18 @@
     precision = 0,
     reverse,
     step = 1,
-    value = $bindable(0),
+    value = $bindable(),
     vertical,
     ...rest
   }: SliderProps = $props();
 
   const ensureValueValid = () => {
-    const clamped = Math.max(min, Math.min(max, value));
-    const newValue = precision !== undefined ? round(clamped, precision) : clamped;
-    if (value !== newValue) {
-      value = newValue;
+    if (value !== undefined) {
+      const clamped = Math.max(min, Math.min(max, value));
+      const newValue = precision !== undefined ? round(clamped, precision) : clamped;
+      if (value !== newValue) {
+        value = newValue;
+      }
     }
   };
 
@@ -49,7 +51,7 @@
     sliderRef?.parentElement?.focus(options);
   };
 
-  let ratio = $derived(max - min > 0 ? (value - min) / (max - min) : 0);
+  let ratio = $derived(value !== undefined && max - min > 0 ? (value - min) / (max - min) : 0);
 
   // when value changes, ensure it is valid right away
   const setValue = (newValue: number) => {
@@ -71,7 +73,7 @@
 
   // Raise change event when value changes
   $effect(() => {
-    onChange?.(value);
+    value && onChange?.(value);
   });
 
   // ----- Size tracking ----- //
@@ -139,7 +141,7 @@
   };
 
   const onKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
-    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+    if (!disabled && value !== undefined && !event.ctrlKey && !event.shiftKey && !event.altKey) {
       let change = 0;
 
       if (vertical) {
@@ -180,6 +182,7 @@
   class={['sterling-slider', _class]}
   class:disabled
   class:horizontal={!vertical}
+  class:no-value={value === undefined}
   class:reverse
   class:using-keyboard={$usingKeyboard}
   class:vertical

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "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.7",
+    "@geoffcox/sterling-svelte-themes": "^2.0.12",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",