@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/Input.svelte

@@ -0,0 +1,55 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+let { id, children, class: _class, disabled = false, value = $bindable(undefined), ...rest } = $props();
+let inputRef;
+$effect(() => {
+    if (children && id === undefined) {
+        id = idGenerator.nextId('Input');
+    }
+});
+export const blur = () => {
+    inputRef?.blur();
+};
+export const click = () => {
+    inputRef?.click();
+};
+export const focus = (options) => {
+    inputRef?.focus();
+};
+export const select = () => {
+    inputRef?.select();
+};
+export const setSelectionRange = (start, end, direction) => {
+    inputRef?.setSelectionRange(start, end, direction);
+};
+export const setRangeText = (replacement, start, end, selectionMode) => {
+    if (start && end) {
+        inputRef?.setRangeText(replacement, start, end, selectionMode);
+    }
+    else {
+        inputRef?.setRangeText(replacement);
+    }
+};
+</script>
+
+{#if children}
+  <label class={['sterling-input-label', _class].filter(Boolean).join(' ')} class:disabled for={id}>
+    {@render children()}
+  </label>
+{/if}
+<div
+  class={['sterling-input', _class].filter(Boolean).join(' ')}
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
+  <input
+    bind:this={inputRef}
+    class:using-keyboard={$usingKeyboard}
+    {disabled}
+    {id}
+    bind:value
+    {...rest}
+  />
+</div>

package/Input.svelte.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+import type { HTMLInputAttributes } from 'svelte/elements';
+declare const Input: import("svelte").Component<HTMLInputAttributes, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    select: () => void;
+    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
+    setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
+}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/Label.svelte

