@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/Label.svelte

@@ -1,61 +1,93 @@
 <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;
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+  import type { HTMLLabelAttributes, MouseEventHandler } from 'svelte/elements';
+  import Tooltip from './Tooltip.svelte';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  type Props = HTMLLabelAttributes & {
+    forwardClick?: boolean | null;
+    message?: Snippet | string;
+    required?: boolean | null;
+    requiredIndicator?: Snippet | string;
+    requiredReason?: Snippet | string;
+    text?: Snippet | string;
+  };
+
+  let {
+    children,
+    class: _class,
+    for: _for,
+    forwardClick = false,
+    message,
+    required,
+    requiredIndicator = '*',
+    requiredReason,
+    text,
+    ...rest
+  }: Props = $props();
+
+  // ----- State ----- //
+
+  let labelRef: HTMLLabelElement | null = $state(null);
+  let targetRef: HTMLElement | null = $state(null);
+
+  const findTarget = () => {
+    let candidate: HTMLElement | null = null;
     if (_for) {
-        candidate = labelRef?.querySelector(`[id="${_for}"]`) || null;
+      candidate = labelRef?.querySelector<HTMLElement>(`[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;
+      candidate =
+        labelRef?.querySelector<HTMLElement>(
+          '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 = () => {
+  };
+
+  // ----- Methods ----- //
+
+  export const click = () => {
     labelRef?.click();
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     labelRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     labelRef?.focus(options);
-};
-// ----- Event Handlers ----- //
-const onClick = (event) => {
+  };
+
+  // ----- Event Handlers ----- //
+
+  const onClick: MouseEventHandler<HTMLLabelElement> = (event) => {
     if (forwardClick) {
-        targetRef?.click();
+      targetRef?.click();
     }
     rest.onclick?.(event);
-};
+  };
 </script>
 
-{#snippet snippetOrText(item?: string | Snippet, _class?: string)}
+{#snippet stringOrSnippet(item?: string | Snippet)}
   {#if item}
     {#if typeof item === 'string'}
-      <div class={_class}>{item}</div>
+      {item}
     {:else}
-      <div class={_class}>
-        {@render item()}
-      </div>
+      {@render item()}
     {/if}
   {/if}
 {/snippet}
@@ -63,29 +95,41 @@ const onClick = (event) => {
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <label
   bind:this={labelRef}
-  class={['sterling-label', _class].filter(Boolean).join(' ')}
+  class={['sterling-label', _class]}
   class:using-keyboard={$usingKeyboard}
   for={_for}
   {...rest}
   onclick={onClick}
 >
-  {@render snippetOrText(text, 'text')}
+  {#if text}
+    <div class="text">
+      {@render stringOrSnippet(text)}
+    </div>
+  {/if}
   {#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>
+  {#if message}
+    <div class="message">
+      {@render stringOrSnippet(message)}
+    </div>
+  {/if}
+  {#if required && requiredIndicator && requiredReason}
+    <Tooltip>
+      <div class="required">
+        {@render stringOrSnippet(requiredIndicator)}
+      </div>
+      {#snippet tip()}
+        <div class="required-reason">
+          {@render stringOrSnippet(requiredReason)}
+        </div>
+      {/snippet}
+    </Tooltip>
+  {:else if required && requiredIndicator}
+    <div class="required">
+      {@render stringOrSnippet(requiredIndicator)}
+    </div>
+  {/if}
 </label>

package/dist/Label.svelte.d.ts

@@ -2,11 +2,11 @@ import { type Snippet } from 'svelte';
 import type { HTMLLabelAttributes } from 'svelte/elements';
 type Props = HTMLLabelAttributes & {
     forwardClick?: boolean | null;
-    message?: string | Snippet;
+    message?: Snippet | string;
     required?: boolean | null;
-    requiredIndicator?: string | Snippet;
-    requiredReason?: string | Snippet;
-    text?: string | Snippet;
+    requiredIndicator?: Snippet | string;
+    requiredReason?: Snippet | string;
+    text?: Snippet | string;
 };
 declare const Label: import("svelte").Component<Props, {
     click: () => void;

package/dist/Link.svelte

@@ -1,24 +1,30 @@
 <svelte:options runes={true} />
 
-<script lang="ts">let { children, class: _class, disabled, ...rest } = $props();
-let linkRef;
-export const blur = () => {
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  type Props = HTMLAnchorAttributes & {
+    disabled?: boolean | null;
+  };
+
+  let { children, class: _class, disabled, ...rest }: Props = $props();
+
+  let linkRef: HTMLAnchorElement;
+
+  export const blur = () => {
     linkRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     linkRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     linkRef?.focus();
-};
+  };
 </script>
 
-<a
-  bind:this={linkRef}
-  class={['sterling-link', _class].filter(Boolean).join(' ')}
-  class:disabled
-  {...rest}
->
+<a bind:this={linkRef} class={['sterling-link', _class]} class:disabled {...rest}>
   {#if children}
     {@render children()}
   {/if}

package/dist/Link.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 type Props = HTMLAnchorAttributes & {
     disabled?: boolean | null;

package/dist/List.svelte

@@ -1,180 +1,235 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { setContext } from 'svelte';
-import { LIST_CONTEXT_KEY } from './List.constants';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { children, class: _class, disabled = false, horizontal = false, selectedValue = $bindable(), onSelect, ...rest } = $props();
-let listRef;
-let lastSelectedItemRef;
-let listContext = $state({
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { LIST_CONTEXT_KEY } from './List.constants';
+  import type { ListContext } from './List.types';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    horizontal?: boolean | null;
+    selectedValue?: string;
+    onSelect?: (value?: string) => void;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    horizontal = false,
+    selectedValue = $bindable(),
+    onSelect,
+    ...rest
+  }: Props = $props();
+
+  let listRef: HTMLDivElement;
+  let lastSelectedItemRef: HTMLElement;
+
+  let listContext = $state({
     disabled,
     selectedValue,
     horizontal
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     listContext.disabled = disabled;
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     listContext.horizontal = horizontal;
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     listContext.selectedValue = selectedValue;
-});
-setContext(LIST_CONTEXT_KEY, listContext);
-export const blur = () => {
+  });
+
+  setContext<ListContext>(LIST_CONTEXT_KEY, listContext);
+
+  export const blur = () => {
     listRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     listRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     listRef?.focus();
-};
-export const scrollToSelectedItem = () => {
+  };
+
+  export const scrollToSelectedItem = () => {
     const element = getSelectedItemElement();
     element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     onSelect?.(selectedValue);
-});
-const isElementListItem = (candidate) => {
-    return (candidate &&
-        candidate.getAttribute('data-value') !== null &&
-        candidate.getAttribute('data-value') !== undefined &&
-        candidate.getAttribute('role') === 'listitem');
-};
-const getSelectedItemElement = () => {
-    if (isElementListItem(lastSelectedItemRef) &&
-        lastSelectedItemRef?.getAttribute('data-value') === selectedValue &&
-        lastSelectedItemRef?.closest('[role="list"]') === listRef) {
-        return lastSelectedItemRef;
-    }
-    else {
-        return listRef?.querySelector('[data-value][aria-selected=true]');
+  });
+
+  const isElementListItem = (candidate: Element) => {
+    return (
+      candidate &&
+      candidate.getAttribute('data-value') !== null &&
+      candidate.getAttribute('data-value') !== undefined &&
+      candidate.getAttribute('role') === 'listitem'
+    );
+  };
+
+  const getSelectedItemElement = () => {
+    if (
+      isElementListItem(lastSelectedItemRef) &&
+      lastSelectedItemRef?.getAttribute('data-value') === selectedValue &&
+      lastSelectedItemRef?.closest('[role="list"]') === listRef
+    ) {
+      return lastSelectedItemRef;
+    } else {
+      return listRef?.querySelector('[data-value][aria-selected=true]');
     }
-};
-const selectItem = (value, element) => {
+  };
+
+  const selectItem = (value: string, element: HTMLElement) => {
     selectedValue = value;
     lastSelectedItemRef = element;
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-};
-export const selectFirstItem = () => {
-    let candidate = listRef?.querySelector('[data-value][role=listitem]');
+  };
+
+  export const selectFirstItem = () => {
+    let candidate: Element | undefined | null = listRef?.querySelector(
+      '[data-value][role=listitem]'
+    );
     while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.nextElementSibling;
+      candidate = candidate.nextElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-export const selectPreviousItem = () => {
+  };
+
+  export const selectPreviousItem = () => {
     let selectedItem = getSelectedItemElement();
     let candidate = selectedItem?.previousElementSibling;
     while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.previousElementSibling;
+      candidate = candidate.previousElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-export const selectNextItem = () => {
+  };
+
+  export const selectNextItem = () => {
     let selectedItem = getSelectedItemElement();
     let candidate = selectedItem?.nextElementSibling;
     while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.nextElementSibling;
+      candidate = candidate.nextElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-export const selectLastItem = () => {
-    let candidate = listRef?.querySelector('[data-value][role=listitem]:last-of-type');
+  };
+
+  export const selectLastItem = () => {
+    let candidate: Element | undefined | null = listRef?.querySelector(
+      '[data-value][role=listitem]:last-of-type'
+    );
     while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.previousElementSibling;
+      candidate = candidate.previousElementSibling;
     }
     let candidateValue = candidate?.getAttribute('data-value');
+
     if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
     }
+
     return false;
-};
-const onClick = (event) => {
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (event) => {
     if (!disabled) {
-        let candidate = event.target;
-        let candidateValue = candidate?.getAttribute('data-value');
-        if (candidateValue === undefined || candidateValue === null) {
-            candidate = candidate?.closest('[data-value]');
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        if (candidateValue && candidate) {
-            selectItem(candidateValue, candidate);
-        }
+      let candidate: HTMLElement | null | undefined = event.target as HTMLElement;
+      let candidateValue: string | null | undefined = candidate?.getAttribute('data-value');
+
+      if (candidateValue === undefined || candidateValue === null) {
+        candidate = candidate?.closest<HTMLElement>('[data-value]');
+        candidateValue = candidate?.getAttribute('data-value');
+      }
+      if (candidateValue && candidate) {
+        selectItem(candidateValue, candidate);
+      }
     }
     rest.onclick?.(event);
-};
-const onKeydown = (event) => {
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case 'Home':
-                selectFirstItem();
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            case 'End':
-                selectLastItem();
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            case 'ArrowLeft':
-                if (horizontal) {
-                    selectedValue !== undefined && selectedValue.length > 0
-                        ? selectPreviousItem()
-                        : selectLastItem();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            case 'ArrowRight':
-                if (horizontal) {
-                    selectedValue !== undefined && selectedValue.length > 0
-                        ? selectNextItem()
-                        : selectFirstItem();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            case 'ArrowUp':
-                if (!horizontal) {
-                    selectedValue !== undefined && selectedValue.length > 0
-                        ? selectPreviousItem()
-                        : selectLastItem();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            case 'ArrowDown':
-                if (!horizontal) {
-                    selectedValue !== undefined && selectedValue.length > 0
-                        ? selectNextItem()
-                        : selectFirstItem();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-        }
+      switch (event.key) {
+        case 'Home':
+          selectFirstItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'End':
+          selectLastItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowLeft':
+          if (horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectPreviousItem()
+              : selectLastItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowRight':
+          if (horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectNextItem()
+              : selectFirstItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowUp':
+          if (!horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectPreviousItem()
+              : selectLastItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowDown':
+          if (!horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectNextItem()
+              : selectFirstItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+      }
     }
     rest.onkeydown?.(event);
-};
+  };
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -185,7 +240,7 @@ const onKeydown = (event) => {
   aria-disabled={disabled}
   aria-orientation={horizontal ? 'horizontal' : 'vertical'}
   bind:this={listRef}
-  class={['sterling-list', _class].filter(Boolean).join(' ')}
+  class={['sterling-list', _class]}
   class:disabled
   class:horizontal
   class:using-keyboard={$usingKeyboard}

package/dist/List.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean | null;