@geoffcox/sterling-svelte 0.0.24 → 0.0.26

package/Popover.svelte

@@ -0,0 +1,124 @@
+<script>import { onMount } from "svelte";
+import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
+import { portal } from "./actions/portal";
+export let placement = "bottom-start";
+export let open = false;
+export let reference;
+export let portalHost = void 0;
+let popupRef;
+let popupPosition = { x: 0, y: 0 };
+const hostId = "SterlingPopoverPortal";
+const ensurePortalHost = () => {
+  if (portalHost) {
+    return portalHost;
+  }
+  let host = document.querySelector(`#${hostId}`);
+  if (!host) {
+    host = document.createElement("div");
+    host.id = hostId;
+    host.style.overflow = "visible";
+    document.body.append(host);
+  }
+  portalHost = host;
+};
+let bodyHeight = 0;
+const resizeObserver = new ResizeObserver((entries) => {
+  bodyHeight = entries[0].target.clientHeight;
+});
+const middleware = [offset({ mainAxis: -2 }), flip()];
+const computePopupPosition = async () => {
+  if (reference && popupRef) {
+    popupPosition = await computePosition(reference, popupRef, {
+      placement,
+      middleware
+    });
+  } else {
+    popupPosition = { x: 0, y: 0 };
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateMenuPosition = () => {
+  cleanupAutoUpdate();
+  if (reference && popupRef) {
+    cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopupPosition);
+  }
+};
+$:
+  popupRef, reference, autoUpdateMenuPosition();
+$:
+  open, bodyHeight, placement, computePopupPosition();
+onMount(() => {
+  ensurePortalHost();
+  resizeObserver.observe(document.body);
+  return () => {
+    resizeObserver.unobserve(document.body);
+  };
+});
+</script>
+
+<div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
+  <div
+    bind:this={popupRef}
+    class="sterling-popover"
+    class:open
+    on:blur
+    on:click
+    on:copy
+    on:cut
+    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:scroll
+    on:wheel
+    on:paste
+    {...$$restProps}
+    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+  >
+    <slot />
+  </div>
+</div>
+
+<style>
+  .sterling-popover-portal {
+    position: relative;
+    overflow: visible;
+    background: rgba(255, 0, 0, 0.1);
+  }
+
+  .sterling-popover {
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    box-sizing: border-box;
+    display: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    height: fit-content;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: max-content;
+    z-index: 1;
+  }
+
+  .sterling-popover.open {
+    display: grid;
+  }
+</style>

package/Popover.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placement?: Placement | undefined;
+        open?: boolean | undefined;
+        reference: HTMLElement;
+        portalHost?: HTMLElement | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        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;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/Progress.svelte

@@ -3,6 +3,7 @@ export let max = 100;
 export let percent = 0;
 export let vertical = false;
 export let colorful = "none";
+export let disabled = false;
 let clientHeight;
 let clientWidth;
 $:
@@ -33,6 +34,7 @@ $:
 
 <div
   class="sterling-progress"
+  class:disabled
   class:vertical
   role="progressbar"
   on:blur
@@ -103,7 +105,6 @@ $:
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    min-width: 100px;
   }
 
   .indicator {
@@ -127,7 +128,6 @@ $:
     flex-direction: column;
     justify-content: flex-end;
     min-width: unset;
-    min-height: 100px;
   }
 
   .sterling-progress.vertical .indicator {
@@ -155,6 +155,17 @@ $:
     background-color: var(--stsv-Error__border-color);
   }
 
