@geoffcox/sterling-svelte 2.0.1 → 2.0.2

package/dist/Progress.svelte

@@ -1,36 +0,0 @@
-<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/dist/Progress.svelte.d.ts

@@ -1,12 +0,0 @@
-/// <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/dist/Progress.types.d.ts

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

package/dist/Progress.types.js

@@ -1 +0,0 @@
-export {};

package/dist/Radio.svelte

@@ -1,53 +0,0 @@
-<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/dist/Radio.svelte.d.ts

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

@@ -1,196 +0,0 @@
-<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(() => {
-    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) => {
-    selectRef?.focus();
-};
-export const scrollToSelectedItem = () => {
-    if (open) {
-        listRef?.scrollToSelectedItem();
-    }
-};
-// ----- Event Handlers ----- //
-const onSelectClick = (event) => {
-    if (!disabled) {
-        open = !open;
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    rest.onclick?.(event);
-};
-const onSelectKeydown = (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) => {
-    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) => {
-    open = false;
-    event.preventDefault();
-    event.stopPropagation();
-    return false;
-};
-const onListSelect = (value) => {
-    pendingSelectedValue = value;
-    if (!open) {
-        selectedValue = pendingSelectedValue;
-    }
-};
-</script>
-
-<div
-  bind:this={selectRef}
-  aria-controls={popupId}
-  aria-haspopup="listbox"
-  aria-expanded={open}
-  class={['sterling-select', _class].filter(Boolean).join(' ')}
-  class:disabled
-  role="combobox"
-  tabindex="0"
-  use:clickOutside={{ onclickoutside: () => (open = false) }}
-  {...rest}
-  onclick={onSelectClick}
-  onkeydown={onSelectKeydown}
->
-  <div class="value">
-    {#if valueSnippet}
-      {@render valueSnippet(selectedValue)}
-    {:else if selectedValue}
-      {selectedValue}
-    {:else}
-      <span>&nbsp;</span>
-    {/if}
-  </div>
-  <div class="button">
-    {#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', _class].filter(Boolean).join(' ')}>
-      <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

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

@@ -1,133 +0,0 @@
-<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/dist/Slider.svelte.d.ts

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

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

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

@@ -1,51 +0,0 @@
-<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/dist/Tab.svelte.d.ts

@@ -1,12 +0,0 @@
-/// <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.constants.d.ts

@@ -1 +0,0 @@
-export declare const TAB_LIST_CONTEXT_KEY = "sterlingTabList";

package/dist/TabList.constants.js

@@ -1 +0,0 @@
-export const TAB_LIST_CONTEXT_KEY = 'sterlingTabList';