@geoffcox/sterling-svelte 0.0.31 → 1.0.1

package/Tooltip.svelte

@@ -1,57 +1,64 @@
-<script>import { onMount } from "svelte";
-import Callout from "./Callout.svelte";
+<script>import { onMount } from 'svelte';
+import Callout from './Callout.svelte';
+// ----- Props ----- //
+// Forwarded to Callout
 export let conditionalRender = true;
 export let crossAxisOffset = 0;
 export let mainAxisOffset = 0;
-export let disabled = false;
-export let hoverDelayMilliseconds = 1e3;
 export let open = false;
-export let placement = "bottom-start";
-export let portalHost = void 0;
+export let placement = 'bottom-start';
+export let portalHost = undefined;
+export let variant = '';
+/** When true, the tooltip is disabled and will not be shown. */
+export let disabled = false;
+/** The duration of mouse hover before showing the tooltip. */
+export let hoverDelayMilliseconds = 1000;
+// ----- State ----- //
 let originRef;
-$:
-  reference = $$slots.default ? originRef?.previousElementSibling : void 0;
+$: reference = $$slots.default ? originRef?.previousElementSibling : undefined;
+// ----- Show/Hide ----- //
 const show = () => {
-  if (!disabled) {
-    open = true;
-  }
+    if (!disabled) {
+        open = true;
+    }
 };
-const hide = () => open = false;
+const hide = () => (open = false);
 const delayShow = () => {
-  hoverDelayMilliseconds === 0 ? show() : setTimeout(() => {
-    show();
-  }, hoverDelayMilliseconds);
+    hoverDelayMilliseconds === 0
+        ? show()
+        : setTimeout(() => {
+            show();
+        }, hoverDelayMilliseconds);
 };
 $: {
-  if (disabled) {
-    hide();
-  }
+    if (disabled) {
+        hide();
+    }
 }
-let cleanupAutoShowUpdate = () => {
-};
+// ----- Event Listeners ----- //
+let cleanupAutoShowUpdate = () => { };
 const autoShowUpdate = () => {
-  cleanupAutoShowUpdate();
-  cleanupAutoShowUpdate = () => {
-  };
-  const element = reference;
-  open = false;
-  if (element) {
-    element.addEventListener("mouseenter", delayShow);
-    element.addEventListener("mouseleave", hide);
-    cleanupAutoShowUpdate = () => {
-      element.removeEventListener("mouseenter", delayShow);
-      element.removeEventListener("mouseleave", hide);
-    };
-  }
+    cleanupAutoShowUpdate();
+    cleanupAutoShowUpdate = () => { };
+    const element = reference;
+    open = false;
+    if (element) {
+        element.addEventListener('mouseenter', delayShow);
+        element.addEventListener('mouseleave', hide);
+        cleanupAutoShowUpdate = () => {
+            element.removeEventListener('mouseenter', delayShow);
+            element.removeEventListener('mouseleave', hide);
+        };
+    }
 };
-$:
-  reference, autoShowUpdate();
+$: reference, autoShowUpdate();
+// ----- EventHandlers ----- //
 onMount(() => {
-  autoShowUpdate();
+    autoShowUpdate();
 });
 </script>
 
-<slot {disabled} {hoverDelayMilliseconds} {open} />
+<slot {disabled} {hoverDelayMilliseconds} {open} {variant} />
 <div class="sterling-tooltip-origin" bind:this={originRef} />
 <Callout
   {conditionalRender}
