@pathscale/ui 2.6.1 → 2.6.3

package/dist/components/metal-border/MetalBorder.generated.js

@@ -1,7 +1,7 @@
 import { className, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./MetalBorder.css";
-import { createEffect, createSignal, omit, onCleanup, onSettled } from "solid-js";
+import { createSignal, createTrackedEffect, omit, onSettled } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { prefersReducedMotion } from "../../motion/reduced-motion.js";
 import { CLASSES, componentRecipe } from "./MetalBorder.recipe.js";
@@ -157,7 +157,7 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
                 ]
             });
         }
-        onCleanup(()=>{
+        const cleanup = ()=>{
             resizeObserver?.disconnect();
             intersectionObserver?.disconnect();
             mutationObserver?.disconnect();
@@ -166,8 +166,8 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             detachGlow();
             if (instance) destroyInstance(instance);
             instance = null;
-        });
-        if (!canvasRef || !hostRef) return;
+        };
+        if (!canvasRef || !hostRef) return cleanup;
         try {
             instance = createInstance({
                 hostCanvas: canvasRef,
@@ -183,7 +183,7 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             setIsWebGlUnavailable(false);
         } catch  {
             setIsWebGlUnavailable(true);
-            return;
+            return cleanup;
         }
         if (glow()) attachGlow();
         resizeObserver = new ResizeObserver(()=>{
@@ -204,8 +204,9 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             });
             intersectionObserver.observe(hostRef);
         }
+        return cleanup;
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         syncResolvedTheme();
         if (!instance) return;
         updateInstance(instance, {
@@ -217,13 +218,13 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             theme: resolvedTheme()
         });
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!instance) return;
         updateInstance(instance, {
             opacityMul: strength()
         });
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!instance) return;
         updateInstance(instance, {
             kind: kind(),
@@ -241,13 +242,13 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             });
         }
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!instance) return;
         updateInstance(instance, {
             paused: effectivePaused()
         });
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!instance) return;
         if (glow()) attachGlow();
         else if (glowHandles) detachGlow();

package/dist/components/popover/Popover.generated.js

@@ -1,7 +1,7 @@
 import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Popover.css";
-import { Show, createContext, createEffect, createMemo, createSignal, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, omit, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import "../_shared/material.css";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
@@ -57,10 +57,10 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         };
         document.addEventListener("pointerdown", handlePointerDown);
         document.addEventListener("keydown", handleKeyDown);
-        onCleanup(()=>{
+        return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
             document.removeEventListener("keydown", handleKeyDown);
-        });
+        };
     });
     const ctx = {
         isOpen,
@@ -175,7 +175,7 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
         autoFlip: ctx.autoFlip,
         align: ()=>"center"
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         ctx.setPlacement(overlayPosition.placement());
     });
     const style = ()=>{

package/dist/components/radio/Radio.css

@@ -82,10 +82,27 @@
     box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
   }
 
