@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/Tab.svelte

@@ -0,0 +1,181 @@
+<script>import { getContext } from "svelte";
+import { tabListContextKey } from "./TabList.constants";
+export let disabled = false;
+export let selected = false;
+export let text = void 0;
+export let value;
+let tabRef;
+const {
+  disabled: tabListDisabled,
+  selectedValue,
+  usingKeyboard,
+  vertical
+} = getContext(tabListContextKey);
+$:
+  _disabled = $tabListDisabled || disabled;
+$: {
+  selected = $selectedValue === value;
+}
+$: {
+  if (selected) {
+    selectedValue.set(value);
+  }
+}
+</script>
+
+<button
+  bind:this={tabRef}
+  aria-selected={selected}
+  class="sterling-tab"
+  disabled={_disabled}
+  class:selected
+  class:using-keyboard={$usingKeyboard}
+  class:vertical={$vertical}
+  data-value={value}
+  role="tab"
+  type="button"
+  tabIndex={selected ? 0 : -1}
+  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
+>
+  <div class="content">
+    <slot disabled={_disabled} {selected} {value} {text}>
+      <div class="text">
+        {text || value}
+      </div>
+    </slot>
+  </div>
+  <div class="indicator" />
+</button>
+
+<style>
+  .sterling-tab {
+    align-content: center;
+    align-items: center;
+    background-color: var(--stsv-Common__background-color);
+    border-color: transparent;
+    border-radius: var(--stsv-Button__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: 0;
+    box-sizing: border-box;
+    color: var(--stsv-Common__color);
+    cursor: pointer;
+    display: grid;
+    font: inherit;
+    overflow: hidden;
+    padding: 0.5em 1em 0.25em 1em;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+  }
+
+  .sterling-tab:not(.vertical) {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1em;
+    justify-content: center;
+    justify-items: center;
+    row-gap: 0.15em;
+  }
+
+  .sterling-tab.vertical {
+    grid-template-columns: auto 1em;
+    grid-template-rows: 1fr;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+    justify-items: flex-end;
+    column-gap: 0.15em;
+  }
+
+  .sterling-tab:hover {
+    background-color: var(--stsv-Common__background-color--hover);
+    color: var(--stsv-Common__color--hover);
+  }
+
+  .sterling-tab:active {
+    background-color: var(--stsv-Common__background-color--active);
+    color: var(--stsv-Common__color--active);
+  }
+
+  .sterling-tab.using-keyboard:focus-visible {
+    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-tab:disabled {
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  .content {
+    padding: 0 0.2em;
+  }
+
+  .sterling-tab.vertical .content .text {
+    padding-top: 0.25em;
+  }
+
+  .indicator {
+    background-color: transparent;
+    border-radius: 10000px;
+    transition: background-color 250ms;
+  }
+
+  .sterling-tab:not(.vertical) .indicator {
+    justify-self: stretch;
+    height: 0.4em;
+  }
+
+  .sterling-tab.vertical .indicator {
+    align-self: stretch;
+    width: 0.4em;
+  }
+
+  .sterling-tab:hover .indicator {
+    background-color: var(--stsv-Display__color--faint);
+  }
+
+  .sterling-tab:active .indicator {
+    background-color: var(--stsv-Button__border-color--hover);
+  }
+
+  .sterling-tab:disabled .indicator,
+  .sterling-tab:disabled:hover .indicator,
+  .sterling-tab:disabled:active .indicator {
+    background-color: transparent;
+  }
+
+  .sterling-tab.selected .indicator {
+    background-color: var(--stsv-Input__color);
+  }
+
+  .sterling-tab.selected:disabled .indicator {
+    background-color: var(--stsv-Common__color--disabled);
+  }
+</style>

package/{containers/Tab.svelte.d.ts → Tab.svelte.d.ts}

@@ -1,14 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TabData } from './Tabs.types';
-declare class __sveltets_Render<T> {
-    props(): {
-        data?: TabData<T> | undefined;
+declare const __propDef: {
+    props: {
         disabled?: boolean | undefined;
-        tabId?: string | undefined;
-        text?: string | undefined;
         selected?: boolean | undefined;
+        text?: string | undefined;
+        value: string;
     };
-    events(): {
+    events: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
@@ -37,19 +35,18 @@ declare class __sveltets_Render<T> {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
+    slots: {
         default: {
-            data: TabData<T> | undefined;
             disabled: boolean;
             selected: boolean;
-            tabId: string | undefined;
+            value: string;
             text: string | undefined;
         };
     };
-}
-export type TabProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TabEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TabSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class Tab<T> extends SvelteComponentTyped<TabProps<T>, TabEvents<T>, TabSlots<T>> {
+};
+export type TabProps = typeof __propDef.props;
+export type TabEvents = typeof __propDef.events;
+export type TabSlots = typeof __propDef.slots;
+export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
 }
 export {};

package/TabList.svelte

@@ -0,0 +1,247 @@
+<script>import { createKeyborg } from "keyborg";
+import { createEventDispatcher, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { tabListContextKey } from "./TabList.constants";
+export let disabled = false;
+export let vertical = false;
+export let selectedValue = void 0;
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+let tabListRef;
+let lastSelectedTabRef;
+const disabledStore = writable(disabled);
+const selectedValueStore = writable(selectedValue);
+const usingKeyboardStore = writable(usingKeyboard);
+const verticalStore = writable(vertical);
+$:
+  disabledStore.set(disabled);
+$:
+  selectedValueStore.set(selectedValue);
+$: {
+  selectedValue = $selectedValueStore;
+}
+$:
+  usingKeyboardStore.set(usingKeyboard);
+$:
+  verticalStore.set(vertical);
+const dispatch = createEventDispatcher();
+const raiseSelect = (value) => {
+  dispatch("select", { value });
+};
+$: {
+  raiseSelect(selectedValue);
+}
+const isElementTab = (candidate) => {
+  return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && 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]");
+  }
+};
+const selectTab = (value, element) => {
+  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;
+};
+export const selectPreviousTab = () => {
+  let selectedItem = getSelectedTabElement();
+  let candidate = selectedItem?.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 selectedItem = getSelectedTabElement();
+  let candidate = selectedItem?.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;
+};
+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("[role=tab]");
+      candidateValue = candidate?.getAttribute("data-value");
+    }
+    if (candidateValue && candidate) {
+      selectTab(candidateValue, candidate);
+    }
+  }
+};
+const onKeydown = (event) => {
+  console.log("tabList 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();
+        }
+        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;
+    }
+  }
+};
+setContext(tabListContextKey, {
+  disabled: disabledStore,
+  selectedValue: selectedValueStore,
+  usingKeyboard: usingKeyboardStore,
+  vertical: verticalStore
+});
+</script>
+
+<div
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  bind:this={tabListRef}
+  class="sterling-tab-list"
+  role="tablist"
+  class:vertical
+  class:disabled
+  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 {disabled} {selectedValue} {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: scroll;
+    overflow-y: hidden;
+  }
+
+  .sterling-tab-list.vertical {
+    grid-auto-flow: row;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    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/{containers/TabList.svelte.d.ts → TabList.svelte.d.ts}

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TabData } from './Tabs.types';
-declare class __sveltets_Render<T> {
-    props(): {
+declare const __propDef: {
+    props: {
         [x: string]: any;
         disabled?: boolean | undefined;
-        tabs?: TabData<T>[] | undefined;
         vertical?: boolean | undefined;
-        selectedTabId?: string | undefined;
-        selectionFollowsFocus?: boolean | undefined;
-        selectedTab?: TabData<T> | undefined;
+        selectedValue?: string | undefined;
+        selectFirstTab?: (() => boolean) | undefined;
+        selectPreviousTab?: (() => boolean) | undefined;
+        selectNextTab?: (() => boolean) | undefined;
+        selectLastTab?: (() => boolean) | undefined;
     };
-    events(): {
+    events: {
         blur: FocusEvent;
         click: MouseEvent;
         copy: ClipboardEvent;
@@ -36,21 +36,21 @@ declare class __sveltets_Render<T> {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
-        tabContent: {
-            data: any;
+    slots: {
+        default: {
             disabled: boolean;
-            selected: any;
-            tabId: any;
-            text: any;
+            selectedValue: string | undefined;
+            vertical: boolean;
         };
-        default: {};
     };
-}
-export type TabListProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TabListEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TabListSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-/** A list of items where a single item can be selected. */
-export default class TabList<T> extends SvelteComponentTyped<TabListProps<T>, TabListEvents<T>, TabListSlots<T>> {
+};
+export type TabListProps = typeof __propDef.props;
+export type TabListEvents = typeof __propDef.events;
+export type TabListSlots = typeof __propDef.slots;
+export default class TabList extends SvelteComponentTyped<TabListProps, TabListEvents, TabListSlots> {
+    get selectFirstTab(): () => boolean;
+    get selectPreviousTab(): () => boolean;
+    get selectNextTab(): () => boolean;
+    get selectLastTab(): () => boolean;
 }
 export {};

package/TabList.types.d.ts

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

package/TextArea.svelte

@@ -0,0 +1,113 @@
+<script>export let autoHeight = false;
+export let resize = "none";
+export let value;
+let textAreaRef;
+const autoSetHeight = () => {
+  if (autoHeight && textAreaRef) {
+    textAreaRef.style.height = "auto";
+    textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
+  }
+};
+const onInput = () => {
+  autoSetHeight();
+};
+$:
+  autoHeight, autoSetHeight();
+</script>
+
+<textarea
+  bind:this={textAreaRef}
+  class="sterling-text-area"
+  rows="1"
+  style={`--TextArea__resize: ${resize};`}
+  bind:value
+  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
+  on:input={onInput}
+  {...$$restProps}
+/>
+
+<style>
+  .sterling-text-area {
+    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);
+    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%;
+  }
+
+  .sterling-text-area:hover {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
+  }
+
+  .sterling-text-area: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: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-text-area::placeholder {
+    color: var(--stsv-Display__color--faint);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-text-area:disabled::placeholder {
+    color: var(--stsv-Display__color--disabled);
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-text-area {
+      transition: none;
+    }
+  }
+</style>

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

@@ -3,10 +3,9 @@ import type { TextAreaResize } from './TextArea.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value: string;
-        resize?: TextAreaResize | undefined;
-        disabled?: boolean | undefined;
         autoHeight?: boolean | undefined;
+        resize?: TextAreaResize | undefined;
+        value: string;
     };
     events: {
         blur: FocusEvent;
@@ -38,9 +37,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
-    };
+    slots: {};
 };
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;

package/TextArea.types.js

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