@geoffcox/sterling-svelte 1.0.11 → 2.0.0

package/Slider.svelte.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } 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;
+};
+declare const Slider: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/Switch.svelte

@@ -0,0 +1,61 @@
+<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 = () => {
+    inputRef?.blur();
+};
+export const click = () => {
+    inputRef?.click();
+};
+export const focus = (options) => {
+    inputRef?.focus(options);
+};
+</script>
+
+<div
+  class={`sterling-switch ${_class}`}
+  class:checked
+  class:disabled
+  class:vertical
+  class:using-keyboard={$usingKeyboard}
+>
+  <input bind:this={inputRef} bind:checked {disabled} id={inputId} type="checkbox" {...rest} />
+  {#if offLabel}
+    <div class="off-label">
+      {#if typeof offLabel === 'string'}
+        {offLabel}
+      {:else}
+        {@render offLabel({ checked, disabled, inputId })}
+      {/if}
+    </div>
+  {/if}
+  <div class="toggle" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
+    <div
+      class="thumb"
+      bind:offsetWidth={thumbWidth}
+      bind:offsetHeight={thumbHeight}
+      style={`--thumb-offset: ${valueOffset}px`}
+    ></div>
+  </div>
+  {#if onLabel}
+    <div class="on-label">
+      {#if typeof onLabel === 'string'}
+        {onLabel}
+      {:else}
+        {@render onLabel({ checked, disabled, inputId })}
+      {/if}
+    </div>
+  {/if}
+</div>

package/Switch.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+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;
+};
+declare const Switch: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/Tab.svelte

@@ -0,0 +1,51 @@
+<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(() => {
+    if (tabListContext.selectedValue === value && !selected) {
+        selected = true;
+    }
+    else if (tabListContext.selectedValue !== value && selected) {
+        selected = false;
+    }
+});
+export const click = () => {
+    tabRef?.click();
+};
+export const blur = () => {
+    tabRef?.blur();
+};
+export const focus = (options) => {
+    tabRef?.focus(options);
+};
+</script>
+
+<button
+  bind:this={tabRef}
+  aria-selected={selected}
+  class={`sterling-tab ${_class}`}
+  class:selected
+  class:using-keyboard={$usingKeyboard}
+  class:vertical={tabListContext.vertical}
+  data-value={value}
+  disabled={_disabled}
+  role="tab"
+  type="button"
+  tabIndex={selected ? 0 : -1}
+  {...rest}
+>
+  <div class="content">
+    {@render children?.()}
+  </div>
+  <div class="indicator"></div>
+</button>

package/Tab.svelte.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = HTMLButtonAttributes & {
+    value: string;
+};
+declare const Tab: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/{dist/TabList.svelte → TabList.svelte}

@@ -1,36 +1,43 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+<svelte:options runes={true} />
+
+<script lang="ts">import { setContext } from 'svelte';
 import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-// ----- Props ----- //
-/** When true, the tab list and its tabs are disabled. */
-export let disabled = false;
-/** The value of the currently selected tab. */
-export let selectedValue = undefined;
-/** When true, the tab list is displayed vertically. */
-export let vertical = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, disabled = false, onSelect, selectedValue = $bindable(), vertical = false, ...rest } = $props();
 let tabListRef;
 let lastSelectedTabRef;
-const disabledStore = writable(disabled);
-const selectedValueStore = writable(selectedValue);
-const verticalStore = writable(vertical);
-$: disabledStore.set(disabled);
-$: selectedValueStore.set(selectedValue);
-$: {
-    selectedValue = $selectedValueStore;
-}
-$: verticalStore.set(vertical);
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseSelect = (value) => {
-    dispatch('select', { value });
+let tabListContext = {
+    get disabled() {
+        return disabled;
+    },
+    set disabled(value) {
+        disabled = value;
+    },
+    get selectedValue() {
+        return selectedValue;
+    },
+    set selectedValue(value) {
+        selectedValue = value;
+    },
+    get vertical() {
+        return vertical;
+    },
+    set vertical(value) {
+        vertical = value;
+    }
 };
-$: {
-    raiseSelect(selectedValue);
-}
-// ----- Methods ----- //
+$effect(() => {
+    tabListContext.disabled = disabled;
+});
+$effect(() => {
+    tabListContext.selectedValue = selectedValue;
+});
+$effect(() => {
+    tabListContext.vertical = vertical;
+});
+setContext(TAB_LIST_CONTEXT_KEY, tabListContext);
+$effect(() => {
+    onSelect?.(selectedValue);
+});
 export const blur = () => {
     tabListRef?.blur();
 };
@@ -43,7 +50,6 @@ export const focus = (options) => {
         selectFirstTab();
     }
 };
-// ----- Selection ----- //
 const isElementTab = (candidate) => {
     return (candidate &&
         candidate.getAttribute('data-value') !== null &&
@@ -61,7 +67,7 @@ const getSelectedTabElement = () => {
     }
 };
 const selectTab = (value, element) => {
-    selectedValueStore.set(value);
+    selectedValue = value;
     lastSelectedTabRef = element;
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     element.focus();
@@ -116,7 +122,6 @@ export const selectLastTab = () => {
     }
     return false;
 };
-// ----- EventHandlers ----- //
 const onClick = (event) => {
     if (!disabled) {
         let candidate = event.target;
@@ -129,6 +134,7 @@ const onClick = (event) => {
             selectTab(candidateValue, candidate);
         }
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     // if using arrows, only move when there are no modifier keys
@@ -138,91 +144,59 @@ const onKeydown = (event) => {
                 selectFirstTab();
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'End':
                 selectLastTab();
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowLeft':
                 if (!vertical) {
                     selectPreviousTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowRight':
                 if (!vertical) {
                     selectNextTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowUp':
                 if (vertical) {
                     selectPreviousTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowDown':
                 if (vertical) {
                     selectNextTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             default:
                 break;
         }
     }
+    rest.onkeydown?.(event);
 };
-// ----- Set Context ----- //
-setContext(TAB_LIST_CONTEXT_KEY, {
-    disabled: disabledStore,
-    selectedValue: selectedValueStore,
-    vertical: verticalStore
-});
 </script>
 
 <div
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   bind:this={tabListRef}
-  class={`sterling-tab-list ${variant}`}
+  class={`sterling-tab-list ${_class}`}
   class:disabled
   class:vertical
   role="tablist"
   tabindex="-1"
-  on:blur
-  on:click
-  on:click={onClick}
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keydown={onKeydown}
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:scroll
-  on:wheel|passive
-  on:paste
-  {...$$restProps}
+  onclick={onClick}
+  onkeydown={onKeydown}
+  {...rest}
 >
-  <slot {disabled} {selectedValue} {variant} {vertical} />
+  {@render children?.()}
 </div>

package/TabList.svelte.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    selectedValue?: string;
+    vertical?: boolean | null;
+    onSelect?: (value?: string) => void;
+};
+declare const TabList: import("svelte").Component<Props, {
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+    selectFirstTab: () => boolean;
+    selectPreviousTab: () => boolean;
+    selectNextTab: () => boolean;
+    selectLastTab: () => boolean;
+}, "selectedValue">;
+type TabList = ReturnType<typeof TabList>;
+export default TabList;

package/TabList.types.d.ts

@@ -0,0 +1,5 @@
+export type TabListContext = {
+    disabled?: boolean | null | undefined;
+    selectedValue?: string | undefined;
+    vertical?: boolean | null | undefined;
+};

package/{dist/TextArea.svelte → TextArea.svelte}

@@ -1,17 +1,9 @@
-<script>import { onMount, tick } from 'svelte';
-// ----- Props ----- //
-export let disabled = false;
-export let value = '';
-/** When true, the text area will resize itself vertically to fit text.*/
-export let autoHeight = false;
-/** Sets the resize handle direction. */
-export let resize = 'none';
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+<svelte:options runes={true} />
+
+<script lang="ts">import { tick } from 'svelte';
+let { class: _class, disabled = false, value = $bindable(''), autoHeight = false, resize = $bindable('none'), style, ...rest } = $props();
 let textAreaRef;
 const correctResize = async () => {
-    console.log('correctResize');
     await tick();
     setTimeout(() => {
         if (autoHeight) {
@@ -26,8 +18,6 @@ const correctResize = async () => {
         }
     }, 0);
 };
-$: autoHeight, resize, correctResize();
-// ----- autoHeight ----- //
 const autoSetHeight = () => {
     if (autoHeight && textAreaRef) {
         // the style must be directly set to avoid re-rendering looping latency
@@ -36,15 +26,16 @@ const autoSetHeight = () => {
         textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
     }
 };
-$: autoHeight, autoSetHeight();
-// ----- Event Handlers ----- //
-const onInput = () => {
-    autoSetHeight();
-};
-onMount(() => {
+$effect(() => {
+    autoHeight;
+    resize;
+    correctResize();
     autoSetHeight();
 });
-// ----- Methods ----- //
+const onInput = (event) => {
+    autoSetHeight();
+    rest.oninput?.(event);
+};
 export const blur = () => {
     textAreaRef?.blur();
 };
@@ -70,47 +61,14 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<div class={`sterling-text-area ${variant}`} class:disabled>
+<div class={`sterling-text-area ${_class}`} class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
     {disabled}
     rows="1"
-    style={`--TextArea__resize: ${resize};`}
-    on:beforeinput
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:dragend
-    on:dragenter
-    on:dragleave
-    on:dragover
-    on:dragstart
-    on:drop
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel|passive
-    on:input={onInput}
-    {...$$restProps}
-  />
+    {...rest}
+    oninput={onInput}
+    style={`--TextArea__resize: ${resize};${style}`}
+  ></textarea>
 </div>

package/TextArea.svelte.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="svelte" />
+import type { TextAreaResize } from './TextArea.types';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = HTMLTextareaAttributes & {
+    autoHeight?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    value?: string;
+    resize?: TextAreaResize;
+};
+declare const TextArea: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    select: () => void;
+    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
+    setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
+}, "value" | "resize">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/Tooltip.svelte

@@ -0,0 +1,63 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import { onMount } from 'svelte';
+import Callout from './Callout.svelte';
+let { children, class: _class, disabled = false, hoverDelayMilliseconds = 1000, open = $bindable(false), tip, ...rest } = $props();
+let originRef = $state();
+let reference = $derived(!!children ? originRef?.previousElementSibling : undefined);
+$inspect({ reference });
+const show = () => {
+    if (!disabled) {
+        open = true;
+    }
+};
+const hide = () => (open = false);
+const delayShow = () => {
+    hoverDelayMilliseconds === 0
+        ? show()
+        : setTimeout(() => {
+            show();
+        }, hoverDelayMilliseconds);
+};
+$effect(() => {
+    if (disabled) {
+        hide();
+    }
+});
+// ----- Event Listeners ----- //
+let cleanupAutoShowUpdate = () => { };
+const autoShowUpdate = () => {
+    cleanupAutoShowUpdate();
+    cleanupAutoShowUpdate = () => { };
+    const element = reference;
+    open = false;
+    if (element) {
+        element.addEventListener('mouseenter', delayShow);
+        element.addEventListener('mouseleave', hide);
+        cleanupAutoShowUpdate = () => {
+            element.removeEventListener('mouseenter', delayShow);
+            element.removeEventListener('mouseleave', hide);
+        };
+    }
+};
+$effect(() => {
+    reference;
+    autoShowUpdate();
+});
+// ----- EventHandlers ----- //
+onMount(() => {
+    autoShowUpdate();
+});
+</script>
+
+{@render children?.()}
+<div class="sterling-tooltip-origin" bind:this={originRef}></div>
+<Callout class={_class} {open} {reference} {...rest}>
+  {#if tip}
+    {#if typeof tip === 'string'}
+      {tip}
+    {:else}
+      {@render tip()}
+    {/if}
+  {/if}
+</Callout>

package/Tooltip.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+import type { CalloutProps } from './Callout.types';
+type Props = Omit<CalloutProps, 'reference'> & {
+    disabled?: boolean;
+    hoverDelayMilliseconds?: number;
+    tip?: string | Snippet;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/Tree.svelte

@@ -0,0 +1,53 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import { setContext } from 'svelte';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+import { TREE_CONTEXT_KEY } from './Tree.constants';
+let { children, class: _class, disabled = false, expandedValues = $bindable([]), onExpandCollapse, onSelect, selectedValue = $bindable(undefined), ...rest } = $props();
+let treeRef;
+let treeContext = {
+    get disabled() {
+        return disabled;
+    },
+    get expandedValues() {
+        return expandedValues;
+    },
+    set expandedValues(value) {
+        expandedValues = value;
+    },
+    get selectedValue() {
+        return selectedValue;
+    },
+    set selectedValue(value) {
+        selectedValue = value;
+    }
+};
+setContext(TREE_CONTEXT_KEY, treeContext);
+$effect(() => {
+    onSelect?.(selectedValue);
+});
+$effect(() => {
+    onExpandCollapse?.(expandedValues);
+});
+export const blur = () => {
+    treeRef?.blur();
+};
+export const focus = (options) => {
+    treeRef?.focus(options);
+};
+</script>
+
+<div
+  bind:this={treeRef}
+  aria-disabled={disabled}
+  class={`sterling-tree ${_class}`}
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+  role="tree"
+  tabindex="0"
+  {...rest}
+>
+  <div class="container">
+    {@render children?.()}
+  </div>
+</div>

package/Tree.svelte.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    expandedValues?: string[];
+    selectedValue?: string;
+    onExpandCollapse?: (expandedValues: string[]) => void;
+    onSelect?: (selectedValue: string | undefined) => void;
+};
+declare const Tree: import("svelte").Component<Props, {
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "selectedValue" | "expandedValues">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/Tree.types.d.ts

@@ -0,0 +1,5 @@
+export type TreeContext = {
+    disabled: boolean | null | undefined;
+    expandedValues: string[];
+    selectedValue: string | undefined;
+};