@geoffcox/sterling-svelte 1.0.1 → 1.0.4

package/Callout.svelte

@@ -26,9 +26,11 @@ let popupRef;
 let arrowRef;
 let popupPosition = { x: 0, y: 0 };
 $: floatingUIPlacement = placement;
+let bodyHeight = 0;
+let resizeObserver = undefined;
 // ----- Portal Host ----- //
 const ensurePortalHost = () => {
-    if (document) {
+    if (globalThis?.document) {
         if (portalHost) {
             return portalHost;
         }
@@ -43,11 +45,6 @@ const ensurePortalHost = () => {
     }
 };
 // ----- Body Height Change ----- //
-let bodyHeight = 0;
-// create an Observer instance
-const resizeObserver = new ResizeObserver((entries) => {
-    bodyHeight = entries[0].target.clientHeight;
-});
 // ----- Position ----- //
 $: middleware = [
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
@@ -124,10 +121,15 @@ $: fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
 // ----- EventHandlers ----- //
 onMount(() => {
     ensurePortalHost();
+    resizeObserver = new ResizeObserver((entries) => {
+        bodyHeight = entries[0].target.clientHeight;
+    });
     // start observing a DOM node
     resizeObserver.observe(document.body);
     return () => {
-        resizeObserver.unobserve(document.body);
+        resizeObserver?.unobserve(document.body);
+        resizeObserver?.disconnect();
+        resizeObserver = undefined;
     };
 });
 const onKeydown = (event) => {
@@ -140,7 +142,7 @@ ensurePortalHost();
 
 {#if open || !conditionalRender}
   <div
-    use:portal={{ target: portalHost ?? document.body }}
+    use:portal={{ target: portalHost ?? globalThis?.document?.body }}
     class="sterling-callout-portal"
     transition:fadeMotion|global={{ duration: 250 }}
   >

package/Checkbox.svelte

@@ -28,7 +28,7 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class={`sterling-checkbox ${variant}`} class:disabled>
+<div class={`sterling-checkbox ${variant}`} class:checked class:disabled>
   <div class="container">
     <input
       bind:this={inputRef}

package/ColorPicker.svelte

@@ -36,107 +36,139 @@ let tabListRef;
 let tabsRef;
 // ----- Update HSL, RGB, Text ----- //
 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 hsl = color.toHsl();
-        hue = Math.round(hsl.h);
-        saturation = Math.round(hsl.s * 100);
-        lightness = Math.round(hsl.l * 100);
-        switch (colorFormat) {
-            case 'rgb':
-                colorText = color.toRgbString();
-                hexAlpha = Math.round(alpha * 255);
-                break;
-            case 'hex':
-                colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
-                alpha = round(hexAlpha / 255, 2);
-                break;
-        }
-        await tick();
-        updating = false;
-    }
-};
-const updateFromHsl = async () => {
-    if (!updating && colorFormat === 'hsl') {
-        updating = true;
-        const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
-        const rgb = color.toRgb();
-        red = rgb.r;
-        green = rgb.g;
-        blue = rgb.b;
-        colorText = color.toHslString();
-        hexAlpha = Math.round(alpha * 255);
-        await tick();
-        updating = false;
-    }
-};
-const updateColorsFromText = async () => {
-    const color = tinycolor(colorText);
-    if (color.isValid) {
-        if (!updating) {
+    // tinycolor requires window
+    if (globalThis.window) {
+        if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
             updating = true;
-            switch (color.format) {
-                case 'hsl':
-                    colorFormat = 'hsl';
-                    break;
+            const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
+            const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
+            const hsl = color.toHsl();
+            hue = Math.round(hsl.h);
+            saturation = Math.round(hsl.s * 100);
+            lightness = Math.round(hsl.l * 100);
+            switch (colorFormat) {
                 case 'rgb':
-                    colorFormat = 'rgb';
+                    colorText = color.toRgbString();
+                    hexAlpha = Math.round(alpha * 255);
                     break;
                 case 'hex':
-                case 'hex4':
-                case 'hex8':
-                    colorFormat = 'hex';
-                    break;
-                default:
+                    colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
+                    alpha = round(hexAlpha / 255, 2);
                     break;
             }
-            const hsl = color.toHsl();
-            hue = Math.round(hsl.h);
-            saturation = Math.round(hsl.s * 100);
-            lightness = Math.round(hsl.l * 100);
+            await tick();
+            updating = false;
+        }
+    }
+};
+const updateFromHsl = async () => {
+    // tinycolor requires window
+    if (globalThis.window) {
+        if (!updating && colorFormat === 'hsl') {
+            updating = true;
+            const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
             const rgb = color.toRgb();
             red = rgb.r;
             green = rgb.g;
             blue = rgb.b;
-            if (rgb.a) {
-                alpha = hsl.a;
-                hexAlpha = Math.round(alpha * 255);
-            }
+            colorText = color.toHslString();
+            hexAlpha = Math.round(alpha * 255);
             await tick();
             updating = false;
         }
     }
 };
-$: colorText, updateColorsFromText();
-$: colorFormat, hue, saturation, lightness, alpha, updateFromHsl();
-$: colorFormat, red, green, blue, alpha, hexAlpha, updateFromRgb();
-// ----- Event handlers ----- //
-const onInputBlur = async () => {
-    if (!updating) {
-        if (colorText.trim().length === 0) {
-            colorText = defaultColorText;
-            return;
-        }
+const updateColorsFromText = async () => {
+    // tinycolor requires window
+    if (globalThis.window) {
         const color = tinycolor(colorText);
         if (color.isValid) {
-            updating = true;
-            switch (colorFormat) {
-                case 'hsl':
-                    colorText = color.toHslString();
-                    break;
-                case 'rgb':
-                    colorText = color.toRgbString();
-                    break;
-                case 'hex':
-                    colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
-                    break;
-                default:
-                    break;
+            if (!updating) {
+                updating = true;
+                switch (color.format) {
+                    case 'hsl':
+                        colorFormat = 'hsl';
+                        break;
+                    case 'rgb':
+                        colorFormat = 'rgb';
+                        break;
+                    case 'hex':
+                    case 'hex4':
+                    case 'hex8':
+                        colorFormat = 'hex';
+                        break;
+                    default:
+                        break;
+                }
+                const hsl = color.toHsl();
+                hue = Math.round(hsl.h);
+                saturation = Math.round(hsl.s * 100);
+                lightness = Math.round(hsl.l * 100);
+                const rgb = color.toRgb();
+                red = rgb.r;
+                green = rgb.g;
+                blue = rgb.b;
+                if (rgb.a) {
+                    alpha = hsl.a;
+                    hexAlpha = Math.round(alpha * 255);
+                }
+                await tick();
+                updating = false;
+            }
+        }
+    }
+};
+$: {
+    globalThis.window;
+    colorText;
+    updateColorsFromText();
+}
+$: {
+    globalThis.window;
+    colorFormat;
+    hue;
+    saturation;
+    lightness;
+    alpha;
+    updateFromHsl();
+}
+$: {
+    globalThis.window;
+    colorFormat;
+    red;
+    green;
+    blue;
+    alpha;
+    hexAlpha;
+    updateFromRgb();
+}
+// ----- Event handlers ----- //
+const onInputBlur = async () => {
+    if (globalThis.window && tinycolor) {
+        if (!updating) {
+            if (colorText.trim().length === 0) {
+                colorText = defaultColorText;
+                return;
+            }
+            const color = tinycolor(colorText);
+            if (color.isValid) {
+                updating = true;
+                switch (colorFormat) {
+                    case 'hsl':
+                        colorText = color.toHslString();
+                        break;
+                    case 'rgb':
+                        colorText = color.toRgbString();
+                        break;
+                    case 'hex':
+                        colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
+                        break;
+                    default:
+                        break;
+                }
+                await tick();
+                updating = false;
             }
-            await tick();
-            updating = false;
         }
     }
 };

package/Dropdown.svelte

@@ -113,12 +113,16 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
   on:click_outside={onClickOutside}
   {...$$restProps}
 >
-  <div class="value">
-    <slot name="value" {disabled} {open} {variant} />
-  </div>
+  {#if $$slots.value}
+    <div class="value">
+      <slot name="value" {disabled} {open} {variant} />
+    </div>
+  {/if}
   <slot name="button" {disabled} {open} {variant}>
     <div class="button">
-      <div class="chevron" />
+      <slot name="icon" {disabled} {open} {variant}>
+        <div class="chevron" />
+      </slot>
     </div>
   </slot>
 

package/Dropdown.svelte.d.ts

@@ -52,6 +52,11 @@ declare const __propDef: {
             open: boolean;
             variant: string;
         };
+        icon: {
+            disabled: boolean;
+            open: boolean;
+            variant: string;
+        };
         default: {
             disabled: boolean;
             open: boolean;

package/Input.svelte

@@ -40,7 +40,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 </script>
 
 {#if $$slots.default}
-  <label class={`sterling-input-label ${variant}`} for={id}>
+  <label class={`sterling-input-label ${variant}`} class:disabled for={id}>
     <slot {disabled} {value} {variant} />
   </label>
 {/if}

package/Label.svelte

@@ -1,4 +1,5 @@
-<script>import Tooltip from './Tooltip.svelte';
+<script>import { onMount } from 'svelte';
+import Tooltip from './Tooltip.svelte';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 let htmlFor = undefined;
@@ -82,11 +83,15 @@ const mutationCallback = (mutations) => {
         targetDisabled = disabled;
     }
 };
-let mutationObserver = new MutationObserver(mutationCallback);
+let mutationObserver;
+onMount(() => {
+    mutationObserver = new MutationObserver(mutationCallback);
+    return () => mutationObserver?.disconnect();
+});
 $: {
-    mutationObserver.disconnect();
+    mutationObserver?.disconnect();
     if (targetRef) {
-        mutationObserver.observe(targetRef, {
+        mutationObserver?.observe(targetRef, {
             attributes: true
         });
     }

package/MenuButton.svelte

@@ -13,6 +13,8 @@ export let open = false;
 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;
@@ -144,8 +146,8 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
     <slot {open} {value} {variant} />
   </div>
   <Popover {reference} {open}>
-    <Menu bind:this={menuRef} id={menuId} {reference} {open}>
-      <slot name="items" {variant} />
+    <Menu bind:this={menuRef} id={menuId} {reference} {open} variant={menuVariant}>
+      <slot name="items" />
     </Menu>
   </Popover>
 </Button>

package/MenuButton.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         value: string;
         variant?: string | undefined;
+        menuVariant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -53,9 +54,7 @@ declare const __propDef: {
             value: string;
             variant: string;
         };
-        items: {
-            variant: string;
-        };
+        items: {};
     };
 };
 export type MenuButtonProps = typeof __propDef.props;

package/MenuItem.svelte

@@ -24,6 +24,8 @@ export let text = undefined;
 export let value;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the sub Menu*/
+export let menuVariant = '';
 // ----- Get Context ----- //
 const { isMenuBarItem, openValues = writable([]), rootValue = value, depth = 0, closeContainingMenu = undefined, onOpen = undefined, onClose = undefined, onSelect = undefined } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
 const { openPreviousMenuBarItem = undefined, openNextMenuBarItem = undefined } = getContext(MENU_BAR_CONTEXT_KEY) || {};
@@ -376,7 +378,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
       placement={isMenuBarItem ? 'bottom-start' : 'right-start'}
       {open}
     >
-      <Menu bind:this={menuRef} id={menuId}>
+      <Menu bind:this={menuRef} id={menuId} variant={menuVariant}>
         <slot {depth} {disabled} />
       </Menu>
     </Popover>

package/MenuItem.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         text?: string | undefined;
         value: string;
         variant?: string | undefined;
+        menuVariant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/Popover.svelte

@@ -23,9 +23,11 @@ export let variant = '';
 let popupRef;
 let popupPosition = { x: 0, y: 0 };
 $: floatingUIPlacement = placement;
+let bodyHeight = 0;
+let resizeObserver = undefined;
 // ----- Portal Host ----- //
 const ensurePortalHost = () => {
-    if (document) {
+    if (globalThis?.document) {
         if (portalHost) {
             return portalHost;
         }
@@ -39,12 +41,6 @@ const ensurePortalHost = () => {
         portalHost = host;
     }
 };
-// ----- Body Height Change ----- //
-let bodyHeight = 0;
-// create an Observer instance
-const resizeObserver = new ResizeObserver((entries) => {
-    bodyHeight = entries[0].target.clientHeight;
-});
 // ----- Position ----- //
 $: middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
 const computePopoverPosition = async () => {
@@ -71,10 +67,15 @@ $: open, bodyHeight, middleware, floatingUIPlacement, computePopoverPosition();
 // ----- EventHandlers ----- //
 onMount(() => {
     ensurePortalHost();
+    resizeObserver = new ResizeObserver((entries) => {
+        bodyHeight = entries[0].target.clientHeight;
+    });
     // start observing a DOM node
     resizeObserver.observe(document.body);
     return () => {
-        resizeObserver.unobserve(document.body);
+        resizeObserver?.unobserve(document.body);
+        resizeObserver?.disconnect();
+        resizeObserver = undefined;
     };
 });
 const onKeydown = (event) => {
@@ -86,7 +87,10 @@ ensurePortalHost();
 </script>
 
 {#if open || !conditionalRender}
-  <div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
+  <div
+    use:portal={{ target: portalHost ?? globalThis?.document?.body }}
+    class="sterling-popover-portal"
+  >
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       bind:this={popupRef}

package/Select.svelte

@@ -12,6 +12,8 @@ export let open = false;
 export let selectedValue = undefined;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the List*/
+export let listVariant = '';
 // ----- State ----- //
 // Tracks the previous open state
 let prevOpen = false;
@@ -209,7 +211,9 @@ const onListSelect = (event) => {
   </div>
   <div class="button">
     <slot name="button" {disabled} {open} {selectedValue} {variant}>
-      <div class="chevron" />
+      <slot name="icon" {disabled} {open} {selectedValue} {variant}>
+        <div class="chevron" />
+      </slot>
     </slot>
   </div>
   <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
@@ -222,9 +226,9 @@ const onListSelect = (event) => {
         on:keydown={onListKeydown}
         on:select={onListSelect}
         tabIndex={open ? 0 : -1}
-        variant={`composed ${variant}`}
+        variant={`composed ${listVariant}`}
       >
-        <slot {variant} />
+        <slot {variant} {listVariant} />
       </List>
     </div>
   </Popover>

package/Select.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         selectedValue?: string | undefined;
         variant?: string | undefined;
+        listVariant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -56,8 +57,15 @@ declare const __propDef: {
             selectedValue: string | undefined;
             variant: string;
         };
+        icon: {
+            disabled: boolean;
+            open: boolean;
+            selectedValue: string | undefined;
+            variant: string;
+        };
         default: {
             variant: string;
+            listVariant: string;
         };
     };
 };

package/css/Input.base.css

@@ -84,7 +84,7 @@ input::placeholder {
 
 /* ----- label ----- */
 
-label {
+.sterling-input-label {
   color: var(--stsv-common__color);
   transition: color 250ms;
   font: inherit;
@@ -94,7 +94,7 @@ label {
 
 @media (prefers-reduced-motion) {
   .sterling-input::after,
-  input {
+  .sterling-input-label {
     transition: none;
   }
 }

package/mediaQueries/prefersColorSchemeDark.js

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

package/mediaQueries/prefersReducedMotion.js

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

package/mediaQueries/usingKeyboard.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",