+  /*
+   * Hover has to reach a radio that carries its own indicator content.
+   *
+   * The second rule below is `:empty::before`, which is right for the dot this
+   * component draws itself: there is nothing to tint but the pseudo-element.
+   * A radio given real content — a colour swatch, an icon, a preview — has a
+   * non-empty indicator, so that half matched nothing, and the surviving half
+   * only moved `border-color` on `.radio__control`. Any consumer that also
+   * restyled the control's border then had no hover feedback at all: that is
+   * what happened to AgencyZero's colour wheel, where 31 petals gave no
+   * indication of which one the pointer was on.
+   *
+   * So the control lifts on hover as well. `transform` is the one channel a
+   * consumer's own border and background overrides cannot silently cancel, and
+   * it reads on a petal whose entire surface is already a colour.
+   */
   @media (hover: hover) {
     .radio:hover:not([data-selected="true"]):not([data-disabled="true"]) .radio__control,
     .radio[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) .radio__control {
       border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+      transform: scale(1.12);
     }
 
     .radio:hover:not([data-selected="true"]):not([data-disabled="true"]) .radio__indicator:empty::before,

package/dist/components/scroll-area/ScrollArea.generated.js

@@ -1,7 +1,7 @@
 import { insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ScrollArea.css";
-import { createEffect, createMemo, omit } from "solid-js";
+import { createMemo, createTrackedEffect, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ScrollArea.recipe.js";
 import { applyControlledScrollAreaVisibility, clearScrollAreaDataAttributes, useScrollArea } from "./useScrollArea.js";
@@ -23,7 +23,7 @@ const __solidLayoutScrollArea = (_stable, p)=>{
         isEnabled,
         onVisibilityChange: ()=>p.onVisibilityChange
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const el = containerRef;
         if (!el) return;
         if (!isEnabled()) return void clearScrollAreaDataAttributes(el);

package/dist/components/scroll-area/useScrollArea.js

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup } from "solid-js";
+import { createTrackedEffect } from "solid-js";
 const clearScrollAreaDataAttributes = (el)=>{
     delete el.dataset.topScroll;
     delete el.dataset.bottomScroll;
@@ -50,7 +50,7 @@ const applyAutoVisibilityDataAttributes = (el, orientation, hasScrollBefore, has
     delete el.dataset.leftRightScroll;
 };
 const useScrollArea = (props)=>{
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const el = props.containerRef();
         const isEnabled = props.isEnabled();
         const visibility = props.visibility();
@@ -86,12 +86,12 @@ const useScrollArea = (props)=>{
         });
         const resizeObserver = "u" > typeof ResizeObserver ? new ResizeObserver(()=>checkOverflow()) : void 0;
         resizeObserver?.observe(el);
-        onCleanup(()=>{
+        return ()=>{
             el.removeEventListener("scroll", checkOverflow);
             resizeObserver?.disconnect();
             if (null !== rafId) cancelAnimationFrame(rafId);
             prevState = null;
-        });
+        };
     });
 };
 export { applyControlledScrollAreaVisibility, clearScrollAreaDataAttributes, useScrollArea };

package/dist/components/select/Select.generated.js

@@ -1,7 +1,7 @@
 import { Portal, createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Select.css";
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Select.recipe.js";
@@ -156,14 +156,14 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
         setRootRefSignal(el);
         if ("function" == typeof p.ref) p.ref(el);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!open()) return;
         const request = focusRequest();
         if (!request) return;
         focusBoundary(request);
         setFocusRequest(null);
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const currentFocused = focusedKey();
         const currentOptions = options();
         if (currentFocused && !currentOptions.some((option)=>option.key === currentFocused)) return void setFocusedKey(void 0);
@@ -182,9 +182,9 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
             setOpen(false);
         };
         document.addEventListener("pointerdown", handlePointerDown);
