@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/containers/ListItem.svelte

@@ -1,48 +0,0 @@
-<script>export let disabled = false;
-export let selected = false;
-export let index = -1;
-export let item = void 0;
-</script>
-
-<div
-  aria-selected={disabled ? undefined : selected}
-  class="sterling-list-item"
-  class:disabled
-  class:selected
->
-  <slot {disabled} {selected} {index} {item} />
-</div>
-
-<style>
-  .sterling-list-item {
-    background-color: transparent;
-    box-sizing: border-box;
-    color: var(--Input__color);
-    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:hover {
-    background-color: var(--Button__background-color--hover);
-    color: var(--Button__color--hover);
-  }
-
-  .sterling-list-item.selected {
-    background-color: var(--Input__background-color--selected);
-    color: var(--Input__color--selected);
-  }
-
-  .sterling-list-item.disabled {
-    color: var(--Input__color--disabled);
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-list-item {
-      transition: none;
-    }
-  }
-</style>

package/containers/ListItem.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T> {
-    props(): {
-        disabled?: boolean | undefined;
-        selected?: boolean | undefined;
-        index?: number | undefined;
-        item?: T | undefined;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
-            disabled: boolean;
-            selected: boolean;
-            index: number;
-            item: T | undefined;
-        };
-    };
-}
-export type ListItemProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type ListItemEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type ListItemSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class ListItem<T> extends SvelteComponentTyped<ListItemProps<T>, ListItemEvents<T>, ListItemSlots<T>> {
-}
-export {};

package/containers/Menus.types.d.ts

@@ -1,22 +0,0 @@
-export type MenuItemRegistration = {
-    id: string;
-    open: () => void;
-    close: () => void;
-    focus: () => void;
-};
-export type MenuBarContext = {
-    openPreviousMenu?: (fromMenuItemId: string) => void;
-    openNextMenu?: (fromMenuItemId: string) => void;
-};
-export type MenuItemContext = {
-    rootMenuItemId?: string;
-    depth?: number;
-    register?: (menuItem: MenuItemRegistration) => void;
-    unregister?: (menuItem: MenuItemRegistration) => void;
-    focusPrevious?: (fromMenuItemId: string) => void;
-    focusNext?: (fromMenuItemId: string) => void;
-    closeMenu?: (recursive?: boolean) => void;
-    onOpen?: (menuItemId: string) => void;
-    onClose?: (menuItemId: string) => void;
-    onSelect?: (menuItemId: string) => void;
-};

package/containers/Tab.svelte

