@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/Radio.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLInputAttributes } from 'svelte/elements';
 type Props = HTMLInputAttributes & {
     group?: any | null;

package/dist/Select.svelte

@@ -1,156 +1,217 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { tick } from 'svelte';
-import { clickOutside } from './actions/clickOutside';
-import { idGenerator } from './idGenerator';
-import List from './List.svelte';
-import Popover from './Popover.svelte';
-let { buttonSnippet, children, class: _class, disabled = false, open = $bindable(false), onSelect, onPending, selectedValue = $bindable(), listClass, valueSnippet, ...rest } = $props();
-const popupId = idGenerator.nextId('Select-popup');
-// ----- State ----- //
-// Tracks the pending selected index
-let pendingSelectedValue = $state(selectedValue);
-// svelte-ignore non_reactive_update
-let selectRef = $state(undefined);
-let listRef;
-// ----- Reactions ----- //
-$effect(() => {
+<script lang="ts">
+  import { tick, type Snippet } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { clickOutside } from './actions/clickOutside';
+  import List from './List.svelte';
+  import Popover from './Popover.svelte';
+
+  const uuid = $props.id();
+
+  type DeprecatedProps = {
+    /** @deprecated Use icon instead */
+    buttonSnippet?: Snippet;
+
+    /** @deprecated Use value instead */
+    valueSnippet?: Snippet<[string | undefined]>;
+  };
+
+  type Props = HTMLAttributes<HTMLDivElement> &
+    DeprecatedProps & {
+      disabled?: boolean | null;
+      icon?: Snippet;
+      listClass?: string;
+      onPending?: (value?: string) => void;
+      onSelect?: (value?: string) => void;
+      open?: boolean | null;
+      selectedValue?: string;
+      value?: string | Snippet<[string | undefined]>;
+    };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    icon,
+    listClass,
+    open = $bindable(false),
+    onSelect,
+    onPending,
+    selectedValue = $bindable(),
+    value,
+    buttonSnippet,
+    valueSnippet,
+    ...rest
+  }: Props = $props();
+
+  // backwards compatibility
+  icon = icon || buttonSnippet;
+  value = value || valueSnippet;
+
+  const popoverId = `Select-Popover-${uuid}`;
+
+  // ----- State ----- //
+
+  // Tracks the pending selected index
+  let pendingSelectedValue: string | undefined = $state(selectedValue);
+
+  // svelte-ignore non_reactive_update
+  let selectRef: HTMLElement | undefined = $state(undefined);
+  let listRef: List;
+
+  // ----- Reactions ----- //
+
+  $effect(() => {
     pendingSelectedValue = selectedValue;
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     onSelect?.(selectedValue);
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (open) {
-        onPending?.(pendingSelectedValue);
+      onPending?.(pendingSelectedValue);
     }
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (open) {
-        tick().then(() => {
-            setTimeout(() => {
-                listRef?.focus();
-                listRef?.scrollToSelectedItem();
-            }, 10);
-        });
+      tick().then(() => {
+        setTimeout(() => {
+          listRef?.focus();
+          listRef?.scrollToSelectedItem();
+        }, 10);
+      });
     }
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     if (!open) {
-        tick().then(() => selectRef?.focus());
+      tick().then(() => selectRef?.focus());
     }
-});
-// ----- Methods ----- //
-export const blur = () => {
+  });
+
+  // ----- Methods ----- //
+
+  export const blur = () => {
     selectRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     selectRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     selectRef?.focus();
-};
-export const scrollToSelectedItem = () => {
+  };
+
+  export const scrollToSelectedItem = () => {
     if (open) {
-        listRef?.scrollToSelectedItem();
+      listRef?.scrollToSelectedItem();
     }
-};
-// ----- Event Handlers ----- //
-const onSelectClick = (event) => {
+  };
+
+  // ----- Event Handlers ----- //
+
+  const onSelectClick: MouseEventHandler<HTMLDivElement> = (event) => {
     if (!disabled) {
-        open = !open;
-        event.preventDefault();
-        event.stopPropagation();
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
     }
     rest.onclick?.(event);
-};
-const onSelectKeydown = (event) => {
+  };
+
+  const onSelectKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case ' ':
-                {
-                    if (!open) {
-                        open = true;
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'ArrowUp':
-                {
-                    if (selectedValue) {
-                        listRef?.selectPreviousItem();
-                    }
-                    else {
-                        listRef?.selectLastItem();
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'ArrowDown':
-                {
-                    if (selectedValue) {
-                        listRef?.selectNextItem();
-                    }
-                    else {
-                        listRef?.selectFirstItem();
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-        }
+      switch (event.key) {
+        case ' ':
+          {
+            if (!open) {
+              open = true;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+          break;
+        case 'ArrowUp':
+          {
+            if (selectedValue) {
+              listRef?.selectPreviousItem();
+            } else {
+              listRef?.selectLastItem();
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+          break;
+        case 'ArrowDown':
+          {
+            if (selectedValue) {
+              listRef?.selectNextItem();
+            } else {
+              listRef?.selectFirstItem();
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+          break;
+      }
     }
     rest.onkeydown?.(event);
-};
-const onListKeydown = (event) => {
+  };
+
+  const onListKeydown = (event: KeyboardEvent) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case 'Enter':
-                {
-                    selectedValue = pendingSelectedValue;
-                    open = !open;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'Escape':
-                {
-                    pendingSelectedValue = selectedValue;
-                    open = !open;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-        }
+      switch (event.key) {
+        case 'Enter':
+          {
+            selectedValue = pendingSelectedValue;
+            open = !open;
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+          break;
+        case 'Escape':
+          {
+            pendingSelectedValue = selectedValue;
+            open = !open;
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+          }
+          break;
+      }
     }
-};
-const onListClick = (event) => {
+  };
+
+  const onListClick = (event: MouseEvent) => {
     open = false;
     event.preventDefault();
     event.stopPropagation();
     return false;
-};
-const onListSelect = (value) => {
+  };
+
+  const onListSelect = (value?: string) => {
     pendingSelectedValue = value;
     if (!open) {
-        selectedValue = pendingSelectedValue;
+      selectedValue = pendingSelectedValue;
     }
-};
+  };
 </script>
 
 <div
   bind:this={selectRef}
-  aria-controls={popupId}
+  aria-controls={popoverId}
   aria-haspopup="listbox"
   aria-expanded={open}
-  class={['sterling-select', _class].filter(Boolean).join(' ')}
+  class={['sterling-select', _class]}
   class:disabled
   role="combobox"
   tabindex="0"
@@ -160,23 +221,28 @@ const onListSelect = (value) => {
   onkeydown={onSelectKeydown}
 >
   <div class="value">
-    {#if valueSnippet}
-      {@render valueSnippet(selectedValue)}
+    {#if value}
+      {#if typeof value === 'string'}
+        {value}
+      {:else}
+        {@render value(selectedValue)}
+      {/if}
     {:else if selectedValue}
       {selectedValue}
     {:else}
       <span>&nbsp;</span>
     {/if}
   </div>
-  <div class="button">
-    {#if buttonSnippet}
-      {@render buttonSnippet()}
+  <!-- button class was initially incorrect, so leaving it here for now -->
+  <div class="button icon">
+    {#if icon}
+      {@render icon()}
     {:else}
       <div class="chevron"></div>
     {/if}
   </div>
-  <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
-    <div class={['sterling-select-popup-content', _class].filter(Boolean).join(' ')}>
+  <Popover id={popoverId} reference={selectRef} bind:open conditionalRender={false}>
+    <div class={['sterling-select-popup-content', 'sterling-select-content', _class]}>
       <List
         bind:this={listRef}
         {disabled}
@@ -185,7 +251,7 @@ const onListSelect = (value) => {
         onkeydown={onListKeydown}
         onSelect={onListSelect}
         tabindex={open ? 0 : -1}
-        class={`composed ${listClass}`}
+        class={['composed', listClass]}
       >
         {#if children}
           {@render children()}

package/dist/Select.svelte.d.ts

@@ -1,14 +1,20 @@
 import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
+type DeprecatedProps = {
+    /** @deprecated Use icon instead */
     buttonSnippet?: Snippet;
+    /** @deprecated Use value instead */
+    valueSnippet?: Snippet<[string | undefined]>;
+};
+type Props = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
     disabled?: boolean | null;
+    icon?: Snippet;
     listClass?: string;
     onPending?: (value?: string) => void;
     onSelect?: (value?: string) => void;
     open?: boolean | null;
     selectedValue?: string;
-    valueSnippet?: Snippet<[string | undefined]>;
+    value?: string | Snippet<[string | undefined]>;
 };
 declare const Select: import("svelte").Component<Props, {
     blur: () => void;

package/dist/Slider.svelte

@@ -1,100 +1,149 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { round } from 'lodash-es';
-let { class: _class, disabled, min = 0, max = 100, onChange, precision = 0, step = 1, value = $bindable(0), vertical, ...rest } = $props();
-let sliderRef;
-export const blur = () => {
+<script lang="ts">
+  import { round } from 'lodash-es';
+  import type { HTMLAttributes, KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+    value?: number;
+    vertical?: boolean | null;
+    onChange?: (value: number) => void;
+  };
+
+  let {
+    class: _class,
+    disabled,
+    min = 0,
+    max = 100,
+    onChange,
+    precision = 0,
+    step = 1,
+    value = $bindable(0),
+    vertical,
+    ...rest
+  }: Props = $props();
+
+  let sliderRef: HTMLDivElement;
+
+  export const blur = () => {
     sliderRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     sliderRef?.click();
-};
-export const focus = (options) => {
-    sliderRef?.focus();
-};
-let ratio = $derived((value - min) / (max - min));
-const setValue = (newValue) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    sliderRef?.parentElement?.focus(options);
+  };
+
+  let ratio = $derived((value - min) / (max - min));
+
+  const setValue = (newValue: number) => {
     const clamped = Math.max(min, Math.min(max, newValue));
     value = precision !== undefined ? round(clamped, precision) : clamped;
-};
-// ensure min <= max
-$effect(() => {
+  };
+
+  // ensure min <= max
+  $effect(() => {
     if (min > max) {
-        min = max;
+      min = max;
     }
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     const clamped = Math.max(min, Math.min(max, value));
     const newValue = precision !== undefined ? round(clamped, precision) : clamped;
     if (value !== newValue) {
-        value = newValue;
+      value = newValue;
     }
-});
-const setValueByOffset = (offset) => {
+  });
+
+  const setValueByOffset = (offset: number) => {
     if (sliderSize > 0) {
-        const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
-        const newValue = min + positionRatio * (max - min);
-        setValue(newValue);
+      const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
+      const newValue = min + positionRatio * (max - min);
+      setValue(newValue);
     }
-};
-// Raise change event when value changes
-$effect(() => {
+  };
+
+  // Raise change event when value changes
+  $effect(() => {
     onChange?.(value);
-});
-// ----- Size tracking ----- //
-let sliderWidth = $state(0);
-let sliderHeight = $state(0);
-let sliderSize = $derived(vertical ? sliderHeight : sliderWidth);
-let valueOffset = $derived(sliderSize * ratio);
-// ----- Event handlers ----- //
-const onPointerDown = (event) => {
+  });
+
+  // ----- Size tracking ----- //
+
+  let sliderWidth: number = $state(0);
+  let sliderHeight: number = $state(0);
+
+  let sliderSize = $derived(vertical ? sliderHeight : sliderWidth);
+
+  let valueOffset = $derived(sliderSize * ratio);
+
+  // ----- Event handlers ----- //
+
+  const onPointerDown: PointerEventHandler<HTMLDivElement> = (event) => {
     if (!disabled) {
-        event.currentTarget.setPointerCapture(event.pointerId);
-        if (vertical) {
-            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-        }
-        else {
-            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
-        }
+      event.currentTarget.setPointerCapture(event.pointerId);
+      if (vertical) {
+        setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+      } else {
+        setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+      }
+      event.preventDefault();
+      focus();
     }
+
     rest?.onpointerdown?.(event);
-};
-const onPointerMove = (event) => {
+  };
+
+  const onPointerMove: PointerEventHandler<HTMLDivElement> = (event) => {
     if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
-        if (vertical) {
-            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-        }
-        else {
-            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
-        }
+      if (vertical) {
+        setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+      } else {
+        setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+      }
+      event.preventDefault();
     }
+
     rest?.onpointermove?.(event);
-};
-const onPointerUp = (event) => {
+  };
+
+  const onPointerUp: PointerEventHandler<HTMLDivElement> = (event) => {
     if (!disabled) {
-        event.currentTarget.releasePointerCapture(event.pointerId);
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      event.preventDefault();
+      focus();
     }
     rest?.onpointerup?.(event);
-};
-const onKeyDown = (event) => {
+  };
+
+  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
-        switch (event.code) {
-            case 'ArrowDown':
-            case 'ArrowLeft':
-                setValue(value - step);
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            case 'ArrowRight':
-            case 'ArrowUp':
-                setValue(value + step);
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-        }
+      switch (event.code) {
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          setValue(value - step);
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        case 'ArrowRight':
+        case 'ArrowUp':
+          setValue(value + step);
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+      }
     }
     rest?.onkeydown?.(event);
-};
+  };
 </script>
 
 <div
@@ -102,7 +151,7 @@ const onKeyDown = (event) => {
   aria-valuemin={min}
   aria-valuenow={value}
   aria-valuemax={max}
-  class={`sterling-slider ${_class}`}
+  class={['sterling-slider', _class]}
   class:disabled
   class:horizontal={!vertical}
   class:vertical

package/dist/Slider.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean | null;