@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/theme/darkTheme.js

@@ -1,92 +1,91 @@
 import { neutrals } from './colors';
 export const darkTheme = {
     // ----- Common ---- //
-    '--Common__background-color': neutrals.neutral15,
-    '--Common__border-color': neutrals.neutral92,
-    '--Common__border-radius': '0',
-    '--Common__border-style': 'solid',
-    '--Common__border-width': '2px',
-    '--Common__color': neutrals.neutral100,
+    '--stsv-Common__background-color': neutrals.neutral15,
+    '--stsv-Common__border-color': neutrals.neutral92,
+    '--stsv-Common__border-radius': '0',
+    '--stsv-Common__border-style': 'solid',
+    '--stsv-Common__border-width': '2px',
+    '--stsv-Common__color': neutrals.neutral100,
     // hover
-    '--Common__background-color--hover': neutrals.neutral15,
-    '--Common__border-color--hover': neutrals.neutral96,
-    '--Common__color--hover': neutrals.neutral100,
+    '--stsv-Common__background-color--hover': neutrals.neutral15,
+    '--stsv-Common__border-color--hover': neutrals.neutral96,
+    '--stsv-Common__color--hover': neutrals.neutral100,
     // focus
-    '--Common__background-color--focus': neutrals.neutral45,
-    '--Common__border-color--focus': neutrals.neutral100,
-    '--Common__color--focus': neutrals.neutral100,
+    '--stsv-Common__background-color--focus': neutrals.neutral45,
+    '--stsv-Common__border-color--focus': neutrals.neutral100,
+    '--stsv-Common__color--focus': neutrals.neutral100,
     // outline
-    '--Common__outline-color': neutrals.neutral100,
-    '--Common__outline-offset': '0',
-    '--Common__outline-style': 'solid',
-    '--Common__outline-width': '2px',
+    '--stsv-Common__outline-color': neutrals.neutral100,
+    '--stsv-Common__outline-offset': '0',
+    '--stsv-Common__outline-style': 'solid',
+    '--stsv-Common__outline-width': '2px',
     // disabled
-    '--Common__background-color--disabled': neutrals.neutral45,
-    '--Common__border-color--disabled': neutrals.neutral92,
-    '--Common__color--disabled': neutrals.neutral92,
+    '--stsv-Common__background-color--disabled': neutrals.neutral45,
+    '--stsv-Common__border-color--disabled': neutrals.neutral92,
+    '--stsv-Common__color--disabled': neutrals.neutral60,
     // ----- Layer ---- //
-    '--Layer__background-color--1': neutrals.neutral20,
-    '--Layer__color--1': neutrals.neutral100,
-    '--Layer__background-color--2': neutrals.neutral10,
-    '--Layer__color--2': neutrals.neutral100,
-    '--Layer__background-color--3': neutrals.neutral45,
-    '--Layer__color--3': neutrals.neutral100,
+    '--stsv-Layer__background-color--1': neutrals.neutral20,
+    '--stsv-Layer__color--1': neutrals.neutral100,
+    '--stsv-Layer__background-color--2': neutrals.neutral10,
+    '--stsv-Layer__color--2': neutrals.neutral100,
+    '--stsv-Layer__background-color--3': neutrals.neutral45,
+    '--stsv-Layer__color--3': neutrals.neutral100,
     // ----- Button ----- //
-    '--Button__background-color': neutrals.neutral45,
-    '--Button__border-color': neutrals.neutral92,
-    '--Button__border-radius': '8px',
-    '--Button__border-style': 'solid',
-    '--Button__border-width': '2px',
-    '--Button__color': neutrals.neutral100,
+    '--stsv-Button__background-color': neutrals.neutral30,
+    '--stsv-Button__border-color': neutrals.neutral92,
+    '--stsv-Button__border-radius': '8px',
+    '--stsv-Button__border-style': 'solid',
+    '--stsv-Button__border-width': '2px',
+    '--stsv-Button__color': neutrals.neutral100,
     // hover
-    '--Button__background-color--hover': neutrals.neutral45,
-    '--Button__border-color--hover': neutrals.neutral96,
-    '--Button__color--hover': neutrals.neutral100,
+    '--stsv-Button__background-color--hover': neutrals.neutral45,
+    '--stsv-Button__border-color--hover': neutrals.neutral96,
+    '--stsv-Button__color--hover': neutrals.neutral100,
     // active
-    '--Button__background-color--active': neutrals.neutral60,
-    '--Button__border-color--active': neutrals.neutral98,
-    '--Button__color--active': neutrals.neutral98,
+    '--stsv-Button__background-color--active': neutrals.neutral60,
+    '--stsv-Button__border-color--active': neutrals.neutral98,
+    '--stsv-Button__color--active': neutrals.neutral98,
     // focus
-    '--Button__background-color--focus': neutrals.neutral45,
-    '--Button__border-color--focus': neutrals.neutral100,
-    '--Button__color--focus': neutrals.neutral100,
-    // disabled
-    '--Button__background-color--disabled': neutrals.neutral75,
-    '--Button__border-color--disabled': neutrals.neutral92,
-    '--Button__color--disabled': neutrals.neutral92,
+    '--stsv-Button__background-color--focus': neutrals.neutral45,
+    '--stsv-Button__border-color--focus': neutrals.neutral100,
+    '--stsv-Button__color--focus': neutrals.neutral100,
     // ----- Input ----- //
-    '--Input__background-color': neutrals.neutral30,
-    '--Input__border-color': neutrals.neutral92,
-    '--Input__border-radius': '3px',
-    '--Input__border-style': 'solid',
-    '--Input__border-width': '2px',
-    '--Input__color': neutrals.neutral100,
+    '--stsv-Input__background-color': neutrals.neutral30,
+    '--stsv-Input__border-color': neutrals.neutral92,
+    '--stsv-Input__border-radius': '3px',
+    '--stsv-Input__border-style': 'solid',
+    '--stsv-Input__border-width': '2px',
+    '--stsv-Input__color': neutrals.neutral100,
     // hover
-    '--Input__background-color--hover': neutrals.neutral15,
-    '--Input__border-color--hover': neutrals.neutral96,
-    '--Input__color--hover': neutrals.neutral100,
+    '--stsv-Input__background-color--hover': neutrals.neutral15,
+    '--stsv-Input__border-color--hover': neutrals.neutral96,
+    '--stsv-Input__color--hover': neutrals.neutral100,
     // focus
-    '--Input__background-color--focus': neutrals.neutral15,
-    '--Input__border-color--focus': neutrals.neutral100,
-    '--Input__color--focus': neutrals.neutral100,
+    '--stsv-Input__background-color--focus': neutrals.neutral15,
+    '--stsv-Input__border-color--focus': neutrals.neutral100,
+    '--stsv-Input__color--focus': neutrals.neutral100,
     // selected
-    '--Input__background-color--selected': neutrals.neutral60,
-    '--Input__border-color--selected': neutrals.neutral98,
-    '--Input__color--selected': neutrals.neutral100,
-    // disabled
-    '--Input__background-color--disabled': neutrals.neutral45,
-    '--Input__border-color--disabled': neutrals.neutral85,
-    '--Input__color--disabled': neutrals.neutral85,
+    '--stsv-Input__background-color--selected': neutrals.neutral60,
+    '--stsv-Input__border-color--selected': neutrals.neutral98,
+    '--stsv-Input__color--selected': neutrals.neutral100,
     // ----- Display ----- //
-    '--Display__background-color': neutrals.neutral30,
-    '--Display__border-color': neutrals.neutral92,
-    '--Display__color': neutrals.neutral100,
-    '--Display__color--subtle': neutrals.neutral96,
-    '--Display__color--faint': neutrals.neutral45,
-    '--Display__color--disabled': neutrals.neutral45,
-    '--Display__color--info': '#025E73',
-    '--Display__color--progress': '#0099DD',
-    '--Display__color--success': '#03A64A',
-    '--Display__color--warning': '#F2A71B',
-    '--Display__color--error': '#A62B1F'
+    '--stsv-Display__background-color': neutrals.neutral20,
+    '--stsv-Display__border-color': neutrals.neutral92,
+    '--stsv-Display__color': neutrals.neutral80,
+    '--stsv-Display__color--subtle': neutrals.neutral96,
+    '--stsv-Display__color--faint': neutrals.neutral45,
+    '--stsv-Display__color--disabled': neutrals.neutral45,
+    '--stsv-Info__background-color': 'hsl(198, 100%, 10%)',
+    '--stsv-Info__border-color': 'hsl(198, 100%, 40%)',
+    '--stsv-Info__color': 'hsl(198, 80%, 50%)',
+    '--stsv-Success__background-color': 'hsl(146, 100%, 10%)',
+    '--stsv-Success__border-color': 'hsl(146, 100%, 30%)',
+    '--stsv-Success__color': 'hsl(146, 100%, 40%)',
+    '--stsv-Warning__background-color': 'hsl(39, 100%, 10%)',
+    '--stsv-Warning__border-color': 'hsl(39, 100%, 45%)',
+    '--stsv-Warning__color': 'hsl(39, 100%, 50%)',
+    '--stsv-Error__background-color': 'hsl(5, 100%, 10%)',
+    '--stsv-Error__border-color': 'hsl(5, 100%, 40%)',
+    '--stsv-Error__color': 'hsl(5, 100%, 50%)'
 };

