@geoffcox/sterling-svelte 0.0.21 → 0.0.22

package/Checkbox.svelte

@@ -1,4 +1,4 @@
-<script>import { v4 as uuid } from "uuid";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
@@ -6,7 +6,7 @@ export let id = void 0;
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Checkbox");
   }
 }
 export const blur = () => {

package/Dropdown.svelte

@@ -1,8 +1,8 @@
 <script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuid } from "uuid";
 import { clickOutside } from "./actions/clickOutside";
-const popupId = uuid();
+import { idGenerator } from "./idGenerator";
+const popupId = idGenerator.nextId("Dropdown-popup");
 export let composed = false;
 export let disabled = false;
 export let open = false;

package/Field.svelte

@@ -7,7 +7,7 @@ export { htmlFor as for };
 export let label = void 0;
 export let message = void 0;
 export let required = false;
-export let requiredTip = "This field is required";
+export let requiredReason = "This field is required";
 export let status = "none";
 let fieldRef;
 let targetDisabled = false;
@@ -146,9 +146,9 @@ const onClick = () => {
     </slot>
   {/if}
   {#if required}
-    <slot name="required" {requiredTip}>
+    <slot name="required" requiredTip={requiredReason}>
       <Tooltip showOn="hover">
-        <span class="required-tip" slot="tip">{requiredTip}</span>
+        <span class="required-tip" slot="tip">{requiredReason}</span>
         <div class="required">*</div>
       </Tooltip>
     </slot>

package/Field.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         label?: string | undefined;
         message?: string | undefined;
         required?: boolean | undefined;
-        requiredTip?: string | undefined;
+        requiredReason?: string | undefined;
         status?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;

package/Input.svelte

@@ -1,4 +1,4 @@
-<script>import { v4 as uuid } from "uuid";
+<script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let composed = false;
 export let disabled = false;
@@ -7,7 +7,7 @@ export let value = "";
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Input");
   }
 }
 export const blur = () => {

package/List.svelte

@@ -1,13 +1,11 @@
 <script>import { createKeyborg } from "keyborg";
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { v4 as uuid } from "uuid";
 import { LIST_CONTEXT_KEY } from "./List.constants";
 export let composed = false;
 export let disabled = false;
 export let horizontal = false;
 export let selectedValue = void 0;
-const listId = `list-${uuid()}`;
 let listRef;
 let lastSelectedItemRef;
 const disabledStore = writable(disabled);
@@ -200,7 +198,6 @@ A list of items where a single item can be selected.
   class:disabled
   class:horizontal
   class:using-keyboard={usingKeyboard}
-  id={listId}
   role="list"
   tabindex={0}
   on:blur

package/MenuButton.svelte

@@ -1,15 +1,15 @@
-<script>import { v4 as uuid } from "uuid";
-import { createEventDispatcher, getContext, setContext } from "svelte";
+<script>import { createEventDispatcher, getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 import Button from "./Button.svelte";
 import Menu from "./Menu.svelte";
 import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 import { focusFirstChild, focusNextChild, focusPreviousChild } from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
 export let open = false;
 export let shape = "rounded";
 export let value;
 export let variant = "regular";
-const instanceId = uuid();
+const instanceId = idGenerator.nextId("MenuButton");
 let buttonRef;
 let reference;
 let prevOpen = open;

package/MenuItem.svelte

@@ -1,5 +1,4 @@
 <script>import { createKeyborg } from "keyborg";
-import { v4 as uuid } from "uuid";
 import { getContext, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { clickOutside } from "./actions/clickOutside";
@@ -14,6 +13,7 @@ import {
   focusNextChild,
   focusPreviousChild
 } from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let composed = false;
 export let disabled = false;
@@ -34,7 +34,7 @@ const {
   onSelect = void 0
 } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
 const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(MENU_BAR_CONTEXT_KEY) || {};
-const instanceId = uuid();
+const instanceId = idGenerator.nextId("MenuItem");
 $:
   displayId = `${value}-display-${instanceId}`;
 $:

package/Radio.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import { v4 as uuid } from "uuid";
+import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
@@ -9,7 +9,7 @@ let mounted = false;
 let radioRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Radio");
   }
 }
 $: {

package/Select.svelte

@@ -1,9 +1,9 @@
 <script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuid } from "uuid";
 import { clickOutside } from "./actions/clickOutside";
+import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
-const popupId = uuid();
+const popupId = idGenerator.nextId("Select-popup");
 export let composed = false;
 export let disabled = false;
 export let open = false;

package/Switch.svelte

@@ -1,11 +1,11 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
+<script>import Label from "./Label.svelte";
+import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let disabled = false;
 export let vertical = false;
 export let onText = void 0;
 export let offText = void 0;
-const inputId = uuid();
+const inputId = idGenerator.nextId("Switch");
 let inputRef;
 let switchWidth = 0;
 let switchHeight = 0;

package/Tree.types.d.ts

@@ -14,15 +14,3 @@ export type TreeContext = {
      */
     selectedValue: Writable<string | undefined>;
 };
-/**
- * The context for a tree item.
- */
-export type TreeItemContext = {
-    /**
-     * How many levels deep this tree item is in the tree hierarchy.
-     * A top level item's depth is zero.
-     */
-    depth: number;
-    /** If the tree item is disabled */
-    disabled: Readable<boolean>;
-};

package/TreeChevron.svelte

@@ -17,7 +17,38 @@ $: {
 }
 </script>
 
-<div class="tree-chevron" class:leaf={!hasChildren} class:animate class:expanded />
+<div
+  class="tree-chevron"
+  class:leaf={!hasChildren}
+  class:animate
+  class:expanded
+  on:blur
+  on:click
+  on:dblclick
+  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
+  {...$$restProps}
+/>
 
 <style>
   .tree-chevron {

package/TreeChevron.svelte.d.ts

@@ -1,10 +1,37 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        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/TreeItem.types.d.ts

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

package/TreeItem.types.js

@@ -0,0 +1 @@
+export {};

package/TreeItemDisplay.svelte

@@ -85,6 +85,7 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item.disabled {
+    background-color: var(--stsv-Input__background-color--disabled);
     color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }

package/idGenerator.d.ts

@@ -0,0 +1,4 @@
+export declare const idGenerator: {
+    next: () => number;
+    nextId: (prefix?: string) => string;
+};

package/idGenerator.js

@@ -0,0 +1,10 @@
+let id = 0;
+const next = () => {
+    return ++id;
+};
+export const idGenerator = {
+    next,
+    nextId: (prefix) => {
+        return prefix ? `${prefix}-${next()}` : `${next()}`;
+    }
+};

package/index.d.ts

@@ -1,6 +1,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { idGenerator } from './idGenerator';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -20,7 +21,8 @@ export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
 export type { TooltipShowOn } from './Tooltip.types';
-export type { TreeContext, TreeItemContext } from './Tree.types';
+export type { TreeContext } from './Tree.types';
+export type { TreeItemContext } from './TreeItem.types';
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
 export { FIELD_STATUSES } from './Field.constants';
 export { FLOATING_PLACEMENTS } from './floating-ui.constants';

package/index.js

@@ -2,6 +2,8 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+// ----- functions ----- //
+export { idGenerator } from './idGenerator';
 // ----- theme ----- //
 export {} from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -21,12 +21,11 @@
     "@fontsource/fira-mono": "^4.5.10",
     "@fontsource/overpass": "^4.5.10",
     "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^1.0.0",
-    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^1.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -36,18 +35,17 @@
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
-    "svelte-check": "^2.9.2",
+    "svelte-check": "^3.0.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "vite": "^4.2.0",
     "vitest": "^0.25.3"
   },
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
-    "lodash-es": "^4.17.21",
-    "uuid": "^9.0.0"
+    "lodash-es": "^4.17.21"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -102,12 +100,14 @@
     "./Tree.types": "./Tree.types.js",
     "./TreeChevron.svelte": "./TreeChevron.svelte",
     "./TreeItem.svelte": "./TreeItem.svelte",
+    "./TreeItem.types": "./TreeItem.types.js",
     "./TreeItemDisplay.svelte": "./TreeItemDisplay.svelte",
     "./actions/clickOutside": "./actions/clickOutside.js",
     "./actions/forwardEvents": "./actions/forwardEvents.js",
     "./actions/portal": "./actions/portal.js",
     "./floating-ui.constants": "./floating-ui.constants.js",
     "./floating-ui.types": "./floating-ui.types.js",
+    "./idGenerator": "./idGenerator.js",
     ".": "./index.js",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",

package/theme/toggleDarkTheme.d.ts

@@ -12,7 +12,7 @@ type Params = Omit<ThemeActionParams, 'theme'> & {
  * @example ```use:toggleDarkMode={{ dark: myToggleVariable }}```
  */
 export declare const toggleDarkTheme: (node: HTMLElement, params?: Params) => {
-    destory(): void;
+    destroy(): void;
     update(params?: Params): void;
 };
 export {};

package/theme/toggleDarkTheme.js

@@ -39,7 +39,7 @@ export const toggleDarkTheme = (node, params) => {
     matchMedia.addEventListener('change', mediaChangeHandler);
     _applyTheme(node, params);
     return {
-        destory() {
+        destroy() {
             matchMedia.removeEventListener('change', mediaChangeHandler);
         },
         update(params) {