@geoffcox/sterling-svelte 1.0.11 → 2.0.0

package/dist/Link.svelte

@@ -1,57 +0,0 @@
-<script>export let href;
-export let disabled = false;
-// ----- Props ----- //
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let linkRef;
-// ----- Methods ----- //
-export const blur = () => {
-    linkRef?.blur();
-};
-export const click = () => {
-    linkRef?.click();
-};
-export const focus = (options) => {
-    linkRef?.focus();
-};
-</script>
-
-<a
-  bind:this={linkRef}
-  class={`sterling-link ${variant}`}
-  class:disabled
-  {href}
-  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
-  {...$$restProps}><slot {disabled} {href} {variant} /></a
->

package/dist/Link.svelte.d.ts

@@ -1,65 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href: string;
-        disabled?: boolean | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => 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;
-            href: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type LinkProps = typeof __propDef.props;
-export type LinkEvents = typeof __propDef.events;
-export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/List.svelte.d.ts

@@ -1,75 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        horizontal?: boolean | undefined;
-        selectedValue?: string | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        scrollToSelectedItem?: (() => void) | undefined;
-        selectFirstItem?: (() => boolean) | undefined;
-        selectPreviousItem?: (() => boolean) | undefined;
-        selectNextItem?: (() => boolean) | undefined;
-        selectLastItem?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        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;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            horizontal: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-/** A list of items where a single item can be selected. */
-export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get scrollToSelectedItem(): () => void;
-    get selectFirstItem(): () => boolean;
-    get selectPreviousItem(): () => boolean;
-    get selectNextItem(): () => boolean;
-    get selectLastItem(): () => boolean;
-}
-export {};

package/dist/List.types.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="svelte" />
-import type { Readable, Writable } from 'svelte/store';
-/**
- * The context for a List and its descendants.
- */
-export type ListContext = {
-    /** When true, the list and its items are disabled. */
-    disabled?: Readable<boolean>;
-    /** The value of the currently selected item. */
-    selectedValue?: Writable<string | undefined>;
-    /** When true, the list is laid out horizontally. */
-    horizontal?: Readable<boolean>;
-};

package/dist/ListItem.svelte