@@ -1,327 +0,0 @@
-<script>import { getContext } from "svelte";
-import { tabListContextKey } from "./Tabs.constants";
-export let data = void 0;
-export let disabled = false;
-export let tabId = void 0;
-export let text = void 0;
-export let selected = false;
-let tabRef;
-const {
-  disabled: tabListDisabled,
-  selectedTabId,
-  selectionFollowsFocus,
-  vertical
-} = getContext(tabListContextKey);
-$:
-  _tabId = tabId || data?.tabId;
-$:
-  _text = text || data?.text || _tabId;
-$:
-  _disabled = $tabListDisabled || disabled || data?.disabled === true;
-$: {
-  if (!_tabId) {
-    throw new Error("Both tabId and data.tabId are missing");
-  }
-}
-$: {
-  selected = $selectedTabId === _tabId;
-}
-$: {
-  if (selected) {
-    selectedTabId.set(_tabId);
-    tabRef?.focus();
-  }
-}
-const getFirstActiveTab = () => {
-  let foundTab = tabRef.parentElement?.firstElementChild;
-  while (foundTab) {
-    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
-      break;
-    }
-    foundTab = foundTab.nextElementSibling;
-  }
-  return foundTab;
-};
-const getLastActiveTab = () => {
-  let foundTab = tabRef.parentElement?.lastElementChild;
-  while (foundTab) {
-    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
-      break;
-    }
-    foundTab = foundTab.previousElementSibling;
-  }
-  return foundTab;
-};
-const getPreviousActiveTab = () => {
-  let foundTab = tabRef?.previousElementSibling;
-  while (foundTab) {
-    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
-      break;
-    }
-    foundTab = foundTab.previousElementSibling;
-  }
-  return foundTab;
-};
-const getNextActiveTab = () => {
-  let foundTab = tabRef?.nextElementSibling;
-  while (foundTab) {
-    if (!foundTab.disabled && foundTab.getAttribute("data-tab-id")) {
-      break;
-    }
-    foundTab = foundTab.nextElementSibling;
-  }
-  return foundTab;
-};
-const focusFirstTab = () => {
-  if (!_disabled) {
-    let foundTab = getFirstActiveTab();
-    if (foundTab) {
-      foundTab.focus();
-      return true;
-    }
-  }
-  return false;
-};
-const focusLastTab = () => {
-  if (!_disabled) {
-    let foundTab = getLastActiveTab();
-    if (foundTab) {
-      foundTab.focus();
-      return true;
-    }
-  }
-  return false;
-};
-const focusPreviousTab = () => {
-  if (!_disabled) {
-    let foundTab = getPreviousActiveTab();
-    if (foundTab) {
-      foundTab.focus();
-      return true;
-    }
-  }
-  return false;
-};
-const focusNextTab = () => {
-  if (!_disabled) {
-    let foundTab = getNextActiveTab();
-    if (foundTab) {
-      foundTab.focus();
-      return true;
-    }
-  }
-  return false;
-};
-const onClick = (event) => {
-  if (!_disabled) {
-    selectedTabId.set(_tabId);
-  }
-};
-const onFocus = (event) => {
-  if (!_disabled && $selectionFollowsFocus) {
-    selectedTabId.set(_tabId);
-  }
-};
-const onKeydown = (event) => {
-  if (!_disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    switch (event.key) {
-      case "Home":
-        if (focusFirstTab()) {
-          event.preventDefault();
-          return false;
-        }
-        break;
-      case "End":
-        if (focusLastTab()) {
-          event.preventDefault();
-          return false;
-        }
-        break;
-      case "ArrowLeft":
-        if (!$vertical && focusPreviousTab()) {
-          event.preventDefault();
-          return false;
-        }
-        break;
-      case "ArrowRight":
-        if (!$vertical && focusNextTab()) {
-          event.preventDefault();
-          return false;
-        }
-        break;
-      case "ArrowUp":
-        if ($vertical && focusPreviousTab()) {
-          event.preventDefault();
-          return false;
-        }
-        break;
-      case "ArrowDown":
-        if ($vertical && focusNextTab()) {
-          event.preventDefault();
-          return false;
-        }
-        break;
-      default:
-        break;
-    }
-  }
-};
-</script>
-
-<button
-  bind:this={tabRef}
-  class="sterling-tab"
-  disabled={_disabled}
-  class:selected
-  class:vertical={$vertical}
-  data-tab-id={_tabId}
-  role="tab"
-  tabindex={selected ? 0 : -1}
-  type="button"
-  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
-  on:click={onClick}
-  on:focus={onFocus}
-  on:keydown={onKeydown}
->
-  <div class="content">
-    <slot {data} disabled={_disabled} {selected} tabId={_tabId} text={_text}>
-      <div class="text">
-        {_text || _tabId}
-      </div>
-    </slot>
-  </div>
-  <div class="indicator" />
-</button>
-
-<style>
-  .sterling-tab {
-    align-content: center;
-    align-items: center;
-    background-color: var(--Common__background-color);
-    border-color: transparent;
-    border-radius: var(--Button__border-radius);
-    border-style: var(--Common__border-style);
-    border-width: 0;
-    box-sizing: border-box;
-    color: var(--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(--Common__background-color--hover);
-    color: var(--Common__color--hover);
-  }
-
-  .sterling-tab:active {
-    background-color: var(--Common__background-color--active);
-    color: var(--Common__color--active);
-  }
-
-  .sterling-tab:focus-visible {
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
-  }
-
-  .sterling-tab:disabled {
-    color: var(--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(--Display__color--faint);
-  }
-
-  .sterling-tab:active .indicator {
-    background-color: var(--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(--Input__color);
-  }
-
-  .sterling-tab.selected:disabled .indicator {
-    background-color: var(--Input__color--disabled);
-  }
-</style>

package/containers/TabList.svelte

@@ -1,126 +0,0 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import Tab from "./Tab.svelte";
-import { writable } from "svelte/store";
-import { tabListContextKey } from "./Tabs.constants";
-export let disabled = false;
-export let tabs = [];
-export let vertical = false;
-export let selectedTabId = void 0;
-export let selectionFollowsFocus = false;
-export let selectedTab = void 0;
-const selectedTabIdStore = writable(selectedTabId);
-const selectionFollowsFocusStore = writable(selectionFollowsFocus);
-const verticalStore = writable(vertical);
-const disabledStore = writable(disabled);
-setContext(tabListContextKey, {
-  disabled: disabledStore,
-  selectedTabId: selectedTabIdStore,
-  selectionFollowsFocus: selectionFollowsFocusStore,
-  vertical: verticalStore
-});
-const dispatch = createEventDispatcher();
-const raiseSelected = (tabId, tab) => {
-  dispatch("select", { tabId, tab });
-};
-$:
-  disabledStore.set(disabled);
-$:
-  selectedTabIdStore.set(selectedTabId);
-$: {
-  selectedTabId = $selectedTabIdStore;
-  selectedTab = tabs.find((tab) => tab.tabId === selectedTabId);
-  raiseSelected(selectedTabId, selectedTab);
-}
-$:
-  selectionFollowsFocusStore.set(selectionFollowsFocus);
-$:
-  verticalStore.set(vertical);
-</script>
-
-<!--
-  @component
-  A list of items where a single item can be selected.
-    -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-  class="sterling-tab-list"
-  role="tablist"
-  class:vertical
-  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}
->
-  {#each tabs as tab (tab.tabId)}
-    <Tab data={tab}>
-      <svelte:fragment let:data let:disabled let:selected let:tabId let:text>
-        <slot name="tabContent" {data} {disabled} {selected} {tabId} {text}>
-          <div class="text">
-            {text}
-          </div>
-        </slot>
-      </svelte:fragment>
-    </Tab>
-  {/each}
-  <slot />
-</div>
-
-<style>
-  .sterling-tab-list {
-    box-sizing: border-box;
-    display: grid;
-    margin: 0;
-    padding: calc(2 * var(--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(--Common__color--hover);
-  }
-
-  .sterling-tab-list.vertical .text {
-    padding-top: 0.25em;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-tab-list {
-      transition: none;
-    }
-  }
-</style>

package/containers/Tabs.types.d.ts

@@ -1,12 +0,0 @@
-import type { Readable, Writable } from 'svelte/store';
-export type TabData<T> = T & {
-    tabId: string;
-    text?: string;
-    disabled?: boolean;
-};
-export type TabListContext<T> = {
-    disabled: Readable<boolean>;
-    selectedTabId: Writable<string | undefined>;
-    selectionFollowsFocus: Readable<boolean>;
-    vertical: Readable<boolean>;
-};

package/containers/Tree.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const treeContextKey = "sterlingTree";
-export declare const treeNodeContextKey = "sterlingTreeNode";

package/containers/Tree.constants.js

@@ -1,2 +0,0 @@
-export const treeContextKey = 'sterlingTree';
-export const treeNodeContextKey = 'sterlingTreeNode';