@@ -61,6 +68,7 @@ onMount(() => {
   {placement}
   {portalHost}
   {reference}
+  {variant}
   on:blur
   on:click
   on:dblclick
@@ -94,14 +102,5 @@ onMount(() => {
   on:wheel
   {...$$restProps}
 >
-  <slot name="tip" />
+  <slot name="tip" {placement} {variant} />
 </Callout>
-
-<style>
-  .sterling-tooltip-origin {
-    display: block;
-    background: transparent;
-    width: 0px;
-    height: 0px;
-  }
-</style>

package/Tooltip.svelte.d.ts

@@ -5,11 +5,12 @@ declare const __propDef: {
         conditionalRender?: boolean | undefined;
         crossAxisOffset?: number | undefined;
         mainAxisOffset?: number | undefined;
-        disabled?: boolean | undefined;
-        hoverDelayMilliseconds?: number | undefined;
         open?: boolean | undefined;
         placement?: string | undefined;
         portalHost?: HTMLElement | undefined;
+        variant?: string | undefined;
+        disabled?: boolean | undefined;
+        hoverDelayMilliseconds?: number | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -51,8 +52,12 @@ declare const __propDef: {
             disabled: boolean;
             hoverDelayMilliseconds: number;
             open: boolean;
+            variant: string;
+        };
+        tip: {
+            placement: string;
+            variant: string;
         };
-        tip: {};
     };
 };
 export type TooltipProps = typeof __propDef.props;

package/Tree.constants.d.ts

@@ -1,2 +1 @@
 export declare const TREE_CONTEXT_KEY = "sterlingTree";
-export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/Tree.constants.js

@@ -1,2 +1 @@
 export const TREE_CONTEXT_KEY = 'sterlingTree';
-export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';

package/Tree.svelte

@@ -1,68 +1,70 @@
-<script>import { createEventDispatcher, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { TREE_CONTEXT_KEY } from "./Tree.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 { TREE_CONTEXT_KEY } from './Tree.constants';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- Props ----- //
+/** When true, the tree and its descendants are disabled. */
 export let disabled = false;
-export let selectedValue = void 0;
+/** The value of the currently selected item. */
+export let selectedValue = undefined;
+/** The values of items that are expanded. */
 export let expandedValues = [];
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let treeRef;
-const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const expandedValuesStore = writable(expandedValues);
 const selectedValueStore = writable(selectedValue);
+// ----- Methods ----- //
 export const blur = () => {
-  treeRef?.blur();
+    treeRef?.blur();
 };
 export const focus = (options) => {
-  treeRef?.focus(options);
+    treeRef?.focus(options);
 };
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
-const raiseExpandCollapse = (expandedValues2) => {
-  dispatch("expandCollapse", { expandedValues: expandedValues2 });
+const raiseExpandCollapse = (expandedValues) => {
+    dispatch('expandCollapse', { expandedValues });
 };
-const raiseSelect = (selectedValue2) => {
-  dispatch("select", { selectedValue: selectedValue2 });
+const raiseSelect = (selectedValue) => {
+    dispatch('select', { selectedValue });
 };
+// ----- Reactions ----- //
 $: {
-  selectedValueStore.set(selectedValue);
+    selectedValueStore.set(selectedValue);
 }
 $: {
-  selectedValue = $selectedValueStore;
-  raiseSelect($selectedValueStore);
+    selectedValue = $selectedValueStore;
+    raiseSelect($selectedValueStore);
 }
 $: {
-  expandedValuesStore.set(expandedValues);
+    expandedValuesStore.set(expandedValues);
 }
 $: {
-  expandedValues = $expandedValuesStore;
-  raiseExpandCollapse($expandedValuesStore);
+    expandedValues = $expandedValuesStore;
+    raiseExpandCollapse($expandedValuesStore);
 }
 $: {
-  colorfulStore.set(colorful);
-}
-$: {
-  disabledStore.set(disabled);
+    disabledStore.set(disabled);
 }
+// ----- Set Context ----- //
 setContext(TREE_CONTEXT_KEY, {
-  colorful: colorfulStore,
-  disabled: disabledStore,
-  expandedValues: expandedValuesStore,
-  selectedValue: selectedValueStore
+    disabled: disabledStore,
+    expandedValues: expandedValuesStore,
+    selectedValue: selectedValueStore
 });
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   bind:this={treeRef}
   aria-disabled={disabled}
-  class="sterling-tree"
-  class:colorful
-  class:composed
+  class={`sterling-tree ${variant}`}
   class:disabled
   class:using-keyboard={$usingKeyboard}
   role="tree"
+  tabindex="0"
   on:blur
   on:click
   on:dblclick
@@ -97,92 +99,6 @@ setContext(TREE_CONTEXT_KEY, {
   {...$$restProps}
 >
   <div class="container">
-    <slot {colorful} {composed} {disabled} />
+    <slot {disabled} {expandedValues} {selectedValue} {variant} />
   </div>
 </div>
-
-<style>
-  .sterling-tree {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-common__color);
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 0;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-tree:hover {
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-tree.using-keyboard:focus-within {
-    border-color: var(--stsv-button__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-tree.composed,
-  .sterling-tree.composed:hover,
-  .sterling-tree.composed.using-keyboard:focus-visible,
-  .sterling-tree.composed.disabled {
-    background: none;
-    border: none;
-    outline: none;
-  }
-
-  .sterling-tree.disabled * {
-    cursor: not-allowed;
-  }
-
-  /* ----- container - a layout panel that grows with the items ----- */
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    position: relative;
-  }
-
-  .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))
-    );
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    transition: opacity 250ms;
-  }
-
-  .sterling-tree.disabled .container::after {
-    opacity: 1;
-  }
-
-  /* ----- media queries ----- */
-
-  @media (prefers-reduced-motion) {
-    .sterling-tree,
-    .container::after {
-      transition: none;
-    }
-  }
-</style>

package/Tree.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;
         selectedValue?: string | undefined;
         expandedValues?: string[] | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     };
@@ -49,9 +48,10 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            colorful: boolean;
-            composed: boolean;
             disabled: boolean;
+            expandedValues: string[];
+            selectedValue: string | undefined;
+            variant: string;
         };
     };
 };

package/Tree.types.d.ts

@@ -3,9 +3,7 @@ import type { Readable, Writable } from 'svelte/store';
  * The context for a Tree and its descendants.
  */
 export type TreeContext = {
-    /** When true, applies colorful theme styles. */
-    colorful: Readable<boolean>;
-    /** When true, the tree and its descendants are disabled */
+    /** When true, the tree and its descendants are disabled. */
     disabled: Readable<boolean>;
     /** The values of items that are expanded. */
     expandedValues: Writable<string[]>;

package/TreeChevron.svelte

@@ -1,24 +1,33 @@
-<script>import { onMount } from "svelte";
+<script>import { onMount } from 'svelte';
+// ----- Props ----- //
+/** When true, the chevron rotates to indicate children are visible. */
 export let expanded = false;
+/** When true, the chevron is displayed, otherwise a dot is displayed. */
 export let hasChildren = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let previousExpanded = expanded;
 let mounted = false;
+// ----- Event Handlers ----- //
 onMount(() => {
-  setTimeout(() => {
-    mounted = true;
-  }, 0);
+    setTimeout(() => {
+        mounted = true;
+    }, 0);
 });
+// ----- Animation ----- //
 let animate = false;
 $: {
-  if (expanded !== previousExpanded && mounted) {
-    animate = true;
-  }
-  previousExpanded = expanded;
+    if (expanded !== previousExpanded && mounted) {
+        animate = true;
+    }
+    previousExpanded = expanded;
 }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="tree-chevron"
+  class={`sterling-tree-chevron ${variant}`}
   class:leaf={!hasChildren}
   class:animate
   class:expanded
@@ -55,92 +64,3 @@ $: {
   on:wheel|passive
   {...$$restProps}
 />
-
-<style>
-  .tree-chevron {
-    position: relative;
-    border: none;
-    background: none;
-    height: 1em;
-    width: 1em;
-    transform-origin: 50% 50%;
-  }
-
-  .tree-chevron::after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    width: 7px;
-    height: 7px;
-    border-right: 3px solid currentColor;
-    border-top: 3px solid currentColor;
-  }
-
-  :not(.expanded):not(.animate)::after {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-
-  .expanded:not(.animate)::after {
-    transform: translate(-50%, -70%) rotate(135deg);
-  }
-
-  @keyframes rotate-collapse {
-    from {
-      transform: translate(-50%, -70%) rotate(135deg);
-    }
-    to {
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
-
-  @keyframes rotate-expand {
-    from {
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-    to {
-      transform: translate(-50%, -70%) rotate(135deg);
-    }
-  }
-
-  :not(.expanded).animate::after {
-    animation-name: rotate-collapse;
-    animation-duration: 100ms;
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
-
-  .expanded.animate::after {
-    animation-name: rotate-expand;
-    animation-duration: 100ms;
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
-
-  .tree-chevron.leaf::after {
-    animation: none;
-    content: '';
-    position: absolute;
-    font: inherit;
-    left: 50%;
-    top: 50%;
-    width: 0.35em;
-    height: 0.35em;
-    background: currentColor;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  @media (prefers-reduced-motion) {
-    :not(.expanded).animate::after {
-      animation: none;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-    .expanded.animate::after {
-      animation: none;
-      transform: translate(-50%, -70%) rotate(135deg);
-    }
-  }
-</style>

package/TreeChevron.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
+        variant?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/TreeItem.constants.d.ts

@@ -0,0 +1 @@
+export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/TreeItem.constants.js

@@ -0,0 +1 @@
+export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';