sh3-core 0.13.0 → 0.13.1

package/dist/primitives/widgets/Field.svelte

@@ -15,6 +15,7 @@
     size = 'md',
     required = false,
     autocomplete,
+    onchange,
   }: {
     value?: string;
     type?: 'text' | 'email' | 'password' | 'search' | 'url' | 'tel';
@@ -29,6 +30,7 @@
     size?: 'sm' | 'md';
     required?: boolean;
     autocomplete?: AutoFill;
+    onchange?: (next: string) => void;
   } = $props();
 
   const showError = $derived(invalid && !!error);
@@ -48,6 +50,7 @@
       {autocomplete}
       aria-invalid={invalid || undefined}
       bind:value
+      onblur={() => onchange?.(value)}
     />
     {#if suffix}<span class="sh3-field__affix">{@render suffix()}</span>{/if}
   </span>

package/dist/primitives/widgets/Field.svelte.d.ts

@@ -13,6 +13,7 @@ type $$ComponentProps = {
     size?: 'sm' | 'md';
     required?: boolean;
     autocomplete?: AutoFill;
+    onchange?: (next: string) => void;
 };
 declare const Field: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Field = ReturnType<typeof Field>;

package/dist/primitives/widgets/FilePicker.svelte

@@ -9,6 +9,7 @@
     invalid = false,
     size = 'md',
     buttonLabel = 'Choose file...',
+    onchange,
   }: {
     value?: FilePickerValue;
     multiple?: boolean;
@@ -17,11 +18,13 @@
     invalid?: boolean;
     size?: 'sm' | 'md';
     buttonLabel?: string;
+    onchange?: (next: FilePickerValue) => void;
   } = $props();
 
-  function onChange(e: Event) {
+  function onPick(e: Event) {
     const target = e.currentTarget as HTMLInputElement;
     value = extractValue(target.files, multiple);
+    onchange?.(value);
   }
 
   const display = $derived(displayName(value));
@@ -34,7 +37,7 @@
     {accept}
     {multiple}
     {disabled}
-    onchange={onChange}
+    onchange={onPick}
   />
   <span class="sh3-fp__btn" tabindex="-1">{buttonLabel}</span>
   <span class="sh3-fp__name">{display || 'no file'}</span>

package/dist/primitives/widgets/FilePicker.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     invalid?: boolean;
     size?: 'sm' | 'md';
     buttonLabel?: string;
+    onchange?: (next: FilePickerValue) => void;
 };
 declare const FilePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
 type FilePicker = ReturnType<typeof FilePicker>;

package/dist/primitives/widgets/IconToggleGroup.svelte

@@ -10,12 +10,14 @@
     multiple = false,
     disabled = false,
     size = 'md',
+    onchange,
   }: {
     options: Option[];
     value: string | string[];
     multiple?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: string | string[]) => void;
   } = $props();
 
   function isActive(v: string): boolean {
@@ -31,6 +33,7 @@
     } else {
       value = toggleSingle(typeof value === 'string' ? value : '', v);
     }
+    onchange?.(value);
   }
 </script>
 

package/dist/primitives/widgets/IconToggleGroup.svelte.d.ts

@@ -10,6 +10,7 @@ type $$ComponentProps = {
     multiple?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: string | string[]) => void;
 };
 declare const IconToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
 type IconToggleGroup = ReturnType<typeof IconToggleGroup>;

package/dist/primitives/widgets/NumberInput.svelte

@@ -14,6 +14,7 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    onchange,
   }: {
     value?: number;
     min?: number;
@@ -26,6 +27,7 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: number) => void;
   } = $props();
 
   const display = $derived(formatNumber(value, precision));
@@ -41,8 +43,10 @@
 
   let holdTimer: ReturnType<typeof setTimeout> | null = null;
   let holdInterval: ReturnType<typeof setInterval> | null = null;
