@geoffcox/sterling-svelte 1.0.11 → 2.0.0

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

@@ -1,29 +1,14 @@
-<script>import { getContext, onMount, tick } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext, onMount, tick } from 'svelte';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { portal } from './actions/portal';
 import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-// ----- Props ----- //
-/** When true, content is rendered only when the popover is open. */
-export let conditionalRender = true;
-/** The offset along the side of the reference element. */
-export let crossAxisOffset = 0;
-/** The offset towards or away from the side of the reference element. */
-export let mainAxisOffset = 0;
-/** When true, the popover is open and visible. */
-export let open = false;
-/** How the popover should be positioned relative to the reference element. */
-export let placement = 'top-start';
-/** The host container for the callout. */
-export let portalHost = undefined;
-/** The reference to the element anchoring the position of the popover. */
-export let reference;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let popupRef;
-let popupPosition = { x: 0, y: 0 };
-$: floatingUIPlacement = placement;
-let bodyHeight = 0;
+let { children, conditionalRender = $bindable(true), crossAxisOffset = $bindable(0), mainAxisOffset = $bindable(0), open = $bindable(false), placement = $bindable('top-start'), portalHost, reference, class: _class, ...rest } = $props();
+let popupRef = $state(undefined);
+let popupPosition = $state({ x: 0, y: 0 });
+let floatingUIPlacement = $derived(placement);
+let bodyHeight = $state(0);
 let resizeObserver = undefined;
 const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
     portalHost: undefined
@@ -46,13 +31,11 @@ const ensurePortalHost = async () => {
     }
     portalHost = host;
 };
-$: {
-    if ($contextPortalHost || !$contextPortalHost) {
-        ensurePortalHost();
-    }
-}
 // ----- Position ----- //
-$: middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
+let middleware = $derived([
+    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
+    flip()
+]);
 const computePopoverPosition = async () => {
     if (reference && popupRef) {
         popupPosition = await computePosition(reference, popupRef, {
@@ -72,10 +55,19 @@ const autoUpdatePopoverPosition = () => {
         cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
     }
 };
-$: popupRef, reference, autoUpdatePopoverPosition();
-$: open, bodyHeight, middleware, floatingUIPlacement, computePopoverPosition();
+$effect(() => {
+    autoUpdatePopoverPosition();
+    return () => {
+        cleanupAutoUpdate();
+        cleanupAutoUpdate = () => { };
+    };
+});
+$effect(() => {
+    bodyHeight;
+    computePopoverPosition();
+});
 // ----- EventHandlers ----- //
-onMount(() => {
+$effect(() => {
     ensurePortalHost();
     resizeObserver = new ResizeObserver((entries) => {
         bodyHeight = entries[0].target.clientHeight;
@@ -92,49 +84,38 @@ const onKeydown = (event) => {
     if (event.key === 'Escape') {
         open = false;
     }
+    rest.onkeydown?.(event);
 };
+//TODO: Is this necessary?
 ensurePortalHost();
 </script>
 
 {#if open || !conditionalRender}
   <div use:portal={{ target: portalHost }} class="sterling-popover-portal">
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       bind:this={popupRef}
-      class={`sterling-popover ${variant}`}
+      class={['sterling-popover', _class].filter(Boolean).join(' ')}
       class:open
-      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:scroll
-      on:wheel|passive
-      on:paste
-      on:keydown={onKeydown}
-      {...$$restProps}
+      class:top={popupPosition.placement === 'top'}
+      class:top-start={popupPosition.placement === 'top-start'}
+      class:top-end={popupPosition.placement === 'top-end'}
+      class:right={popupPosition.placement === 'right'}
+      class:right-start={popupPosition.placement === 'right-start'}
+      class:right-end={popupPosition.placement === 'right-end'}
+      class:bottom={popupPosition.placement === 'bottom'}
+      class:bottom-start={popupPosition.placement === 'bottom-start'}
+      class:bottom-end={popupPosition.placement === 'bottom-end'}
+      class:left={popupPosition.placement === 'left'}
+      class:left-start={popupPosition.placement === 'left-start'}
+      class:left-end={popupPosition.placement === 'left-end'}
+      {...rest}
+      onkeydown={onKeydown}
       style="left:{popupPosition.x}px; top:{popupPosition.y}px"
     >
-      <slot {open} {variant} />
+      {#if children}
+        {@render children()}
+      {/if}
     </div>
   </div>
 {/if}

package/Popover.svelte.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+import type { PopoverPlacement } from './Popover.types';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    conditionalRender?: boolean;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement;
+};
+declare const Popover: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/Progress.constants.d.ts

@@ -0,0 +1 @@
+export declare const PROGRESS_ORIENTATIONS: string[];

package/Progress.constants.js

@@ -0,0 +1 @@
+export const PROGRESS_ORIENTATIONS = ['horizontal', 'vertical'];

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>