@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/TextArea.svelte.d.ts

@@ -2,10 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        autoHeight?: boolean | undefined;
         disabled?: boolean | undefined;
-        resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
         value?: string | undefined;
+        autoHeight?: boolean | undefined;
+        colorful?: boolean | undefined;
+        resize?: "none" | "vertical" | "horizontal" | "both" | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -60,7 +61,7 @@ export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAr
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
     get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/Tooltip.svelte

@@ -1,9 +1,10 @@
-<script>import { portal } from "./actions/portal";
-import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
+<script>import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
 import { onMount } from "svelte";
 import { fade } from "svelte/transition";
+import { portal } from "./actions/portal";
+import { prefersReducedMotion } from "./stores/prefersReducedMotion";
 export let disabled = false;
-export let showOn = void 0;
+export let showOn = "hover";
 export let hoverDelayMilliseconds = 1e3;
 export let open = false;
 export let placement = "top";
@@ -114,6 +115,7 @@ const autoShowUpdate = () => {
   cleanupAutoShowUpdate = () => {
   };
   const element = reference;
+  open = false;
   if (element) {
     switch (showOn) {
       case "click":
@@ -132,6 +134,11 @@ const autoShowUpdate = () => {
 };
 $:
   reference, showOn, autoShowUpdate();
+const fadeNoOp = (node, params) => {
+  return { delay: 0, duration: 0 };
+};
+$:
+  fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
 let mounted = false;
 onMount(() => {
   mounted = true;
@@ -149,9 +156,45 @@ onMount(() => {
   <div
     class="sterling-tooltip-portal"
     use:portal={{ target: document.body }}
-    transition:fade={{ duration: 250 }}
+    transition:fadeMotion={{ duration: 250 }}
   >
-    <div bind:this={tooltipRef} class="sterling-tooltip" style={tipStyle}>
+    <div
+      bind:this={tooltipRef}
+      class="sterling-tooltip"
+      style={tipStyle}
+      on:blur
+      on:click
+      on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
+      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|passive
+      {...$$restProps}
+    >
       <div class="arrow" bind:this={arrowRef} style={arrowStyle} />
       <slot name="tip" />
     </div>
@@ -171,12 +214,12 @@ onMount(() => {
   }
 
   .sterling-tooltip {
-    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);
-    color: var(--stsv-Common__color);
+    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);
+    color: var(--stsv-common__color);
     position: absolute;
     overflow: visible;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
@@ -187,11 +230,11 @@ onMount(() => {
     position: absolute;
     width: 10px;
     height: 10px;
-    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);
+    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);
     clip-path: polygon(0% 1%, 100% 1%, 100% 100%, 0% 1%);
   }
 </style>

package/Tooltip.svelte.d.ts

@@ -1,15 +1,47 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TooltipShowOn } from './Tooltip.types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         disabled?: boolean | undefined;
-        showOn?: TooltipShowOn | undefined;
+        showOn?: string | undefined;
         hoverDelayMilliseconds?: number | undefined;
         open?: boolean | undefined;
         placement?: import("@floating-ui/core").Placement | undefined;
         portalTarget?: HTMLElement | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        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;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/Tree.svelte

@@ -2,14 +2,16 @@
 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;
 export let disabled = false;
 export let selectedValue = void 0;
 export let expandedValues = [];
 let treeRef;
-const selectedValueStore = writable(selectedValue);
-const expandedValuesStore = writable(expandedValues);
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
+const expandedValuesStore = writable(expandedValues);
+const selectedValueStore = writable(selectedValue);
 export const blur = () => {
   treeRef?.blur();
 };
@@ -37,13 +39,17 @@ $: {
   expandedValues = $expandedValuesStore;
   raiseExpandCollapse($expandedValuesStore);
 }
+$: {
+  colorfulStore.set(colorful);
+}
 $: {
   disabledStore.set(disabled);
 }
 setContext(TREE_CONTEXT_KEY, {
+  colorful: colorfulStore,
+  disabled: disabledStore,
   expandedValues: expandedValuesStore,
-  selectedValue: selectedValueStore,
-  disabled: disabledStore
+  selectedValue: selectedValueStore
 });
 </script>
 
@@ -52,6 +58,7 @@ setContext(TREE_CONTEXT_KEY, {
   bind:this={treeRef}
   aria-disabled={disabled}
   class="sterling-tree"
+  class:colorful
   class:composed
   class:disabled
   class:using-keyboard={$usingKeyboard}
@@ -86,23 +93,23 @@ setContext(TREE_CONTEXT_KEY, {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div class="container">
-    <slot {composed} {disabled} />
+    <slot {colorful} {composed} {disabled} />
   </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);
+    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);
+    color: var(--stsv-common__color);
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -111,17 +118,17 @@ setContext(TREE_CONTEXT_KEY, {
   }
 
   .sterling-tree:hover {
-    border-color: var(--stsv-Common__border-color--hover);
-    color: var(--stsv-Common__color--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-Common__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);
+    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,
@@ -147,7 +154,14 @@ setContext(TREE_CONTEXT_KEY, {
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    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;

package/Tree.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         selectedValue?: string | undefined;
@@ -48,6 +49,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             composed: boolean;
             disabled: boolean;
         };

package/Tree.types.d.ts

@@ -1,16 +1,14 @@
 import type { Readable, Writable } from 'svelte/store';
 /**
- * Context for a Tree and its tree items.
+ * The context for a Tree and its descendants.
  */
 export type TreeContext = {
-    /** If the tree is disabled */
+    /** When true, applies colorful theme styles. */
+    colorful: Readable<boolean>;
+    /** When true, the tree and its descendants are disabled */
     disabled: Readable<boolean>;
-    /**
-     * The values of the expanded tree tree items.
-     */
+    /** The values of items that are expanded. */
     expandedValues: Writable<string[]>;
-    /**
-     * The value of the selected tree item.
-     */
+    /** The value of the currently selected item. */
     selectedValue: Writable<string | undefined>;
 };

package/TreeChevron.svelte

@@ -52,7 +52,7 @@ $: {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 />
 

package/TreeItem.svelte

@@ -2,9 +2,10 @@
 import { slide } from "svelte/transition";
 import { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from "./Tree.constants";
 import TreeItemDisplay from "./TreeItemDisplay.svelte";
-import { writable } from "svelte/store";
+import { readable, writable } from "svelte/store";
 import { prefersReducedMotion } from "./stores/prefersReducedMotion";
 export let disabled = false;
+export let text = void 0;
 export let value;
 const slidNoOp = (node, params) => {
   return { delay: 0, duration: 0 };
@@ -12,11 +13,17 @@ const slidNoOp = (node, params) => {
 $:
   slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
 const {
+  colorful,
+  disabled: treeDisabled,
   expandedValues,
-  selectedValue,
-  disabled: treeDisabled
+  selectedValue
 } = getContext(TREE_CONTEXT_KEY);
-const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
+const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {
+  colorful: readable(false),
+  disabled: readable(false),
+  expandedValues: readable([]),
+  selectedValue: readable(void 0)
+};
 let treeItemRef;
 $:
   hasChildren = $$slots.default;
@@ -244,6 +251,7 @@ A item in a Tree displaying the item and children.
   aria-expanded={expanded}
   bind:this={treeItemRef}
   class="sterling-tree-item"
+  class:colorful={$colorful}
   class:disabled={_disabled}
   data-value={value}
   role="treeitem"
@@ -277,7 +285,7 @@ A item in a Tree displaying the item and children.
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -289,10 +297,33 @@ A item in a Tree displaying the item and children.
     on:keydown={onKeydown}
   >
     <slot name="item" {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
-      <TreeItemDisplay {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
-        <svelte:fragment let:depth let:disabled let:expanded let:hasChildren let:selected let:value>
-          <slot name="label" {depth} {disabled} {expanded} {hasChildren} {selected} {value}
-            >{value}</slot
+      <TreeItemDisplay
+        colorful={$colorful}
+        {depth}
+        disabled={_disabled}
+        {expanded}
+        {hasChildren}
+        {selected}
+        {value}
+      >
+        <svelte:fragment
+          let:colorful
+          let:depth
+          let:disabled
+          let:expanded
+          let:hasChildren
+          let:selected
+          let:value
+        >
+          <slot
+            name="label"
+            {colorful}
+            {depth}
+            {disabled}
+            {expanded}
+            {hasChildren}
+            {selected}
+            {value}>{text || value}</slot
           >
         </svelte:fragment>
       </TreeItemDisplay>

package/TreeItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
+        text?: string | undefined;
         value: string;
         collapse?: (() => boolean) | undefined;
         expand?: (() => boolean) | undefined;
@@ -60,6 +61,7 @@ declare const __propDef: {
             value: string;
         };
         label: {
+            colorful: import("svelte/store").Readable<boolean>;
             depth: number;
             disabled: boolean;
             expanded: boolean;

package/TreeItem.types.d.ts

@@ -1,13 +1,13 @@
 import type { Readable } from 'svelte/store';
 /**
- * The context for a tree item.
+ * The context for a tree item and its descendants.
  */
 export type TreeItemContext = {
     /**
-     * How many levels deep this tree item is in the tree hierarchy.
-     * A top level item's depth is zero.
+     * The depth of this tree item within the tree hierarchy.
+     * Starts at zero.
      */
     depth: number;
-    /** If the tree item is disabled */
+    /** When true, the three item is disabled. */
     disabled: Readable<boolean>;
 };

package/TreeItemDisplay.svelte

@@ -2,12 +2,13 @@
 import { TREE_CONTEXT_KEY } from "./Tree.constants";
 import TreeChevron from "./TreeChevron.svelte";
 import { readable } from "svelte/store";
+export let colorful = false;
 export let depth = 0;
 export let disabled = false;
 export let expanded = false;
 export let hasChildren = false;
-export let value;
 export let selected = false;
+export let value;
 const { disabled: treeDisabled } = getContext(TREE_CONTEXT_KEY) || {
   disabled: readable(false)
 };
@@ -26,6 +27,7 @@ export const focus = (options) => {
 <div
   bind:this={divRef}
   class="sterling-tree-item-display"
+  class:colorful
   class:disabled={disabled && !$treeDisabled}
   class:item-disabled={disabled}
   class:expanded
@@ -61,11 +63,11 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <TreeChevron {expanded} {hasChildren} />
-  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
+  <slot {colorful} {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
 </div>
 
 <style>
@@ -74,7 +76,7 @@ export const focus = (options) => {
     align-items: center;
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 0.25em;
@@ -89,13 +91,23 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item-display:not(.item-disabled):not(.selected):hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-tree-item-display.selected {
-    background-color: var(--stsv-Input__background-color--selected);
-    color: var(--stsv-Input__color--selected);
+    background-color: var(--stsv-button__background-color--active);
+    color: var(--stsv-button__color--active);
+  }
+
+  .sterling-tree-item-display.colorful:not(.item-disabled):not(.selected):hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-tree-item-display.colorful.selected {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   .sterling-tree-item-display.disabled {
@@ -104,7 +116,14 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item-display::after {
-    background: var(--stsv-Disabled__background);
+    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;

package/TreeItemDisplay.svelte.d.ts

@@ -2,12 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         depth?: number | undefined;
         disabled?: boolean | undefined;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
-        value: string;
         selected?: boolean | undefined;
+        value: string;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -49,6 +50,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             depth: number;
             disabled: boolean;
             expanded: boolean;

package/actions/clickOutside.js

@@ -9,7 +9,7 @@ export const clickOutside = (node, params) => {
         const targetNode = event?.target;
         if (targetNode &&
             !node.contains(targetNode) &&
-            (!ignoreOthers || ignoreOthers.every((x) => !x.contains(targetNode)))) {
+            (!ignoreOthers || ignoreOthers.filter(Boolean).every((x) => !x.contains(targetNode)))) {
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));

package/actions/trapKeyboardFocus.d.ts

@@ -0,0 +1,3 @@
+export declare const trapKeyboardFocus: (node: HTMLElement) => {
+    destroy: () => void;
+};

package/actions/trapKeyboardFocus.js

@@ -0,0 +1,52 @@
+const getFirstFocusable = (node) => {
+    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
+    // but do default to tabIndex >= 0.
+    const nodes = node.querySelectorAll('*');
+    const elements = Array.from(nodes)
+        .map((n) => n)
+        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
+    return elements.length > 0 ? elements[0] : null;
+};
+const getLastFocusable = (node) => {
+    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
+    // but do default to tabIndex >= 0.
+    const nodes = node.querySelectorAll('*');
+    const elements = Array.from(nodes)
+        .map((n) => n)
+        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
+    return elements.length > 0 ? elements[elements.length - 1] : null;
+};
+export const trapKeyboardFocus = (node) => {
+    const onKeydown = (e) => {
+        let handledFocus = false;
+        if (e.key === 'Tab') {
+            if (e.shiftKey) {
+                const firstFocusable = getFirstFocusable(node);
+                if (document.activeElement === firstFocusable) {
+                    const lastFocusable = getLastFocusable(node);
+                    lastFocusable?.focus();
+                    handledFocus = true;
+                }
+            }
+            else {
+                const lastFocusable = getLastFocusable(node);
+                if (document.activeElement === lastFocusable) {
+                    const firstFocusable = getFirstFocusable(node);
+                    firstFocusable?.focus();
+                    handledFocus = true;
+                }
+            }
+        }
+        if (handledFocus) {
+            e.stopPropagation();
+            e.preventDefault();
+            return false;
+        }
+    };
+    node.addEventListener('keydown', onKeydown);
+    return {
+        destroy: () => {
+            node.removeEventListener('keydown', onKeydown);
+        }
+    };
+};

package/floating-ui.types.d.ts

@@ -1,2 +1,4 @@
 import type { Placement } from '@floating-ui/dom';
+import type { Options as OffsetOptions } from '@floating-ui/core/src/middleware/offset';
 export type FloatingPlacement = Placement;
+export type FloatingOffsetOptions = OffsetOptions;