@geoffcox/sterling-svelte 0.0.31 → 1.0.1

package/TabList.svelte

@@ -1,186 +1,198 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
-export let colorful = false;
+<script>import { createEventDispatcher, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+// ----- Props ----- //
+/** When true, the tab list and its tabs are disabled. */
 export let disabled = false;
+/** The value of the currently selected tab. */
+export let selectedValue = undefined;
+/** When true, the tab list is displayed vertically. */
 export let vertical = false;
-export let selectedValue = void 0;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let tabListRef;
 let lastSelectedTabRef;
-const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const selectedValueStore = writable(selectedValue);
 const verticalStore = writable(vertical);
-$:
-  colorfulStore.set(colorful);
-$:
-  disabledStore.set(disabled);
-$:
-  selectedValueStore.set(selectedValue);
+$: disabledStore.set(disabled);
+$: selectedValueStore.set(selectedValue);
 $: {
-  selectedValue = $selectedValueStore;
+    selectedValue = $selectedValueStore;
 }
-$:
-  verticalStore.set(vertical);
+$: verticalStore.set(vertical);
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
 const raiseSelect = (value) => {
-  dispatch("select", { value });
+    dispatch('select', { value });
 };
 $: {
-  raiseSelect(selectedValue);
+    raiseSelect(selectedValue);
 }
+// ----- Methods ----- //
 export const blur = () => {
-  tabListRef?.blur();
+    tabListRef?.blur();
 };
 export const focus = (options) => {
-  let selectedItem = getSelectedTabElement();
-  if (selectedValue && selectedItem) {
-    selectTab(selectedValue, selectedItem);
-  } else {
-    selectFirstTab();
-  }
+    let selectedItem = getSelectedTabElement();
+    if (selectedValue && selectedItem) {
+        selectTab(selectedValue, selectedItem);
+    }
+    else {
+        selectFirstTab();
+    }
 };
+// ----- Selection ----- //
 const isElementTab = (candidate) => {
-  return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "tab";
+    return (candidate &&
+        candidate.getAttribute('data-value') !== null &&
+        candidate.getAttribute('data-value') !== undefined &&
+        candidate.getAttribute('role') === 'tab');
 };
 const getSelectedTabElement = () => {
-  if (isElementTab(lastSelectedTabRef) && lastSelectedTabRef?.getAttribute("data-value") === selectedValue && lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef) {
-    return lastSelectedTabRef;
-  } else {
-    return tabListRef?.querySelector("[data-value][aria-selected=true]");
-  }
+    if (isElementTab(lastSelectedTabRef) &&
+        lastSelectedTabRef?.getAttribute('data-value') === selectedValue &&
+        lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef) {
+        return lastSelectedTabRef;
+    }
+    else {
+        return tabListRef?.querySelector('[data-value][aria-selected=true]');
+    }
 };
 const selectTab = (value, element) => {
-  selectedValueStore.set(value);
-  lastSelectedTabRef = element;
-  element.scrollIntoView({ block: "nearest", inline: "nearest" });
-  element.focus();
+    selectedValueStore.set(value);
+    lastSelectedTabRef = element;
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    element.focus();
 };
 export const selectFirstTab = () => {
-  let candidate = tabListRef?.firstElementChild;
-  while (candidate && !isElementTab(candidate)) {
-    candidate = candidate.nextElementSibling;
-  }
-  let candidateValue = candidate?.getAttribute("data-value");
-  if (candidateValue && candidate) {
-    selectTab(candidateValue, candidate);
-    return true;
-  }
-  return false;
+    let candidate = tabListRef?.firstElementChild;
+    while (candidate && !isElementTab(candidate)) {
+        candidate = candidate.nextElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+    if (candidateValue && candidate) {
+        selectTab(candidateValue, candidate);
+        return true;
+    }
+    return false;
 };
 export const selectPreviousTab = () => {
-  let selectedTab = getSelectedTabElement();
-  let candidate = selectedTab?.previousElementSibling;
-  while (candidate && !isElementTab(candidate)) {
-    candidate = candidate.previousElementSibling;
-  }
-  let candidateValue = candidate?.getAttribute("data-value");
-  if (candidateValue && candidate) {
-    selectTab(candidateValue, candidate);
-    return true;
-  }
-  return false;
+    let selectedTab = getSelectedTabElement();
+    let candidate = selectedTab?.previousElementSibling;
+    while (candidate && !isElementTab(candidate)) {
+        candidate = candidate.previousElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+    if (candidateValue && candidate) {
+        selectTab(candidateValue, candidate);
+        return true;
+    }
+    return false;
 };
 export const selectNextTab = () => {
-  let selectedTab = getSelectedTabElement();
-  let candidate = selectedTab?.nextElementSibling;
-  while (candidate && !isElementTab(candidate)) {
-    candidate = candidate.nextElementSibling;
-  }
-  let candidateValue = candidate?.getAttribute("data-value");
-  if (candidateValue && candidate) {
-    selectTab(candidateValue, candidate);
-    return true;
-  }
-  return false;
+    let selectedTab = getSelectedTabElement();
+    let candidate = selectedTab?.nextElementSibling;
+    while (candidate && !isElementTab(candidate)) {
+        candidate = candidate.nextElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+    if (candidateValue && candidate) {
+        selectTab(candidateValue, candidate);
+        return true;
+    }
+    return false;
 };
 export const selectLastTab = () => {
-  let candidate = tabListRef?.lastElementChild;
-  while (candidate && !isElementTab(candidate)) {
-    candidate = candidate.previousElementSibling;
-  }
-  let candidateValue = candidate?.getAttribute("data-value");
-  if (candidateValue && candidate) {
-    selectTab(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("[role=tab]");
-      candidateValue = candidate?.getAttribute("data-value");
+    let candidate = tabListRef?.lastElementChild;
+    while (candidate && !isElementTab(candidate)) {
+        candidate = candidate.previousElementSibling;
     }
+    let candidateValue = candidate?.getAttribute('data-value');
     if (candidateValue && candidate) {
-      selectTab(candidateValue, candidate);
+        selectTab(candidateValue, candidate);
+        return true;
     }
-  }
+    return false;
 };
-const onKeydown = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    switch (event.key) {
-      case "Home":
-        selectFirstTab();
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "End":
-        selectLastTab();
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowLeft":
-        if (!vertical) {
-          selectPreviousTab();
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowRight":
-        if (!vertical) {
-          selectNextTab();
+// ----- EventHandlers ----- //
+const onClick = (event) => {
+    if (!disabled) {
+        let candidate = event.target;
+        let candidateValue = candidate?.getAttribute('data-value');
+        if (candidateValue === undefined || candidateValue === null) {
+            candidate = candidate?.closest('[role=tab]');
+            candidateValue = candidate?.getAttribute('data-value');
         }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowUp":
-        if (vertical) {
-          selectPreviousTab();
+        if (candidateValue && candidate) {
+            selectTab(candidateValue, candidate);
         }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowDown":
-        if (vertical) {
-          selectNextTab();
+    }
+};
+const onKeydown = (event) => {
+    // if using arrows, only move when there are no modifier keys
+    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+        switch (event.key) {
+            case 'Home':
+                selectFirstTab();
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'End':
+                selectLastTab();
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowLeft':
+                if (!vertical) {
+                    selectPreviousTab();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowRight':
+                if (!vertical) {
+                    selectNextTab();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowUp':
+                if (vertical) {
+                    selectPreviousTab();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            case 'ArrowDown':
+                if (vertical) {
+                    selectNextTab();
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            default:
+                break;
         }
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      default:
-        break;
     }
-  }
 };
+// ----- Set Context ----- //
 setContext(TAB_LIST_CONTEXT_KEY, {
-  colorful: colorfulStore,
-  disabled: disabledStore,
-  selectedValue: selectedValueStore,
-  vertical: verticalStore
+    disabled: disabledStore,
+    selectedValue: selectedValueStore,
+    vertical: verticalStore
 });
 </script>
 
 <div
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   bind:this={tabListRef}
-  class="sterling-tab-list"
-  class:colorful
+  class={`sterling-tab-list ${variant}`}
   class:disabled
   class:vertical
   role="tablist"
+  tabindex="-1"
   on:blur
   on:click
   on:click={onClick}
@@ -212,42 +224,5 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:paste
   {...$$restProps}
 >
-  <slot {disabled} {selectedValue} {vertical} />
+  <slot {disabled} {selectedValue} {variant} {vertical} />
 </div>
-
-<style>
-  .sterling-tab-list {
-    box-sizing: border-box;
-    display: grid;
-    margin: 0;
-    padding: calc(2 * var(--stsv-common__outline-width));
-  }
-
-  .sterling-tab-list:not(.vertical) {
-    column-gap: 0.5em;
-    grid-auto-flow: column;
-    grid-template-columns: repeat(auto-fill, auto);
-    grid-template-rows: 1fr;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  .sterling-tab-list.vertical {
-    grid-auto-flow: row;
-    grid-template-rows: auto;
-    grid-template-columns: 1fr;
-    overflow-x: hidden;
-    overflow-y: auto;
-    row-gap: 0.5em;
-  }
-
-  .sterling-tab-list:hover {
-    color: var(--stsv-common__color--hover);
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-tab-list {
-      transition: none;
-    }
-  }
-</style>

package/TabList.svelte.d.ts

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

package/TabList.types.d.ts

@@ -1,7 +1,12 @@
 import type { Readable, Writable } from 'svelte/store';
+/**
+ * The context for a TabList and its tabs.
+ */
 export type TabListContext = {
-    colorful: Readable<boolean>;
+    /** When true, the tablist and its tabs are disabled. */
     disabled: Readable<boolean>;
+    /** The value of the currently selected tab. */
     selectedValue: Writable<string | undefined>;
+    /** When true, the tabs are displayed vertically. */
     vertical: Readable<boolean>;
 };

package/TextArea.svelte

@@ -1,49 +1,58 @@
-<script>import { onMount } from "svelte";
+<script>import { onMount } from 'svelte';
+// ----- Props ----- //
 export let disabled = false;
-export let value = "";
+export let value = '';
+/** When true, the text area will resize itself vertically to fit text.*/
 export let autoHeight = false;
-export let colorful = false;
-export let resize = "none";
+/** Sets the resize handle direction. */
+export let resize = 'none';
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let textAreaRef;
 const autoSetHeight = () => {
-  if (autoHeight && textAreaRef) {
-    textAreaRef.style.height = "auto";
-    textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
-  }
+    if (autoHeight && textAreaRef) {
+        // the style must be directly set to avoid re-rendering looping latency
+        // setting to auto for a moment allows the textarea to shrink
+        textAreaRef.style.height = 'auto';
+        textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
+    }
 };
+// ----- Event Handlers ----- //
 const onInput = () => {
-  autoSetHeight();
+    autoSetHeight();
 };
-$:
-  autoHeight, autoSetHeight();
+$: autoHeight, autoSetHeight();
 onMount(() => {
-  autoSetHeight();
+    autoSetHeight();
 });
+// ----- Methods ----- //
 export const blur = () => {
-  textAreaRef?.blur();
+    textAreaRef?.blur();
 };
 export const click = () => {
-  textAreaRef?.click();
+    textAreaRef?.click();
 };
 export const focus = (options) => {
-  textAreaRef?.focus();
+    textAreaRef?.focus();
 };
 export const select = () => {
-  textAreaRef?.select();
+    textAreaRef?.select();
 };
 export const setSelectionRange = (start, end, direction) => {
-  textAreaRef?.setSelectionRange(start, end, direction);
+    textAreaRef?.setSelectionRange(start, end, direction);
 };
 export const setRangeText = (replacement, start, end, selectionMode) => {
-  if (start && end) {
-    textAreaRef?.setRangeText(replacement, start, end, selectionMode);
-  } else {
-    textAreaRef?.setRangeText(replacement);
-  }
+    if (start && end) {
+        textAreaRef?.setRangeText(replacement, start, end, selectionMode);
+    }
+    else {
+        textAreaRef?.setRangeText(replacement);
+    }
 };
 </script>
 
-<div class="sterling-text-area" class:colorful class:disabled>
+<div class={`sterling-text-area ${variant}`} class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
@@ -87,109 +96,3 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     {...$$restProps}
   />
 </div>
-
-<style>
-  .sterling-text-area {
-    position: relative;
-    height: 100%;
-    width: 100%;
-  }
-
-  textarea {
-    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);
-    box-sizing: border-box;
-    color: var(--stsv-input__color);
-    display: block;
-    font: inherit;
-    line-height: inherit;
-    height: 100%;
-    outline: none;
-    padding: 0.5em;
-    margin: 0;
-    min-height: 3em;
-    overflow: hidden;
-    resize: var(--TextArea__resize, none);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    width: 100%;
-  }
-
-  textarea:hover {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  textarea: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-text-area.colorful textarea {
-    background-color: var(--stsv-input--colorful__background-color);
-    border-color: var(--stsv-input--colorful__border-color);
-    color: var(--stsv-input--colorful__color);
-  }
-
-  .sterling-text-area.colorful textarea:hover {
-    background-color: var(--stsv-input--colorful__background-color--hover);
-    border-color: var(--stsv-input--colorful__border-color--hover);
-    color: var(--stsv-input--colorful__color--hover);
-  }
-
-  .sterling-text-area.colorful textarea:focus {
-    background-color: var(--stsv-input--colorful__background-color--focus);
-    border-color: var(--stsv-input--colorful__border-color--focus);
-    color: var(--stsv-input--colorful__color--focus);
-  }
-
-  .sterling-text-area:disabled {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-text-area::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))
-    );
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  .sterling-text-area.disabled::after {
-    opacity: 1;
-  }
-
-  textarea::placeholder {
-    color: var(--stsv-common__color--subtle);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  @media (prefers-reduced-motion) {
-    textarea,
-    .sterling-text-area,
-    .sterling-text-area::after {
-      transition: none;
-    }
-  }
-</style>

package/TextArea.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         value?: string | undefined;
         autoHeight?: boolean | undefined;
-        colorful?: boolean | undefined;
         resize?: "none" | "vertical" | "horizontal" | "both" | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;