@pathscale/ui 2.3.1 → 2.3.2

package/dist/components/_shared/overlayPosition.d.ts

@@ -1,9 +1,18 @@
 import { type Accessor, type JSX } from "solid-js";
 export type OverlayPlacement = "top" | "bottom" | "left" | "right";
 export type OverlayAlign = "start" | "center" | "end";
+export type OverlayAnchorRect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    right: number;
+    bottom: number;
+};
 export interface CreateOverlayPositionOptions {
     open: Accessor<boolean>;
     triggerRef: Accessor<HTMLElement | undefined>;
+    anchorRect?: Accessor<OverlayAnchorRect | undefined>;
     overlayRef: Accessor<HTMLElement | undefined>;
     placement: Accessor<OverlayPlacement>;
     offset: Accessor<number>;
@@ -13,6 +22,7 @@ export interface CreateOverlayPositionOptions {
     minWidth?: Accessor<number | undefined>;
     viewportPadding?: Accessor<number>;
 }
+export declare const resolveOverlayAnchorRect: (trigger: Pick<HTMLElement, "getBoundingClientRect"> | undefined, anchorRect: OverlayAnchorRect | undefined) => OverlayAnchorRect | DOMRect | undefined;
 export declare const createOverlayPosition: (options: CreateOverlayPositionOptions) => {
     style: Accessor<JSX.CSSProperties>;
     placement: Accessor<OverlayPlacement>;

package/dist/components/_shared/overlayPosition.js

@@ -30,6 +30,7 @@ const getCrossAxisCoordinate = (align, triggerStart, triggerSize, overlaySize)=>
     return triggerStart + (triggerSize - overlaySize) / 2;
 };
 const round = (value)=>Math.round(100 * value) / 100;
+const resolveOverlayAnchorRect = (trigger, anchorRect)=>anchorRect ?? trigger?.getBoundingClientRect();
 const createOverlayPosition = (options)=>{
     const [style, setStyle] = createSignal({
         visibility: "hidden"
@@ -44,14 +45,16 @@ const createOverlayPosition = (options)=>{
             return;
         }
         const trigger = options.triggerRef();
+        const anchorRect = options.anchorRect?.();
         const overlay = options.overlayRef();
-        if (!trigger || !overlay) return;
+        if (!trigger && !anchorRect || !overlay) return;
         const viewportPadding = options.viewportPadding?.() ?? 8;
         const align = options.align?.() ?? "center";
         const autoFlip = options.autoFlip?.() ?? true;
         let frame = 0;
         const update = ()=>{
-            const triggerRect = trigger.getBoundingClientRect();
+            const triggerRect = resolveOverlayAnchorRect(trigger, options.anchorRect?.());
+            if (!triggerRect) return;
             const overlayRect = overlay.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
@@ -98,7 +101,7 @@ const createOverlayPosition = (options)=>{
         window.addEventListener("resize", schedule);
         window.addEventListener("scroll", schedule, true);
         const resizeObserver = "u" > typeof ResizeObserver ? new ResizeObserver(schedule) : void 0;
-        resizeObserver?.observe(trigger);
+        if (trigger) resizeObserver?.observe(trigger);
         resizeObserver?.observe(overlay);
         onCleanup(()=>{
             cancelAnimationFrame(frame);
@@ -112,4 +115,4 @@ const createOverlayPosition = (options)=>{
         placement: resolvedPlacement
     };
 };
-export { createOverlayPosition };
+export { createOverlayPosition, resolveOverlayAnchorRect };

package/dist/components/collapsible/Collapsible.generated.js

@@ -1,9 +1,10 @@
 import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Collapsible.css";
-import { createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./Collapsible.recipe.js";
+import { shouldMountCollapsibleContent } from "./Collapsible.mounting.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<div><div>"), _tmpl$5 = /*#__PURE__*/ template("<span>"), _tmpl$6 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
 const CollapsibleContext = createContext();
 const useCollapsibleContext = ()=>{
@@ -188,37 +189,41 @@ const __solidLayoutCollapsibleContent = (_stable, p)=>{
     ]);
     const expanded = ()=>ctx.isExpanded();
     const keepMounted = ()=>local.keepMounted ?? true;
-    if (!keepMounted() && !expanded()) return null;
-    return (()=>{
-        var _el$4 = _tmpl$();
-        spread(_el$4, mergeProps(others, {
-            get id () {
-                return ctx.contentId();
-            },
-            role: "region"
-        }, ()=>({
-                class: twMerge(CLASSES.slot.content, local.class)
-            }), {
-            "data-slot": "collapsible-content",
-            get ["data-expanded"] () {
-                return expanded() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-hidden"] () {
-                return expanded() ? "false" : "true";
-            },
-            get ["aria-labelledby"] () {
-                return ctx.triggerId();
-            }
-        }), false, true);
-        insert(_el$4, ()=>local.children);
-        return _el$4;
-    })();
+    return createComponent(Show, {
+        get when () {
+            return shouldMountCollapsibleContent(keepMounted(), expanded());
+        },
+        get children () {
+            var _el$4 = _tmpl$();
+            spread(_el$4, mergeProps(others, {
+                get id () {
+                    return ctx.contentId();
+                },
+                role: "region"
+            }, ()=>({
+                    class: twMerge(CLASSES.slot.content, local.class)
+                }), {
+                "data-slot": "collapsible-content",
+                get ["data-expanded"] () {
+                    return expanded() ? "true" : "false";
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                get ["aria-hidden"] () {
+                    return expanded() ? "false" : "true";
+                },
+                get ["aria-labelledby"] () {
+                    return ctx.triggerId();
+                }
+            }), false, true);
+            insert(_el$4, ()=>local.children);
+            return _el$4;
+        }
+    });
 };
 const CollapsibleContent = defineComponent({
     recipe: componentRecipe,

package/dist/components/collapsible/Collapsible.mounting.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether the content element should exist in the DOM.
+ *
+ * Trivial, and a module of its own because the caller has to read it inside a
+ * tracked scope. The same expression written as an early `return null` in the
+ * component body reads both values exactly once: a collapsible that starts
+ * collapsed with `keepMounted={false}` then never appears, and one that starts
+ * expanded never goes away. Naming it makes the reactive read the obvious
+ * place to put it, and lets the behaviour be tested without a renderer.
+ */
+export declare const shouldMountCollapsibleContent: (keepMounted: boolean, expanded: boolean) => boolean;

package/dist/components/collapsible/Collapsible.mounting.js

@@ -0,0 +1,2 @@
+const shouldMountCollapsibleContent = (keepMounted, expanded)=>keepMounted || expanded;
+export { shouldMountCollapsibleContent };

package/dist/components/popover/Popover.generated.d.ts

@@ -2,8 +2,10 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./Popover.css";
 import { type JSX } from "solid-js";
 import type { UIBaseProps } from "../vocabulary";
-import { type OverlayPlacement } from "../_shared/overlayPosition";
+import { type OverlayAnchorRect, type OverlayPlacement } from "../_shared/overlayPosition";
 export type PopoverPlacement = OverlayPlacement;
+export type PopoverAnchorRect = OverlayAnchorRect;
+export type PopoverAnchor = PopoverAnchorRect | (() => PopoverAnchorRect | undefined);
 export type PopoverRootProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
     open?: boolean;
@@ -12,6 +14,7 @@ export type PopoverRootProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElem
     placement?: PopoverPlacement;
     autoFlip?: boolean;
     offset?: number;
+    anchorRect?: PopoverAnchor;
     closeOnOutsideClick?: boolean;
     closeOnEscape?: boolean;
     onInteractOutside?: (event: Event) => void;

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

@@ -24,6 +24,7 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         "placement",
         "autoFlip",
         "offset",
+        "anchorRect",
         "closeOnOutsideClick",
         "closeOnEscape",
         "onInteractOutside"
@@ -45,6 +46,7 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
     const placement = ()=>resolvedPlacement();
     const offset = ()=>local.offset ?? 8;
     const autoFlip = ()=>local.autoFlip ?? true;
+    const anchorRect = ()=>"function" == typeof local.anchorRect ? local.anchorRect() : local.anchorRect;
     onMount(()=>{
         const handlePointerDown = (event)=>{
             if (!isOpen()) return;
@@ -81,6 +83,7 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         placement,
         setPlacement: setResolvedPlacement,
         autoFlip,
+        anchorRect,
         triggerRef,
         setTriggerRef,
         contentRef,
@@ -194,6 +197,7 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
     const overlayPosition = createOverlayPosition({
         open: ctx.isOpen,
         triggerRef: ctx.triggerRef,
+        anchorRect: ctx.anchorRect,
         overlayRef: ctx.contentRef,
         placement: ctx.preferredPlacement,
         offset: ()=>local.sideOffset ?? ctx.offset(),
@@ -245,7 +249,7 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                             return style();
                         },
                         get ["aria-labelledby"] () {
-                            return ctx.triggerId();
+                            return memo(()=>!!ctx.triggerRef())() ? ctx.triggerId() : void 0;
                         },
                         get ["aria-hidden"] () {
                             return ctx.isOpen() ? "false" : "true";

package/dist/components/popover/index.d.ts

@@ -7,5 +7,6 @@ export type PopoverContentProps = ComponentProps<typeof PopoverContent>;
 export type PopoverDialogProps = ComponentProps<typeof PopoverDialog>;
 export type PopoverArrowProps = ComponentProps<typeof PopoverArrow>;
 export type PopoverHeadingProps = ComponentProps<typeof PopoverHeading>;
+export type { PopoverAnchor, PopoverAnchorRect } from "./Popover.generated";
 export { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading, };
 export default Popover;

package/dist/components/slider/Slider.generated.d.ts

@@ -7,6 +7,7 @@ type SliderBaseProps = {
     label?: string;
     value: number;
     onChange: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
     min?: number;
     max?: number;
     step?: number;

package/dist/components/slider/Slider.generated.js

@@ -4,6 +4,7 @@ import "./Slider.css";
 import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./Slider.recipe.js";
+import { createSliderInteractionHandlers } from "./Slider.interactions.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div></div><div>");
 function clamp(val, min, max) {
     return Math.min(Math.max(val, min), max);
@@ -14,10 +15,12 @@ function snapToStep(val, min, max, step) {
 }
 const __solidLayoutSlider = (_stable, p)=>{
     let trackRef;
+    let thumbRef;
     const [local] = splitProps(p, [
         "label",
         "value",
         "onChange",
+        "onChangeEnd",
         "min",
         "max",
         "step",
@@ -50,48 +53,48 @@ const __solidLayoutSlider = (_stable, p)=>{
         const f = fraction();
         return `calc(${f} * 100% + ${1 - f} * var(--slider-thumb-w) + ${2 - 2 * f} * var(--slider-pad))`;
     };
+    const centreInset = ()=>{
+        if (!trackRef || !thumbRef) return 0;
+        const pad = Math.max(0, (trackRef.offsetHeight - thumbRef.offsetHeight) / 2);
+        return thumbRef.offsetWidth / 2 + pad;
+    };
+    let dragGeometry;
+    const measureTrack = ()=>{
+        if (!trackRef) return;
+        const rect = trackRef.getBoundingClientRect();
+        const inset = centreInset();
+        return {
+            left: rect.left,
+            inset,
+            usable: rect.width - 2 * inset
+        };
+    };
     const getValueFromPosition = (clientX)=>{
         if (!trackRef) return local.value;
-        const rect = trackRef.getBoundingClientRect();
-        const frac = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const geometry = dragGeometry ?? measureTrack();
+        if (!geometry || geometry.usable <= 0) return local.value;
+        const frac = clamp((clientX - geometry.left - geometry.inset) / geometry.usable, 0, 1);
         const raw = min() + frac * (max() - min());
         return snapToStep(raw, min(), max(), step());
     };
-    const handlePointerDown = (e)=>{
-        if (isDisabled()) return;
-        e.preventDefault();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        setDragging(true);
-        const val = getValueFromPosition(e.clientX);
-        if (val !== local.value) local.onChange(val);
-    };
-    const handlePointerMove = (e)=>{
-        if (!dragging()) return;
-        const val = getValueFromPosition(e.clientX);
-        if (val !== local.value) local.onChange(val);
-    };
-    const handlePointerUp = ()=>{
-        setDragging(false);
-    };
-    const handleKeyDown = (e)=>{
-        if (isDisabled()) return;
-        let newVal = local.value;
+    const getValueFromKey = (key, currentValue)=>{
+        let newVal = currentValue;
         const s = step();
         const bigStep = (max() - min()) / 10;
-        switch(e.key){
+        switch(key){
             case "ArrowRight":
             case "ArrowUp":
-                newVal = clamp(local.value + s, min(), max());
+                newVal = clamp(currentValue + s, min(), max());
                 break;
             case "ArrowLeft":
             case "ArrowDown":
-                newVal = clamp(local.value - s, min(), max());
+                newVal = clamp(currentValue - s, min(), max());
                 break;
             case "PageUp":
-                newVal = clamp(local.value + bigStep, min(), max());
+                newVal = clamp(currentValue + bigStep, min(), max());
                 break;
             case "PageDown":
-                newVal = clamp(local.value - bigStep, min(), max());
+                newVal = clamp(currentValue - bigStep, min(), max());
                 break;
             case "Home":
                 newVal = min();
@@ -102,9 +105,21 @@ const __solidLayoutSlider = (_stable, p)=>{
             default:
                 return;
         }
-        e.preventDefault();
-        if (newVal !== local.value) local.onChange(snapToStep(newVal, min(), max(), s));
+        return snapToStep(newVal, min(), max(), s);
     };
+    const interactions = createSliderInteractionHandlers({
+        isDisabled,
+        value: ()=>local.value,
+        valueFromPosition: getValueFromPosition,
+        valueFromKey: getValueFromKey,
+        onDragGeometry: (active)=>{
+            dragGeometry = active ? measureTrack() : void 0;
+        },
+        isThumb: (target)=>Boolean(thumbRef && target === thumbRef),
+        onChange: (value)=>local.onChange(value),
+        onChangeEnd: (value)=>local.onChangeEnd?.(value),
+        onDraggingChange: setDragging
+    });
     const handleFocus = ()=>setFocusVisible(true);
     const handleBlur = ()=>setFocusVisible(false);
     return (()=>{
@@ -160,9 +175,18 @@ const __solidLayoutSlider = (_stable, p)=>{
                 class: CLASSES.track
             }), {
             "data-slot": "slider-track",
-            onPointerDown: handlePointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp
+            get onPointerDown () {
+                return interactions.onPointerDown;
+            },
+            get onPointerMove () {
+                return interactions.onPointerMove;
+            },
+            get onPointerUp () {
+                return interactions.onPointerUp;
+            },
+            get onPointerCancel () {
+                return interactions.onPointerCancel;
+            }
         }), false, true);
         spread(_el$5, mergeProps(()=>({
                 class: CLASSES.fill
@@ -174,6 +198,8 @@ const __solidLayoutSlider = (_stable, p)=>{
                 };
             }
         }), false, false);
+        var _ref$2 = thumbRef;
+        "function" == typeof _ref$2 ? use(_ref$2, _el$6) : thumbRef = _el$6;
         spread(_el$6, mergeProps(()=>({
                 class: CLASSES.thumb
             }), {
@@ -214,9 +240,17 @@ const __solidLayoutSlider = (_stable, p)=>{
             get ["aria-disabled"] () {
                 return isDisabled() ? "true" : void 0;
             },
-            onKeyDown: handleKeyDown,
+            get onKeyDown () {
+                return interactions.onKeyDown;
+            },
+            get onKeyUp () {
+                return interactions.onKeyUp;
+            },
             onFocus: handleFocus,
-            onBlur: handleBlur
+            onBlur: ()=>{
+                interactions.onBlur();
+                handleBlur();
+            }
         }), false, false);
         return _el$;
     })();

package/dist/components/slider/Slider.interactions.d.ts

@@ -0,0 +1,22 @@
+export type SliderInteractionOptions = {
+    isDisabled: () => boolean;
+    value: () => number;
+    valueFromPosition: (clientX: number) => number;
+    /** Called when a drag begins and ends, so geometry can be measured once. */
+    onDragGeometry?: (active: boolean) => void;
+    /** Whether a press landed on the thumb rather than on the bare track. */
+    isThumb?: (target: EventTarget | null) => boolean;
+    valueFromKey: (key: string, currentValue: number) => number | undefined;
+    onChange: (value: number) => void;
+    onChangeEnd: (value: number) => void;
+    onDraggingChange: (dragging: boolean) => void;
+};
+export declare const createSliderInteractionHandlers: (options: SliderInteractionOptions) => {
+    onPointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp: (event: PointerEvent) => void;
+    onPointerCancel: (event: PointerEvent) => void;
+    onKeyDown(event: KeyboardEvent): void;
+    onKeyUp(event: KeyboardEvent): void;
+    onBlur: () => void;
+};

package/dist/components/slider/Slider.interactions.js

@@ -0,0 +1,93 @@
+const sliderKeys = new Set([
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowLeft",
+    "ArrowDown",
+    "PageUp",
+    "PageDown",
+    "Home",
+    "End"
+]);
+const releasePointerCapture = (target, pointerId)=>{
+    if (!("releasePointerCapture" in target)) return;
+    try {
+        if (!("hasPointerCapture" in target) || target.hasPointerCapture(pointerId)) target.releasePointerCapture(pointerId);
+    } catch  {}
+};
+const createSliderInteractionHandlers = (options)=>{
+    let pointerId;
+    let pointerValue = 0;
+    let pointerChanged = false;
+    let keyboardActive = false;
+    let keyboardValue = 0;
+    let keyboardChanged = false;
+    const emitPointerValue = (nextValue)=>{
+        if (Object.is(nextValue, pointerValue)) return;
+        pointerValue = nextValue;
+        pointerChanged = true;
+        options.onChange(nextValue);
+    };
+    const finishPointer = (event)=>{
+        if (void 0 === pointerId || event.pointerId !== pointerId) return;
+        const finalValue = pointerValue;
+        const changed = pointerChanged;
+        const activePointerId = pointerId;
+        pointerId = void 0;
+        pointerChanged = false;
+        options.onDragGeometry?.(false);
+        options.onDraggingChange(false);
+        const target = event.currentTarget;
+        if (target) releasePointerCapture(target, activePointerId);
+        if (changed) options.onChangeEnd(finalValue);
+    };
+    const finishKeyboard = ()=>{
+        if (!keyboardActive) return;
+        const finalValue = keyboardValue;
+        const changed = keyboardChanged;
+        keyboardActive = false;
+        keyboardChanged = false;
+        if (changed) options.onChangeEnd(finalValue);
+    };
+    return {
+        onPointerDown (event) {
+            if (options.isDisabled() || void 0 !== pointerId) return;
+            event.preventDefault();
+            const target = event.currentTarget;
+            target.setPointerCapture(event.pointerId);
+            pointerId = event.pointerId;
+            pointerValue = options.value();
+            pointerChanged = false;
+            options.onDragGeometry?.(true);
+            options.onDraggingChange(true);
+            if (!options.isThumb?.(event.target)) emitPointerValue(options.valueFromPosition(event.clientX));
+        },
+        onPointerMove (event) {
+            if (void 0 === pointerId || event.pointerId !== pointerId) return;
+            emitPointerValue(options.valueFromPosition(event.clientX));
+        },
+        onPointerUp: finishPointer,
+        onPointerCancel: finishPointer,
+        onKeyDown (event) {
+            if (options.isDisabled()) return;
+            const currentValue = keyboardActive ? keyboardValue : options.value();
+            const nextValue = options.valueFromKey(event.key, currentValue);
+            if (void 0 === nextValue) return;
+            event.preventDefault();
+            if (!keyboardActive) {
+                keyboardActive = true;
+                keyboardValue = currentValue;
+                keyboardChanged = false;
+            }
+            if (Object.is(nextValue, keyboardValue)) return;
+            keyboardValue = nextValue;
+            keyboardChanged = true;
+            options.onChange(nextValue);
+        },
+        onKeyUp (event) {
+            if (!sliderKeys.has(event.key)) return;
+            finishKeyboard();
+        },
+        onBlur: finishKeyboard
+    };
+};
+export { createSliderInteractionHandlers };

package/dist/components/tabs/Tabs.generated.d.ts

@@ -5,7 +5,7 @@ import type { State } from "../vocabulary";
 type TabsOrientation = "horizontal" | "vertical";
 type TabsVariant = "primary" | "secondary";
 type TabKey = string | number;
-type TabsRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+type TabsRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "onSelectionChange"> & {
     children: JSX.Element;
     orientation?: TabsOrientation;
     variant?: TabsVariant;

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

@@ -4,6 +4,7 @@ import "./Tabs.css";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./Tabs.recipe.js";
+import { observeTabIndicator } from "./Tabs.measurement.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><span>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
 const TabsContext = createContext();
 const invokeEventHandler = (handler, event)=>{
@@ -168,10 +169,11 @@ const __solidLayoutTabList = (_stable, p)=>{
     });
     createEffect(()=>{
         if (!listRef) return;
-        const observer = new ResizeObserver(()=>scheduleMeasure());
-        observer.observe(listRef);
-        for (const tab of ctx.tabs())observer.observe(tab.ref);
-        onCleanup(()=>observer.disconnect());
+        const disconnect = observeTabIndicator([
+            listRef,
+            ...ctx.tabs().map((tab)=>tab.ref)
+        ], scheduleMeasure);
+        onCleanup(disconnect);
     });
     onMount(()=>{
         scheduleMeasure();

package/dist/components/tabs/Tabs.measurement.d.ts

@@ -0,0 +1,3 @@
+type ResizeObserverConstructor = new (callback: ResizeObserverCallback) => Pick<ResizeObserver, "observe" | "disconnect">;
+export declare const observeTabIndicator: (targets: Element[], scheduleMeasure: () => void, Observer?: ResizeObserverConstructor | undefined) => () => void;
+export {};

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

@@ -0,0 +1,8 @@
+const getResizeObserver = ()=>"u" < typeof ResizeObserver ? void 0 : ResizeObserver;
+const observeTabIndicator = (targets, scheduleMeasure, Observer = getResizeObserver())=>{
+    if (!Observer) return ()=>{};
+    const observer = new Observer(()=>scheduleMeasure());
+    for (const target of targets)observer.observe(target);
+    return ()=>observer.disconnect();
+};
+export { observeTabIndicator };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as Address } from "./components/address";
 export type { AddressProps, AddressTruncate, TruncateOptions } from "./components/address";
 export { truncateAddress, copyAddress } from "./components/address";
 export { default as Button } from "./components/button";
+export type { ButtonProps } from "./components/button";
 export { default as Calendar, type CalendarProps, type CalendarWeekdayFormat, type CalendarSelectionMode, type CalendarDaySelectHandler, type CalendarDayHoverHandler, } from "./components/calendar";
 export { default as Card, Card as CardRoot, CardHeader, CardBody, CardFooter } from "./components/card";
 export type { CardProps, CardSectionProps, CardMaterial, CardElevation } from "./components/card";
@@ -80,7 +81,7 @@ export type { PaginationProps } from "./components/pagination";
 export { default as Progress } from "./components/progress";
 export type { ProgressProps, ProgressSize, ProgressColor, } from "./components/progress";
 export { default as Popover } from "./components/popover";
-export type { PopoverProps, PopoverRootProps, PopoverTriggerProps, PopoverContentProps, PopoverDialogProps, PopoverArrowProps, PopoverHeadingProps, } from "./components/popover";
+export type { PopoverProps, PopoverRootProps, PopoverTriggerProps, PopoverContentProps, PopoverDialogProps, PopoverArrowProps, PopoverHeadingProps, PopoverAnchor, PopoverAnchorRect, } from "./components/popover";
 export { default as Radio } from "./components/radio";
 export { RadioGroup, type RadioGroupProps, type RadioGroupOrientation, type RadioGroupVariant, } from "./components/radio-group";
 export { default as Select } from "./components/select";

package/dist/layouts.manifest.json

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

package/package.json

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