package/theme/lightTheme.js

@@ -1,92 +1,91 @@
 import { neutrals } from './colors';
 export const lightTheme = {
-    // ----- Common ---- //
-    '--Common__background-color': neutrals.neutral100,
-    '--Common__border-color': neutrals.neutral60,
-    '--Common__border-radius': '0',
-    '--Common__border-style': 'solid',
-    '--Common__border-width': '2px',
-    '--Common__color': neutrals.neutral15,
+    // ----- Common (18) ---- //
+    '--stsv-Common__background-color': neutrals.neutral100,
+    '--stsv-Common__border-color': neutrals.neutral60,
+    '--stsv-Common__border-radius': '0',
+    '--stsv-Common__border-style': 'solid',
+    '--stsv-Common__border-width': '2px',
+    '--stsv-Common__color': neutrals.neutral15,
     // hover
-    '--Common__background-color--hover': neutrals.neutral100,
-    '--Common__border-color--hover': neutrals.neutral45,
-    '--Common__color--hover': neutrals.neutral15,
+    '--stsv-Common__background-color--hover': neutrals.neutral100,
+    '--stsv-Common__border-color--hover': neutrals.neutral45,
+    '--stsv-Common__color--hover': neutrals.neutral15,
     // focus
-    '--Common__background-color--focus': neutrals.neutral96,
-    '--Common__border-color--focus': neutrals.neutral0,
-    '--Common__color--focus': neutrals.neutral15,
+    '--stsv-Common__background-color--focus': neutrals.neutral96,
+    '--stsv-Common__border-color--focus': neutrals.neutral0,
+    '--stsv-Common__color--focus': neutrals.neutral15,
     // outline
-    '--Common__outline-color': neutrals.neutral15,
-    '--Common__outline-offset': '0',
-    '--Common__outline-style': 'solid',
-    '--Common__outline-width': '2px',
+    '--stsv-Common__outline-color': neutrals.neutral15,
+    '--stsv-Common__outline-offset': '0',
+    '--stsv-Common__outline-style': 'solid',
+    '--stsv-Common__outline-width': '2px',
     // disabled
-    '--Common__background-color--disabled': neutrals.neutral96,
-    '--Common__border-color--disabled': neutrals.neutral75,
-    '--Common__color--disabled': neutrals.neutral75,
+    '--stsv-Common__background-color--disabled': neutrals.neutral96,
+    '--stsv-Common__border-color--disabled': neutrals.neutral75,
+    '--stsv-Common__color--disabled': neutrals.neutral75,
     // ----- Layer ---- //
-    '--Layer__background-color--1': neutrals.neutral98,
-    '--Layer__color--1': neutrals.neutral15,
-    '--Layer__background-color--2': neutrals.neutral96,
-    '--Layer__color--2': neutrals.neutral15,
-    '--Layer__background-color--3': neutrals.neutral92,
-    '--Layer__color--3': neutrals.neutral15,
-    // ----- Button ----- //
-    '--Button__background-color': neutrals.neutral96,
-    '--Button__border-color': neutrals.neutral60,
-    '--Button__border-radius': '8px',
-    '--Button__border-style': 'solid',
-    '--Button__border-width': '2px',
-    '--Button__color': neutrals.neutral15,
+    '--stsv-Layer__background-color--1': neutrals.neutral98,
+    '--stsv-Layer__color--1': neutrals.neutral15,
+    '--stsv-Layer__background-color--2': neutrals.neutral96,
+    '--stsv-Layer__color--2': neutrals.neutral15,
+    '--stsv-Layer__background-color--3': neutrals.neutral92,
+    '--stsv-Layer__color--3': neutrals.neutral15,
+    // ----- Button (15) ----- //
+    '--stsv-Button__background-color': neutrals.neutral96,
+    '--stsv-Button__border-color': neutrals.neutral60,
+    '--stsv-Button__border-radius': '8px',
+    '--stsv-Button__border-style': 'solid',
+    '--stsv-Button__border-width': '2px',
+    '--stsv-Button__color': neutrals.neutral15,
     // hover
-    '--Button__background-color--hover': neutrals.neutral96,
-    '--Button__border-color--hover': neutrals.neutral45,
-    '--Button__color--hover': neutrals.neutral15,
+    '--stsv-Button__background-color--hover': neutrals.neutral96,
+    '--stsv-Button__border-color--hover': neutrals.neutral45,
+    '--stsv-Button__color--hover': neutrals.neutral15,
     // active
-    '--Button__background-color--active': neutrals.neutral92,
-    '--Button__border-color--active': neutrals.neutral30,
-    '--Button__color--active': neutrals.neutral30,
+    '--stsv-Button__background-color--active': neutrals.neutral92,
+    '--stsv-Button__border-color--active': neutrals.neutral30,
+    '--stsv-Button__color--active': neutrals.neutral30,
     // focus
-    '--Button__background-color--focus': neutrals.neutral96,
-    '--Button__border-color--focus': neutrals.neutral0,
-    '--Button__color--focus': neutrals.neutral15,
-    // disabled
-    '--Button__background-color--disabled': neutrals.neutral85,
-    '--Button__border-color--disabled': neutrals.neutral60,
-    '--Button__color--disabled': neutrals.neutral60,
-    // ----- Input ----- //
-    '--Input__background-color': neutrals.neutral98,
-    '--Input__border-color': neutrals.neutral60,
-    '--Input__border-radius': '3px',
-    '--Input__border-style': 'solid',
-    '--Input__border-width': '2px',
-    '--Input__color': neutrals.neutral15,
+    '--stsv-Button__background-color--focus': neutrals.neutral96,
+    '--stsv-Button__border-color--focus': neutrals.neutral0,
+    '--stsv-Button__color--focus': neutrals.neutral15,
+    // ----- Input (15) ----- //
+    '--stsv-Input__background-color': neutrals.neutral98,
+    '--stsv-Input__border-color': neutrals.neutral60,
+    '--stsv-Input__border-radius': '3px',
+    '--stsv-Input__border-style': 'solid',
+    '--stsv-Input__border-width': '2px',
+    '--stsv-Input__color': neutrals.neutral15,
     // hover
-    '--Input__background-color--hover': neutrals.neutral100,
-    '--Input__border-color--hover': neutrals.neutral45,
-    '--Input__color--hover': neutrals.neutral15,
+    '--stsv-Input__background-color--hover': neutrals.neutral100,
+    '--stsv-Input__border-color--hover': neutrals.neutral45,
+    '--stsv-Input__color--hover': neutrals.neutral15,
     // focus
-    '--Input__background-color--focus': neutrals.neutral100,
-    '--Input__border-color--focus': neutrals.neutral15,
-    '--Input__color--focus': neutrals.neutral15,
+    '--stsv-Input__background-color--focus': neutrals.neutral100,
+    '--stsv-Input__border-color--focus': neutrals.neutral15,
+    '--stsv-Input__color--focus': neutrals.neutral15,
     // selected
-    '--Input__background-color--selected': neutrals.neutral92,
-    '--Input__border-color--selected': neutrals.neutral30,
-    '--Input__color--selected': neutrals.neutral15,
-    // disabled
-    '--Input__background-color--disabled': neutrals.neutral96,
-    '--Input__border-color--disabled': neutrals.neutral75,
-    '--Input__color--disabled': neutrals.neutral75,
+    '--stsv-Input__background-color--selected': neutrals.neutral92,
+    '--stsv-Input__border-color--selected': neutrals.neutral30,
+    '--stsv-Input__color--selected': neutrals.neutral15,
     // ----- Display ----- //
-    '--Display__background-color': neutrals.neutral92,
-    '--Display__border-color': neutrals.neutral60,
-    '--Display__color': neutrals.neutral15,
-    '--Display__color--subtle': neutrals.neutral30,
-    '--Display__color--faint': neutrals.neutral85,
-    '--Display__color--disabled': neutrals.neutral85,
-    '--Display__color--info': '#025E73',
-    '--Display__color--progress': '#0099DD',
-    '--Display__color--success': '#03A64A',
-    '--Display__color--warning': '#F2A71B',
-    '--Display__color--error': '#A62B1F'
+    '--stsv-Display__background-color': neutrals.neutral92,
+    '--stsv-Display__border-color': neutrals.neutral30,
+    '--stsv-Display__color': neutrals.neutral15,
+    '--stsv-Display__color--subtle': neutrals.neutral45,
+    '--stsv-Display__color--faint': neutrals.neutral85,
+    '--stsv-Display__color--disabled': neutrals.neutral85,
+    '--stsv-Info__background-color': 'hsl(198, 100%, 90%)',
+    '--stsv-Info__border-color': 'hsl(198, 100%, 40%)',
+    '--stsv-Info__color': 'hsl(198, 80%, 33%)',
+    '--stsv-Success__background-color': 'hsl(146, 100%, 90%)',
+    '--stsv-Success__border-color': 'hsl(146, 100%, 30%)',
+    '--stsv-Success__color': 'hsl(146, 80%, 25%)',
+    '--stsv-Warning__background-color': 'hsl(39, 100%, 80%)',
+    '--stsv-Warning__border-color': 'hsl(39, 100%, 45%)',
+    '--stsv-Warning__color': 'hsl(39, 100%, 25%)',
+    '--stsv-Error__background-color': 'hsl(5, 100%, 90%)',
+    '--stsv-Error__border-color': 'hsl(5, 100%, 40%)',
+    '--stsv-Error__color': 'hsl(5, 80%, 40%)'
 };

