@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/Progress.svelte

@@ -0,0 +1,36 @@
+<svelte:options runes={true} />
+
+<script lang="ts">let { class: _class, disabled = false, max = 100, percent = $bindable(0), //readonly
+value = $bindable(0), vertical, ...rest } = $props();
+//----- State ----- //
+let clientHeight = $state(0);
+let clientWidth = $state(0);
+let clampMax = $derived(Math.max(1, max));
+let clampValue = $derived(Math.max(0, Math.min(value, clampMax)));
+let ratio = $derived(clampValue / clampMax);
+$effect(() => {
+    percent = Math.round(ratio * 100);
+});
+let percentHeight = $derived(clientHeight * ratio);
+let percentWidth = $derived(clientWidth * ratio);
+let indicatorStyle = $derived(vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`);
+export {};
+</script>
+
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  class={['sterling-progress', _class].filter(Boolean).join(' ')}
+  class:disabled
+  class:horizontal={!vertical}
+  class:vertical
+  data-progress-percent={percent}
+  data-progress-max={max}
+  data-progress-value={value}
+  role="progressbar"
+  {...rest}
+>
+  <div class="container" bind:clientWidth bind:clientHeight>
+    <div class="indicator" style={indicatorStyle}></div>
+  </div>
+</div>

package/Progress.svelte.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    max?: number;
+    percent?: number;
+    value?: number;
+    vertical?: boolean | null;
+};
+declare const Progress: import("svelte").Component<Props, {}, "value" | "percent">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/Progress.types.d.ts

@@ -0,0 +1,4 @@
+import type { PROGRESS_ORIENTATIONS } from './Progress.constants';
+type ProgressOrientationTuple = typeof PROGRESS_ORIENTATIONS;
+export type ProgressOrientation = ProgressOrientationTuple[number];
+export {};

package/Radio.svelte

@@ -0,0 +1,53 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+let { id, children, checked = $bindable(false), class: _class, disabled = false, group = $bindable(), ...rest } = $props();
+let inputRef;
+$effect(() => {
+    if (children && id === undefined) {
+        id = idGenerator.nextId('Radio');
+    }
+});
+// ----- Methods ----- //
+export const blur = () => {
+    inputRef?.blur();
+};
+export const click = () => {
+    inputRef?.click();
+};
+export const focus = (options) => {
+    inputRef?.focus(options);
+};
+// ----- Event Handlers ----- //
+const onChange = (e) => {
+    console.log('onChange', e);
+    // if ((e.currentTarget && e.currentTarget.checked) || (e.target && e.target.checked)) {
+    //   group = value;
+    // }
+};
+$effect(() => {
+    console.log(id, '-checked', checked);
+});
+</script>
+
+<!--
+	@component
+	A styled HTML input type=radio element with optional label.
+-->
+<div
+  class={`sterling-radio ${_class}`}
+  class:checked
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
+  <div class="container">
+    <input bind:this={inputRef} checked {disabled} bind:group {id} type="radio" {...rest} />
+    <div class="indicator"></div>
+  </div>
+  {#if children}
+    <label for={id}>
+      {@render children()}
+    </label>
+  {/if}
+</div>

package/Radio.svelte.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = HTMLInputAttributes & {
+    group?: any | null;
+};
+/** A styled HTML input type=radio element with optional label. */
+declare const Radio: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "group" | "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

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

@@ -1,49 +1,32 @@
-<script>import { createEventDispatcher, tick } from 'svelte';
+<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');
-// ----- Props ----- //
-export let disabled = false;
-/** When true, the select's dropdown is open. */
-export let open = false;
-/** The value of the selected item.*/
-export let selectedValue = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-/** Additional class names to apply to the List*/
-export let listVariant = '';
 // ----- State ----- //
-// Tracks the previous open state
-let prevOpen = false;
 // Tracks the pending selected index
-let pendingSelectedValue = selectedValue;
-let selectRef;
+let pendingSelectedValue = $state(selectedValue);
+// svelte-ignore non_reactive_update
+let selectRef = $state(undefined);
 let listRef;
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-const raisePending = (value) => {
-    dispatch('pending', { value });
-};
 // ----- Reactions ----- //
-$: {
+$effect(() => {
     pendingSelectedValue = selectedValue;
-}
-$: {
-    raiseSelect(selectedValue);
-}
-$: {
+});
+$effect(() => {
+    onSelect?.(selectedValue);
+});
+$effect(() => {
     if (open) {
-        raisePending(pendingSelectedValue);
+        onPending?.(pendingSelectedValue);
     }
-}
-$: {
-    if (open && !prevOpen) {
-        prevOpen = true;
+});
+$effect(() => {
+    if (open) {
         tick().then(() => {
             setTimeout(() => {
                 listRef?.focus();
@@ -51,11 +34,12 @@ $: {
             }, 10);
         });
     }
-    else if (prevOpen) {
-        prevOpen = false;
+});
+$effect(() => {
+    if (!open) {
         tick().then(() => selectRef?.focus());
     }
-}
+});
 // ----- Methods ----- //
 export const blur = () => {
     selectRef?.blur();
@@ -78,6 +62,7 @@ const onSelectClick = (event) => {
         event.preventDefault();
         event.stopPropagation();
     }
+    rest.onclick?.(event);
 };
 const onSelectKeydown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
@@ -95,10 +80,10 @@ const onSelectKeydown = (event) => {
             case 'ArrowUp':
                 {
                     if (selectedValue) {
-                        listRef.selectPreviousItem();
+                        listRef?.selectPreviousItem();
                     }
                     else {
-                        listRef.selectLastItem();
+                        listRef?.selectLastItem();
                     }
                     event.preventDefault();
                     event.stopPropagation();
@@ -108,10 +93,10 @@ const onSelectKeydown = (event) => {
             case 'ArrowDown':
                 {
                     if (selectedValue) {
-                        listRef.selectNextItem();
+                        listRef?.selectNextItem();
                     }
                     else {
-                        listRef.selectFirstItem();
+                        listRef?.selectFirstItem();
                     }
                     event.preventDefault();
                     event.stopPropagation();
@@ -120,6 +105,7 @@ const onSelectKeydown = (event) => {
                 break;
         }
     }
+    rest.onkeydown?.(event);
 };
 const onListKeydown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
@@ -151,8 +137,8 @@ const onListClick = (event) => {
     event.stopPropagation();
     return false;
 };
-const onListSelect = (event) => {
-    pendingSelectedValue = event.detail.value;
+const onListSelect = (value) => {
+    pendingSelectedValue = value;
     if (!open) {
         selectedValue = pendingSelectedValue;
     }
@@ -164,71 +150,46 @@ const onListSelect = (event) => {
   aria-controls={popupId}
   aria-haspopup="listbox"
   aria-expanded={open}
-  class={`sterling-select ${variant}`}
+  class={['sterling-select', _class].filter(Boolean).join(' ')}
   class:disabled
   role="combobox"
   tabindex="0"
-  use:clickOutside
-  on:blur
-  on:click
-  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:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:wheel|passive
-  on:paste
-  on:click={onSelectClick}
-  on:click_outside={() => (open = false)}
-  on:keydown={onSelectKeydown}
-  {...$$restProps}
+  use:clickOutside={{ onclickoutside: () => (open = false) }}
+  {...rest}
+  onclick={onSelectClick}
+  onkeydown={onSelectKeydown}
 >
   <div class="value">
-    <slot name="value" {disabled} {open} {selectedValue} {variant}>
-      {#if selectedValue}
-        {selectedValue}
-      {:else}
-        <span>&nbsp;</span>
-      {/if}
-    </slot>
+    {#if valueSnippet}
+      {@render valueSnippet(selectedValue)}
+    {:else if selectedValue}
+      {selectedValue}
+    {:else}
+      <span>&nbsp;</span>
+    {/if}
   </div>
   <div class="button">
-    <slot name="button" {disabled} {open} {selectedValue} {variant}>
-      <slot name="icon" {disabled} {open} {selectedValue} {variant}>
-        <div class="chevron" />
-      </slot>
-    </slot>
+    {#if buttonSnippet}
+      {@render buttonSnippet()}
+    {:else}
+      <div class="chevron"></div>
+    {/if}
   </div>
   <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
-    <div class={`sterling-select-popup-content ${variant}`}>
+    <div class={['sterling-select-popup-content', _class].filter(Boolean).join(' ')}>
       <List
         bind:this={listRef}
         {disabled}
         selectedValue={pendingSelectedValue}
-        on:click={onListClick}
-        on:keydown={onListKeydown}
-        on:select={onListSelect}
-        tabIndex={open ? 0 : -1}
-        variant={`composed ${listVariant}`}
+        onclick={onListClick}
+        onkeydown={onListKeydown}
+        onSelect={onListSelect}
+        tabindex={open ? 0 : -1}
+        class={`composed ${listClass}`}
       >
-        <slot {variant} {listVariant} />
+        {#if children}
+          {@render children()}
+        {/if}
       </List>
     </div>
   </Popover>

package/Select.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    buttonSnippet?: Snippet;
+    disabled?: boolean | null;
+    listClass?: string;
+    onPending?: (value?: string) => void;
+    onSelect?: (value?: string) => void;
+    open?: boolean | null;
+    selectedValue?: string;
+    valueSnippet?: Snippet<[string | undefined]>;
+};
+declare const Select: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    scrollToSelectedItem: () => void;
+}, "open" | "selectedValue">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/Slider.svelte

@@ -0,0 +1,133 @@
+<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 = () => {
+    sliderRef?.blur();
+};
+export const click = () => {
+    sliderRef?.click();
+};
+export const focus = (options) => {
+    sliderRef?.focus();
+};
+let ratio = $derived((value - min) / (max - min));
+const setValue = (newValue) => {
+    const clamped = Math.max(min, Math.min(max, newValue));
+    value = precision !== undefined ? round(clamped, precision) : clamped;
+};
+// ensure min <= max
+$effect(() => {
+    if (min > max) {
+        min = max;
+    }
+});
+$effect(() => {
+    const clamped = Math.max(min, Math.min(max, value));
+    const newValue = precision !== undefined ? round(clamped, precision) : clamped;
+    if (value !== newValue) {
+        value = newValue;
+    }
+});
+const setValueByOffset = (offset) => {
+    if (sliderSize > 0) {
+        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(() => {
+    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) => {
+    if (!disabled) {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        if (vertical) {
+            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        }
+        else {
+            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        }
+    }
+    rest?.onpointerdown?.(event);
+};
+const onPointerMove = (event) => {
+    if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
+        if (vertical) {
+            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        }
+        else {
+            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        }
+    }
+    rest?.onpointermove?.(event);
+};
+const onPointerUp = (event) => {
+    if (!disabled) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    rest?.onpointerup?.(event);
+};
+const onKeyDown = (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;
+        }
+    }
+    rest?.onkeydown?.(event);
+};
+</script>
+
+<div
+  aria-disabled={disabled}
+  aria-valuemin={min}
+  aria-valuenow={value}
+  aria-valuemax={max}
+  class={`sterling-slider ${_class}`}
+  class:disabled
+  class:horizontal={!vertical}
+  class:vertical
+  role="slider"
+  tabindex={!disabled ? 0 : undefined}
+  {...rest}
+  onkeydown={onKeyDown}
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  onpointerup={onPointerUp}
+>
+  <div
+    class="container"
+    bind:this={sliderRef}
+    bind:clientWidth={sliderWidth}
+    bind:clientHeight={sliderHeight}
+  >
+    <div class="track"></div>
+    <div
+      class="fill"
+      style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`}
+    ></div>
+    <div
+      class="thumb"
+      style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`}
+    ></div>
+  </div>
+</div>

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;