@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/Input.svelte

@@ -0,0 +1,115 @@
+<script>import { v4 as uuid } from "uuid";
+import Label from "./Label.svelte";
+export let composed = false;
+export let disabled = false;
+export let id = void 0;
+export let value = "";
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
+</script>
+
+{#if $$slots.default}
+  <Label {disabled} for={id}>
+    <slot {composed} {disabled} {value} />
+  </Label>
+{/if}
+<input
+  bind:value
+  class="sterling-input"
+  class:composed
+  {disabled}
+  {id}
+  on:blur
+  on:click
+  on:change
+  on:copy
+  on:cut
+  on:paste
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:input
+  on:invalid
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:select
+  on:submit
+  on:reset
+  on:wheel
+  {...$$restProps}
+/>
+
+<style>
+  .sterling-input {
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-radius: var(--stsv-Input__border-radius);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
+    color: var(--stsv-Input__color);
+    font: inherit;
+    margin: 0;
+    outline: none;
+    padding: 0.5em;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-input:hover {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
+  }
+
+  .sterling-input:focus {
+    background-color: var(--stsv-Input__background-color--focus);
+    border-color: var(--stsv-Input__border-color--focus);
+    color: var(--stsv-Input__color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
+  }
+
+  .sterling-input:disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  .sterling-input.composed,
+  .sterling-input.composed:hover,
+  .sterling-input.composed:focus,
+  .sterling-input.composed.disabled {
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+
+  .sterling-input::placeholder {
+    color: var(--stsv-Display__color--faint);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-input:disabled::placeholder {
+    color: var(--stsv-Display__color--disabled);
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-input {
+      transition: none;
+    }
+  }
+</style>

package/{inputs/Input.svelte.d.ts → Input.svelte.d.ts}

@@ -2,8 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | undefined;
+        composed?: boolean | undefined;
         disabled?: boolean | undefined;
+        id?: string | undefined;
+        value?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -36,13 +38,16 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
+        default: {
+            composed: boolean;
+            disabled: boolean;
+            value: string;
+        };
     };
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
-/** A styled HTML input element with optional label. */
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/Label.svelte

@@ -0,0 +1,51 @@
+<script>export let disabled = false;
+HTMLLabelElement;
+</script>
+
+<label
+  aria-disabled={disabled}
+  class="sterling-label"
+  class:disabled
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  on:dblclick
+  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
+  on:paste
+  {...$$restProps}
+>
+  <slot />
+</label>
+
+<style>
+  label {
+    color: var(--stsv-Display__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
+  label.disabled {
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  @media (prefers-reduced-motion) {
+    label {
+      transition: none;
+    }
+  }
+</style>

package/Label.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        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: {};
+    };
+};
+export type LabelProps = typeof __propDef.props;
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/List.constants.d.ts

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

package/List.constants.js

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

package/List.svelte

@@ -0,0 +1,293 @@
+<script>import { createKeyborg } from "keyborg";
+import { createEventDispatcher, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { v4 as uuid } from "uuid";
+import { listContextKey } from "./List.constants";
+export let composed = false;
+export let disabled = false;
+export let horizontal = false;
+export let selectedValue = void 0;
+const listId = `list-${uuid()}`;
+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;
+}
+const dispatch = createEventDispatcher();
+const raiseSelect = (value) => {
+  dispatch("select", { value });
+};
+$: {
+  raiseSelect(selectedValue);
+}
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+export const focus = () => {
+  listRef?.focus();
+};
+export const scrollToSelectedItem = () => {
+  const element = getSelectedItemElement();
+  element?.scrollIntoView({ block: "nearest", inline: "nearest" });
+};
+const isElementListItem = (candidate) => {
+  return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && 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) => {
+  selectedValueStore.set(value);
+  lastSelectedItemRef = element;
+  element.scrollIntoView({ block: "nearest", inline: "nearest" });
+};
+export const selectFirstItem = () => {
+  let candidate = listRef?.firstElementChild;
+  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?.lastElementChild;
+  while (candidate && !isElementListItem(candidate)) {
+    candidate = candidate.previousElementSibling;
+  }
+  let candidateValue = candidate?.getAttribute("data-value");
+  if (candidateValue && candidate) {
+    selectItem(candidateValue, candidate);
+    return true;
+  }
+  return false;
+};
+onMount(() => {
+  keyborg.subscribe(keyborgHandler);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+  };
+});
+const onClick = (event) => {
+  if (!disabled) {
+    let candidate = event.target;
+    let candidateValue = candidate?.getAttribute("data-value");
+    if (candidateValue === void 0 || candidateValue === null) {
+      candidate = candidate?.closest("[data-value]");
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (candidateValue && candidate) {
+      selectItem(candidateValue, candidate);
+    }
+  }
+};
+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 !== void 0 ? selectPreviousItem() : selectLastItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowRight":
+        if (horizontal) {
+          selectedValue !== void 0 ? selectNextItem() : selectFirstItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowUp":
+        if (!horizontal) {
+          selectedValue !== void 0 ? selectPreviousItem() : selectLastItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      case "ArrowDown":
+        if (!horizontal) {
+          selectedValue !== void 0 ? selectNextItem() : selectFirstItem();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+    }
+  }
+};
+setContext(listContextKey, {
+  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 -->
+<div
+  aria-activedescendant={selectedValue}
+  aria-disabled={disabled}
+  aria-orientation={horizontal ? 'horizontal' : 'vertical'}
+  bind:this={listRef}
+  class="sterling-list"
+  class:composed
+  class:disabled
+  class:horizontal
+  class:using-keyboard={usingKeyboard}
+  id={listId}
+  role="list"
+  tabindex={0}
+  on:blur
+  on:click
+  on:click={onClick}
+  on:copy
+  on:cut
+  on:dblclick
+  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
+  on:paste
+  {...$$restProps}
+>
+  <slot {composed} {disabled} {horizontal} {selectedValue} />
+</div>
+
+<style>
+  .sterling-list {
+    background-color: var(--stsv-Common__background-color);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: var(--stsv-Common__border-width);
+    box-sizing: border-box;
+    color: var(--stsv-Common__color);
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 100%;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    outline: none;
+    padding: 0;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-list.horizontal {
+    flex-direction: row;
+    height: unset;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    width: 100%;
+  }
+
+  .sterling-list:hover {
+    border-color: var(--stsv-Common__border-color--hover);
+    color: var(--stsv-Common__color--hover);
+  }
+
+  .sterling-list.using-keyboard:focus-within {
+    border-color: var(--stsv-Common__border-color--focus);
+    color: var(--stsv-Common__color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
+  }
+
+  .sterling-list.disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  .sterling-list.composed,
+  .sterling-list.composed:hover,
+  .sterling-list.composed.using-keyboard:focus-within,
+  .sterling-list.composed.disabled {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-list {
+      transition: none;
+    }
+  }
+</style>

package/List.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        horizontal?: boolean | undefined;
+        selectedValue?: string | undefined;
+        focus?: (() => 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;
+        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: {
+            composed: boolean;
+            disabled: boolean;
+            horizontal: boolean;
+            selectedValue: string | 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 SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+    get focus(): () => void;
+    get scrollToSelectedItem(): () => void;
+    get selectFirstItem(): () => boolean;
+    get selectPreviousItem(): () => boolean;
+    get selectNextItem(): () => boolean;
+    get selectLastItem(): () => boolean;
+}
+export {};

package/List.types.d.ts

@@ -0,0 +1,6 @@
+import type { Readable, Writable } from 'svelte/store';
+export type ListContext = {
+    disabled: Readable<boolean>;
+    selectedValue: Writable<string | undefined>;
+    horizontal: Readable<boolean>;
+};

package/ListItem.svelte

@@ -0,0 +1,89 @@
+<script>import { getContext } from "svelte";
+import { listContextKey } from "./List.constants";
+export let disabled = false;
+export let value;
+const {
+  disabled: listDisabled,
+  selectedValue,
+  horizontal
+} = getContext(listContextKey);
+let itemRef;
+$:
+  _disabled = disabled || $listDisabled;
+$:
+  selected = $selectedValue === value;
+</script>
+
+<div
+  aria-selected={selected}
+  bind:this={itemRef}
+  class="sterling-list-item"
+  class:disabled={_disabled}
+  class:selected
+  data-value={value}
+  role="listitem"
+  on:blur
+  on:click
+  on:dblclick
+  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}
+>
+  <slot {disabled} {horizontal} {selected} {value}>{value}</slot>
+</div>
+
+<style>
+  .sterling-list-item {
+    background-color: transparent;
+    box-sizing: border-box;
+    color: var(--stsv-Input__color);
+    cursor: pointer;
+    margin: 0;
+    padding: 0.5em;
+    outline: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+  }
+
+  .sterling-list-item:not(.disabled):hover {
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
+  }
+
+  .sterling-list-item.selected {
+    background-color: var(--stsv-Input__background-color--selected);
+    color: var(--stsv-Input__color--selected);
+  }
+
+  .sterling-list-item.disabled {
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-list-item {
+      transition: none;
+    }
+  }
+</style>