@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/Switch.svelte

@@ -1,31 +1,62 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { checked = $bindable(false), class: _class, disabled, id, offLabel, onLabel, vertical, ...rest } = $props();
-const inputId = id || idGenerator.nextId('Switch');
-let inputRef;
-let switchWidth = $state(0);
-let switchHeight = $state(0);
-let thumbWidth = $state(0);
-let thumbHeight = $state(0);
-let switchSize = $derived(vertical ? switchHeight : switchWidth);
-let thumbSize = $derived(vertical ? thumbHeight : thumbWidth);
-let ratio = $derived(vertical ? (checked ? 0 : 1) : checked ? 1 : 0);
-let valueOffset = $derived((switchSize - thumbSize) * ratio);
-export const blur = () => {
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  const uuid = $props.id();
+
+  type LabelSnippet = Snippet<
+    [{ checked: boolean | null | undefined; disabled: boolean | null | undefined; inputId: string }]
+  >;
+
+  type Props = HTMLInputAttributes & {
+    offLabel?: string | LabelSnippet;
+    onLabel?: string | LabelSnippet;
+    vertical?: boolean | null | undefined;
+  };
+
+  let {
+    checked = $bindable(false),
+    class: _class,
+    disabled,
+    id,
+    offLabel,
+    onLabel,
+    vertical,
+    ...rest
+  }: Props = $props();
+
+  const inputId = id || `Switch-${uuid}`;
+
+  let inputRef: HTMLInputElement;
+
+  let switchWidth: number = $state(0);
+  let switchHeight: number = $state(0);
+  let thumbWidth: number = $state(0);
+  let thumbHeight: number = $state(0);
+
+  let switchSize = $derived(vertical ? switchHeight : switchWidth);
+  let thumbSize = $derived(vertical ? thumbHeight : thumbWidth);
+  let ratio = $derived(vertical ? (checked ? 0 : 1) : checked ? 1 : 0);
+  let valueOffset = $derived((switchSize - thumbSize) * ratio);
+
+  export const blur = () => {
     inputRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     inputRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     inputRef?.focus(options);
-};
+  };
 </script>
 
 <div
-  class={`sterling-switch ${_class}`}
+  class={['sterling-switch', _class]}
   class:checked
   class:disabled
   class:vertical

