@destyler-ui/svelte 0.0.1-beta.17 → 0.0.1-beta.20

package/dist/components/number-input/hooks/use-number-input.svelte.js

@@ -3,8 +3,13 @@ import { useEnvironmentContext } from '../../../providers/environment/index.js';
 import { useLocaleContext } from '../../../providers/locale/index.js';
 import { createMachineProps } from '../../../utils/create-machine-props.js';
 import { normalizeProps } from '../../../utils/normalize-props.js';
+import { createInputValueSync } from '../../../utils/sync-input-value.js';
+import { syncNumberInputElement } from '../../../utils/sync-number-input.js';
+import { createScope } from '@destyler/dom';
 import * as numberInput from '@destyler/number-input';
+import { mergeProps } from '@destyler/svelte';
 import { runIfFn } from '@destyler/utils';
+import { onDestroy, onMount, tick, untrack } from 'svelte';
 import { useFieldContext } from '../../field/index.js';
 export function useNumberInput(props) {
     const env = useEnvironmentContext();
@@ -27,11 +32,187 @@ export function useNumberInput(props) {
             ...resolvedProps,
         }, { value: 'defaultValue' });
     });
-    const [state, send] = useMachine(() => numberInput.machine(machineProps.initial), {
+    let isEditingInput = $state(false);
+    let editingInput;
+    let composingValue = $state();
+    let composingInput;
+    let compositionVersion = 0;
+    let compositionEpoch = 0;
+    let disposed = false;
+    let cancelInputSync;
+    const isComposing = () => composingValue !== undefined && !!composingInput?.isConnected;
+    const machine = untrack(() => numberInput.machine(machineProps.initial));
+    const scope = createScope({});
+    const trackCoreFormControl = machine.options.activities?.trackFormControl;
+    let refreshFormControl;
+    machine.setOptions({
+        activities: {
+            trackFormControl(context, event, meta) {
+                let trackedInput;
+                let trackedForm;
+                let cleanup;
+                const refresh = () => {
+                    const inputId = context.ids?.input ?? `number-input:${context.id}:input`;
+                    const input = scope.getById(context, inputId);
+                    const form = input?.form;
+                    if (input === trackedInput && form === trackedForm)
+                        return;
+                    cleanup?.();
+                    trackedInput = input;
+                    trackedForm = form;
+                    cleanup = trackCoreFormControl?.(context, event, meta) ?? undefined;
+                };
+                refreshFormControl = refresh;
+                refresh();
+                return () => {
+                    refreshFormControl = undefined;
+                    cleanup?.();
+                };
+            },
+        },
+    });
+    const [state, send] = useMachine(machine, {
         get context() {
             return machineProps.context;
         },
+        actions: {
+            syncInputElement(context, event) {
+                cancelInputSync?.();
+                if (isComposing())
+                    return;
+                const inputId = context.ids?.input ?? `number-input:${context.id}:input`;
+                const input = scope.getById(context, inputId);
+                if (!input)
+                    return;
+                const epoch = compositionEpoch;
+                const value = event.type.endsWith('CHANGE') ? context.value : context.formattedValue;
+                // Core queues its write in RAF. Composition can start after this action
+                // ran, so check ownership again at execution time, including end/blur.
+                cancelInputSync = syncNumberInputElement(input, value ?? '', () => !disposed && !isComposing()
+                    && epoch === compositionEpoch && scope.getById(context, inputId) === input);
+            },
+        },
+    });
+    onDestroy(() => {
+        disposed = true;
+        cancelInputSync?.();
+        compositionVersion++;
+    });
+    const getInputValue = () => isComposing() ? composingValue : (state.hasTag('focus') && isEditingInput && editingInput?.isConnected ? state.context.value : state.context.formattedValue);
+    const syncInputValue = createInputValueSync(() => ({ value: getInputValue() }), () => state.context.value, () => !disposed && !isComposing());
+    const api = $derived.by(() => {
+        const connected = numberInput.connect(state, send, normalizeProps);
+        return {
+            ...connected,
+            getInputProps() {
+                const inputProps = connected.getInputProps();
+                // Core exposes a formatted defaultValue, but Svelte applies it as a
+                // live value. Keep the core's raw text during native editing so partial
+                // numbers such as "1." are not reformatted during accepted input.
+                return mergeProps(inputProps, {
+                    value: getInputValue(),
+                    oninput(event) {
+                        // Composition is an edit too. Core 0.2.9 reconciles a rejected
+                        // INPUT.CHANGE to raw text until blur, including IME input.
+                        editingInput = event.currentTarget;
+                        isEditingInput = true;
+                        if (event.isComposing) {
+                            if (!isComposing()) {
+                                compositionVersion++;
+                                compositionEpoch++;
+                            }
+                            composingInput = event.currentTarget;
+                            composingValue = composingInput.value;
+                            return;
+                        }
+                        // A final input event can follow compositionend in the same turn.
+                        // Its current value supersedes any pending end reconciliation.
+                        compositionVersion++;
+                        composingValue = undefined;
+                        composingInput = undefined;
+                        void syncInputValue(event);
+                    },
+                    oncompositionstart(event) {
+                        compositionEpoch++;
+                        compositionVersion++;
+                        composingInput = event.currentTarget;
+                        composingValue = composingInput.value;
+                    },
+                    async oncompositionend(event) {
+                        compositionEpoch++;
+                        const input = event.currentTarget;
+                        if (!isComposing()) {
+                            if (input.value === state.context.value) {
+                                editingInput = input;
+                                isEditingInput = true;
+                            }
+                            else {
+                                void syncInputValue(event);
+                            }
+                            return;
+                        }
+                        const version = compositionVersion;
+                        const value = input.value;
+                        const { selectionStart, selectionEnd, selectionDirection } = input;
+                        composingValue = value;
+                        // Keep native text through both core and bound-parent flushes.
+                        await tick();
+                        if (disposed || !input.isConnected || version !== compositionVersion)
+                            return;
+                        if (value === state.context.value) {
+                            editingInput = input;
+                            isEditingInput = true;
+                        }
+                        composingValue = undefined;
+                        composingInput = undefined;
+                        await tick();
+                        if (disposed || !input.isConnected || version !== compositionVersion)
+                            return;
+                        if (selectionStart !== null && selectionEnd !== null)
+                            input.setSelectionRange(selectionStart, selectionEnd, selectionDirection ?? undefined);
+                    },
+                    onfocusout() {
+                        compositionEpoch++;
+                        compositionVersion++;
+                        composingValue = undefined;
+                        composingInput = undefined;
+                        editingInput = undefined;
+                        isEditingInput = false;
+                    },
+                });
+            },
+        };
+    });
+    onMount(() => {
+        const root = env().getRootNode();
+        const getInput = () => scope.getById(state.context, String(api.getInputProps().id));
+        const onReset = async (event) => {
+            // Refresh even for a different form: a moved or removed input must stop
+            // listening to its old form before that form's reset reaches target phase.
+            // Core keeps the original seed and controlled ownership callback rules.
+            refreshFormControl?.();
+            const input = getInput();
+            if (!input || input.form !== event.target)
+                return;
+            // The browser resets the property even when core's initial value equals
+            // its current value (and thus triggers no watcher). Reconcile after the
+            // default action and parent writeback, also ending any interrupted edit.
+            await tick();
+            if (event.defaultPrevented || disposed || !input.isConnected || input !== getInput())
+                return;
+            const version = ++compositionVersion;
+            compositionEpoch++;
+            composingValue = undefined;
+            composingInput = undefined;
+            editingInput = undefined;
+            isEditingInput = false;
+            await tick();
+            if (disposed || !input.isConnected || version !== compositionVersion || input !== getInput())
+                return;
+            input.value = String(getInputValue() ?? '');
+        };
+        root.addEventListener('reset', onReset, true);
+        return () => root.removeEventListener('reset', onReset, true);
     });
-    const api = $derived(numberInput.connect(state, send, normalizeProps));
     return () => api;
 }

package/dist/components/otp-input/components/Input.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import { mergeProps } from '@destyler/svelte'
+  import { createInputValueSync } from '../../../utils/sync-input-value'
   import { createSplitProps } from '../../../utils/create-split-props'
   import { UI } from '../../factory'
   import { useOtpInputContext } from '../hooks/use-otp-input-context'
@@ -17,7 +18,11 @@
 
   const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['index']))
 
