@geoffcox/sterling-svelte 2.0.2 → 2.0.4

package/dist/actions/colorScheme.js

@@ -0,0 +1,26 @@
+const getRootColorScheme = () => {
+    return globalThis.document?.documentElement?.style.getPropertyValue('color-scheme');
+};
+const setRootColorScheme = (value) => {
+    globalThis.document?.documentElement?.style.setProperty('color-scheme', value);
+};
+const clearRootColorScheme = () => {
+    globalThis.document?.documentElement?.style.removeProperty('color-scheme');
+};
+export const colorScheme = (_node, params) => {
+    const originalValue = getRootColorScheme();
+    setRootColorScheme(params?.value || 'light dark');
+    return {
+        destroy() {
+            if (originalValue) {
+                setRootColorScheme(originalValue);
+            }
+            else {
+                clearRootColorScheme();
+            }
+        },
+        update(params) {
+            setRootColorScheme(params?.value || 'light dark');
+        }
+    };
+};

package/dist/actions/extraClass.d.ts

@@ -0,0 +1,9 @@
+type Params = {
+    extraClass: string | null | undefined;
+};
+/** @deprecated Use clsx class merging through class={['name1', 'name2']} */
+export declare const extraClass: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
+    destroy(): void;
+};
+export {};

package/dist/actions/extraClass.js

@@ -0,0 +1,15 @@
+/** @deprecated Use clsx class merging through class={['name1', 'name2']} */
+export const extraClass = (node, params) => {
+    let _class = params?.extraClass;
+    !!_class && node.classList.add(_class);
+    return {
+        update(params) {
+            !!_class && node.classList.remove(_class);
+            _class = params.extraClass;
+            !!_class && node.classList.add(_class);
+        },
+        destroy() {
+            !!_class && node.classList.remove(_class);
+        }
+    };
+};

package/dist/actions/forwardEvents.d.ts

@@ -0,0 +1,12 @@
+export declare const forwardEvents: (node: HTMLElement, params: {
+    target: HTMLElement;
+    events?: string[];
+    customEvents?: string[];
+}) => {
+    update: (params: {
+        target: HTMLElement;
+        events?: string[];
+        customEvents?: [];
+    }) => void;
+    destroy(): void;
+};

package/dist/actions/forwardEvents.js

@@ -0,0 +1,32 @@
+export const forwardEvents = (node, params) => {
+    const addListeners = (node, target, events, customEvents) => {
+        let forward = (event) => {
+            target.dispatchEvent(event);
+        };
+        let forwardCustom = (event) => {
+            const customEvent = event;
+            target.dispatchEvent(new CustomEvent(customEvent.type, {
+                bubbles: customEvent.bubbles,
+                cancelable: customEvent.cancelable,
+                detail: customEvent.detail
+            }));
+        };
+        events?.forEach((e) => node.addEventListener(e, forward));
+        customEvents?.forEach((e) => node.addEventListener(e, forwardCustom));
+        return () => {
+            events?.forEach((e) => node.removeEventListener(e, forward));
+            customEvents?.forEach((e) => node.removeEventListener(e, forwardCustom));
+        };
+    };
+    let unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
+    const update = (params) => {
+        unsubscribe();
+        unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
+    };
+    return {
+        update,
+        destroy() {
+            unsubscribe();
+        }
+    };
+};

package/dist/actions/portal.d.ts

@@ -0,0 +1,8 @@
+export declare const portal: (node: HTMLElement, params: {
+    target?: HTMLElement;
+}) => {
+    update: (params: {
+        target?: HTMLElement;
+    }) => void;
+    destroy(): void;
+};

package/dist/actions/portal.js

@@ -0,0 +1,19 @@
+export const portal = (node, params) => {
+    const child = node;
+    let portaled = false;
+    const createPortal = (node, params) => {
+        if (!portaled && params.target && node) {
+            params.target.appendChild(node);
+            portaled = true;
+        }
+    };
+    createPortal(child, params);
+    return {
+        update: (params) => createPortal(child, params),
+        destroy() {
+            if (portaled) {
+                child?.parentNode?.removeChild(child);
+            }
+        }
+    };
+};

package/dist/actions/trapKeyboardFocus.d.ts

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

package/dist/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/dist/idGenerator.d.ts

@@ -0,0 +1,5 @@
+/** @deprecated Use $props.id() instead */
+export declare const idGenerator: {
+    next: () => number;
+    nextId: (prefix?: string) => string;
+};

package/dist/idGenerator.js