package/dist/Switch.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
 type LabelSnippet = Snippet<[
     {
         checked: boolean | null | undefined;

package/dist/Tab.svelte

@@ -1,39 +1,54 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { getContext } from 'svelte';
-import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { children, class: _class, disabled = false, value, ...rest } = $props();
-let tabRef;
-const tabListContext = getContext(TAB_LIST_CONTEXT_KEY);
-let selected = $state(tabListContext.selectedValue === value);
-let _disabled = $derived(tabListContext.disabled || disabled);
-// Using $derived would be preferred, but this helps avoid
-// updates to every tab when selectedValue changes.
-// let selected = $derived(tabContext.selectedValue === value);
-$effect(() => {
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+  import type { TabListContext } from './TabList.types';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  type Props = HTMLButtonAttributes & {
+    value: string;
+  };
+
+  let { children, class: _class, disabled = false, value, ...rest }: Props = $props();
+
+  let tabRef: HTMLButtonElement;
+
+  const tabListContext = getContext<TabListContext>(TAB_LIST_CONTEXT_KEY);
+
+  let selected = $state(tabListContext.selectedValue === value);
+
+  let _disabled = $derived(tabListContext.disabled || disabled);
+
+  // Using $derived would be preferred, but this helps avoid
+  // updates to every tab when selectedValue changes.
+  // let selected = $derived(tabContext.selectedValue === value);
+  $effect(() => {
     if (tabListContext.selectedValue === value && !selected) {
-        selected = true;
-    }
-    else if (tabListContext.selectedValue !== value && selected) {
-        selected = false;
+      selected = true;
+    } else if (tabListContext.selectedValue !== value && selected) {
+      selected = false;
     }
-});
-export const click = () => {
+  });
+
+  export const click = () => {
     tabRef?.click();
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     tabRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     tabRef?.focus(options);
-};
+  };
 </script>
 
 <button
   bind:this={tabRef}
   aria-selected={selected}
-  class={`sterling-tab ${_class}`}
+  class={['sterling-tab', _class]}
   class:selected
   class:using-keyboard={$usingKeyboard}
   class:vertical={tabListContext.vertical}

package/dist/Tab.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type Props = HTMLButtonAttributes & {
     value: string;

package/dist/TabList.svelte

@@ -1,195 +1,246 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { setContext } from 'svelte';
-import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-let { children, class: _class, disabled = false, onSelect, selectedValue = $bindable(), vertical = false, ...rest } = $props();
-let tabListRef;
-let lastSelectedTabRef;
-let tabListContext = {
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+  import type { TabListContext } from './TabList.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    selectedValue?: string;
+    vertical?: boolean | null;
+    onSelect?: (value?: string) => void;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    onSelect,
+    selectedValue = $bindable(),
+    vertical = false,
+    ...rest
+  }: Props = $props();
+
+  let tabListRef: HTMLDivElement;
+  let lastSelectedTabRef: HTMLElement;
+
+  let tabListContext: TabListContext = {
     get disabled() {
-        return disabled;
+      return disabled;
     },
     set disabled(value) {
-        disabled = value;
+      disabled = value;
     },
     get selectedValue() {
-        return selectedValue;
+      return selectedValue;
     },
     set selectedValue(value) {
-        selectedValue = value;
+      selectedValue = value;
     },
     get vertical() {
-        return vertical;
+      return vertical;
     },
     set vertical(value) {
-        vertical = value;
+      vertical = value;
     }
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     tabListContext.disabled = disabled;
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     tabListContext.selectedValue = selectedValue;
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     tabListContext.vertical = vertical;
-});
-setContext(TAB_LIST_CONTEXT_KEY, tabListContext);
-$effect(() => {
+  });
+
+  setContext<TabListContext>(TAB_LIST_CONTEXT_KEY, tabListContext);
+
+  $effect(() => {
     onSelect?.(selectedValue);
-});
-export const blur = () => {
+  });
+
+  export const blur = () => {
     tabListRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     let selectedItem = getSelectedTabElement();
     if (selectedValue && selectedItem) {
-        selectTab(selectedValue, selectedItem);
-    }
-    else {
-        selectFirstTab();
-    }
-};
-const isElementTab = (candidate) => {
-    return (candidate &&
-        candidate.getAttribute('data-value') !== null &&
-        candidate.getAttribute('data-value') !== undefined &&
-        candidate.getAttribute('role') === 'tab');
-};
-const getSelectedTabElement = () => {
-    if (isElementTab(lastSelectedTabRef) &&
-        lastSelectedTabRef?.getAttribute('data-value') === selectedValue &&
-        lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef) {
-        return lastSelectedTabRef;
+      selectTab(selectedValue, selectedItem as HTMLElement);
+    } else {
+      selectFirstTab();
     }
-    else {
-        return tabListRef?.querySelector('[data-value][aria-selected=true]');
+  };
+
+  const isElementTab = (candidate: Element) => {
+    return (
+      candidate &&
+      candidate.getAttribute('data-value') !== null &&
+      candidate.getAttribute('data-value') !== undefined &&
+      candidate.getAttribute('role') === 'tab'
+    );
+  };
+
+  const getSelectedTabElement = () => {
+    if (
+      isElementTab(lastSelectedTabRef) &&
+      lastSelectedTabRef?.getAttribute('data-value') === selectedValue &&
+      lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef
+    ) {
+      return lastSelectedTabRef;
+    } else {
+      return tabListRef?.querySelector('[data-value][aria-selected=true]');
     }
-};
-const selectTab = (value, element) => {
+  };
+
+  const selectTab = (value: string, element: HTMLElement) => {
     selectedValue = value;
     lastSelectedTabRef = element;
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     element.focus();
-};
-export const selectFirstTab = () => {
-    let candidate = tabListRef?.firstElementChild;
+  };
+
+  export const selectFirstTab = () => {
+    let candidate: Element | undefined | null = tabListRef?.firstElementChild;
     while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.nextElementSibling;
+      candidate = candidate.nextElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-export const selectPreviousTab = () => {
+  };
+
+  export const selectPreviousTab = () => {
     let selectedTab = getSelectedTabElement();
     let candidate = selectedTab?.previousElementSibling;
     while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.previousElementSibling;
+      candidate = candidate.previousElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-export const selectNextTab = () => {
+  };
+
+  export const selectNextTab = () => {
     let selectedTab = getSelectedTabElement();
     let candidate = selectedTab?.nextElementSibling;
     while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.nextElementSibling;
+      candidate = candidate.nextElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-export const selectLastTab = () => {
-    let candidate = tabListRef?.lastElementChild;
+  };
+
+  export const selectLastTab = () => {
+    let candidate: Element | undefined | null = tabListRef?.lastElementChild;
     while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.previousElementSibling;
+      candidate = candidate.previousElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-const onClick = (event) => {
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (event) => {
     if (!disabled) {
-        let candidate = event.target;
-        let candidateValue = candidate?.getAttribute('data-value');
-        if (candidateValue === undefined || candidateValue === null) {
-            candidate = candidate?.closest('[role=tab]');
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        if (candidateValue && candidate) {
-            selectTab(candidateValue, candidate);
-        }
+      let candidate: HTMLElement | null | undefined = event.target as HTMLElement;
+      let candidateValue: string | null | undefined = candidate?.getAttribute('data-value');
+
+      if (candidateValue === undefined || candidateValue === null) {
+        candidate = candidate?.closest<HTMLElement>('[role=tab]');
+        candidateValue = candidate?.getAttribute('data-value');
+      }
+
+      if (candidateValue && candidate) {
+        selectTab(candidateValue, candidate);
+      }
     }
+
     rest.onclick?.(event);
-};
-const onKeydown = (event) => {
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     // if using arrows, only move when there are no modifier keys
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case 'Home':
-                selectFirstTab();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'End':
-                selectLastTab();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowLeft':
-                if (!vertical) {
-                    selectPreviousTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowRight':
-                if (!vertical) {
-                    selectNextTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowUp':
-                if (vertical) {
-                    selectPreviousTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowDown':
-                if (vertical) {
-                    selectNextTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            default:
-                break;
-        }
+      switch (event.key) {
+        case 'Home':
+          selectFirstTab();
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'End':
+          selectLastTab();
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowLeft':
+          if (!vertical) {
+            selectPreviousTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowRight':
+          if (!vertical) {
+            selectNextTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          if (vertical) {
+            selectPreviousTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowDown':
+          if (vertical) {
+            selectNextTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
     }
+
     rest.onkeydown?.(event);
-};
+  };
 </script>
 
 <div
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   bind:this={tabListRef}
-  class={`sterling-tab-list ${_class}`}
+  class={['sterling-tab-list', _class]}
   class:disabled
   class:vertical
   role="tablist"

package/dist/TabList.svelte.d.ts

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