@@ -0,0 +1,91 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import {} from 'svelte';
+import Tooltip from './Tooltip.svelte';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+let { children, class: _class, for: _for, forwardClick = false, message, required, requiredIndicator = '*', requiredReason, text, ...rest } = $props();
+// ----- State ----- //
+let labelRef = $state(null);
+let targetRef = $state(null);
+let requiredRef = $state(null);
+const findTarget = () => {
+    let candidate = null;
+    if (_for) {
+        candidate = labelRef?.querySelector(`[id="${_for}"]`) || null;
+    }
+    if (!candidate) {
+        candidate =
+            labelRef?.querySelector('a[href], ' +
+                'audio[controls], ' +
+                'button, ' +
+                'details, ' +
+                'div[contenteditable], ' +
+                'form, ' +
+                'input, ' +
+                'select, ' +
+                'textarea, ' +
+                'video[controls], ' +
+                '[tabindex]:not([tabindex="-1"])') || null;
+    }
+    targetRef = candidate;
+};
+// ----- Methods ----- //
+export const click = () => {
+    labelRef?.click();
+};
+export const blur = () => {
+    labelRef?.blur();
+};
+export const focus = (options) => {
+    labelRef?.focus(options);
+};
+// ----- Event Handlers ----- //
+const onClick = (event) => {
+    if (forwardClick) {
+        targetRef?.click();
+    }
+    rest.onclick?.(event);
+};
+</script>
+
+{#snippet snippetOrText(item?: string | Snippet, _class?: string)}
+  {#if item}
+    {#if typeof item === 'string'}
+      <div class={_class}>{item}</div>
+    {:else}
+      <div class={_class}>
+        {@render item()}
+      </div>
+    {/if}
+  {/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<label
+  bind:this={labelRef}
+  class={['sterling-label', _class].filter(Boolean).join(' ')}
+  class:using-keyboard={$usingKeyboard}
+  for={_for}
+  {...rest}
+  onclick={onClick}
+>
+  {@render snippetOrText(text, 'text')}
+  {#if children}
+    <div class="content">
+      {@render children()}
+    </div>
+  {/if}
+  {@render snippetOrText(message, 'message')}
+  <div class="required" bind:this={requiredRef}>
+    {#if required && requiredReason}
+      <Tooltip>
+        {@render snippetOrText(requiredIndicator, 'required')}
+        {#snippet tip()}
+          {@render snippetOrText(requiredReason, 'required-reason')}
+        {/snippet}
+      </Tooltip>
+    {:else if required}
+      {@render snippetOrText(requiredIndicator, 'required')}
+    {/if}
+  </div>
+</label>

package/Label.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = HTMLLabelAttributes & {
+    forwardClick?: boolean | null;
+    message?: string | Snippet;
+    required?: boolean | null;
+    requiredIndicator?: string | Snippet;
+    requiredReason?: string | Snippet;
+    text?: string | Snippet;
+};
+declare const Label: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/Link.svelte

@@ -0,0 +1,25 @@
+<svelte:options runes={true} />
+
+<script lang="ts">let { children, class: _class, disabled, ...rest } = $props();
+let linkRef;
+export const blur = () => {
+    linkRef?.blur();
+};
+export const click = () => {
+    linkRef?.click();
+};
+export const focus = (options) => {
+    linkRef?.focus();
+};
+</script>
+
+<a
+  bind:this={linkRef}
+  class={['sterling-link', _class].filter(Boolean).join(' ')}
+  class:disabled
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</a>

package/Link.svelte.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type Props = HTMLAnchorAttributes & {
+    disabled?: boolean | null;
+};
+declare const Link: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

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

@@ -1,43 +1,26 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+<svelte:options runes={true} />
+
+<script lang="ts">import { setContext } from 'svelte';
 import { LIST_CONTEXT_KEY } from './List.constants';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/** If the list and all its items are disabled. */
-export let disabled = false;
-/** When true, items are arranged horizontally. */
-export let horizontal = false;
-/** The value of the currently selected item. */
-export let selectedValue = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, disabled = false, horizontal = false, selectedValue = $bindable(), onSelect, ...rest } = $props();
 let listRef;
 let lastSelectedItemRef;
-const disabledStore = writable(disabled);
-const horizontalStore = writable(horizontal);
-const selectedValueStore = writable(selectedValue);
-$: {
-    disabledStore.set(disabled);
-}
-$: {
-    horizontalStore.set(horizontal);
-}
-$: {
-    selectedValueStore.set(selectedValue);
-}
-$: {
-    selectedValue = $selectedValueStore;
-}
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-$: {
-    raiseSelect(selectedValue);
-}
-// ----- Methods ----- //
+let listContext = $state({
+    disabled,
+    selectedValue,
+    horizontal
+});
+$effect(() => {
+    listContext.disabled = disabled;
+});
+$effect(() => {
+    listContext.horizontal = horizontal;
+});
+$effect(() => {
+    listContext.selectedValue = selectedValue;
+});
+setContext(LIST_CONTEXT_KEY, listContext);
 export const blur = () => {
     listRef?.blur();
 };
@@ -51,8 +34,9 @@ export const scrollToSelectedItem = () => {
     const element = getSelectedItemElement();
     element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 };
-// ----- Focus ----- //
-// ----- Selection ----- //
+$effect(() => {
+    onSelect?.(selectedValue);
+});
 const isElementListItem = (candidate) => {
     return (candidate &&
         candidate.getAttribute('data-value') !== null &&
@@ -70,7 +54,7 @@ const getSelectedItemElement = () => {
     }
 };
 const selectItem = (value, element) => {
-    selectedValueStore.set(value);
+    selectedValue = value;
     lastSelectedItemRef = element;
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 };
@@ -124,7 +108,6 @@ export const selectLastItem = () => {
     }
     return false;
 };
-// ----- Event Handlers ----- //
 const onClick = (event) => {
     if (!disabled) {
         let candidate = event.target;
@@ -137,6 +120,7 @@ const onClick = (event) => {
             selectItem(candidateValue, candidate);
         }
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
@@ -189,65 +173,31 @@ const onKeydown = (event) => {
                 return false;
         }
     }
+    rest.onkeydown?.(event);
 };
-// ----- Set Context ----- //
-setContext(LIST_CONTEXT_KEY, {
-    disabled: disabledStore,
-    selectedValue: selectedValueStore,
-    horizontal: horizontalStore
-});
 </script>
 
-<!--
-@component
-A list of items where a single item can be selected.
-  -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<!-- svelte-ignore a11y-role-supports-aria-props -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
   aria-activedescendant={selectedValue}
   aria-disabled={disabled}
   aria-orientation={horizontal ? 'horizontal' : 'vertical'}
   bind:this={listRef}
-  class={`sterling-list ${variant}`}
+  class={['sterling-list', _class].filter(Boolean).join(' ')}
   class:disabled
   class:horizontal
   class:using-keyboard={$usingKeyboard}
   role="list"
   tabindex={0}
-  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}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
 >
   <div class="container">
-    <slot {disabled} {horizontal} {selectedValue} {variant} />
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>

package/List.svelte.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    horizontal?: boolean | null;
+    selectedValue?: string;
+    onSelect?: (value?: string) => void;
+};
+declare const List: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    scrollToSelectedItem: () => void;
+    selectFirstItem: () => boolean;
+    selectPreviousItem: () => boolean;
+    selectNextItem: () => boolean;
+    selectLastItem: () => boolean;
+}, "selectedValue">;
+type List = ReturnType<typeof List>;
+export default List;

package/List.types.d.ts

@@ -0,0 +1,5 @@
+export type ListContext = {
+    disabled?: boolean | null | undefined;
+    selectedValue?: string;
+    horizontal?: boolean | null | undefined;
+};

package/ListItem.svelte

@@ -0,0 +1,49 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext } from 'svelte';
+import { LIST_CONTEXT_KEY } from './List.constants';
+let { children, class: _class, disabled, value, ...rest } = $props();
+const listContext = getContext(LIST_CONTEXT_KEY);
+let selected = $state(listContext.selectedValue === value);
+// Using $derived would be preferred, but this helps avoid
+// updates to every list item when selectedValue changes.
+$effect(() => {
+    if (listContext.selectedValue === value && !selected) {
+        selected = true;
+    }
+    else if (listContext.selectedValue !== value && selected) {
+        selected = false;
+    }
+});
+let itemRef;
+export const click = () => {
+    itemRef?.click();
+};
+export const blur = () => {
+    itemRef?.blur();
+};
+export const focus = (options) => {
+    itemRef?.focus(options);
+};
+</script>
+
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+  aria-selected={selected}
+  bind:this={itemRef}
+  class={['sterling-list-item', _class].filter(Boolean).join(' ')}
+  class:disabled={disabled || listContext.disabled}
+  class:horizontal={listContext.horizontal}
+  class:item-disabled={disabled}
+  class:list-disabled={listContext.disabled}
+  class:selected
+  data-value={value}
+  role="listitem"
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {value}
+  {/if}
+</div>

package/ListItem.svelte.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    value?: string;
+};
+declare const ListItem: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

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

@@ -1,30 +1,27 @@
-<script>import { getContext } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext } from 'svelte';
 import { slide } from 'svelte/transition';
 import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
 import { isElementEnabledMenuItem, isElementMenuItem } from './MenuItem.utils';
 import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-// ----- Props ----- //
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, ...rest } = $props();
 let menuRef;
 let menuItemsRef;
