@pathscale/ui 2.6.0 → 2.6.2

package/README.md

@@ -162,6 +162,7 @@ import — the published size is the whole library, not what ships to your users
 | **[Live showcase](https://js.software)** | every component, rendered and interactive |
 | **[Usage reference](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)** | theming, conventions, forms, table, toast, icons, dates |
 | **[Contributing](https://github.com/pathscale/ui/blob/master/CONTRIBUTING.md)** | local setup, component checklist, proposal template |
+| **[Releasing](https://github.com/pathscale/ui/blob/master/docs/releasing.md)** | how a push to master becomes an npm version, and the gates it passes |
 
 ## License
 

package/dist/components/_shared/overlayPosition.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup } from "solid-js";
+import { createSignal, createTrackedEffect } from "solid-js";
 const oppositePlacement = {
     top: "bottom",
     bottom: "top",
@@ -36,7 +36,7 @@ const createOverlayPosition = (options)=>{
         visibility: "hidden"
     });
     const [resolvedPlacement, setResolvedPlacement] = createSignal(options.placement());
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!options.open()) {
             setResolvedPlacement(options.placement());
             setStyle({
@@ -103,12 +103,12 @@ const createOverlayPosition = (options)=>{
         const resizeObserver = "u" > typeof ResizeObserver ? new ResizeObserver(schedule) : void 0;
         if (trigger) resizeObserver?.observe(trigger);
         resizeObserver?.observe(overlay);
-        onCleanup(()=>{
+        return ()=>{
             cancelAnimationFrame(frame);
             window.removeEventListener("resize", schedule);
             window.removeEventListener("scroll", schedule, true);
             resizeObserver?.disconnect();
-        });
+        };
     });
     return {
         style,

package/dist/components/calendar/Calendar.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 "./Calendar.css";
-import { For, Show, createEffect, createMemo, createUniqueId, omit } from "solid-js";
+import { For, Show, createMemo, createTrackedEffect, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { DAYS_PER_WEEK, addDays, compareDates, getToday, normalizeDate, parseDate, shiftDateByMonths, toISODate, useCalendarNavigation, useCalendarState, useDateSelection } from "../../hooks/date/index.js";
 import { CLASSES, componentRecipe } from "./Calendar.recipe.js";
@@ -41,7 +41,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
         maxDate,
         isDateDisabled
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         navigation.syncFocusedDate(focusReferenceDate());
     });
     const calendarState = useCalendarState({

package/dist/components/checkbox/Checkbox.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 "./Checkbox.css";
-import { Show, createEffect, createSignal, omit, useContext } from "solid-js";
+import { Show, createSignal, createTrackedEffect, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CheckboxGroupContext } from "../checkbox-group/context.js";
 import { CLASSES, componentRecipe } from "./Checkbox.recipe.js";
@@ -26,7 +26,7 @@ const __solidLayoutCheckbox = (_stable, p)=>{
     const variant = ()=>p.variant ?? group?.variant() ?? "primary";
     const name = ()=>p.name ?? group?.name();
     const hasContent = ()=>null != p.children || null != p.description;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!inputRef) return;
         inputRef.indeterminate = isIndeterminate();
     });

package/dist/components/color-field/ColorField.generated.js

@@ -1,7 +1,7 @@
 import { mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorField.css";
-import { createEffect, createSignal, omit } from "solid-js";
+import { createSignal, createTrackedEffect, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { formatColor, parseColor } from "../color-wheel-flower/ColorUtils.js";
 import { CLASSES, componentRecipe } from "./ColorField.recipe.js";
@@ -29,7 +29,7 @@ const __solidLayoutColorField = (_stable, p)=>{
     const [lastValidValue, setLastValidValue] = createSignal(initialValue());
     const [isInvalid, setIsInvalid] = createSignal(false);
     const [isFocused, setIsFocused] = createSignal(false);
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const nextValue = p.value;
         const nextFormat = format();
         if (isFocused()) return;

package/dist/components/color-picker/ColorPicker.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorPicker.css";
-import { createContext, createEffect, createMemo, createSignal, omit, useContext } from "solid-js";
+import { createContext, createMemo, createSignal, createTrackedEffect, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import color_area from "../color-area/index.js";
 import color_field from "../color-field/index.js";
@@ -266,7 +266,7 @@ const __solidLayoutColorPickerRoot = (_stable, p)=>{
     const others = omit(p, "class", "children", "value", "defaultValue", "onChange", "state", "dataTheme");
     const [internalState, setInternalState] = createSignal(toColorState(p.value ?? p.defaultValue) ?? fallbackState());
     const isControlled = ()=>void 0 !== p.value;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!isControlled()) return;
         const next = toColorState(p.value);
         if (next) setInternalState(next);

package/dist/components/color-slider/ColorSlider.generated.js

@@ -1,7 +1,7 @@
 import { mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorSlider.css";
-import { createEffect, createMemo, createSignal, omit } from "solid-js";
+import { createMemo, createSignal, createTrackedEffect, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ColorSlider.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div>");
@@ -31,7 +31,7 @@ const __solidLayoutColorSlider = (_stable, p)=>{
     const [isDragging, setIsDragging] = createSignal(false);
     let sliderRef;
     const isControlled = ()=>void 0 !== p.value;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const nextType = sliderType();
         const nextValue = p.value;
         if (void 0 === nextValue) {

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorWheelFlower.css";
-import { For, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { For, createMemo, createSignal, createTrackedEffect, onCleanup } from "solid-js";
 import { clsx } from "clsx";
 import { twMerge } from "../../lib/twMerge.js";
 import color_swatch from "../color-swatch/index.js";
@@ -395,7 +395,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
             hex: item.hex
         });
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const selected = selectedIndex();
         const current = context.color();
         if (null === selected) return;
@@ -461,7 +461,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         const color = colors()[index].rgb;
         return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const node = outerRingRef;
         if (!node) return;
         const target = outerRingTarget();
@@ -621,7 +621,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                             delay
                         };
                     };
-                    createEffect(()=>{
+                    createTrackedEffect(()=>{
                         if (!motionRef) return;
                         const target = dotTarget();
                         const transition = dotTransition();

package/dist/components/combo-box/ComboBox.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ComboBox.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { For, Show, createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ComboBox.recipe.js";
 import { resolveState } from "../vocabulary.js";
@@ -141,13 +141,13 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
         closeAndCommit();
     };
     const getOptionId = (key)=>`${listBoxId}-${toOptionKey(key, 0)}`;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (void 0 !== p.inputValue) return;
         const selected = selectedItem();
         if (!selected) return;
         if (internalInputValue() !== selected.textValue) setInternalInputValue(selected.textValue);
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!isOpen()) return;
         const enabledItems = getEnabledItems();
         if (!enabledItems.length) return void setActiveKeySignal(null);
@@ -163,9 +163,9 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
             closeAndCommit();
         };
         document.addEventListener("pointerdown", handlePointerDown);
-        onCleanup(()=>{
+        return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
-        });
+        };
     });
     const hiddenValue = createMemo(()=>{
         const currentKey = selectedKey();

package/dist/components/composer/Composer.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Composer.css";
-import { For, Show, createEffect, createSignal, onSettled } from "solid-js";
+import { For, Show, createSignal, createTrackedEffect, onSettled } from "solid-js";
 import { isInvalid, resolveState } from "../vocabulary.js";
 import { composer } from "./Composer.recipe.js";
 import { afterValueLands, autosize, boundsFromRows, isSubmittable, newAutosizeMemo, shouldSubmit, viewportHeight } from "./Composer.interactions.js";
@@ -22,7 +22,7 @@ const __solidLayoutComposerLayout = (_stable, p)=>{
         if (p.autofocus) field?.focus();
         measure();
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         value();
         measure();
     });

package/dist/components/date-range-picker/DateRangePicker.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DateRangePicker.css";
-import { Show, createEffect, createMemo, createUniqueId, omit } from "solid-js";
+import { Show, createMemo, createTrackedEffect, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { formatDate, toISODate, usePickerOpenState, useRangeSelection } from "../../hooks/date/index.js";
 import calendar from "../calendar/index.js";
@@ -21,7 +21,7 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
         onOpenChange: ()=>p.onOpenChange,
         isDisabled
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (openState.isOpen()) return;
         rangeSelection.clearPendingSelection();
     });

package/dist/components/dialog/Dialog.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 "./Dialog.css";
-import { Show, createContext, createEffect, createSignal, createUniqueId, omit, onCleanup, useContext } from "solid-js";
+import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import "../_shared/material.css";
 import { CLASSES, componentRecipe } from "./Dialog.recipe.js";
@@ -83,7 +83,7 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         p.onOpenChange?.(next);
     };
     let exitTimer;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const open = isOpen();
         const state = animState();
         if (open) {
@@ -108,7 +108,7 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         if (exitTimer) clearTimeout(exitTimer);
     });
     let hasScrollLock = false;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const shouldLock = isVisibleState(animState());
         if (shouldLock && !hasScrollLock) {
             lockBodyScroll();
@@ -125,7 +125,7 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         }
     });
     let restoreFocusTarget = null;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const state = animState();
         const content = contentRef();
         if (!isVisibleState(state) || !content) return;
@@ -146,11 +146,11 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
             if ("Tab" === event.key) trapFocus(event, content);
         };
         document.addEventListener("keydown", handleDocumentKeyDown);
-        onCleanup(()=>{
+        return ()=>{
             document.removeEventListener("keydown", handleDocumentKeyDown);
-        });
+        };
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if ("closed" !== animState()) return;
         if (!restoreFocusTarget) return;
         queueMicrotask(()=>{
@@ -414,12 +414,12 @@ const __solidLayoutDialogHeading = (_stable, p)=>{
     const context = useModalContext();
     const uniqueId = createUniqueId();
     const headingId = ()=>("string" == typeof p.id ? p.id : void 0) ?? `dialog-heading-${uniqueId}`;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const id = headingId();
         context.setLabelledBy(id);
-        onCleanup(()=>{
+        return ()=>{
             if (context.labelledBy() === id) context.setLabelledBy(void 0);
-        });
+        };
     });
     var _el$7 = _tmpl$4();
     spread(_el$7, mergeProps(others, {
@@ -472,12 +472,12 @@ const __solidLayoutDialogBody = (_stable, p)=>{
     const context = useModalContext();
     const uniqueId = createUniqueId();
     const bodyId = ()=>("string" == typeof p.id ? p.id : void 0) ?? `dialog-body-${uniqueId}`;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const id = bodyId();
         context.setDescribedBy(id);
-        onCleanup(()=>{
+        return ()=>{
             if (context.describedBy() === id) context.setDescribedBy(void 0);
-        });
+        };
     });
     var _el$9 = _tmpl$();
     spread(_el$9, mergeProps(others, {

package/dist/components/drawer/Drawer.generated.js

@@ -1,7 +1,7 @@
 import { Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Drawer.css";
-import { Show, createEffect, createSignal, createUniqueId, omit, onCleanup } from "solid-js";
+import { Show, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import "../_shared/material.css";
 import { focusFirst, isSidePlacement, isVisibleState, trapFocus } from "./Drawer.a11y.js";
@@ -63,7 +63,7 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
         setIsOpen(false);
     };
     let exitTimer;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const open = isOpen();
         const state = animState();
         if (open) {
@@ -88,7 +88,7 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
         if (exitTimer) clearTimeout(exitTimer);
     });
     let hasScrollLock = false;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const visible = isVisibleState(animState());
         if (visible && !hasScrollLock) {
             lockBodyScroll();
@@ -102,7 +102,7 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
         if (hasScrollLock) unlockBodyScroll();
     });
     let restoreFocusTarget = null;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const state = animState();
         const dialog = dialogRef();
         if (!isVisibleState(state) || !dialog) return;
@@ -123,9 +123,9 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
             if ("Tab" === event.key && trapFocusEnabled()) trapFocus(event, dialog);
         };
         document.addEventListener("keydown", onKeyDown);
-        onCleanup(()=>document.removeEventListener("keydown", onKeyDown));
+        return ()=>document.removeEventListener("keydown", onKeyDown);
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if ("closed" !== animState() || !restoreFocusEnabled()) return;
         if (!restoreFocusTarget) return;
         queueMicrotask(()=>{
@@ -221,10 +221,10 @@ const __solidLayoutDrawerContent = (_stable, p)=>{
     const ctx = useDrawerContext();
     const placement = ()=>p.placement ?? ctx.placement();
     const scrollBehavior = ()=>p.scrollBehavior ?? ctx.scrollBehavior();
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (void 0 === p.placement) return;
         ctx.setPlacementOverride(p.placement);
-        onCleanup(()=>ctx.setPlacementOverride(void 0));
+        return ()=>ctx.setPlacementOverride(void 0);
     });
     var _el$3 = _tmpl$();
     spread(_el$3, mergeProps(others, {
@@ -266,17 +266,15 @@ const __solidLayoutDrawerBackdrop = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "style", "variant", "isDismissable", "shouldCloseOnBackdropClick", "onClick");
     const ctx = useDrawerContext();
     const variant = ()=>p.variant ?? ctx.backdrop();
-    createEffect(()=>{
-        if (void 0 !== p.isDismissable) {
-            ctx.setBackdropDismissableOverride(p.isDismissable);
-            onCleanup(()=>ctx.setBackdropDismissableOverride(void 0));
-        }
+    createTrackedEffect(()=>{
+        if (void 0 === p.isDismissable) return;
+        ctx.setBackdropDismissableOverride(p.isDismissable);
+        return ()=>ctx.setBackdropDismissableOverride(void 0);
     });
-    createEffect(()=>{
-        if (void 0 !== p.shouldCloseOnBackdropClick) {
-            ctx.setBackdropCloseOnClickOverride(p.shouldCloseOnBackdropClick);
-            onCleanup(()=>ctx.setBackdropCloseOnClickOverride(void 0));
-        }
+    createTrackedEffect(()=>{
+        if (void 0 === p.shouldCloseOnBackdropClick) return;
+        ctx.setBackdropCloseOnClickOverride(p.shouldCloseOnBackdropClick);
+        return ()=>ctx.setBackdropCloseOnClickOverride(void 0);
     });
     const handleClick = (event)=>{
         if (event.target === event.currentTarget) ctx.requestClose("backdrop");
@@ -417,12 +415,12 @@ const __solidLayoutDrawerHeading = (_stable, p)=>{
     const ctx = useDrawerContext();
     const uid = createUniqueId();
     const headingId = ()=>p.id ?? `drawer-heading-${uid}`;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const id = headingId();
         ctx.setLabelledBy(id);
-        onCleanup(()=>{
+        return ()=>{
             if (ctx.labelledBy() === id) ctx.setLabelledBy(void 0);
-        });
+        };
     });
     var _el$7 = _tmpl$3();
     spread(_el$7, mergeProps(others, {
@@ -453,12 +451,12 @@ const __solidLayoutDrawerBody = (_stable, p)=>{
     const ctx = useDrawerContext();
     const uid = createUniqueId();
     const bodyId = ()=>p.id ?? `drawer-body-${uid}`;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const id = bodyId();
         ctx.setDescribedBy(id);
-        onCleanup(()=>{
+        return ()=>{
             if (ctx.describedBy() === id) ctx.setDescribedBy(void 0);
-        });
+        };
     });
     var _el$8 = _tmpl$();
     spread(_el$8, mergeProps(others, {

package/dist/components/dropdown/Dropdown.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 "./Dropdown.css";
-import { Show, createContext, createEffect, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { Show, createContext, 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 "./Dropdown.recipe.js";
@@ -93,14 +93,14 @@ const __solidLayoutDropdownRoot = (_stable, p)=>{
         setItems((prev)=>prev.filter((item)=>item.key !== key));
         if (focusedKey() === key) setFocusedKey(void 0);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!open()) return;
         const request = focusRequest();
         if (!request) return;
         focusBoundary("first" === request ? "first" : "last");
         setFocusRequest(null);
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const list = items();
         const currentFocused = focusedKey();
         if (currentFocused && !list.some((item)=>item.key === currentFocused)) return void setFocusedKey(void 0);
@@ -119,9 +119,9 @@ const __solidLayoutDropdownRoot = (_stable, p)=>{
             setOpen(false);
         };
         document.addEventListener("pointerdown", handlePointerDown);
-        onCleanup(()=>{
+        return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
-        });
+        };
     });
     return createComponent(DropdownContext, {
         value: {

package/dist/components/immersive-landing/useImmersiveLanding.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onSettled } from "solid-js";
+import { createSignal, createTrackedEffect, onSettled } from "solid-js";
 function useImmersiveLanding(options) {
     const { pages, initialPage = pages[0], currentPage: controlledPage, transitionDuration = 400, onNavigate, onNavigationComplete, enableScrollNavigation = true } = options;
     const isControlled = !!controlledPage;
@@ -11,7 +11,7 @@ function useImmersiveLanding(options) {
     const isLastPage = ()=>currentIndex() === pages.length - 1;
     if (isControlled) {
         let prevPage = controlledPage();
-        createEffect(()=>{
+        createTrackedEffect(()=>{
             const next = controlledPage();
             if (next !== prevPage && !isTransitioning()) {
                 const fromIndex = pages.indexOf(prevPage);
@@ -128,12 +128,12 @@ function useImmersiveLanding(options) {
             passive: true
         });
         window.addEventListener("keydown", handleKeyDown);
-        onCleanup(()=>{
+        return ()=>{
             window.removeEventListener("wheel", handleWheel);
             window.removeEventListener("touchstart", handleTouchStart);
             window.removeEventListener("touchend", handleTouchEnd);
             window.removeEventListener("keydown", handleKeyDown);
-        });
+        };
     });
     return {
         activePage,

package/dist/components/input-otp/InputOTP.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./InputOTP.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, omit, onSettled, useContext } from "solid-js";
+import { For, Show, createContext, createMemo, createSignal, createTrackedEffect, omit, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./InputOTP.recipe.js";
 import { resolveState } from "../vocabulary.js";
@@ -119,16 +119,16 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         if (event.defaultPrevented || isDisabled()) return;
         if ("ArrowLeft" === event.key || "ArrowRight" === event.key || "Backspace" === event.key || "Delete" === event.key || "Home" === event.key || "End" === event.key) queueMicrotask(syncActiveFromInputCaret);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const current = value();
         if (current.length > maxLength()) setValue(current.slice(0, maxLength()));
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (void 0 !== p.value) return;
         const normalized = sanitizeValue(internalValue());
         if (normalized !== internalValue()) setInternalValue(normalized);
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!isFocused()) return;
         const active = clamp(activeIndex(), 0, maxLength());
         inputRef?.setSelectionRange(active, active);

package/dist/components/list-box/ListBoxItem.generated.js

@@ -1,6 +1,6 @@
 import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
-import { createContext, createEffect, createMemo, createUniqueId, omit, onCleanup, useContext } from "solid-js";
+import { createContext, createMemo, createTrackedEffect, createUniqueId, omit, onCleanup, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { ListBoxContext } from "./context.js";
 import { CLASSES, componentRecipe } from "./ListBox.recipe.js";
@@ -96,7 +96,7 @@ const __solidLayoutListBoxItemRoot = (_stable, p)=>{
         if (event.defaultPrevented) return;
         if (listBox?.focusedKey() === key()) listBox.setFocusedKey(void 0);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!listBox || !itemRef) return;
         listBox.registerItem({
             key: key(),

package/dist/components/live-chat/LiveChatPanel.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./LiveChat.css";
-import { For, Show, createEffect, createSignal, omit, onCleanup } from "solid-js";
+import { For, Show, createSignal, createTrackedEffect, omit, onCleanup } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import button_0 from "../button/index.js";
 import input from "../input/index.js";
@@ -75,11 +75,11 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
     let hasObservedMessages = false;
     let scrollRafId;
     let scrollRafNestedId;
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (p.mockMode) setInternalMessages(getMockMessages());
         else if (p.messages) setInternalMessages(p.messages);
     });
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!p.mockMode && p.messages) setInternalMessages(p.messages);
     });
     const isSending = ()=>p.isSending ?? sending();
@@ -113,7 +113,7 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
             });
         });
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         const messages = internalMessages();
         const nextMessageCount = messages.length;
         const nextLastMessageId = messages[messages.length - 1]?.messageId;

package/dist/components/menu/MenuItem.generated.js

@@ -1,6 +1,6 @@
 import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
-import { createContext, createEffect, createMemo, createUniqueId, omit, onCleanup, useContext } from "solid-js";
+import { createContext, createMemo, createTrackedEffect, createUniqueId, omit, onCleanup, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { MenuContext } from "./context.js";
 import { CLASSES, componentRecipe } from "./Menu.recipe.js";
@@ -110,7 +110,7 @@ const __solidLayoutMenuItemRoot = (_stable, p)=>{
         if (event.defaultPrevented) return;
         if (menu?.focusedKey() === key()) menu.setFocusedKey(void 0);
     };
-    createEffect(()=>{
+    createTrackedEffect(()=>{
         if (!menu || !itemRef) return;
         menu.registerItem({
             key: key(),

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/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/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.0",
+  "version": "2.6.2",
   "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/package.json

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