-        onCleanup(()=>{
+        return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
-        });
+        };
     });
     return createComponent(SelectContext, {
         value: {
@@ -632,7 +632,7 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         });
         if ("function" == typeof p.ref) p.ref(el);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!optionRef) return;
         ctx.registerOption({
             key: key(),

package/dist/components/size-picker/sizeStore.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from "solid-js";
+import { createSignal, createTrackedEffect } from "solid-js";
 const SIZE_SCALE = {
     M: 100,
     L: 112.5,
@@ -16,7 +16,7 @@ function createSizeStore(storagePrefix) {
         return "M";
     };
     const [size, setSizeInternal] = createSignal(getInitial());
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const s = size();
         if ("u" < typeof window) return;
         localStorage.setItem(STORAGE_KEY, s);

package/dist/components/switch/Switch.css

@@ -1,5 +1,6 @@
 @layer components {
   .switch {
+    --switch-travel: 2.5rem;
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -64,9 +65,20 @@
       0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
       0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
       0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / 30%);
+    /*
+     * `transform`, not `margin`.
+     *
+     * Sliding the thumb by animating `margin-inline-start` re-runs layout on
+     * every frame of the 300ms travel, for the whole switch and whatever
+     * shares its formatting context. On a renderer where layout is the
+     * expensive phase that is what a toggle "not feeling smooth" is made of.
+     * A transform composites instead, so the same movement costs no layout at
+     * all, and `will-change` keeps it off the main thread.
+     */
     transition:
-      margin 300ms ease,
+      transform 300ms ease,
       background-color 200ms ease;
+    will-change: transform;
   }
 
   .switch__icon {
@@ -121,7 +133,7 @@
   }
 
   .switch[data-selected="true"] .switch__thumb {
-    margin-inline-start: calc(100% - 1.5rem);
+    transform: translateX(calc(var(--switch-travel, 2.5rem) - 1.625rem));
     box-shadow:
       0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
       0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
@@ -157,7 +169,7 @@
   }
 
   .switch--sm[data-selected="true"] .switch__thumb {
-    margin-inline-start: calc(100% - 1.15625rem);
+    transform: translateX(calc(2rem - 1.28125rem));
   }
 
   /* ── Size: md (default) ── */
@@ -179,7 +191,7 @@
   }
 
   .switch--lg[data-selected="true"] .switch__thumb {
-    margin-inline-start: calc(100% - 1.84375rem);
+    transform: translateX(calc(3rem - 1.96875rem));
   }
 
   /* ── Color: default ── */

package/dist/components/tabs/Tabs.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Tabs.css";
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Tabs.recipe.js";
 import { observeTabIndicator } from "./Tabs.measurement.js";
@@ -145,26 +145,26 @@ const __solidLayoutTabList = (_stable, p)=>{
             measureIndicator();
         });
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         ctx.selectedKey();
         ctx.tabs();
         scheduleMeasure();
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!listRef) return;
         const disconnect = observeTabIndicator([
             listRef,
             ...ctx.tabs().map((tab)=>tab.ref)
         ], scheduleMeasure);
-        onCleanup(disconnect);
+        return disconnect;
     });
     onSettled(()=>{
         scheduleMeasure();
         window.addEventListener("resize", scheduleMeasure);
-        onCleanup(()=>{
+        return ()=>{
             window.removeEventListener("resize", scheduleMeasure);
             if (void 0 !== rafId) cancelAnimationFrame(rafId);
-        });
+        };
     });
     var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
     ref(()=>setListRef, _el$4);

package/dist/components/theme-color-picker/ThemeColorPicker.generated.js

@@ -1,6 +1,6 @@
 import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