-// ----- Media Queries ----- //
-const slidNoOp = (node, params) => {
+const noSlide = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
-// ----- Get Context ----- //
-const { rootValue } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
-// ----- Methods ----- //
-export const blur = () => {
-    menuRef?.blur();
+let slideMotion = $derived(!$prefersReducedMotion ? slide : noSlide);
+const { rootValue = undefined } = getContext(MENU_ITEM_CONTEXT_KEY);
+const isElementInThisMenu = (candidate) => {
+    return candidate && candidate.closest('[role="menu"]') === menuRef;
 };
+//#region focus
 export const focus = (options) => {
     menuRef?.focus(options);
 };
-const isElementInThisMenu = (candidate) => {
-    return candidate && candidate.closest('[role="menu"]') === menuRef;
+export const blur = () => {
+    menuRef?.blur();
 };
 export const focusFirstMenuItem = () => {
     let candidate = menuItemsRef?.firstElementChild;
@@ -64,47 +61,23 @@ export const focusLastMenuItem = () => {
     candidate?.focus({ preventScroll: true });
     return !!candidate;
 };
+//#endregion
 </script>
 
 <div
   bind:this={menuRef}
-  class={`sterling-menu ${variant}`}
+  class={['sterling-menu', _class].filter(Boolean).join(' ')}
   role="menu"
   class:open
   data-root-value={rootValue}
   tabindex="-1"
   in:slideMotion|global={{ duration: 300 }}
   out:slideMotion|global={{ duration: 100 }}
-  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
-  {...$$restProps}
+  {...rest}
 >
   <div bind:this={menuItemsRef} class="menu-items">
-    <slot {variant} />
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>

package/Menu.svelte.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement>;
+declare const Menu: import("svelte").Component<Props, {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    focusFirstMenuItem: () => boolean;
+    focusPreviousMenuItem: () => boolean;
+    focusNextMenuItem: () => boolean;
+    focusLastMenuItem: () => boolean;
+}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;