@geoffcox/sterling-svelte 0.0.25 → 0.0.26

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/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}

package/index.d.ts

@@ -16,7 +16,7 @@ export type { FloatingPlacement } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext } from './MenuBar.types';
-export type { MenuItemContext, MenuItemRegistration } from './MenuItem.types';
+export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
 export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
@@ -29,7 +29,7 @@ export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
-export { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { PROGRESS_COLORFULS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';

package/index.js

@@ -20,7 +20,7 @@ export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
-export { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
 export { PROGRESS_COLORFULS } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -110,6 +110,8 @@
     "./floating-ui.types": "./floating-ui.types.js",
     "./idGenerator": "./idGenerator.js",
     ".": "./index.js",
+    "./stores/prefersReducedMotion": "./stores/prefersReducedMotion.js",
+    "./stores/usingKeyboard": "./stores/usingKeyboard.js",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",

package/stores/prefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const prefersReducedMotion: import("svelte/store").Writable<boolean>;

package/stores/prefersReducedMotion.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const prefersReducedMotion = writable(false, (set) => {
+    const matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
+    set(matchMedia.matches);
+    const mediaChangeHandler = (e) => set(e.matches);
+    matchMedia.addEventListener('change', mediaChangeHandler);
+    return () => {
+        matchMedia.removeEventListener('change', mediaChangeHandler);
+    };
+});

package/stores/usingKeyboard.d.ts

@@ -0,0 +1 @@
+export declare const usingKeyboard: import("svelte/store").Writable<boolean>;

package/stores/usingKeyboard.js

@@ -0,0 +1,13 @@
+import { createKeyborg } from 'keyborg';
+import { writable } from 'svelte/store';
+export const usingKeyboard = writable(false, (set) => {
+    let keyborg = createKeyborg(window);
+    set(keyborg.isNavigatingWithKeyboard());
+    const keyborgHandler = (value) => {
+        set(value);
+    };
+    keyborg.subscribe(keyborgHandler);
+    return () => {
+        keyborg.unsubscribe(keyborgHandler);
+    };
+});