+  let bumping = false;
   function startHold(direction: 1 | -1) {
     if (disabled) return;
+    bumping = true;
     bump(direction);
     holdTimer = setTimeout(() => {
       let elapsed = 0;
@@ -59,6 +63,10 @@
   function stopHold() {
     if (holdTimer) { clearTimeout(holdTimer); holdTimer = null; }
     if (holdInterval) { clearInterval(holdInterval); holdInterval = null; }
+    if (bumping) {
+      bumping = false;
+      onchange?.(value);
+    }
   }
 </script>
 
@@ -76,6 +84,7 @@
       aria-invalid={invalid || undefined}
       value={display}
       oninput={(e) => commit(parseFloat((e.currentTarget as HTMLInputElement).value))}
+      onblur={() => onchange?.(value)}
     />
     {#if suffix}<span class="sh3-num__affix">{@render suffix()}</span>{/if}
     <span class="sh3-num__steppers">

package/dist/primitives/widgets/NumberInput.svelte.d.ts

@@ -11,6 +11,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: number) => void;
 };
 declare const NumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NumberInput = ReturnType<typeof NumberInput>;

package/dist/primitives/widgets/RangeSlider.svelte

@@ -10,6 +10,7 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    onchange,
   }: {
     value?: Pair;
     min?: number;
@@ -18,6 +19,7 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: Pair) => void;
   } = $props();
 
   const lowPct = $derived(valueToPercent(value[0], min, max));
@@ -36,11 +38,13 @@
   <input type="range" class="sh3-range__native sh3-range__native--low"
          {min} {max} {step} {disabled}
          value={value[0]}
-         oninput={(e) => setLow(parseFloat((e.currentTarget as HTMLInputElement).value))} />
+         oninput={(e) => setLow(parseFloat((e.currentTarget as HTMLInputElement).value))}
+         onchange={() => onchange?.(value)} />
   <input type="range" class="sh3-range__native sh3-range__native--high"
          {min} {max} {step} {disabled}
          value={value[1]}
-         oninput={(e) => setHigh(parseFloat((e.currentTarget as HTMLInputElement).value))} />
+         oninput={(e) => setHigh(parseFloat((e.currentTarget as HTMLInputElement).value))}
+         onchange={() => onchange?.(value)} />
 </div>
 
 <style>

package/dist/primitives/widgets/RangeSlider.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: Pair) => void;
 };
 declare const RangeSlider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type RangeSlider = ReturnType<typeof RangeSlider>;

package/dist/primitives/widgets/Segmented.svelte

@@ -6,13 +6,20 @@
     value = $bindable(),
     size = 'md',
     disabled = false,
+    onchange,
   }: {
     options: SegmentedOption[];
     value: string;
     size?: 'sm' | 'md';
     disabled?: boolean;
+    onchange?: (next: string) => void;
   } = $props();
 
+  function commit(next: string) {
+    value = next;
+    onchange?.(next);
+  }
+
   function onKey(e: KeyboardEvent) {
     if (disabled) return;
     let next: string | undefined;
@@ -24,7 +31,7 @@
       default: return;
     }
     e.preventDefault();
-    if (next !== undefined) value = next;
+    if (next !== undefined) commit(next);
   }
 </script>
 
@@ -37,7 +44,7 @@
       tabindex={value === opt.value ? 0 : -1}
       disabled={disabled || opt.disabled}
       class:sh3-seg__btn--active={value === opt.value}
-      onclick={() => { if (!opt.disabled && !disabled) value = opt.value; }}
+      onclick={() => { if (!opt.disabled && !disabled) commit(opt.value); }}
     >{opt.label}</button>
   {/each}
 </div>

package/dist/primitives/widgets/Segmented.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     value: string;
     size?: 'sm' | 'md';
     disabled?: boolean;
+    onchange?: (next: string) => void;
 };
 declare const Segmented: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Segmented = ReturnType<typeof Segmented>;

package/dist/primitives/widgets/Select.svelte

@@ -13,6 +13,7 @@
     disabled = false,
     invalid = false,
     size = 'md',
+    onchange,
   }: {
     options: SelectOption[];
     value?: string | string[];
@@ -22,6 +23,7 @@
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: string | string[]) => void;
   } = $props();
 
   let trigger = $state<HTMLButtonElement | undefined>(undefined);
@@ -54,6 +56,7 @@
           } else {
             value = v;
           }
+          onchange?.(value);
         },
         // Listbox calls this on its own close paths (selection in
         // single mode, Escape inside the listbox). Outside-click and
