@geoffcox/sterling-svelte 0.0.31 → 1.0.0

package/Link.svelte

@@ -1,26 +1,26 @@
 <script>export let href;
 export let disabled = false;
-export let colorful = false;
-export let variant = "regular";
+// ----- Props ----- //
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let linkRef;
+// ----- Methods ----- //
 export const blur = () => {
-  linkRef?.blur();
+    linkRef?.blur();
 };
 export const click = () => {
-  linkRef?.click();
+    linkRef?.click();
 };
 export const focus = (options) => {
-  linkRef?.focus();
+    linkRef?.focus();
 };
 </script>
 
 <a
   bind:this={linkRef}
-  class="sterling-link"
-  class:colorful
+  class={`sterling-link ${variant}`}
   class:disabled
-  class:ghost={variant === 'ghost'}
-  class:undecorated={variant === 'undecorated'}
   {href}
   on:blur
   on:click
@@ -55,100 +55,3 @@ export const focus = (options) => {
   on:wheel|passive
   {...$$restProps}><slot {disabled} {href} {variant} /></a
 >
-
-<style>
-  a {
-    background-color: transparent;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
-    border-bottom-style: var(--stsv-common__border-style);
-    border-bottom-width: calc(var(--stsv-common__border-width));
-    border-bottom-color: var(--stsv-common__border-color);
-    color: var(--stsv-common__color);
-    cursor: pointer;
-    font: inherit;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  a:visited {
-    border-bottom-color: var(--stsv-input__border-color);
-  }
-
-  a:hover {
-    border-bottom-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  a:active {
-    border-bottom-color: var(--stsv-input__border-color--selected);
-    color: var(--stsv-input__color--active);
-  }
-
-  /* ----- colorful ----- */
-
-  a.colorful,
-  a.colorful:visited {
-    border-bottom-color: var(--stsv-input--colorful__border-color);
-    color: var(--stsv-input--colorful__color);
-  }
-
-  a.colorful:hover {
-    border-bottom-color: var(--stsv-input--colorful__border-color--hover);
-    color: var(--stsv-input--colorful__color--hover);
-  }
-
-  a.colorful:active {
-    border-bottom-color: var(--stsv-input--colorful__border-color--selected);
-    color: var(--stsv-input--colorful__color--active);
-  }
-
-  /* ----- ghost ----- */
-
-  a.ghost {
-    border-bottom-color: transparent;
-  }
-
-  a.ghost:hover {
-    border-bottom-color: var(--stsv-input__border-color--hover);
-  }
-
-  a.ghost:active {
-    border-bottom-color: var(--stsv-input__border-color--selected);
-  }
-
-  /* ----- ghost colorful ----- */
-
-  a.ghost.colorful:hover {
-    border-bottom-color: var(--stsv-input--colorful__border-color--hover);
-  }
-
-  a.ghost.colorful:active {
-    border-bottom-color: var(--stsv-input--colorful__border-color--selected);
-  }
-
-  /* ----- disabled ----- */
-
-  a.disabled,
-  a.disabled:visited,
-  a.disabled:hover,
-  a.disabled:active {
-    border-bottom-color: var(--stsv-common__border-color--disabled);
-    color: var(--stsv-common__color--disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ----- undecorated ----- */
-  a.undecorated,
-  a.undecorated:hover,
-  a.undecorated:active,
-  a.undecorated:visited {
-    border-bottom-color: transparent;
-  }
-</style>

package/Link.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
         [x: string]: any;
         href: string;
         disabled?: boolean | undefined;
-        colorful?: boolean | undefined;
         variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;

package/List.svelte

@@ -1,180 +1,192 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { LIST_CONTEXT_KEY } from "./List.constants";
-import { usingKeyboard } from "./stores/usingKeyboard";
-export let colorful = false;
-export let composed = false;
+<script>import { createEventDispatcher, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+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;
-export let selectedValue = void 0;
+/** The value of the currently selected item. */
+export let selectedValue = undefined;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let listRef;
 let lastSelectedItemRef;
-const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const horizontalStore = writable(horizontal);
 const selectedValueStore = writable(selectedValue);
 $: {
-  colorfulStore.set(colorful);
+    disabledStore.set(disabled);
 }
 $: {
-  disabledStore.set(disabled);
+    horizontalStore.set(horizontal);
 }
 $: {
-  horizontalStore.set(horizontal);
+    selectedValueStore.set(selectedValue);
 }
 $: {
-  selectedValueStore.set(selectedValue);
-}
-$: {
-  selectedValue = $selectedValueStore;
+    selectedValue = $selectedValueStore;
 }
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
 const raiseSelect = (value) => {
-  dispatch("select", { value });
+    dispatch('select', { value });
 };
 $: {
-  raiseSelect(selectedValue);
+    raiseSelect(selectedValue);
 }
+// ----- Methods ----- //
 export const blur = () => {
-  listRef?.blur();
+    listRef?.blur();
 };
 export const click = () => {
-  listRef?.click();
+    listRef?.click();
 };
 export const focus = (options) => {
-  listRef?.focus();
+    listRef?.focus();
 };
 export const scrollToSelectedItem = () => {
-  const element = getSelectedItemElement();
-  element?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    const element = getSelectedItemElement();
+    element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 };
+// ----- Focus ----- //
+// ----- Selection ----- //
 const isElementListItem = (candidate) => {
-  return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "listitem";
+    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]");
-  }
+    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" });
+    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;
+    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;
+    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;
+    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;
-};
-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");
+    let candidate = listRef?.lastElementChild;
+    while (candidate && !isElementListItem(candidate)) {
+        candidate = candidate.previousElementSibling;
     }
+    let candidateValue = candidate?.getAttribute('data-value');
     if (candidateValue && candidate) {
-      selectItem(candidateValue, candidate);
+        selectItem(candidateValue, candidate);
+        return true;
     }
-  }
+    return false;
 };
-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 Handlers ----- //
+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');
         }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowUp":
-        if (!horizontal) {
-          selectedValue !== void 0 ? selectPreviousItem() : selectLastItem();
+        if (candidateValue && candidate) {
+            selectItem(candidateValue, candidate);
         }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowDown":
-        if (!horizontal) {
-          selectedValue !== void 0 ? selectNextItem() : selectFirstItem();
+    }
+};
+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 ? selectPreviousItem() : selectLastItem();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowRight':
+                if (horizontal) {
+                    selectedValue !== undefined ? selectNextItem() : selectFirstItem();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowUp':
+                if (!horizontal) {
+                    selectedValue !== undefined ? selectPreviousItem() : selectLastItem();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowDown':
+                if (!horizontal) {
+                    selectedValue !== undefined ? selectNextItem() : selectFirstItem();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
         }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
     }
-  }
 };