@@ -1,78 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { readable, writable } from 'svelte/store';
-import { LIST_CONTEXT_KEY } from './List.constants';
-// ----- Props ----- //
-/** When true the item is disabled.  The item is also disabled if the parent list is disabled. */
-export let disabled = false;
-/** The value uniquely identifying this item within the list. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- GetContext ----- //
-const { disabled: listDisabled, selectedValue, horizontal } = getContext(LIST_CONTEXT_KEY) || {
-    disabled: readable(false),
-    selectedValue: writable(undefined),
-    horizontal: readable(false)
-};
-// ----- State ----- //
-let itemRef;
-$: selected = $selectedValue === value;
-// ----- Methods ----- //
-export const click = () => {
-    itemRef?.click();
-};
-export const blur = () => {
-    itemRef?.blur();
-};
-export const focus = (options) => {
-    itemRef?.focus(options);
-};
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<!-- svelte-ignore a11y-role-supports-aria-props -->
-<div
-  aria-selected={selected}
-  bind:this={itemRef}
-  class={`sterling-list-item ${variant}`}
-  class:disabled={disabled || $listDisabled}
-  class:item-disabled={disabled}
-  class:list-disabled={$listDisabled}
-  class:selected
-  data-value={value}
-  role="listitem"
-  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
-  {...$$restProps}
->
-  <slot {disabled} {horizontal} {selected} {value} {variant}>{value}</slot>
-</div>

package/dist/ListItem.svelte.d.ts

@@ -1,67 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        value: string;
-        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;
-            horizontal: import("svelte/store").Readable<boolean> | undefined;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type ListItemProps = typeof __propDef.props;
-export type ListItemEvents = typeof __propDef.events;
-export type ListItemSlots = typeof __propDef.slots;
-export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/Menu.svelte.d.ts

@@ -1,63 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        focusFirstMenuItem?: (() => boolean) | undefined;
-        focusPreviousMenuItem?: (() => boolean) | undefined;
-        focusNextMenuItem?: (() => boolean) | undefined;
-        focusLastMenuItem?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        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;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type MenuProps = typeof __propDef.props;
-export type MenuEvents = typeof __propDef.events;
-export type MenuSlots = typeof __propDef.slots;
-export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get focusFirstMenuItem(): () => boolean;
-    get focusPreviousMenuItem(): () => boolean;
-    get focusNextMenuItem(): () => boolean;
-    get focusLastMenuItem(): () => boolean;
-}
-export {};

package/dist/MenuBar.svelte.d.ts

@@ -1,58 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        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;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        close: CustomEvent<any>;
-        open: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type MenuBarProps = typeof __propDef.props;
-export type MenuBarEvents = typeof __propDef.events;
-export type MenuBarSlots = typeof __propDef.slots;
-export default class MenuBar extends SvelteComponent<MenuBarProps, MenuBarEvents, MenuBarSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/MenuButton.svelte

@@ -1,145 +0,0 @@
-<script>import { createEventDispatcher, setContext, tick } from 'svelte';
-import { writable } from 'svelte/store';
-import Button from './Button.svelte';
-import Menu from './Menu.svelte';
-import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
-import { idGenerator } from './idGenerator';
-import Popover from './Popover.svelte';
-import { clickOutside } from './actions/clickOutside';
-// ----- Props ----- //
-export let open = false;
-export let menuVariant = '';
-export let popoverPlacement = 'bottom-start';
-export let value;
-export let variant = '';
-// ----- State ----- //
-const instanceId = idGenerator.nextId('MenuButton');
-let buttonRef;
-let reference;
-let menuRef;
-let prevOpen = open;
-$: menuId = `${value}-menu-${instanceId}`;
-$: hasChildren = $$slots.items;
-const openValues = writable([]);
-$: {
-    open = $openValues.length > 0;
-}
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseClose = (value) => {
-    dispatch('close', { value });
-};
-const raiseOpen = (value) => {
-    dispatch('open', { value });
-};
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-// ----- Methods ----- //
-export const click = () => {
-    buttonRef?.click();
-};
-export const blur = () => {
-    buttonRef?.blur();
-};
-export const focus = (options) => {
-    buttonRef?.focus(options);
-};
-// ----- Event Handlers ----- //
-const onClick = async () => {
-    if (!open) {
-        openValues.set(['menu-button']);
-        await tick();
-        menuRef?.focusFirstMenuItem();
-    }
-    else {
-        open = false;
-        openValues.set([]);
-    }
-};
-$: {
-    if (!open && open !== prevOpen) {
-        focus();
-    }
-    prevOpen = open;
-}
-const closeAllMenus = () => {
-    openValues.set([]);
-};
-const onClickOutside = (event) => {
-    const { detail: { mouseEvent } } = event;
-    let element = mouseEvent.target;
-    while (element) {
-        if (element.getAttribute('data-root-value') === value) {
-            return;
-        }
-        element = element.parentElement;
-    }
-    closeAllMenus?.();
-};
-// ----- Context ----- //
-setContext(MENU_ITEM_CONTEXT_KEY, {
-    depth: 1,
-    openValues,
-    rootValue: value,
-    closeContainingMenu: () => {
-        open = false;
-    },
-    onOpen: raiseOpen,
-    onClose: raiseClose,
-    onSelect: raiseSelect
-});
-</script>
-
-<Button
-  bind:this={buttonRef}
-  aria-controls={menuId}
-  aria-expanded={open}
-  aria-haspopup={hasChildren}
-  aria-owns={menuId}
-  data-value={value}
-  data-root-value={value}
-  variant={`sterling-menu-button ${variant}`}
-  on:blur
-  on:click
-  on:click={onClick}
-  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
-  {...$$restProps}
->
-  <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
-    <slot {open} {value} {variant} />
-  </div>
-  <Popover {reference} {open} placement={popoverPlacement}>
-    <Menu bind:this={menuRef} id={menuId} {reference} {open} variant={menuVariant}>
-      <slot name="items" />
-    </Menu>
-  </Popover>
-</Button>

package/dist/MenuButton.svelte.d.ts

@@ -1,71 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        open?: boolean | undefined;
-        menuVariant?: string | undefined;
-        popoverPlacement?: string | undefined;
-        value: string;
-        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;
-        close: CustomEvent<any>;
-        open: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            open: boolean;
-            value: string;
-            variant: string;
-        };
-        items: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type MenuButtonProps = typeof __propDef.props;
-export type MenuButtonEvents = typeof __propDef.events;
-export type MenuButtonSlots = typeof __propDef.slots;
-export default class MenuButton extends SvelteComponent<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};