-  const mergedProps = $derived(mergeProps(otpInput().getInputProps(inputProps), localProps))
+  const syncInputValue = createInputValueSync(() => otpInput().getInputProps(inputProps), () => otpInput().value)
+  const mergedProps = $derived(mergeProps(otpInput().getInputProps(inputProps), localProps, {
+    oninput: syncInputValue,
+    oncompositionend: syncInputValue,
+  }))
 </script>
 
 <UI as="input" {...mergedProps} />

package/dist/components/otp-input/components/Root.svelte

@@ -16,7 +16,13 @@
   import { OtpInputProvider } from '../hooks/use-otp-input-context'
   import { useOtpInput } from '../hooks/use-otp-input.svelte'
 
-  let { value = $bindable(), ...props }: OtpInputRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    ...props
+  }: OtpInputRootProps = $props()
   const providedId = $props.id()
 
   const [useOtpInputProps, localProps] = $derived(
@@ -49,7 +55,7 @@
   const resolvedProps = $derived<UseOtpInputProps>({
     ...useOtpInputProps,
     id: useOtpInputProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       useOtpInputProps.onValueChange?.(details)
       value = details.value

package/dist/components/pagination/components/Root.svelte

@@ -13,7 +13,15 @@
   import { PaginationProvider } from '../hooks/use-pagination-context'
   import { usePagination } from '../hooks/use-pagination.svelte'
 
-  let { page = $bindable(), pageSize = $bindable(), ...props }: PaginationRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    page = $bindable(),
+    page: pageProp,
+    pageSize = $bindable(),
+    pageSize: pageSizeProp,
+    ...props
+  }: PaginationRootProps = $props()
   const providedId = $props.id()
 
   const [paginationProps, localProps] = $derived(
@@ -26,6 +34,7 @@
       'onPageSizeChange',
       'page',
       'pageSize',
+    'defaultPageSize',
       'siblingCount',
       'translations',
       'type',
@@ -35,15 +44,15 @@
   const resolvedProps = $derived<UsePaginationProps>({
     ...paginationProps,
     id: paginationProps.id ?? providedId,
-    page,
-    pageSize,
+    page: pageProp,
+    pageSize: pageSizeProp,
     onPageChange(details) {
       paginationProps.onPageChange?.(details)
-      if (page !== undefined) page = details.page
+      page = details.page
     },
     onPageSizeChange(details) {
       paginationProps.onPageSizeChange?.(details)
-      if (pageSize !== undefined) pageSize = details.pageSize
+      pageSize = details.pageSize
     },
   })
 

package/dist/components/popover/components/Root.svelte

@@ -16,7 +16,14 @@
   import { PopoverProvider } from '../hooks/use-popover-context'
   import { usePopover } from '../hooks/use-popover.svelte'
 
-  let { open = $bindable(), children, ...props }: PopoverRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    open = $bindable(),
+    open: openProp,
+    children,
+    ...props
+  }: PopoverRootProps = $props()
 
   const providedId = $props.id()
 
@@ -26,10 +33,10 @@
     return {
       ...localProps,
       id: localProps.id ?? providedId,
-      open,
+      open: openProp,
       onOpenChange(details) {
         localProps.onOpenChange?.(details)
-        if (open !== undefined) open = details.open
+        open = details.open
       },
     }
   })