+  /* ----- Disabled ----- */
+
+  .sterling-progress.disabled {
+    background: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+  }
+
+  .sterling-progress.disabled .indicator {
+    background-color: var(--stsv-Display__color--disabled);
+  }
+
   @media (prefers-reduced-motion) {
     .sterling-progress,
     .indicator {

package/Progress.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         percent?: number | undefined;
         vertical?: boolean | undefined;
         colorful?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/Radio.svelte

@@ -1,42 +1,58 @@
-<script>import { onMount } from "svelte";
-import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
 export let id = void 0;
-let mounted = false;
-let radioRef;
+if (checked && $$restProps.value !== group) {
+  group = $$restProps.value;
+} else if (!checked && $$restProps.value === group) {
+  checked = true;
+}
+let inputRef;
+let previousChecked = checked;
+let previousGroup = group;
+const reconcile = () => {
+  if (checked !== previousChecked) {
+    if (checked && $$restProps.value) {
+      group = $$restProps.value;
+      previousGroup = $$restProps.value;
+    }
+    previousChecked = checked;
+  } else if (group !== previousGroup) {
+    if ($$restProps.value) {
+      checked = $$restProps.value === group;
+      previousChecked = checked;
+    }
+    previousGroup = group;
+  }
+};
+$:
+  checked, group, $$restProps.value, reconcile();
 $: {
-  if ($$slots.default && id === void 0) {
-    id = idGenerator.nextId("Radio");
+  if (inputRef && checked && !inputRef.checked) {
+    inputRef.click();
   }
 }
 $: {
-  if (mounted) {
-    checked = group === $$restProps.value;
+  if ($$slots.default && id === void 0) {
+    id = idGenerator.nextId("Radio");
   }
 }
-const onChange = (e) => {
-  if (e.currentTarget.checked) {
-    group = $$restProps.value;
-  }
-};
 export const blur = () => {
-  radioRef?.blur();
+  inputRef?.blur();
 };
 export const click = () => {
-  radioRef?.click();
+  inputRef?.click();
 };
 export const focus = (options) => {
-  radioRef?.focus(options);
+  inputRef?.focus(options);
 };
-onMount(() => {
-  if (checked) {
+const onChange = (e) => {
+  if (e.currentTarget.checked) {
     group = $$restProps.value;
   }
-  mounted = true;
-});
+};
 </script>
 
 <!--
@@ -46,9 +62,10 @@ onMount(() => {
 <div class="sterling-radio" class:disabled>
   <div class="container">
     <input
-      bind:this={radioRef}
-      checked={group === $$restProps.value}
+      bind:this={inputRef}
+      {checked}
       {disabled}
+      {group}
       {id}
       type="radio"
       on:blur

package/Select.svelte

@@ -1,8 +1,8 @@
-<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { createEventDispatcher, tick } from "svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
+import Popup from "./Popover.svelte";
 const popupId = idGenerator.nextId("Select-popup");
 export let composed = false;
 export let disabled = false;
@@ -11,12 +11,7 @@ export let selectedValue = void 0;
 let prevOpen = false;
 let pendingSelectedValue = selectedValue;
 let selectRef;
-let popupRef;
 let listRef;
-let popupPosition = {
-  x: void 0,
-  y: void 0
-};
 const dispatch = createEventDispatcher();
 const raiseSelect = (value) => {
   dispatch("select", { value });
@@ -39,8 +34,10 @@ $: {
   if (open && !prevOpen) {
     prevOpen = true;
     tick().then(() => {
-      listRef?.focus();
-      listRef?.scrollToSelectedItem();
+      setTimeout(() => {
+        listRef?.focus();
+        listRef?.scrollToSelectedItem();
+      }, 10);
     });
   } else if (prevOpen) {
     prevOpen = false;
@@ -61,20 +58,6 @@ export const scrollToSelectedItem = () => {
     listRef?.scrollToSelectedItem();
   }
 };
-let mounted = false;
-onMount(() => {
-  mounted = true;
-  const cleanup = autoUpdate(selectRef, popupRef, async () => {
-    const { x, y } = await computePosition(selectRef, popupRef, {
-      placement: "bottom-end",
-      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
-    });
-    if (open) {
-      popupPosition = { x, y };
-    }
-  });
-  return cleanup;
-});
 const onSelectClick = (event) => {
   if (!disabled) {
     open = !open;
@@ -216,16 +199,11 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <div
-    bind:this={popupRef}
-    class="popup"
-    class:open
-    id={popupId}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
+  <Popup reference={selectRef} bind:open id={popupId}>
     <div class="popup-content">
       <List
         bind:this={listRef}
+        composed
         {disabled}
         selectedValue={pendingSelectedValue}
         on:click={onListClick}
@@ -236,7 +214,7 @@ const onListSelect = (event) => {
         <slot />
       </List>
     </div>
-  </div>
+  </Popup>
 </div>
 
 <style>
@@ -350,27 +328,18 @@ const onListSelect = (event) => {
     transform-origin: 50% 50%;
   }
 
-  .popup {
+  .popup-content {
     background-color: var(--stsv-Common__background-color);
-    box-sizing: border-box;
-    display: none;
-    overflow: visible;
-    outline: none;
-    position: absolute;
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    width: fit-content;
-    height: fit-content;
-    z-index: 1;
-  }
-
-  .popup.open {
+    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);
+    padding: 0.25em;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
-  }
-
-  .popup-content {
-    max-height: 15em;
+    overflow: hidden;
+    max-height: 20em;
   }
 
   @media (prefers-reduced-motion) {

package/Switch.svelte

@@ -117,17 +117,21 @@ export const focus = (options) => {
   }
 
   .sterling-switch:not(.vertical) {
+    align-content: center;
     align-items: center;
     column-gap: 0.5em;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto auto auto;
     grid-template-rows: auto;
-    justify-items: stretch;
+    justify-content: flex-start;
+    justify-items: flex-start;
   }
 
   .sterling-switch.vertical {
-    align-items: stretch;
+    align-content: flex-start;
+    align-items: flex-start;
     grid-template-columns: auto;
     grid-template-rows: auto auto auto;
+    justify-content: center;
     justify-items: center;
     row-gap: 0.5em;
   }

package/Tab.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from "svelte";
 import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
 export let disabled = false;
 export let selected = false;
 export let text = void 0;
@@ -8,7 +9,6 @@ let tabRef;
 const {
   disabled: tabListDisabled,
   selectedValue,
-  usingKeyboard,
   vertical
 } = getContext(TAB_LIST_CONTEXT_KEY);
 $:

package/TabList.svelte

@@ -1,20 +1,14 @@
-<script>import { createKeyborg } from "keyborg";
-import { createEventDispatcher, onMount, setContext } from "svelte";
+<script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
 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);
@@ -23,8 +17,6 @@ $:
 $: {
   selectedValue = $selectedValueStore;
 }
-$:
-  usingKeyboardStore.set(usingKeyboard);
 $:
   verticalStore.set(vertical);
 const dispatch = createEventDispatcher();
@@ -106,12 +98,6 @@ export const selectLastTab = () => {
   }
   return false;
 };
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 const onClick = (event) => {
   if (!disabled) {
     let candidate = event.target;
@@ -126,7 +112,6 @@ const onClick = (event) => {
   }
 };
 const onKeydown = (event) => {
-  console.log("tabList onKeydown", event);
   if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
     switch (event.key) {
       case "Home":
@@ -175,7 +160,6 @@ const onKeydown = (event) => {
 setContext(TAB_LIST_CONTEXT_KEY, {
   disabled: disabledStore,
   selectedValue: selectedValueStore,
-  usingKeyboard: usingKeyboardStore,
   vertical: verticalStore
 });
 </script>

package/TabList.types.d.ts

@@ -2,6 +2,5 @@ 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

@@ -2,7 +2,7 @@
 export let autoHeight = false;
 export let disabled = false;
 export let resize = "none";
-export let value;
+export let value = "";
 let textAreaRef;
 const autoSetHeight = () => {
   if (autoHeight && textAreaRef) {
@@ -42,7 +42,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<div class="sterling-text-area2" class:disabled>
+<div class="sterling-text-area" class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
@@ -88,8 +88,10 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 </div>
 
 <style>
-  .sterling-text-area2 {
+  .sterling-text-area {
     position: relative;
+    height: 100%;
+    width: 100%;
   }
 
   textarea {
@@ -130,12 +132,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-text-area2:disabled {
+  .sterling-text-area:disabled {
     cursor: not-allowed;
     outline: none;
   }
 
-  .sterling-text-area2::after {
+  .sterling-text-area::after {
     background: var(--stsv-Disabled__background);
     bottom: 0;
     content: '';
@@ -148,7 +150,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     transition: opacity 250ms;
   }
 
-  .sterling-text-area2.disabled::after {
+  .sterling-text-area.disabled::after {
     opacity: 1;
   }
 
@@ -159,8 +161,8 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 
   @media (prefers-reduced-motion) {
     textarea,
-    .sterling-text-area2,
-    .sterling-text-area2::after {
+    .sterling-text-area,
+    .sterling-text-area::after {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         autoHeight?: boolean | undefined;
         disabled?: boolean | undefined;
         resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
-        value: string;
+        value?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/Tree.svelte

@@ -1,7 +1,7 @@
-<script>import { createKeyborg } from "keyborg";
-import { createEventDispatcher, onMount, setContext } from "svelte";
+<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 composed = false;
 export let disabled = false;
 export let selectedValue = void 0;
@@ -23,11 +23,6 @@ const raiseExpandCollapse = (expandedValues2) => {
 const raiseSelect = (selectedValue2) => {
   dispatch("select", { selectedValue: selectedValue2 });
 };
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
-};
 $: {
   selectedValueStore.set(selectedValue);
 }
@@ -45,12 +40,6 @@ $: {
 $: {
   disabledStore.set(disabled);
 }
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 setContext(TREE_CONTEXT_KEY, {
   expandedValues: expandedValuesStore,
   selectedValue: selectedValueStore,
@@ -65,7 +54,7 @@ setContext(TREE_CONTEXT_KEY, {
   class="sterling-tree"
   class:composed
   class:disabled
-  class:using-keyboard={usingKeyboard}
+  class:using-keyboard={$usingKeyboard}
   role="tree"
   on:blur
   on:click

package/TreeItem.svelte

@@ -3,8 +3,14 @@ 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 { prefersReducedMotion } from "./stores/prefersReducedMotion";
 export let disabled = false;
 export let value;
+const slidNoOp = (node, params) => {
+  return { delay: 0, duration: 0 };
+};
+$:
+  slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
 const {
   expandedValues,
   selectedValue,
@@ -293,7 +299,7 @@ A item in a Tree displaying the item and children.
     </slot>
   </div>
   {#if expanded && hasChildren}
-    <div class="children" transition:slide={{ duration: 200 }} role="group">
+    <div class="children" transition:slideMotion={{ duration: 200 }} role="group">
       <slot {depth} {selected} {value} />
     </div>
   {/if}