@@ -90,6 +93,7 @@
     } else {
       value = nativeRef.value;
     }
+    onchange?.(value);
   }
 </script>
 

package/dist/primitives/widgets/Select.svelte.d.ts

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     invalid?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: string | string[]) => void;
 };
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/primitives/widgets/Slider.svelte

@@ -12,6 +12,7 @@
     invalid = false,
     size = 'md',
     orientation = 'horizontal',
+    onchange,
   }: {
     value?: number;
     min?: number;
@@ -23,6 +24,7 @@
     invalid?: boolean;
     size?: 'sm' | 'md';
     orientation?: 'horizontal' | 'vertical';
+    onchange?: (next: number) => void;
   } = $props();
 
   const pct = $derived(valueToPercent(value, min, max));
@@ -48,6 +50,7 @@
     {disabled}
     aria-invalid={invalid || undefined}
     bind:value
+    onchange={() => onchange?.(value)}
   />
   {#if showValue}
     <output class="sh3-slider__value" style:--pct="{pct}%">{value}</output>

package/dist/primitives/widgets/Slider.svelte.d.ts

@@ -9,6 +9,7 @@ type $$ComponentProps = {
     invalid?: boolean;
     size?: 'sm' | 'md';
     orientation?: 'horizontal' | 'vertical';
+    onchange?: (next: number) => void;
 };
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;

package/dist/primitives/widgets/SliderGroup.svelte

@@ -10,6 +10,7 @@
     showValues = false,
     disabled = false,
     size = 'md',
+    onchange,
   }: {
     orientation?: 'horizontal' | 'vertical';
     channels: Channel[];
@@ -17,6 +18,7 @@
     showValues?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: Record<string, number>) => void;
   } = $props();
 </script>
 
@@ -36,6 +38,7 @@
           () => values[ch.id] ?? 0,
           (n: number) => values = { ...values, [ch.id]: n }
         }
+        onchange={() => onchange?.(values)}
       />
     </div>
   {/each}

package/dist/primitives/widgets/SliderGroup.svelte.d.ts

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     showValues?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    onchange?: (next: Record<string, number>) => void;
 };
 declare const SliderGroup: import("svelte").Component<$$ComponentProps, {}, "values">;
 type SliderGroup = ReturnType<typeof SliderGroup>;

package/dist/primitives/widgets/Textarea.svelte

@@ -11,6 +11,7 @@
     required = false,
     rows = 3,
     resize = 'vertical',
+    onchange,
   }: {
     value?: string;
     label?: string;
@@ -23,6 +24,7 @@
     required?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'both';
+    onchange?: (next: string) => void;
   } = $props();
 
   const showError = $derived(invalid && !!error);
@@ -40,6 +42,7 @@
     {rows}
     aria-invalid={invalid || undefined}
     bind:value
+    onblur={() => onchange?.(value)}
   ></textarea>
   {#if helperText}<span class="sh3-textarea__helper" class:sh3-textarea__helper--error={showError}>{helperText}</span>{/if}
 </label>

package/dist/primitives/widgets/Textarea.svelte.d.ts

@@ -10,6 +10,7 @@ type $$ComponentProps = {
     required?: boolean;
     rows?: number;
     resize?: 'none' | 'vertical' | 'both';
+    onchange?: (next: string) => void;
 };
 declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/tokens.css

@@ -99,8 +99,10 @@
   --shell-track-border: var(--shell-border);
   --shell-track-fill:   var(--shell-accent);
 
-  /* Slider thumbs */
-  --shell-thumb-bg:     var(--shell-fg);
+  /* Slider thumbs — pinned to a fixed near-white instead of var(--shell-fg)
+     so light themes don't render a dark thumb. Themes that want a different
+     thumb override --shell-thumb-bg directly. */
+  --shell-thumb-bg:     #e4e6eb;
   --shell-thumb-border: var(--shell-accent);
   --shell-thumb-shadow: var(--shell-shadow-sm);
 

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export declare const VERSION = "0.13.0";
+export declare const VERSION = "0.13.1";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export const VERSION = '0.13.0';
+export const VERSION = '0.13.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "type": "module",
   "files": [
     "dist"