@geoffcox/sterling-svelte 2.0.3 → 2.0.5

package/dist/Label.svelte

@@ -117,7 +117,7 @@
     </div>
   {/if}
   {#if required && requiredIndicator && requiredReason}
-    <Tooltip>
+    <Tooltip class="sterling-label-tooltip">
       <div class="required">
         {@render stringOrSnippet(requiredIndicator)}
       </div>

package/dist/TextArea.svelte

@@ -15,7 +15,7 @@
   let {
     class: _class,
     disabled = false,
-    value = $bindable(''),
+    value = $bindable(),
     autoHeight = false,
     resize = $bindable('none'),
     style,

package/dist/Tooltip.svelte

@@ -27,20 +27,28 @@
     !!children ? (originRef?.previousElementSibling as HTMLElement) : undefined
   );
 
+  let delayShowTimeout: NodeJS.Timeout | undefined;
+
   const show = () => {
     if (!disabled) {
       open = true;
     }
   };
 
-  const hide = () => (open = false);
+  const hide = () => {
+    delayShowTimeout && clearTimeout(delayShowTimeout);
+    open = false;
+  };
 
   const delayShow = () => {
-    hoverDelayMilliseconds === 0
-      ? show()
-      : setTimeout(() => {
-          show();
-        }, hoverDelayMilliseconds);
+    if (hoverDelayMilliseconds === 0) {
+      show();
+    } else {
+      delayShowTimeout && clearTimeout(delayShowTimeout);
+      delayShowTimeout = setTimeout(() => {
+        show();
+      }, hoverDelayMilliseconds);
+    }
   };
 
   $effect(() => {
@@ -84,7 +92,13 @@
 
 {@render children?.()}
 <div class={['sterling-tooltip-origin', _class]} bind:this={originRef}></div>
-<Callout class={['sterling-tooltip-callout', _class]} {open} {reference} {...rest}>
+<Callout
+  class={['sterling-tooltip-callout', _class]}
+  {open}
+  {reference}
+  mainAxisOffset={8}
+  {...rest}
+>
   {#if tip}
     {#if typeof tip === 'string'}
       {tip}

package/dist/actions/applyLightDarkMode.d.ts

@@ -3,6 +3,7 @@ type Params = {
     atDocumentRoot?: boolean;
     mode?: Mode;
 };
+/** @deprecated Use colorScheme action instead with sterling-svelte-themes 2.x */
 export declare const applyLightDarkMode: (node: HTMLElement, params?: Params) => {
     destroy(): void;
     update(params?: Params): void;

package/dist/actions/applyLightDarkMode.js

@@ -8,6 +8,7 @@ const addMode = (element, mode, prefersDark) => {
 const clearModes = (element) => {
     element.classList.remove(...modes);
 };
+/** @deprecated Use colorScheme action instead with sterling-svelte-themes 2.x */
 export const applyLightDarkMode = (node, params) => {
     let mode = params?.mode || 'auto';
     let prefersDark = false;

package/dist/actions/colorScheme.d.ts

@@ -0,0 +1,8 @@
+type Params = {
+    value?: string;
+};
+export declare const colorScheme: (_node: HTMLElement, params?: Params) => {
+    destroy(): void;
+    update(params?: Params): void;
+};
+export {};

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/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 { colorScheme } from './actions/colorScheme';
 export { extraClass } from './actions/extraClass';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';

package/dist/index.js

@@ -1,6 +1,7 @@
 // ----- 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';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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",
@@ -35,7 +36,9 @@
     "select",
     "slider",
     "switch",
+    "tab",
     "tabs",
+    "tab list",
     "textarea",
     "tooltip",
     "tree"
@@ -71,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.1",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",