package/dist/components/popover/hooks/use-popover.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as popover from '@destyler/popover';
-export interface UsePopoverProps extends Omit<popover.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UsePopoverProps extends Omit<popover.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: popover.Context['open'];
 }

package/dist/components/presence/components/Presence.svelte

@@ -28,6 +28,12 @@
       ref = node
       presence().setNode(node)
     })
+    return () => {
+      untrack(() => {
+        if (ref === node)
+          ref = null
+      })
+    }
   })
 </script>
 

package/dist/components/progress/components/Root.svelte

@@ -13,7 +13,13 @@
   import { ProgressProvider } from '../hooks/use-progress-context'
   import { useProgress } from '../hooks/use-progress.svelte'
 
-  let { value = $bindable(), ...props }: ProgressRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    ...props
+  }: ProgressRootProps = $props()
   const providedId = $props.id()
 
   const [useProgressProps, localProps] = $derived(
@@ -32,7 +38,7 @@
   const resolvedProps = $derived<UseProgressProps>({
     ...useProgressProps,
     id: useProgressProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       value = details.value
       useProgressProps.onValueChange?.(details)

package/dist/components/progress/hooks/use-progress.svelte.js

@@ -10,11 +10,25 @@ export function useProgress(props) {
     const locale = useLocaleContext();
     const machineProps = $derived.by(() => {
         const resolvedProps = runIfFn(props);
-        return createMachineProps({
+        const { defaultValue, value, ...rest } = resolvedProps;
+        const base = {
             dir: locale().dir,
             getRootNode: env().getRootNode,
-            ...resolvedProps,
-        }, { value: 'defaultValue' });
+            ...rest,
+        };
+        // @destyler/progress@0.2.7 has no controllable defaultValue — seed initial only.
+        const initialValue = value !== undefined ? value : defaultValue;
+        const reactive = createMachineProps({
+            ...base,
+            ...(value !== undefined ? { value } : {}),
+        });
+        return {
+            initial: {
+                ...reactive.initial,
+                ...(initialValue !== undefined ? { value: initialValue } : {}),
+            },
+            context: reactive.context,
+        };
     });
     const [state, send] = useMachine(() => progress.machine(machineProps.initial), {
         get context() {

package/dist/components/qr-code/components/Root.svelte

@@ -13,7 +13,13 @@
   import { QrCodeProvider } from '../hooks/use-qr-code-context'
   import { useQrCode } from '../hooks/use-qr-code.svelte'
 
-  let { value = $bindable(), ...props }: QrCodeRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    ...props
+  }: QrCodeRootProps = $props()
   const providedId = $props.id()
 
   const [useQrCodeProps, localProps] = $derived(
@@ -30,7 +36,7 @@
   const resolvedProps = $derived<UseQrCodeProps>({
     ...useQrCodeProps,
     id: useQrCodeProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       value = details.value
       useQrCodeProps.onValueChange?.(details)

package/dist/components/qr-code/hooks/use-qr-code.svelte.js

@@ -9,12 +9,22 @@ export function useQrCode(props) {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
     const machineProps = $derived.by(() => {
-        const resolvedProps = runIfFn(props);
-        return createMachineProps({
+        const { defaultValue, value, ...rest } = runIfFn(props);
+        const reactive = createMachineProps({
             dir: locale().dir,
             getRootNode: env().getRootNode,
-            ...resolvedProps,
-        }, { value: 'defaultValue' });
+            ...rest,
+            ...(value !== undefined ? { value } : {}),
+        });
+        // @destyler/qr-code@0.2.7 stores value directly — seed defaults only once.
+        const initialValue = value !== undefined ? value : defaultValue;
+        return {
+            initial: {
+                ...reactive.initial,
+                ...(initialValue !== undefined ? { value: initialValue } : {}),
+            },
+            context: reactive.context,
+        };
     });
     const [state, send] = useMachine(() => qrcode.machine(machineProps.initial), {
         get context() {

package/dist/components/radio/components/Root.svelte

@@ -13,7 +13,13 @@
   import { RadioProvider } from '../hooks/use-radio-context'
   import { useRadio } from '../hooks/use-radio.svelte'
 
-  let { value = $bindable(), ...props }: RadioRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    ...props
+  }: RadioRootProps = $props()
   const providedId = $props.id()
 
   const [radioGroupProps, localProps] = $derived(
@@ -34,10 +40,10 @@
   const resolvedProps = $derived<UseRadioProps>({
     ...radioGroupProps,
     id: radioGroupProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       radioGroupProps.onValueChange?.(details)
-      if (value !== undefined) value = details.value
+      value = details.value
     },
   })
 

package/dist/components/radio/hooks/use-radio.svelte.js

@@ -1,6 +1,8 @@
 import { useMachine } from '../../../hooks/use-destyler-machine.svelte.js';
 import { normalizeProps } from '../../../utils/normalize-props.js';
+import { createRadioCheckedSync } from '../../../utils/sync-checked.js';
 import * as radio from '@destyler/radio';
+import { mergeProps } from '@destyler/svelte';
 import { runIfFn } from '@destyler/utils';
 import { useEnvironmentContext, useLocaleContext } from '../../../providers/index.js';
 import { createMachineProps } from '../../../utils/create-machine-props.js';
@@ -20,6 +22,13 @@ export function useRadio(props) {
             return resolvedProps.context;
         },
     });
-    const api = $derived(radio.connect(state, send, normalizeProps));
+    const connected = $derived(radio.connect(state, send, normalizeProps));
+    const syncChecked = createRadioCheckedSync(value => connected.getItemState({ value }).checked);
+    const api = $derived({
+        ...connected,
+        getItemHiddenInputProps(itemProps) {
+            return mergeProps(connected.getItemHiddenInputProps(itemProps), { onclick: syncChecked });
+        },
+    });
     return () => api;
 }

package/dist/components/scroll-area/hooks/use-scroll-area.svelte.js

@@ -1,8 +1,6 @@
 import { useMachine } from '../../../hooks/use-destyler-machine.svelte.js';
 import { normalizeProps } from '../../../utils/normalize-props.js';
-import { resolveQueryRoot } from '../../../utils/resolve-query-root.js';
 import * as scrollArea from '@destyler/scroll-area';
-import { ref } from '@destyler/store';
 import { runIfFn } from '@destyler/utils';
 import { onMount } from 'svelte';
 import { useEnvironmentContext, useLocaleContext } from '../../../providers/index.js';
@@ -24,32 +22,6 @@ export function useScrollArea(props) {
         get context() {
             return machineProps;
         },
-        actions: {
-            // @destyler/scroll-area 0.2.6 stores ResizeObserver in proxied context.
-            // Marking only this native instance as raw lets the core cleanup action
-            // call disconnect() with the correct receiver.
-            setupResizeObserver(ctx) {
-                const rootNode = ctx.getRootNode?.() ?? env().getRootNode();
-                const queryRoot = resolveQueryRoot(rootNode, env().getDocument());
-                const viewportId = ctx.ids?.viewport ?? `scroll-area:${ctx.id}:viewport`;
-                const contentId = ctx.ids?.content ?? `scroll-area:${ctx.id}:content`;
-                const viewport = queryRoot.getElementById(viewportId);
-                const content = queryRoot.getElementById(contentId);
-                if (!viewport || !content)
-                    return;
-                const updateDimensions = () => {
-                    ctx.viewportWidth = viewport.clientWidth;
-                    ctx.viewportHeight = viewport.clientHeight;
-                    ctx.contentWidth = content.scrollWidth;
-                    ctx.contentHeight = content.scrollHeight;
-                };
-                updateDimensions();
-                const resizeObserver = ref(new (env().getWindow().ResizeObserver)(updateDimensions));
-                resizeObserver.observe(viewport);
-                resizeObserver.observe(content);
-                ctx._resizeObserver = resizeObserver;
-            },
-        },
     });
     const api = $derived(scrollArea.connect(state, send, normalizeProps));
     onMount(() => {

package/dist/components/select/components/Root.svelte

@@ -21,9 +21,13 @@
   import { SelectProvider } from '../hooks/use-select-context'
   import { useSelect } from '../hooks/use-select.svelte'
 
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
   let {
     value = $bindable<string[] | undefined>(),
+    value: valueProp,
     open = $bindable<boolean | undefined>(),
+    open: openProp,
     ...props
   }: SelectRootProps<T> = $props()
 
@@ -63,15 +67,15 @@
   const machineProps = $derived.by<UseSelectProps<T>>(() => ({
     ...useSelectProps,
     id: useSelectProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       value = details.value
       useSelectProps.onValueChange?.(details)
     },
-    open,
+    open: openProp,
     onOpenChange(details) {
       useSelectProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
   }))
 

package/dist/components/select/hooks/use-select.svelte.d.ts

@@ -3,7 +3,7 @@ import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import type { CollectionItem, ListCollection } from '../../collection/index.js';
 import * as select from '@destyler/select';
-export interface UseSelectProps<T extends CollectionItem> extends Omit<select.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'open.controlled' | 'id'> {
+export interface UseSelectProps<T extends CollectionItem> extends Omit<select.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'id'> {
     id: string;
     defaultOpen?: select.Context<T>['open'];
     defaultValue?: select.Context<T>['value'];

package/dist/components/slider/components/DraggingIndicator.svelte

@@ -13,14 +13,14 @@
 
   const props: SliderDraggingIndicatorProps = $props()
   const slider = useSliderContext()
-  const { index } = useSliderThumbPropsContext()
-  const mergedProps = $derived(mergeProps(slider().getDraggingIndicatorProps({ index }), props))
+  const thumbProps = useSliderThumbPropsContext()
+  const mergedProps = $derived(mergeProps(slider().getDraggingIndicatorProps(thumbProps), props))
 </script>
 
 <UI as="span" {...mergedProps}>
   {#if props.children}
     {@render props.children()}
   {:else}
-    {slider().getThumbValue(index)}
+    {slider().getThumbValue(thumbProps.index)}
   {/if}
 </UI>

package/dist/components/slider/components/Root.svelte

@@ -13,7 +13,13 @@
   import { SliderProvider } from '../hooks/use-slider-context'
   import { useSlider } from '../hooks/use-slider.svelte'
 
-  let { value = $bindable(), ...props }: SliderRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    ...props
+  }: SliderRootProps = $props()
   const providedId = $props.id()
 
   const [useSliderProps, localProps] = $derived(
@@ -47,7 +53,7 @@
   const resolvedProps = $derived<UseSliderProps>({
     ...useSliderProps,
     id: useSliderProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       value = details.value
       useSliderProps.onValueChange?.(details)

package/dist/components/slider/components/ThumbPropsProvider.svelte

@@ -9,11 +9,13 @@
 </script>
 
 <script lang="ts">
-  import { untrack } from 'svelte'
   import { SliderThumbPropsProvider } from '../hooks/use-slider-thumb-props-context'
 
   const { value, children }: SliderThumbPropsProviderProps = $props()
-  SliderThumbPropsProvider(untrack(() => value))
+  SliderThumbPropsProvider({
+    get index() { return value.index },
+    get name() { return value.name },
+  })
 </script>
 
 {@render children?.()}