@geoffcox/sterling-svelte 2.0.0 → 2.0.2

package/Dropdown.svelte.d.ts

@@ -1,18 +0,0 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null | undefined;
-    open?: boolean | null | undefined;
-    stayOpenOnClickAway?: boolean | null | undefined;
-    onOpen?: (open: boolean | null | undefined) => void;
-    button?: Snippet;
-    buttonIcon?: Snippet;
-    value?: string | Snippet;
-};
-declare const Dropdown: import("svelte").Component<Props, {
-    click: () => void;
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "open">;
-type Dropdown = ReturnType<typeof Dropdown>;
-export default Dropdown;

package/Input.svelte

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

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

@@ -1,2 +0,0 @@
-export declare const LABEL_STATUSES: string[];
-export declare const LABEL_VARIANTS: readonly ["regular", "container", "inline"];

package/Label.constants.js

@@ -1,2 +0,0 @@
-export const LABEL_STATUSES = ['none', 'info', 'success', 'warning', 'danger'];
-export const LABEL_VARIANTS = ['regular', 'container', 'inline'];

package/Label.svelte

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

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

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

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

@@ -1 +0,0 @@
-export declare const LIST_CONTEXT_KEY = "sterlingList";

package/List.constants.js

@@ -1 +0,0 @@
-export const LIST_CONTEXT_KEY = 'sterlingList';

package/List.svelte

@@ -1,203 +0,0 @@
-<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({
-    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();
-};
-export const click = () => {
-    listRef?.click();
-};
-export const focus = (options) => {
-    listRef?.focus();
-};
-export const scrollToSelectedItem = () => {
-    const element = getSelectedItemElement();
-    element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-};
-$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 selectItem = (value, element) => {
-    selectedValue = value;
-    lastSelectedItemRef = element;
-    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-};
-export const selectFirstItem = () => {
-    let candidate = listRef?.querySelector('[data-value][role=listitem]');
-    while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectPreviousItem = () => {
-    let selectedItem = getSelectedItemElement();
-    let candidate = selectedItem?.previousElementSibling;
-    while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectNextItem = () => {
-    let selectedItem = getSelectedItemElement();
-    let candidate = selectedItem?.nextElementSibling;
-    while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectLastItem = () => {
-    let candidate = listRef?.querySelector('[data-value][role=listitem]:last-of-type');
-    while (candidate && !isElementListItem(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectItem(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-const onClick = (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);
-        }
-    }
-    rest.onclick?.(event);
-};
-const onKeydown = (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;
-        }
-    }
-    rest.onkeydown?.(event);
-};
-</script>
-
-<!-- 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', _class].filter(Boolean).join(' ')}
-  class:disabled
-  class:horizontal
-  class:using-keyboard={$usingKeyboard}
-  role="list"
-  tabindex={0}
-  {...rest}
-  onclick={onClick}
-  onkeydown={onKeydown}
->
-  <div class="container">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</div>

package/List.svelte.d.ts

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

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

package/List.types.js

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

package/ListItem.svelte

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

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

@@ -1,83 +0,0 @@
-<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';
-let { children, class: _class, ...rest } = $props();
-let menuRef;
-let menuItemsRef;
-const noSlide = (node, params) => {
-    return { delay: 0, duration: 0 };
-};
-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);
-};
-export const blur = () => {
-    menuRef?.blur();
-};
-export const focusFirstMenuItem = () => {
-    let candidate = menuItemsRef?.firstElementChild;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    candidate?.focus({ preventScroll: true });
-    return !!candidate;
-};
-export const focusPreviousMenuItem = () => {
-    let candidate = document.activeElement;
-    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-        candidate = menuItemsRef?.previousElementSibling;
-        while (candidate && !isElementEnabledMenuItem(candidate)) {
-            candidate = candidate.previousElementSibling;
-        }
-        candidate?.focus();
-    }
-    return !!candidate;
-};
-export const focusNextMenuItem = () => {
-    let candidate = document.activeElement;
-    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-        candidate = menuItemsRef?.nextElementSibling;
-        while (candidate && !isElementEnabledMenuItem(candidate)) {
-            candidate = candidate.nextElementSibling;
-        }
-        candidate?.focus();
-    }
-    return !!candidate;
-};
-export const focusLastMenuItem = () => {
-    let candidate = menuItemsRef?.lastElementChild;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    candidate?.focus({ preventScroll: true });
-    return !!candidate;
-};
-//#endregion
-</script>
-
-<div
-  bind:this={menuRef}
-  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 }}
-  {...rest}
->
-  <div bind:this={menuItemsRef} class="menu-items">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</div>

package/Menu.svelte.d.ts

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

package/MenuBar.constants.d.ts

@@ -1 +0,0 @@
-export declare const MENU_BAR_CONTEXT_KEY = "sterlingMenuBar";

package/MenuBar.constants.js

@@ -1 +0,0 @@
-export const MENU_BAR_CONTEXT_KEY = 'sterlingMenuBar';