@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Switch.svelte

@@ -1,30 +1,18 @@
-<script>import { idGenerator } from './idGenerator';
+<svelte:options runes={true} />
+
+<script lang="ts">import { idGenerator } from './idGenerator';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let checked = false;
-export let disabled = false;
-/** The text appearing by the off position. Not used when the offLabel slot is filled. */
-export let offText = undefined;
-/** The text appearing near the on position. Not used when the onLabel slot is filled. */
-export let onText = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the switch is displayed vertically. */
-export let vertical = false;
-// ----- State ----- //
-const inputId = idGenerator.nextId('Switch');
+let { checked = $bindable(false), class: _class, disabled, id, offLabel, onLabel, vertical, ...rest } = $props();
+const inputId = id || idGenerator.nextId('Switch');
 let inputRef;
-let switchWidth = 0;
-let switchHeight = 0;
-let thumbWidth = 0;
-let thumbHeight = 0;
-$: switchSize = vertical ? switchHeight : switchWidth;
-$: thumbSize = vertical ? thumbHeight : thumbWidth;
-$: ratio = vertical ? (checked ? 0 : 1) : checked ? 1 : 0;
-$: valueOffset = (switchSize - thumbSize) * ratio;
-$: hasOffLabel = $$slots.offLabel || (offText !== undefined && offText.length > 0);
-$: hasOnLabel = $$slots.onLabel || (onText !== undefined && onText.length > 0);
-// ----- Methods ----- //
+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();
 };
@@ -36,75 +24,38 @@ export const focus = (options) => {
 };
 </script>
 
-<!--
-	@component
-	A styled HTML input type=checkbox element.
--->
 <div
-  class={`sterling-switch ${variant}`}
+  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"
-    on:blur
-    on:click
-    on:change
-    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:input
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:wheel|passive
-    {...$$restProps}
-  />
-  {#if hasOffLabel}
+  <input bind:this={inputRef} bind:checked {disabled} id={inputId} type="checkbox" {...rest} />
+  {#if offLabel}
     <div class="off-label">
-      <slot name="offLabel" {checked} {disabled} {inputId} {offText} {variant} {vertical}>
-        {#if offText}
-          <label for={inputId}>{offText}</label>
-        {/if}
-      </slot>
+      {#if typeof offLabel === 'string'}
+        {offLabel}
+      {:else}
+        {@render offLabel({ checked, disabled, inputId })}
+      {/if}
     </div>
   {/if}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="switch" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
+  <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 hasOnLabel}
+  {#if onLabel}
     <div class="on-label">
-      <slot name="onLabel" {checked} {disabled} {inputId} {onText} {variant} {vertical}>
-        {#if onText}
-          <label for={inputId}>{onText}</label>
-        {/if}
-      </slot>
+      {#if typeof onLabel === 'string'}
+        {onLabel}
+      {:else}
+        {@render onLabel({ checked, disabled, inputId })}
+      {/if}
     </div>
   {/if}
 </div>

package/dist/Switch.svelte.d.ts

@@ -1,74 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        offText?: string | undefined;
-        onText?: string | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        input: Event;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        offLabel: {
-            checked: boolean;
-            disabled: boolean;
-            inputId: string;
-            offText: string | undefined;
-            variant: string;
-            vertical: boolean;
-        };
-        onLabel: {
-            checked: boolean;
-            disabled: boolean;
-            inputId: string;
-            onText: string | undefined;
-            variant: string;
-            vertical: boolean;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+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;
 };
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-/** A styled HTML input type=checkbox element. */
-export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+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,33 +1,24 @@
-<script>import { getContext } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext } from 'svelte';
 import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/**
- * When true, the tab is disabled.
- * The tab is also disabled when its parent tab list is disabled.
- */
-export let disabled = false;
-/** When true, the tab is selected. */
-export let selected = false;
-/** The text of the tab. Not used when the default slot is filled. */
-export let text = undefined;
-/** The value uniquely identifying this tab within the tab list. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, disabled = false, value, ...rest } = $props();
 let tabRef;
-const { disabled: tabListDisabled, selectedValue, vertical } = getContext(TAB_LIST_CONTEXT_KEY);
-$: _disabled = $tabListDisabled || disabled;
-$: {
-    selected = $selectedValue === value;
-}
-$: {
-    if (selected) {
-        selectedValue.set(value);
+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;
     }
-}
-// ----- Methods ----- //
+});
 export const click = () => {
     tabRef?.click();
 };
@@ -42,53 +33,19 @@ export const focus = (options) => {
 <button
   bind:this={tabRef}
   aria-selected={selected}
-  class={`sterling-tab ${variant}`}
-  disabled={_disabled}
+  class={`sterling-tab ${_class}`}
   class:selected
   class:using-keyboard={$usingKeyboard}
-  class:vertical={$vertical}
+  class:vertical={tabListContext.vertical}
   data-value={value}
+  disabled={_disabled}
   role="tab"
   type="button"
   tabIndex={selected ? 0 : -1}
-  on:blur
-  on:click
-  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:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
+  {...rest}
 >
   <div class="content">
-    <slot disabled={_disabled} {selected} {text} {value} {variant}>
-      <div class="text">
-        {text || value}
-      </div>
-    </slot>
+    {@render children?.()}
   </div>
-  <div class="indicator" />
+  <div class="indicator"></div>
 </button>

package/dist/Tab.svelte.d.ts

@@ -1,71 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * When true, the tab is disabled.
-           * The tab is also disabled when its parent tab list is disabled.
-           */ disabled?: boolean | undefined;
-        /** When true, the tab is selected. */ selected?: boolean | undefined;
-        /** The text of the tab. Not used when the default slot is filled. */ text?: string | undefined;
-        /** The value uniquely identifying this tab within the tab list. */ value: string;
-        /** Additional class names to apply. */ variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            selected: boolean;
-            text: string | undefined;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+/// <reference types="svelte" />
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = HTMLButtonAttributes & {
+    value: string;
 };
-export type TabProps = typeof __propDef.props;
-export type TabEvents = typeof __propDef.events;
-export type TabSlots = typeof __propDef.slots;
-export default class Tab extends SvelteComponent<TabProps, TabEvents, TabSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+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

@@ -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>