@geoffcox/sterling-svelte 2.0.2 → 2.0.3

package/dist/Radio.svelte

@@ -0,0 +1,65 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  const uuid = $props.id();
+
+  type Props = HTMLInputAttributes & {
+    group?: any | null;
+  };
+
+  let {
+    id,
+    children,
+    checked = $bindable(false),
+    class: _class,
+    disabled = false,
+    group = $bindable(),
+    ...rest
+  }: Props = $props();
+
+  let inputRef: HTMLInputElement;
+
+  $effect(() => {
+    if (children && id === undefined) {
+      id = `Radio-${uuid}`;
+    }
+  });
+
+  // ----- Methods ----- //
+
+  export const blur = () => {
+    inputRef?.blur();
+  };
+
+  export const click = () => {
+    inputRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    inputRef?.focus(options);
+  };
+</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/dist/Radio.svelte.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,262 @@
+<svelte:options runes={true} />
+
+<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(() => {
+    onSelect?.(selectedValue);
+  });
+
+  $effect(() => {
+    if (open) {
+      onPending?.(pendingSelectedValue);
+    }
+  });
+
+  $effect(() => {
+    if (open) {
+      tick().then(() => {
+        setTimeout(() => {
+          listRef?.focus();
+          listRef?.scrollToSelectedItem();
+        }, 10);
+      });
+    }
+  });
+
+  $effect(() => {
+    if (!open) {
+      tick().then(() => selectRef?.focus());
+    }
+  });
+
+  // ----- Methods ----- //
+
+  export const blur = () => {
+    selectRef?.blur();
+  };
+
+  export const click = () => {
+    selectRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    selectRef?.focus();
+  };
+
+  export const scrollToSelectedItem = () => {
+    if (open) {
+      listRef?.scrollToSelectedItem();
+    }
+  };
+
+  // ----- Event Handlers ----- //
+
+  const onSelectClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (!disabled) {
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    rest.onclick?.(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;
+      }
+    }
+    rest.onkeydown?.(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;
+      }
+    }
+  };
+
+  const onListClick = (event: MouseEvent) => {
+    open = false;
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+  };
+
+  const onListSelect = (value?: string) => {
+    pendingSelectedValue = value;
+    if (!open) {
+      selectedValue = pendingSelectedValue;
+    }
+  };
+</script>
+
+<div
+  bind:this={selectRef}
+  aria-controls={popoverId}
+  aria-haspopup="listbox"
+  aria-expanded={open}
+  class={['sterling-select', _class]}
+  class:disabled
+  role="combobox"
+  tabindex="0"
+  use:clickOutside={{ onclickoutside: () => (open = false) }}
+  {...rest}
+  onclick={onSelectClick}
+  onkeydown={onSelectKeydown}
+>
+  <div class="value">
+    {#if value}
+      {#if typeof value === 'string'}
+        {value}
+      {:else}
+        {@render value(selectedValue)}
+      {/if}
+    {:else if selectedValue}
+      {selectedValue}
+    {:else}
+      <span>&nbsp;</span>
+    {/if}
+  </div>
+  <!-- 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 id={popoverId} reference={selectRef} bind:open conditionalRender={false}>
+    <div class={['sterling-select-popup-content', 'sterling-select-content', _class]}>
+      <List
+        bind:this={listRef}
+        {disabled}
+        selectedValue={pendingSelectedValue}
+        onclick={onListClick}
+        onkeydown={onListKeydown}
+        onSelect={onListSelect}
+        tabindex={open ? 0 : -1}
+        class={['composed', listClass]}
+      >
+        {#if children}
+          {@render children()}
+        {/if}
+      </List>
+    </div>
+  </Popover>
+</div>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+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]>;
+};
+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/dist/Slider.svelte

@@ -0,0 +1,182 @@
+<svelte:options runes={true} />
+
+<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 = () => {
+    sliderRef?.click();
+  };
+
+  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(() => {
+    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: number) => {
+    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: 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.preventDefault();
+      focus();
+    }
+
+    rest?.onpointerdown?.(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);
+      }
+      event.preventDefault();
+    }
+
+    rest?.onpointermove?.(event);
+  };
+
+  const onPointerUp: PointerEventHandler<HTMLDivElement> = (event) => {
+    if (!disabled) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      event.preventDefault();
+      focus();
+    }
+    rest?.onpointerup?.(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;
+      }
+    }
+    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/dist/Slider.svelte.d.ts

@@ -0,0 +1,18 @@
+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/dist/Switch.svelte

@@ -0,0 +1,92 @@
+<svelte:options runes={true} />
+
+<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 = () => {
+    inputRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    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/dist/Switch.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+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;