+// ----- Set Context ----- //
 setContext(LIST_CONTEXT_KEY, {
-  colorful: colorfulStore,
-  disabled: disabledStore,
-  selectedValue: selectedValueStore,
-  horizontal: horizontalStore
+    disabled: disabledStore,
+    selectedValue: selectedValueStore,
+    horizontal: horizontalStore
 });
 </script>
 
@@ -183,13 +195,14 @@ setContext(LIST_CONTEXT_KEY, {
 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 -->
 <div
   aria-activedescendant={selectedValue}
   aria-disabled={disabled}
   aria-orientation={horizontal ? 'horizontal' : 'vertical'}
   bind:this={listRef}
-  class="sterling-list"
-  class:composed
+  class={`sterling-list ${variant}`}
   class:disabled
   class:horizontal
   class:using-keyboard={$usingKeyboard}
@@ -227,107 +240,6 @@ A list of items where a single item can be selected.
   {...$$restProps}
 >
   <div class="container">
-    <slot {composed} {disabled} {horizontal} {selectedValue} />
+    <slot {disabled} {horizontal} {selectedValue} {variant} />
   </div>
 </div>
-
-<style>
-  .sterling-list {
-    background-color: var(--stsv-common__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);
-    box-sizing: border-box;
-    color: var(--stsv-input__color);
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 0;
-    outline: none;
-    padding: 0;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-list.horizontal {
-    height: unset;
-    overflow-x: auto;
-    overflow-y: hidden;
-    width: 100%;
-  }
-
-  .sterling-list:hover {
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-list.using-keyboard:focus-within {
-    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-list.composed,
-  .sterling-list.composed:hover,
-  .sterling-list.composed.using-keyboard:focus-within,
-  .sterling-list.composed.disabled {
-    background: none;
-    border: none;
-    outline: none;
-  }
-
-  .sterling-list.disabled * {
-    cursor: not-allowed;
-  }
-
-  /* ----- container - a layout panel that grows with the items ----- */
-
-  .container {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-
-  .sterling-list.horizontal .container {
-    flex-direction: row;
-  }
-
-  .container::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    content: '';
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  .sterling-list.disabled .container::after {
-    opacity: 1;
-  }
-
-  /* ----- media queries ----- */
-
-  @media (prefers-reduced-motion) {
-    .sterling-list,
-    .container::after {
-      transition: none;
-    }
-  }
-</style>

package/List.svelte.d.ts

@@ -2,11 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         horizontal?: boolean | undefined;
         selectedValue?: string | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -50,10 +49,10 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            composed: boolean;
             disabled: boolean;
             horizontal: boolean;
             selectedValue: string | undefined;
+            variant: string;
         };
     };
 };

package/List.types.d.ts

@@ -1,7 +1,12 @@
 import type { Readable, Writable } from 'svelte/store';
+/**
+ * The context for a List and its descendants.
+ */
 export type ListContext = {
-    colorful?: Readable<boolean>;
+    /** 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>;
 };