package/containers/List.svelte

@@ -1,249 +0,0 @@
-<script>import { createEventDispatcher } from "svelte";
-import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
-import ListItem from "./ListItem.svelte";
-export let disabled = false;
-export let items = [];
-export let horizontal = false;
-export let selectedIndex = -1;
-export let selectedItem = void 0;
-export let composed = false;
-$: {
-  selectedItem = items[selectedIndex];
-}
-const inputId = uuid();
-let listRef;
-let itemRefs = {};
-const dispatch = createEventDispatcher();
-const raiseItemSelected = (index) => {
-  dispatch("itemSelected", { index, item: items[index] });
-};
-export const focusSelectedItem = () => {
-  listRef.focus();
-  const selectedRef = itemRefs[selectedIndex];
-  selectedRef?.focus();
-  selectedRef?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-};
-$:
-  canSelectPreviousItem = items.length > 0 && selectedIndex !== 0;
-$:
-  canSelectNextItem = items.length > 0 && selectedIndex !== items.length - 1;
-export const selectPreviousItem = () => {
-  if (canSelectPreviousItem) {
-    selectedIndex = Math.max(0, selectedIndex - 1);
-  }
-};
-export const selectNextItem = () => {
-  if (canSelectNextItem) {
-    selectedIndex = Math.min(items.length - 1, selectedIndex + 1);
-  }
-};
-export const selectItem = (item) => {
-  const index = items.indexOf(item);
-  if (index !== -1) {
-    selectedIndex = index;
-  }
-};
-$: {
-  raiseItemSelected(selectedIndex);
-}
-$: {
-  const selectedRef = itemRefs[selectedIndex];
-  selectedRef?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-}
-const onItemClick = (index) => {
-  if (!disabled) {
-    selectedIndex = index;
-  }
-};
-const onArrowSelectPrevious = (event) => {
-  event.preventDefault();
-  event.stopPropagation();
-  selectPreviousItem();
-};
-const onArrowSelectNext = (event) => {
-  event.preventDefault();
-  event.stopPropagation();
-  selectNextItem();
-};
-const onKeydown = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    switch (event.key) {
-      case "ArrowLeft":
-        if (horizontal) {
-          onArrowSelectPrevious(event);
-        }
-        break;
-      case "ArrowRight":
-        if (horizontal) {
-          onArrowSelectNext(event);
-        }
-        break;
-      case "ArrowUp":
-        if (!horizontal) {
-          onArrowSelectPrevious(event);
-        }
-        break;
-      case "ArrowDown":
-        if (!horizontal) {
-          onArrowSelectNext(event);
-        }
-        break;
-      default:
-        break;
-    }
-  }
-};
-</script>
-
-<!--
-@component
-A list of items where a single item can be selected.
-  -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div class="sterling-list" class:horizontal class:disabled class:composed tabindex={0}>
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <div
-    bind:this={listRef}
-    class="list"
-    class:disabled
-    class:horizontal
-    role="listbox"
-    tabindex={!disabled ? 0 : undefined}
-    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
-    on:keydown={onKeydown}
-    {...$$restProps}
-  >
-    {#each items as item, index (item)}
-      {@const selected = selectedIndex === index}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        bind:this={itemRefs[index]}
-        aria-selected={disabled ? undefined : selected}
-        class="list-item"
-        data-index={index + 1}
-        role="option"
-        on:click={() => onItemClick(index)}
-      >
-        <slot name="item" {disabled} {index} {item} {selected}>
-          <ListItem {disabled} {selected} {index} {item}>
-            <slot {disabled} {index} {item} {selected}>
-              {item}
-            </slot>
-          </ListItem>
-        </slot>
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .sterling-list {
-    background-color: var(--Common__background-color);
-    border-color: var(--Common__border-color);
-    border-radius: var(--Common__border-radius);
-    border-style: var(--Common__border-style);
-    border-width: var(--Common__border-width);
-    box-sizing: border-box;
-    color: var(--Common__color);
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    height: 100%;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-list.horizontal {
-    height: unset;
-    width: 100%;
-  }
-
-  .sterling-list:hover {
-    border-color: var(--Common__border-color--hover);
-    color: var(--Common__color--hover);
-  }
-
-  .sterling-list:focus-within {
-    border-color: var(--Common__border-color--focus);
-    color: var(--Common__color--focus);
-    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-list.disabled {
-    background-color: var(--Common__background-color--disabled);
-    border-color: var(---Common__border-color--disabled);
-    color: var(--Common__color--disabled);
-    cursor: not-allowed;
-  }
-
-  .sterling-list.composed,
-  .sterling-list:hover.composed,
-  .sterling-list:focus-visible.composed,
-  .sterling-list.disabled.composed {
-    background: none;
-    border: none;
-    outline: none;
-  }
-
-  .list {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    grid-row: 2 / span 1;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    outline: none;
-    position: relative;
-  }
-
-  .list.horizontal {
-    flex-direction: row;
-    overflow-x: scroll;
-    overflow-y: hidden;
-  }
-
-  .sterling-list > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0.7em;
-  }
-
-  .sterling-list > :global(label):empty {
-    margin: 0;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-list {
-      transition: none;
-    }
-  }
-</style>

package/containers/List.svelte.d.ts

@@ -1,68 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T> {
-    props(): {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        items?: T[] | undefined;
-        horizontal?: boolean | undefined;
-        selectedIndex?: number | undefined;
-        selectedItem?: T | undefined;
-        composed?: boolean | undefined;
-        focusSelectedItem?: (() => void) | undefined;
-        selectPreviousItem?: (() => void) | undefined;
-        selectNextItem?: (() => void) | undefined;
-        selectItem?: ((item: T) => void) | 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;
-        itemSelected: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        label: {};
-        item: {
-            disabled: boolean;
-            index: any;
-            item: T;
-            selected: any;
-        };
-        default: {
-            disabled: boolean;
-            index: any;
-            item: T;
-            selected: any;
-        };
-    };
-}
-export type ListProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type ListEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type ListSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-/** A list of items where a single item can be selected. */
-export default class List<T> extends SvelteComponentTyped<ListProps<T>, ListEvents<T>, ListSlots<T>> {
-    get focusSelectedItem(): () => void;
-    get selectPreviousItem(): () => void;
-    get selectNextItem(): () => void;
-    get selectItem(): (item: T) => void;
-}
-export {};