@geoffcox/sterling-svelte 1.0.10 → 1.0.11

package/dist/Callout.svelte

@@ -14,7 +14,7 @@ export let mainAxisOffset = 0;
 /** When true, the callout is open and visible. */
 export let open = false;
 /** How the callout should be positioned relative to the reference element. */
-export let placement = 'bottom-start';
+export let placement = 'top-start';
 /** The host container for the callout. */
 export let portalHost = undefined;
 /** The reference to the element anchoring the position of the callout. */

package/dist/ColorPicker.svelte

@@ -1,5 +1,5 @@
 <script>import { tick } from 'svelte';
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import Dropdown from './Dropdown.svelte';
 import Input from './Input.svelte';
 import Tab from './Tab.svelte';
@@ -22,6 +22,10 @@ export let disabled = false;
 export let open = false;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the value input. */
+export let valueVariant = '';
+/** Additional class names to apply to sliders. */
+export let sliderVariant = '';
 // ----- State ----- //
 let hue = 0;
 let saturation = 0;
@@ -41,7 +45,7 @@ const updateFromRgb = async () => {
         if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
             updating = true;
             const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
-            const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
+            const color = new TinyColor({ r: red, g: green, b: blue, a: newAlpha });
             const hsl = color.toHsl();
             hue = Math.round(hsl.h);
             saturation = Math.round(hsl.s * 100);
@@ -66,7 +70,7 @@ const updateFromHsl = async () => {
     if (globalThis.window) {
         if (!updating && colorFormat === 'hsl') {
             updating = true;
-            const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
+            const color = new TinyColor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
             const rgb = color.toRgb();
             red = rgb.r;
             green = rgb.g;
@@ -81,7 +85,7 @@ const updateFromHsl = async () => {
 const updateColorsFromText = async () => {
     // tinycolor requires window
     if (globalThis.window) {
-        const color = tinycolor(colorText);
+        const color = new TinyColor(colorText);
         if (color.isValid) {
             if (!updating) {
                 updating = true;
@@ -144,13 +148,13 @@ $: {
 }
 // ----- Event handlers ----- //
 const onInputBlur = async () => {
-    if (globalThis.window && tinycolor) {
+    if (globalThis.window) {
         if (!updating) {
             if (colorText.trim().length === 0) {
                 colorText = defaultColorText;
                 return;
             }
-            const color = tinycolor(colorText);
+            const color = new TinyColor(colorText);
             if (color.isValid) {
                 updating = true;
                 switch (colorFormat) {
@@ -234,6 +238,7 @@ updateColorsFromText();
     on:mouseup
     on:wheel
     on:paste
+    {variant}
     {...$$restProps}
   >
     <div class="value" slot="value">
@@ -245,7 +250,7 @@ updateColorsFromText();
         on:click={onInputClick}
         on:keydown={onInputKeydown}
         spellcheck="false"
-        variant={`composed ${variant}`}
+        variant={`composed ${valueVariant}`}
       />
     </div>
     <div class="sterling-color-picker-popup" use:trapKeyboardFocus>
@@ -258,11 +263,23 @@ updateColorsFromText();
       </div>
       <div class="sliders">
         {#if colorFormat === 'rgb'}
-          <RgbColorSliders bind:red bind:green bind:blue bind:alpha />
+          <RgbColorSliders bind:red bind:green bind:blue bind:alpha variant={sliderVariant} />
         {:else if colorFormat === 'hex'}
-          <HexColorSliders bind:red bind:green bind:blue bind:alpha={hexAlpha} />
+          <HexColorSliders
+            bind:red
+            bind:green
+            bind:blue
+            bind:alpha={hexAlpha}
+            variant={sliderVariant}
+          />
         {:else if colorFormat === 'hsl'}
-          <HslColorSliders bind:hue bind:saturation bind:lightness bind:alpha />
+          <HslColorSliders
+            bind:hue
+            bind:saturation
+            bind:lightness
+            bind:alpha
+            variant={sliderVariant}
+          />
         {/if}
       </div>
     </div>

package/dist/ColorPicker.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         open?: boolean | undefined;
         variant?: string | undefined;
+        valueVariant?: string | undefined;
+        sliderVariant?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/dist/Dialog.svelte

@@ -39,17 +39,18 @@ const showDialog = () => {
     if (dialogRef?.open === false) {
         // when open, track clicks outside the dialog (use capture = true)
         document.addEventListener('click', onDocumentClick, true);
+        returnValue = '';
         dialogRef.showModal();
     }
     open = true;
 };
-const closeDialog = (returnValue = '') => {
+const closeDialog = async () => {
     if (dialogRef?.open === true) {
         // when closed, stop tracking clicks outside the dialog
         document.removeEventListener('click', onDocumentClick);
         // to allow time for the CSS transition animation, closing the dialog is delayed
         closing = true;
-        tick();
+        await tick();
         setTimeout(() => {
             dialogRef.close(returnValue);
             open = false;
@@ -73,6 +74,7 @@ const onCancel = (event) => {
     // To allow animation with closeDialog, this event is canceled.
     event.preventDefault();
     event.stopPropagation();
+    returnValue = '';
     closeDialog();
     return false;
 };
@@ -84,9 +86,11 @@ const onSubmit = (event) => {
     const anyEvent = event;
     if (anyEvent?.submitter.type === 'submit') {
         if (dialogRef.open) {
-            closeDialog(anyEvent?.submitter.value ?? '');
+            const eventSubmitter = anyEvent?.submitter;
+            returnValue = eventSubmitter?.value ?? '';
+            closeDialog();
             setTimeout(() => {
-                formRef.requestSubmit(anyEvent?.submitter);
+                formRef.requestSubmit(eventSubmitter);
             }, dialogFadeDuration);
             event.preventDefault();
             return false;
@@ -97,11 +101,6 @@ const onSubmit = (event) => {
         return false;
     }
 };
-const onClose = (event) => {
-    // This event is not cancelable.
-    // Update the returnValue whenever the dialog closes.
-    returnValue = dialogRef.returnValue;
-};
 $: {
     updateDialog(open);
 }
@@ -110,10 +109,8 @@ onMount(() => {
     // Use the dialog for any element portals
     portalHostStore.set(dialogRef);
     dialogRef.addEventListener('cancel', onCancel);
-    dialogRef.addEventListener('close', onClose);
     return () => {
         dialogRef?.removeEventListener('cancel', onCancel);
-        dialogRef?.removeEventListener('close', onClose);
         portalHostStore.set(undefined);
     };
 });

package/dist/HslColorSliders.svelte

@@ -4,11 +4,11 @@ import Slider from './Slider.svelte';
 import { round } from 'lodash-es';
 // ----- Props ----- //
 /** The hue value. */
-export let hue = 180;
+export let hue = 0;
 /** The saturation value. */
-export let saturation = 100;
+export let saturation = 0;
 /** The lightness value. */
-export let lightness = 50;
+export let lightness = 0;
 /** The alpha value. */
 export let alpha = 1;
 /** Additional class names to apply. */

package/dist/List.svelte

@@ -114,7 +114,6 @@ export const selectNextItem = () => {
 };
 export const selectLastItem = () => {
     let candidate = listRef?.querySelector('[data-value][role=listitem]:last-of-type');
-    console.log('in selectLastItem', candidate);
     while (candidate && !isElementListItem(candidate)) {
         candidate = candidate.previousElementSibling;
     }

package/dist/MenuButton.svelte

@@ -7,14 +7,11 @@ import { idGenerator } from './idGenerator';
 import Popover from './Popover.svelte';
 import { clickOutside } from './actions/clickOutside';
 // ----- Props ----- //
-/** When true, the menu is open. */
 export let open = false;
-/** The value uniquely identifying this menu button as the root of the menu hierarchy. */
+export let menuVariant = '';
+export let popoverPlacement = 'bottom-start';
 export let value;
-/** Additional class names to apply. */
 export let variant = '';
-/** Additional class names to apply to the Menu*/
-export let menuVariant = '';
 // ----- State ----- //
 const instanceId = idGenerator.nextId('MenuButton');
 let buttonRef;
@@ -66,7 +63,6 @@ $: {
     }
     prevOpen = open;
 }
-// ----- Event Handlers ----- //
 const closeAllMenus = () => {
     openValues.set([]);
 };
@@ -81,7 +77,7 @@ const onClickOutside = (event) => {
     }
     closeAllMenus?.();
 };
-// ----- Set Context ----- //
+// ----- Context ----- //
 setContext(MENU_ITEM_CONTEXT_KEY, {
     depth: 1,
     openValues,
@@ -95,10 +91,6 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
 });
 </script>
 
-<!--
-      @component
-      A Button that displays a context menu when clicked.
-  -->
 <Button
   bind:this={buttonRef}
   aria-controls={menuId}
@@ -145,7 +137,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
     <slot {open} {value} {variant} />
   </div>
-  <Popover {reference} {open}>
+  <Popover {reference} {open} placement={popoverPlacement}>
     <Menu bind:this={menuRef} id={menuId} {reference} {open} variant={menuVariant}>
       <slot name="items" />
     </Menu>

package/dist/MenuButton.svelte.d.ts

@@ -3,9 +3,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
+        menuVariant?: string | undefined;
+        popoverPlacement?: string | undefined;
         value: string;
         variant?: string | undefined;
-        menuVariant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -62,7 +63,6 @@ declare const __propDef: {
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
-/** A Button that displays a context menu when clicked. */
 export default class MenuButton extends SvelteComponent<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
     get click(): () => void;
     get blur(): () => void;

package/dist/MenuItem.types.d.ts

@@ -11,7 +11,7 @@ export type MenuItemRegistration = {
 };
 export type MenuItemContext = {
     /**
-     * If the menu item is a top-elvel item in a menu bar
+     * If the menu item is a top-level item in a menu bar
      */
     isMenuBarItem?: boolean;
     /**

package/dist/Popover.svelte

@@ -12,7 +12,7 @@ export let mainAxisOffset = 0;
 /** When true, the popover is open and visible. */
 export let open = false;
 /** How the popover should be positioned relative to the reference element. */
-export let placement = 'bottom-start';
+export let placement = 'top-start';
 /** The host container for the callout. */
 export let portalHost = undefined;
 /** The reference to the element anchoring the position of the popover. */

package/dist/TextArea.svelte

@@ -1,4 +1,4 @@
-<script>import { onMount } from 'svelte';
+<script>import { onMount, tick } from 'svelte';
 // ----- Props ----- //
 export let disabled = false;
 export let value = '';
@@ -10,6 +10,24 @@ export let resize = 'none';
 export let variant = '';
 // ----- State ----- //
 let textAreaRef;
+const correctResize = async () => {
+    console.log('correctResize');
+    await tick();
+    setTimeout(() => {
+        if (autoHeight) {
+            if (resize === 'both') {
+                console.warn('The resize property cannot be set to "both" when autoHeight is true. The resize property will be set to "horizontal".');
+                resize = 'horizontal';
+            }
+            if (resize === 'vertical') {
+                console.warn('The resize property cannot be set to "vertical" when autoHeight is true. The resize property will be set to "none".');
+                resize = 'none';
+            }
+        }
+    }, 0);
+};
+$: autoHeight, resize, correctResize();
+// ----- autoHeight ----- //
 const autoSetHeight = () => {
     if (autoHeight && textAreaRef) {
         // the style must be directly set to avoid re-rendering looping latency
@@ -18,11 +36,11 @@ const autoSetHeight = () => {
         textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
     }
 };
+$: autoHeight, autoSetHeight();
 // ----- Event Handlers ----- //
 const onInput = () => {
     autoSetHeight();
 };
-$: autoHeight, autoSetHeight();
 onMount(() => {
     autoSetHeight();
 });

package/dist/Tooltip.svelte

@@ -6,7 +6,7 @@ export let conditionalRender = true;
 export let crossAxisOffset = 0;
 export let mainAxisOffset = 0;
 export let open = false;
-export let placement = 'bottom-start';
+export let placement = 'top-start';
 export let portalHost = undefined;
 export let variant = '';
 /** When true, the tooltip is disabled and will not be shown. */

package/dist/css/Input.base.css

@@ -20,7 +20,10 @@
   margin: 0;
   outline: none;
   padding: 0.5em;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   width: 100%;
 }
 
@@ -78,7 +81,7 @@ input::placeholder {
   transition: opacity 250ms;
 }
 
-.sterling-input.disabled::after {
+.sterling-input:not(.composed).disabled::after {
   opacity: 1;
 }
 

package/dist/css/Link.base.css

@@ -5,14 +5,17 @@
   border-right: none;
   border-radius: 0;
   border-bottom-style: solid;
-  border-bottom-width: calc(2px);
+  border-bottom-width: 2px;
   border-bottom-color: var(--stsv-common__border-color);
   color: var(--stsv-common__color);
   cursor: pointer;
   font: inherit;
   text-decoration: none;
   text-overflow: ellipsis;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   white-space: nowrap;
   user-select: none;
 }
@@ -37,10 +40,9 @@
 .sterling-link.disabled:visited,
 .sterling-link.disabled:hover,
 .sterling-link.disabled:active {
-  border-bottom-color: var(--stsv-common__border-color--disabled);
-  color: var(--stsv-common__color--disabled);
-  cursor: not-allowed;
+  border-bottom-color: var(--stsv-common__color--faint);
   pointer-events: none;
+  position: relative;
 }
 
 /* ----- prefers-reduced-motion ----- */

package/dist/css/Link.css

@@ -2,5 +2,9 @@
 @import url('./Link.colorful.css');
 @import url('./Link.ghost.css');
 @import url('./Link.ghost.colorful.css');
+@import url('./Link.text-underline.css');
+@import url('./Link.text-underline.ghost.css');
 @import url('./Link.undecorated.css');
 @import url('./Link.undecorated.colorful.css');
+@import url('./Link.undecorated.ghost.css');
+@import url('./Link.undecorated.underline.css');

package/dist/css/Link.text-underline.css

@@ -0,0 +1,8 @@
+.sterling-link.text-underline,
+.sterling-link.text-underline:hover,
+.sterling-link.text-underline:active,
+.sterling-link.text-underline:visited {
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  text-decoration: underline;
+}

package/dist/css/Link.text-underline.ghost.css

@@ -0,0 +1,13 @@
+.sterling-link.text-underline.ghost,
+.sterling-link.text-underline.ghost:visited {
+  border-bottom-color: transparent;
+  border-bottom-width: 0;
+  text-decoration: none;
+}
+
+.sterling-link.text-underline.ghost:hover,
+.sterling-link.text-underline.ghost:active {
+  border-bottom-color: transparent;
+  border-bottom-width: 0;
+  text-decoration: underline;
+}

package/dist/css/Link.undecorated.colorful.css

@@ -2,5 +2,7 @@
 .sterling-link.undecorated.colorful:hover,
 .sterling-link.undecorated.colorful:active,
 .sterling-link.undecorated.colorful:visited {
+  border-bottom-width: 0;
   border-bottom-color: transparent;
+  text-decoration: none;
 }

package/dist/css/Link.undecorated.css

@@ -2,5 +2,7 @@
 .sterling-link.undecorated:hover,
 .sterling-link.undecorated:active,
 .sterling-link.undecorated:visited {
+  border-bottom-width: 0;
   border-bottom-color: transparent;
+  text-decoration: none;
 }

package/dist/css/Link.undecorated.ghost.css

@@ -0,0 +1,8 @@
+.sterling-link.undecorated.ghost,
+.sterling-link.undecorated.ghost:hover,
+.sterling-link.undecorated.ghost:active,
+.sterling-link.undecorated.ghost:visited {
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  text-decoration: none;
+}

package/dist/css/Link.undecorated.underline.css

@@ -0,0 +1,8 @@
+.sterling-link.undecorated.underline,
+.sterling-link.undecorated.underline:hover,
+.sterling-link.undecorated.underline:active,
+.sterling-link.undecorated.underline:visited {
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  text-decoration: none;
+}

package/dist/css/MenuItemDisplay.base.css

@@ -5,6 +5,7 @@
   grid-template-columns: 1em 1fr 1em;
   column-gap: 0.5em;
   padding: 0.25em;
+  position: relative;
 }
 
 .sterling-menu-item-display .check {
@@ -13,7 +14,10 @@
   width: 20px;
   height: 20px;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-menu-item-display .check.checkmark.checked::after {

package/dist/css/Slider.base.css

@@ -4,7 +4,10 @@
   padding: 0;
   overflow: visible;
   display: grid;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-slider.horizontal {
@@ -44,7 +47,10 @@
 .sterling-slider .track {
   position: absolute;
   background: var(--stsv-common__background-color--secondary);
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-slider.horizontal .track {
@@ -75,7 +81,10 @@
 .sterling-slider .fill {
   background: var(--stsv-common__color);
   position: absolute;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-slider.horizontal .fill {
@@ -107,9 +116,11 @@
   height: 1.5em;
   overflow: hidden;
   padding: 0;
-  position: relative;
   text-decoration: none;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   white-space: nowrap;
   position: absolute;
   width: 1.5em;
@@ -141,7 +152,6 @@
 
 .sterling-slider.disabled .thumb {
   cursor: not-allowed;
-  position: relative;
   outline: none;
 }
 

package/dist/css/Switch.base.css

@@ -67,7 +67,10 @@
   font: inherit;
   pointer-events: none;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   user-select: none;
 }
 
@@ -87,6 +90,12 @@ input:focus-visible ~ .switch {
   outline-width: 2px;
 }
 
+input:checked ~ .switch,
+input:checked:hover ~ .switch,
+input:checked:focus-visible ~ .switch {
+  background-color: var(--stsv-input__border-color--hover);
+}
+
 /* ----- switch vertical ----- */
 
 .sterling-switch:not(.vertical) .switch {
@@ -126,7 +135,11 @@ input:focus-visible ~ .switch {
   font: inherit;
   height: 1.25em;
   position: absolute;
-  transition: background-color 250ms, color 250ms, border-color 250ms, transform 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms,
+    transform 250ms;
   width: 1.25em;
 }
 

package/dist/css/Switch.colorful.css

@@ -18,6 +18,12 @@
   color: var(--stsv-input--colorful__color--focus);
 }
 
+.sterling-switch.colorful input:checked ~ .switch,
+.sterling-switch.colorful input:checked:hover ~ .switch,
+.sterling-switch.colorful input:checked:focus-visible ~ .switch {
+  background-color: var(--stsv-input--colorful__border-color--hover);
+}
+
 /* ----- thumb colorful ----- */
 
 .sterling-switch.colorful .thumb {

package/dist/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@geoffcox/sterling-svelte",
+  "version": "1.0.11",
+  "author": "Geoff Cox",
+  "description": "A modern, accessible, and lightweight UI component library for Svelte.",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/GeoffCox/sterling-svelte/issues"
+  },
+  "homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
+  "keywords": [
+    "svelte",
+    "svelte 4",
+    "sveltekit",
+    "design system",
+    "component",
+    "components",
+    "controls",
+    "typescript",
+    "javascript",
+    "button",
+    "callout",
+    "checkbox",
+    "colorpicker",
+    "dialog",
+    "dropdown",
+    "input",
+    "label",
+    "link",
+    "list",
+    "menu",
+    "popover",
+    "progress",
+    "radio",
+    "select",
+    "slider",
+    "switch",
+    "tabs",
+    "textarea",
+    "tooltip",
+    "tree"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    },
+    "./css/*.css": "./css/*.css",
+    "./*.svelte": "./**/*.svelte"
+  },
+  "files": [
+    "**/*",
+    "!**/*.test.*",
+    "!**/*.spec.*"
+  ],
+  "scripts": {
+    "build": "vite build && npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
+    "test": "npm run test:integration && npm run test:unit",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "devDependencies": {
+    "@fontsource/open-sans": "^4.5.14",
+    "@fontsource/source-code-pro": "^4.5.14",
+    "@playwright/test": "^1.28.1",
+    "@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",
+    "@types/eslint": "^8.56.7",
+    "@types/lodash-es": "^4.17.6",
+    "eslint": "^9.0.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",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0-alpha.20",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.1.0",
+    "@floating-ui/dom": "^1.1.0",
+    "keyborg": "^2.0.0",
+    "lodash-es": "^4.17.21"
+  },
+  "svelte": "./index.js",
+  "types": "./index.d.ts",
+  "type": "module"
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "author": "Geoff Cox",
-  "description": "A modern, accessible, and lightweight component library for Svelte.",
+  "description": "A modern, accessible, and lightweight UI component library for Svelte.",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/GeoffCox/sterling-svelte/issues"
@@ -80,7 +80,6 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "^8.56.7",
     "@types/lodash-es": "^4.17.6",
-    "@types/tinycolor2": "^1.4.3",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
@@ -98,7 +97,7 @@
     "vitest": "^1.2.0"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^3.6.0",
+    "@ctrl/tinycolor": "^4.1.0",
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"