@@ -0,0 +1,11 @@
+let id = 0;
+const next = () => {
+    return ++id;
+};
+/** @deprecated Use $props.id() instead */
+export const idGenerator = {
+    next,
+    nextId: (prefix) => {
+        return prefix ? `${prefix}-${next()}` : `${next()}`;
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+export type { ClickOutsideEvent, ClickOutsideEventDetail } from './@types/clickOutside';
+export { applyLightDarkMode } from './actions/applyLightDarkMode';
+export { clickOutside } from './actions/clickOutside';
+export { colorScheme } from './actions/colorScheme';
+export { extraClass } from './actions/extraClass';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
+export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
+export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
+export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+export { usingKeyboard } from './mediaQueries/usingKeyboard';
+export { idGenerator } from './idGenerator';
+export type { ListContext } from './List.types';
+export type { MenuBarContext } from './MenuBar.types';
+export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
+export type { PopoverPlacement } from './Popover.types';
+export type { ProgressOrientation } from './Progress.types';
+export type { TabListContext } from './TabList.types';
+export type { TextAreaResize } from './TextArea.types';
+export type { TreeContext } from './Tree.types';
+export type { TreeItemContext } from './TreeItem.types';
+export { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
+export { LIST_CONTEXT_KEY } from './List.constants';
+export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
+export { POPOVER_PLACEMENTS } from './Popover.constants';
+export { PROGRESS_ORIENTATIONS } from './Progress.constants';
+export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+export { TEXT_AREA_RESIZES } from './TextArea.constants';
+export { TREE_CONTEXT_KEY } from './Tree.constants';
+export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
+import Button from './Button.svelte';
+import Callout from './Callout.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Dropdown from './Dropdown.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import Link from './Link.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Pagination from './Pagination.svelte';
+import Popover from './Popover.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/dist/index.js

@@ -0,0 +1,56 @@
+// ----- actions ----- //
+export { applyLightDarkMode } from './actions/applyLightDarkMode';
+export { clickOutside } from './actions/clickOutside';
+export { colorScheme } from './actions/colorScheme';
+export { extraClass } from './actions/extraClass';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
+export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
+// ----- media queries ----- //
+export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
+export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+export { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- functions ----- //
+export { idGenerator } from './idGenerator';
+// ----- Component constants ----- //
+export { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
+export { LIST_CONTEXT_KEY } from './List.constants';
+export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
+export { POPOVER_PLACEMENTS } from './Popover.constants';
+export { PROGRESS_ORIENTATIONS } from './Progress.constants';
+export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+export { TEXT_AREA_RESIZES } from './TextArea.constants';
+export { TREE_CONTEXT_KEY } from './Tree.constants';
+export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
+// ----- Components ----- //
+import Button from './Button.svelte';
+import Callout from './Callout.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Dropdown from './Dropdown.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import Link from './Link.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Pagination from './Pagination.svelte';
+import Popover from './Popover.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/dist/mediaQueries/prefersColorSchemeDark.d.ts

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

package/dist/mediaQueries/prefersColorSchemeDark.js

@@ -0,0 +1,14 @@
+import { onMount } from 'svelte';
+import { writable } from 'svelte/store';
+export const prefersColorSchemeDark = writable(false, (set) => {
+    let matchMedia = undefined;
+    const mediaChangeHandler = (e) => set(e.matches);
+    onMount(() => {
+        matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        set(matchMedia.matches);
+        matchMedia.addEventListener('change', mediaChangeHandler);
+    });
+    return () => {
+        matchMedia?.removeEventListener('change', mediaChangeHandler);
+    };
+});

package/dist/mediaQueries/prefersReducedMotion.d.ts

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

package/dist/mediaQueries/prefersReducedMotion.js

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

package/dist/mediaQueries/usingKeyboard.d.ts

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

package/dist/mediaQueries/usingKeyboard.js

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "author": "Geoff Cox",
-  "description": "A modern, accessible, and lightweight UI component library for Svelte.",
+  "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/GeoffCox/sterling-svelte/issues"
@@ -10,14 +10,15 @@
   "homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
   "keywords": [
     "svelte",
+    "svelte5",
     "svelte 5",
-    "sveltekit",
-    "design system",
+    "typescript",
+    "javascript",
+    "UI",
+    "UX",
     "component",
     "components",
     "controls",
-    "typescript",
-    "javascript",
     "button",
     "callout",
     "checkbox",
@@ -28,27 +29,30 @@
     "link",
     "list",
     "menu",
+    "pagination",
     "popover",
     "progress",
     "radio",
     "select",
     "slider",
     "switch",
+    "tab",
     "tabs",
+    "tab list",
     "textarea",
     "tooltip",
     "tree"
   ],
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "svelte": "./index.js"
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
     }
   },
   "files": [
     "dist",
-    "!**/*.test.*",
-    "!**/*.spec.*"
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
   ],
   "scripts": {
     "build": "vite build && npm run package",
@@ -70,7 +74,7 @@
     "@eslint/js": "^9.18.0",
     "@fontsource/atkinson-hyperlegible": "^5.1.1",
     "@fontsource/source-code-pro": "^4.5.14",
-    "@geoffcox/sterling-svelte-themes": "^1.0.4",
+    "@geoffcox/sterling-svelte-themes": "^2.0.0",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",
@@ -98,7 +102,7 @@
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"
   },
-  "svelte": "./index.js",
-  "types": "./index.d.ts",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module"
 }