@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/TreeItem.svelte.d.ts

@@ -1,101 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        text?: string | undefined;
-        value: string;
-        variant?: string | undefined;
-        collapse?: (() => boolean) | undefined;
-        expand?: (() => boolean) | undefined;
-        toggleExpanded?: (() => boolean) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        click?: (() => void) | undefined;
-        select?: (() => void) | undefined;
-        selectParent?: (() => boolean) | undefined;
-        selectPrevious?: (() => boolean) | undefined;
-        selectNext?: (() => boolean) | 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: {
-        item: {
-            depth: import("svelte/store").Readable<number>;
-            disabled: boolean;
-            expanded: boolean;
-            hasChildren: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-        label: {
-            depth: import("svelte/store").Readable<number>;
-            disabled: boolean;
-            expanded: boolean;
-            hasChildren: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-        default: {
-            depth: number;
-            disabled: boolean;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Snippet } from 'svelte';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null | undefined;
+    icon?: Snippet;
+    label?: string | Snippet;
+    value: string;
 };
-export type TreeItemProps = typeof __propDef.props;
-export type TreeItemEvents = typeof __propDef.events;
-export type TreeItemSlots = typeof __propDef.slots;
-/** A item in a Tree displaying the item and children. */
-export default class TreeItem extends SvelteComponent<TreeItemProps, TreeItemEvents, TreeItemSlots> {
-    get collapse(): () => boolean;
-    get expand(): () => boolean;
-    get toggleExpanded(): () => boolean;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get click(): () => void;
-    get select(): () => void;
-    get selectParent(): () => boolean;
-    get selectPrevious(): () => boolean;
-    get selectNext(): () => boolean;
-}
-export {};
+declare const TreeItem: import("svelte").Component<Props, {
+    collapse: () => boolean;
+    expand: () => boolean;
+    toggleExpanded: () => boolean;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+    click: () => void;
+    select: () => void;
+    selectParent: () => boolean;
+    selectPrevious: () => boolean;
+    selectNext: () => boolean;
+}, "">;
+type TreeItem = ReturnType<typeof TreeItem>;
+export default TreeItem;

package/dist/TreeItem.types.d.ts

@@ -1,14 +1,4 @@
-/// <reference types="svelte" />
-import type { Readable } from 'svelte/store';
-/**
- * The context for a tree item and its descendants.
- */
 export type TreeItemContext = {
-    /**
-     * The depth of this tree item within the tree hierarchy.
-     * Starts at zero.
-     */
-    depth: Readable<number>;
-    /** When true, the three item is disabled. */
-    disabled: Readable<boolean>;
+    depth: number;
+    disabled: boolean | null | undefined;
 };

package/dist/actions/clickOutside.d.ts

@@ -1,6 +1,7 @@
 type Params = {
     /** Other elements should not raise the event if clicked. */
     ignoreOthers?: HTMLElement[];
+    onclickoutside?: (mouseEvent: MouseEvent) => void;
 };
 /**
  * Raises the click_outside event when the user clicks outside the node.

package/dist/actions/clickOutside.js

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

package/dist/actions/extraClass.d.ts

@@ -0,0 +1,8 @@
+type Params = {
+    extraClass: string | null | undefined;
+};
+export declare const extraClass: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
+    destroy(): void;
+};
+export {};

package/dist/actions/extraClass.js

@@ -0,0 +1,14 @@
+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/index.d.ts

@@ -1,6 +1,7 @@
 export type { ClickOutsideEvent, ClickOutsideEventDetail } from './@types/clickOutside';
 export { applyLightDarkMode } from './actions/applyLightDarkMode';
 export { clickOutside } from './actions/clickOutside';
+export { extraClass } from './actions/extraClass';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
 export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
@@ -8,24 +9,21 @@ export { prefersColorSchemeDark } from './mediaQueries/prefersColorSchemeDark';
 export { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 export { usingKeyboard } from './mediaQueries/usingKeyboard';
 export { idGenerator } from './idGenerator';
-export type { ButtonVariant, ButtonShape } from './Button.types';
-export type { LabelStatus, LabelVariant } from './Label.types';
 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 { ProgressStatus } from './Progress.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 { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.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_STATUSES } from './Progress.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';
@@ -33,12 +31,9 @@ export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
 import Button from './Button.svelte';
 import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
-import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
 import Label from './Label.svelte';
-import HexColorSliders from './HexColorSliders.svelte';
-import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
@@ -47,12 +42,10 @@ import Menu from './Menu.svelte';
 import MenuBar from './MenuBar.svelte';
 import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
-import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
-import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -63,5 +56,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Callout, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/dist/index.js

@@ -1,6 +1,7 @@
 // ----- actions ----- //
 export { applyLightDarkMode } from './actions/applyLightDarkMode';
 export { clickOutside } from './actions/clickOutside';
+export { extraClass } from './actions/extraClass';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
 export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
@@ -11,13 +12,12 @@ export { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- functions ----- //
 export { idGenerator } from './idGenerator';
 // ----- Component constants ----- //
-export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.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_STATUSES } from './Progress.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';
@@ -26,12 +26,9 @@ export { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
 import Button from './Button.svelte';
 import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
-import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
 import Label from './Label.svelte';
-import HexColorSliders from './HexColorSliders.svelte';
-import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
@@ -40,12 +37,10 @@ import Menu from './Menu.svelte';
 import MenuBar from './MenuBar.svelte';
 import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
-import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
-import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -56,5 +51,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Callout, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.12",
+  "version": "2.0.1",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight UI component library for Svelte.",
   "license": "MIT",
@@ -10,7 +10,7 @@
   "homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
   "keywords": [
     "svelte",
-    "svelte 4",
+    "svelte 5",
     "sveltekit",
     "design system",
     "component",
@@ -21,7 +21,6 @@
     "button",
     "callout",
     "checkbox",
-    "colorpicker",
     "dialog",
     "dropdown",
     "input",
@@ -44,12 +43,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    },
-    "./css/*.css": "./dist/css/*.css",
-    "./*.svelte": "./dist/*.svelte"
+    }
   },
   "files": [
-    "dist/*",
+    "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
@@ -67,37 +64,38 @@
     "test:unit": "vitest"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@fontsource/atkinson-hyperlegible": "^5.1.1",
     "@fontsource/open-sans": "^4.5.14",
     "@fontsource/source-code-pro": "^4.5.14",
-    "@playwright/test": "^1.28.1",
+    "@geoffcox/sterling-svelte-themes": "^1.0.2",
+    "@eslint/compat": "^1.2.3",
+    "@playwright/test": "^1.45.3",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "^8.56.7",
     "@types/lodash-es": "^4.17.6",
-    "eslint": "^9.0.0",
+    "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
-    "mdsvex": "^0.11.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "publint": "^0.1.9",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "svelte-preprocess": "^5.0.4",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.2.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.3",
     "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0-alpha.20",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.4"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^4.1.0",
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"

package/dist/Button.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const BUTTON_VARIANTS: readonly ["regular", "outline", "ghost"];
-export declare const BUTTON_SHAPES: readonly ["circular", "rounded", "square"];

package/dist/Button.constants.js

@@ -1,2 +0,0 @@
-export const BUTTON_VARIANTS = ['regular', 'outline', 'ghost'];
-export const BUTTON_SHAPES = ['circular', 'rounded', 'square'];

package/dist/Button.types.d.ts

@@ -1,6 +0,0 @@
-import type { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
-type ButtonShapeTuple = typeof BUTTON_SHAPES;
-export type ButtonShape = ButtonShapeTuple[number];
-type ButtonVariantTuple = typeof BUTTON_VARIANTS;
-export type ButtonVariant = ButtonVariantTuple[number];
-export {};

package/dist/ColorPicker.constants.d.ts

@@ -1 +0,0 @@
-export declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl"];

package/dist/ColorPicker.constants.js

@@ -1 +0,0 @@
-export const COLOR_FORMATS = ['hex', 'rgb', 'hsl'];