-import { For, Show, createEffect, createMemo, createSignal, omit, onCleanup } from "solid-js";
+import { For, Show, createMemo, createSignal, createTrackedEffect, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { ColorPickerContext, ColorWheelFlower } from "../color-wheel-flower/index.js";
 import { createColorFromHsl, parseColor } from "../color-wheel-flower/ColorUtils.js";
@@ -69,7 +69,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
         store.setThemeColor(swatch.hex);
         p.onColorChange?.(null, 0);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!isOpen()) return;
         const handleClickOutside = (e)=>{
             const target = e.target;
@@ -80,19 +80,19 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
         const timer = setTimeout(()=>{
             document.addEventListener("click", handleClickOutside);
         }, 0);
-        onCleanup(()=>{
+        return ()=>{
             clearTimeout(timer);
             document.removeEventListener("click", handleClickOutside);
-        });
+        };
     });
     const handleKeyDown = (e)=>{
         if ("Escape" === e.key && isOpen()) setIsOpen(false);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const timer = setTimeout(()=>{
             setFeatureAvailable(true);
         }, 0);
-        onCleanup(()=>clearTimeout(timer));
+        return ()=>clearTimeout(timer);
     });
     const contextValue = ()=>({
             color: colorValue,

package/dist/components/theme-color-picker/hueShift.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from "solid-js";
+import { createSignal, createTrackedEffect } from "solid-js";
 let cspAllowsInlineStyles = null;
 const checkCspAllowsInlineStyles = ()=>{
     if (null !== cspAllowsInlineStyles) return cspAllowsInlineStyles;
@@ -159,7 +159,7 @@ function createHueShiftStore(storagePrefix) {
         const color = readThemeColor();
         if (null !== color) applyThemeColor(color);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const color = themeColor();
         if ("u" < typeof window) return;
         if (null === color) {

package/dist/components/toast/Toast.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Toast.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, omit, onCleanup, useContext } from "solid-js";
+import { For, Show, createContext, createMemo, createSignal, createTrackedEffect, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import button_0 from "../button/index.js";
 import close_button from "../close-button/index.js";
@@ -601,7 +601,7 @@ const __solidLayoutToastProvider = (_stable, p)=>{
         if (!node) return void itemRefs.delete(key);
         itemRefs.set(key, node);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const frontmostToast = toasts()[0];
         const frontmostNode = frontmostToast ? itemRefs.get(frontmostToast.key) : void 0;
         if (!frontmostNode) return void setFrontHeight(0);
@@ -612,9 +612,9 @@ const __solidLayoutToastProvider = (_stable, p)=>{
             if (entry) setFrontHeight(entry.contentRect.height);
         });
         resizeObserver.observe(frontmostNode);
-        onCleanup(()=>{
+        return ()=>{
             resizeObserver.disconnect();
-        });
+        };
     });
     const widthValue = createMemo(()=>{
         if ("number" == typeof p.width) return `${p.width}px`;

package/dist/components/tooltip/Tooltip.generated.js

@@ -1,7 +1,7 @@
 import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Tooltip.css";
-import { Show, createContext, createEffect, createSignal, omit, onCleanup, useContext } from "solid-js";
+import { Show, createContext, createSignal, createTrackedEffect, omit, onCleanup, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Tooltip.recipe.js";
@@ -138,7 +138,7 @@ const __solidLayoutTooltipContent = (_stable, p)=>{
         autoFlip: ctx.autoFlip,
         align: ()=>"center"
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         ctx.setPlacement(overlayPosition.placement());
     });
     const style = ()=>{

package/dist/components/video-preview/VideoPreview.generated.js

@@ -1,6 +1,6 @@
 import { createComponent, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
-import { Show, createEffect, omit, onCleanup } from "solid-js";
+import { Show, createTrackedEffect, omit, onCleanup } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./VideoPreview.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<video>");
@@ -14,7 +14,7 @@ const __solidLayoutVideoPreview = (_stable, p)=>{
         },
         children: (stream)=>{
             let videoRef;
-            createEffect(()=>{
+            createTrackedEffect(()=>{
                 videoRef.srcObject = stream();
             });
             onCleanup(()=>{

package/dist/hooks/date/usePickerOpenState.js

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, onCleanup, onSettled } from "solid-js";
+import { createMemo, createSignal, createTrackedEffect, onSettled } from "solid-js";
 const usePickerOpenState = (options)=>{
     const [internalOpen, setInternalOpen] = createSignal(Boolean(options.defaultOpen()));
     const [rootRef, setRootRef] = createSignal(void 0);
@@ -29,12 +29,12 @@ const usePickerOpenState = (options)=>{
         };
         document.addEventListener("pointerdown", handlePointerDown);
         document.addEventListener("keydown", handleGlobalKeyDown);
-        onCleanup(()=>{
+        return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
             document.removeEventListener("keydown", handleGlobalKeyDown);
-        });
+        };
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!options.isDisabled()) return;
         if (!isOpen()) return;
         setOpen(false);

package/dist/hooks/table/useAnchoredOverlayPosition.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup } from "solid-js";
+import { createSignal, createTrackedEffect } from "solid-js";
 const resolveNumber = (value)=>{
     if ("function" == typeof value) return value();
     return value;
@@ -39,7 +39,7 @@ const useAnchoredOverlayPosition = (options)=>{
             "z-index": options.zIndex?.toString() ?? "1300"
         });
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!options.isOpen()) return;
         requestAnimationFrame(()=>{
             updatePosition();
@@ -48,10 +48,10 @@ const useAnchoredOverlayPosition = (options)=>{
         const onViewportChange = ()=>updatePosition();
         window.addEventListener("resize", onViewportChange);
         window.addEventListener("scroll", onViewportChange, true);
-        onCleanup(()=>{
+        return ()=>{
             window.removeEventListener("resize", onViewportChange);
             window.removeEventListener("scroll", onViewportChange, true);
-        });
+        };
     });
     return {
         style,

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/motion/solid/AnimatedCollapse.js

@@ -1,5 +1,5 @@
 import { className, createComponent, effect, insert, ref, setAttribute, style, template } from "@solidjs/web";
-import { Show, createEffect, createSignal, onCleanup, untrack } from "solid-js";
+import { Show, createSignal, createTrackedEffect, onCleanup, untrack } from "solid-js";
 import { getMotionDriver } from "../driver.js";
 import { resolveEase } from "../easing.js";
 import { prefersReducedMotion } from "../reduced-motion.js";
@@ -85,7 +85,7 @@ const AnimatedCollapse = (props)=>{
             teardownObserver();
         }
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const open = props.open;
         untrack(()=>{
             const target = nextCollapsePhase(phase(), open);

package/dist/motion/solid/MotionDiv.js

@@ -1,5 +1,5 @@
 import { insert, ref, spread, template } from "@solidjs/web";
-import { createEffect, createSignal, omit, onCleanup } from "solid-js";
+import { createSignal, createTrackedEffect, omit, onCleanup } from "solid-js";
 import { runMotion } from "../engine.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const MotionDiv = (props)=>{
@@ -23,7 +23,7 @@ const MotionDiv = (props)=>{
         stopActive();
         activeControl = runMotion(target, from ?? {}, to ?? {}, transition, onComplete);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const target = elementRef();
         if (!target) return;
         const isExiting = Boolean(props.isExiting);

package/dist/motion/solid/Presence.js

@@ -1,5 +1,5 @@
 import { createComponent } from "@solidjs/web";
-import { Show, createEffect, createSignal, onCleanup, untrack } from "solid-js";
+import { Show, createSignal, createTrackedEffect, onCleanup, untrack } from "solid-js";
 import { prefersReducedMotion } from "../reduced-motion.js";
 import { nextPresenceState } from "./presenceState.js";
 const DEFAULT_EXIT_TIMEOUT = 800;
@@ -22,7 +22,7 @@ const Presence = (props)=>{
                 isExiting: false
             } : prev);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const when = props.when;
         untrack(()=>{
             const next = nextPresenceState(state(), when);

package/dist/primitives/streaming/useStreamingSubscription.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup } from "solid-js";
+import { createSignal, createTrackedEffect, onCleanup } from "solid-js";
 const resolveOption = (value)=>{
     if ("function" == typeof value) return value();
     return value;
@@ -95,7 +95,7 @@ const useStreamingSubscription = (options)=>{
             observer.error(nextError);
         }
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const shouldEnable = resolveOption(options.enabled ?? true);
         if (!shouldEnable) return void stop();
         if (!isRunning) start();

package/dist/purge-manifest.json

@@ -14685,7 +14685,8 @@
           "--switch-control-bg-hover",
           "--switch-control-bg-pressed",
           "--switch-control-border",
-          "--switch-control-border-checked"
+          "--switch-control-border-checked",
+          "--switch-travel"
         ],
         "referenced": [
           "--border",
@@ -14709,7 +14710,8 @@
           "--switch-control-bg-hover",
           "--switch-control-bg-pressed",
           "--switch-control-border",
-          "--switch-control-border-checked"
+          "--switch-control-border-checked",
+          "--switch-travel"
         ]
       },
       "keyframes": {
@@ -34432,6 +34434,14 @@
           "Switch"
         ]
       },
+      "--switch-travel": {
+        "declaredBy": [
+          "Switch"
+        ],
+        "referencedBy": [
+          "Switch"
+        ]
+      },
       "--dropdown-trigger-bg": {
         "declaredBy": [
           "Dropdown"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "author": "pathscale",
   "repository": {
     "type": "git",