@geoffcox/sterling-svelte 2.0.12 → 2.0.14

package/dist/Radio.svelte

@@ -9,10 +9,11 @@
   let {
     id,
     children,
-    checked = $bindable(false),
+    checked,
     class: _class,
     disabled = false,
     group = $bindable(),
+    value,
     ...rest
   }: RadioProps = $props();
 
@@ -45,12 +46,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} {disabled} bind:group {id} type="radio" {...rest} />
+    <input
+      bind:this={inputRef}
+      {checked}
+      {disabled}
+      bind:group
+      {id}
+      type="radio"
+      {value}
+      {...rest}
+    />
     <div class="indicator"></div>
   </div>
   {#if children}

package/dist/Radio.svelte.d.ts

@@ -4,6 +4,6 @@ declare const Radio: import("svelte").Component<RadioProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;
-}, "group" | "checked">;
+}, "group">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;

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.12",
+  "version": "2.0.14",
   "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",