@geoffcox/sterling-svelte 1.0.3 → 1.0.5

package/Callout.svelte

@@ -30,7 +30,7 @@ let bodyHeight = 0;
 let resizeObserver = undefined;
 // ----- Portal Host ----- //
 const ensurePortalHost = () => {
-    if (document) {
+    if (globalThis?.document) {
         if (portalHost) {
             return portalHost;
         }
@@ -142,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

@@ -1,4 +1,5 @@
 <script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 export let checked = false;
 export let disabled = false;
@@ -28,7 +29,12 @@ 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
+  class:using-keyboard={$usingKeyboard}
+>
   <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/Input.svelte

@@ -44,7 +44,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     <slot {disabled} {value} {variant} />
   </label>
 {/if}
-<div class={`sterling-input ${variant}`} class:disabled>
+<div class={`sterling-input ${variant}`} class:disabled class:using-keyboard={$usingKeyboard}>
   <input
     bind:this={inputRef}
     class:using-keyboard={$usingKeyboard}

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/Popover.svelte

@@ -27,7 +27,7 @@ let bodyHeight = 0;
 let resizeObserver = undefined;
 // ----- Portal Host ----- //
 const ensurePortalHost = () => {
-    if (document) {
+    if (globalThis?.document) {
         if (portalHost) {
             return portalHost;
         }
@@ -87,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/Radio.svelte

@@ -1,4 +1,5 @@
 <script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 export let checked = false;
 export let disabled = false;
@@ -73,7 +74,12 @@ const onChange = (e) => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class={`sterling-radio ${variant}`} class:disabled>
+<div
+  class={`sterling-radio ${variant}`}
+  class:checked
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
   <div class="container">
     <input
       bind:this={inputRef}

package/Switch.svelte

@@ -1,4 +1,5 @@
 <script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 export let checked = false;
 export let disabled = false;
@@ -39,7 +40,13 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class={`sterling-switch ${variant}`} class:disabled class:vertical>
+<div
+  class={`sterling-switch ${variant}`}
+  class:checked
+  class:disabled
+  class:vertical
+  class:using-keyboard={$usingKeyboard}
+>
   <input
     bind:this={inputRef}
     bind:checked

package/css/Radio.button.css

@@ -0,0 +1,113 @@
+.sterling-radio.button {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font: inherit;
+  justify-content: center;
+  justify-items: center;
+  margin-left: -2px;
+  overflow: hidden;
+  padding: 0.5em 1em;
+  position: relative;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* .sterling-radio.button:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left-width: 2px;
+}
+
+.sterling-radio.button:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+} */
+
+.sterling-radio.button:not(.checked):not(.disabled):hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-radio.button.checked {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+.sterling-radio.button.using-keyboard:focus-within {
+  border-color: var(--stsv-button__border-color--focus);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+  z-index: 1;
+}
+
+.sterling-radio.button .container {
+  margin-right: 0;
+}
+
+.sterling-radio.button input {
+  height: 0;
+  width: 0;
+}
+
+.sterling-radio.button.disabled * {
+  cursor: not-allowed;
+}
+
+.sterling-radio.button.disabled::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    var(--stsv-common--disabled__stripe-angle),
+    var(--stsv-common--disabled__stripe-color),
+    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt)
+      calc(2 * var(--stsv-common--disabled__stripe-width))
+  );
+  pointer-events: none;
+}
+
+.sterling-radio.button .indicator,
+.sterling-radio.button input:checked + .indicator,
+.sterling-radio.button:not(.disabled):hover .indicator,
+.sterling-radio.button input:focus-visible + .indicator {
+  display: none;
+}
+
+.sterling-radio.button .indicator::after,
+.sterling-radio.button input:checked + .indicator::after {
+  display: none;
+}
+.sterling-radio.button .container::after,
+.sterling-radio.button.disabled .container::after {
+  display: none;
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-radio.button,
+  .sterling-radio.button::after {
+    transition: none;
+  }
+}

package/css/Radio.css

@@ -1,2 +1,3 @@
 @import url('./Radio.base.css');
 @import url('./Radio.colorful.css');
+@import url('./Radio.button.css');

package/css/Tab.base.css

@@ -36,6 +36,7 @@
   justify-content: flex-end;
   justify-items: flex-end;
   column-gap: 0.15em;
+  padding: 0.25em 1em;
 }
 
 .sterling-tab.using-keyboard:focus-visible {
@@ -82,10 +83,6 @@
   padding: 0 0.2em;
 }
 
-.sterling-tab.vertical .content .text {
-  padding-top: 0.25em;
-}
-
 /* ----- indicator -----*/
 
 .sterling-tab .indicator {

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.3",
+  "version": "1.0.5",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -78,6 +78,7 @@
   },
   "exports": {
     "./package.json": "./package.json",
+    "./.DS_Store": "./.DS_Store",
     "./Button.constants": "./Button.constants.js",
     "./Button.svelte": "./Button.svelte",
     "./Button.types": "./Button.types.js",
@@ -204,6 +205,7 @@
     "./css/Progress.base.css": "./css/Progress.base.css",
     "./css/Progress.css": "./css/Progress.css",
     "./css/Radio.base.css": "./css/Radio.base.css",
+    "./css/Radio.button.css": "./css/Radio.button.css",
     "./css/Radio.colorful.css": "./css/Radio.colorful.css",
     "./css/Radio.css": "./css/Radio.css",
     "./css/RgbColorSliders.base.css": "./css/RgbColorSliders.base.css",