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

package/README.md

@@ -52,4 +52,10 @@ import { Checkbox as CheckboxFromSubpath } from '@destyler-ui/svelte/checkbox'
 
 Runtime helpers are exported from the root package and dedicated subpaths, including `ClientOnly`, `EnvironmentProvider`, `FocusTrap`, `Format`, `Frame`, `Highlight`, and `LocaleProvider`.
 
-See the [Destyler UI documentation](https://ui.destyler.dev/overview/getting-started/) for component examples, API tables, and provider guides.
+See the [Destyler UI documentation](https://ui.destyler.org/overview/getting-started/) for component examples, API tables, and provider guides.
+
+## Tree branch triggers
+
+`Tree.BranchTrigger` now renders a `div` with `role="button"`, matching the other frameworks. Inside `Tree.BranchControl`, it handles pointer expansion while the branch control owns keyboard navigation and the tree's roving tab stop.
+
+Its public props and event `currentTarget` types now describe `HTMLDivElement`. Consumers that previously relied on the native button default or button-only attributes must use explicit `asChild` composition and adapt the snippet props to their chosen element's types. Caller overrides are preserved; adding a focusable child or `tabindex` remains the caller's accessibility responsibility and can introduce extra tab stops or nested interactive controls.

package/dist/components/aspect-ratio/components/Root.svelte

@@ -13,14 +13,13 @@
   import { AspectRatioProvider } from '../hooks/use-aspect-ratio-context'
   import { useAspectRatio } from '../hooks/use-aspect-ratio.svelte'
 
-  let { defaultRatio, ...props }: AspectRatioRootProps = $props()
+  let { ...props }: AspectRatioRootProps = $props()
   const providedId = $props.id()
 
   const [machineProps, localProps] = $derived(aspectRatioMachine.splitProps(props))
   const resolvedProps = $derived<UseAspectRatioProps>({
     ...machineProps,
     id: machineProps.id ?? providedId,
-    defaultRatio,
   })
   const aspectRatio = useAspectRatio(() => resolvedProps)
   const mergedProps = $derived(mergeProps(aspectRatio().getRootProps(), localProps))

package/dist/components/aspect-ratio/hooks/use-aspect-ratio.svelte.d.ts

@@ -4,7 +4,6 @@ import type { MaybeFunction } from '@destyler/utils';
 import * as aspectRatio from '@destyler/aspect-ratio';
 export interface UseAspectRatioProps extends Omit<aspectRatio.Context, 'getRootNode' | 'id'> {
     id: string;
-    defaultRatio?: aspectRatio.Context['ratio'];
 }
 export interface UseAspectRatioReturn extends Accessor<aspectRatio.Api<PropTypes>> {
 }

package/dist/components/aspect-ratio/hooks/use-aspect-ratio.svelte.js

@@ -11,7 +11,7 @@ export function useAspectRatio(props) {
         return createMachineProps({
             getRootNode: env().getRootNode,
             ...resolved,
-        }, { ratio: 'defaultRatio' });
+        });
     });
     const [state, send] = useMachine(() => aspectRatio.machine(machineProps.initial), {
         get context() {

package/dist/components/calendar/anatomy.d.ts

@@ -1 +1 @@
-export declare const calendarAnatomy: import("@destyler/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "content" | "tableHeader" | "tableBody" | "tableRow" | "prevTrigger" | "nextTrigger" | "viewTrigger" | "clearTrigger" | "control" | "trigger" | "monthSelect" | "yearSelect" | "positioner" | "rangeText" | "tableCell" | "tableCellTrigger" | "tableHead" | "viewControl" | "presetTrigger">;
+export declare const calendarAnatomy: import("@destyler/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "content" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

package/dist/components/calendar/components/Content.d.svelte.ts

@@ -3,6 +3,6 @@ export interface CalendarContentBaseProps extends PolymorphicProps<'div'>, RefAt
 }
 export interface CalendarContentProps extends Assign<HTMLProps<'div'>, CalendarContentBaseProps> {
 }
-declare const Content: import("svelte").Component<CalendarContentProps, {}, "">;
+declare const Content: import("svelte").Component<CalendarContentProps, {}, "ref">;
 type Content = ReturnType<typeof Content>;
 export default Content;

package/dist/components/calendar/components/Content.svelte

@@ -12,7 +12,7 @@
   import { useCalendarContext } from '../hooks/use-calendar-context.js'
   import { usePresenceContext } from '../../presence/index.js'
 
-  let { ref, ...props }: CalendarContentProps = $props()
+  let { ref = $bindable(), ...props }: CalendarContentProps = $props()
 
   const calendar = useCalendarContext()
   const presence = usePresenceContext()
@@ -20,10 +20,9 @@
 
   function setNode(node: HTMLElement) {
     untrack(() => presence().setNode(node))
-    ref = node
   }
 </script>
 
 {#if !presence().unmounted}
-  <UI as="div" {...mergedProps} {@attach setNode} />
+  <UI as="div" {...mergedProps} bind:ref={() => ref ?? null, (node) => ref = node} {@attach setNode} />
 {/if}

package/dist/components/calendar/components/Content.svelte.d.ts

@@ -3,6 +3,6 @@ export interface CalendarContentBaseProps extends PolymorphicProps<'div'>, RefAt
 }
 export interface CalendarContentProps extends Assign<HTMLProps<'div'>, CalendarContentBaseProps> {
 }
-declare const Content: import("svelte").Component<CalendarContentProps, {}, "">;
+declare const Content: import("svelte").Component<CalendarContentProps, {}, "ref">;
 type Content = ReturnType<typeof Content>;
 export default Content;

package/dist/components/calendar/components/Root.svelte

@@ -18,11 +18,17 @@
   import { useCalendar } from '../hooks/use-calendar.svelte.js'
   import { CalendarProvider } from '../hooks/use-calendar-context.js'
 
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
   let {
     value = $bindable(),
+    value: valueProp,
     focusedValue = $bindable(),
+    focusedValue: focusedValueProp,
     open = $bindable(),
+    open: openProp,
     view = $bindable(),
+    view: viewProp,
     ...props
   }: CalendarRootProps = $props()
   const providedId = $props.id()
@@ -69,25 +75,25 @@
   const resolvedProps = $derived<UseCalendarProps>({
     ...useCalendarProps,
     id: useCalendarProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       useCalendarProps.onValueChange?.(details)
-      if (value !== undefined) value = details.value
+      value = details.value
     },
-    focusedValue,
+    focusedValue: focusedValueProp,
     onFocusChange(details) {
       useCalendarProps.onFocusChange?.(details)
-      if (focusedValue !== undefined) focusedValue = details.focusedValue
+      focusedValue = details.focusedValue
     },
-    open,
+    open: openProp,
     onOpenChange(details) {
       useCalendarProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
-    view,
+    view: viewProp,
     onViewChange(details) {
       useCalendarProps.onViewChange?.(details)
-      if (view !== undefined) view = details.view
+      view = details.view
     },
   })
 

package/dist/components/calendar/hooks/use-calendar.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 calendar from '@destyler/calendar';
-export interface UseCalendarProps extends Omit<calendar.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UseCalendarProps extends Omit<calendar.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: calendar.Context['open'];
     defaultValue?: calendar.Context['value'];

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

@@ -8,13 +8,23 @@ export function useCalendar(props) {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
     const machineProps = $derived.by(() => {
-        const resolvedProps = runIfFn(props);
-        return createMachineProps({
+        const { defaultView, view, ...resolvedProps } = runIfFn(props);
+        const reactive = createMachineProps({
             dir: locale().dir,
             locale: locale().locale,
             getRootNode: env().getRootNode,
             ...resolvedProps,
-        }, { open: 'defaultOpen', value: 'defaultValue', view: 'defaultView' }, ['open']);
+            ...(view !== undefined ? { view } : {}),
+        }, { open: 'defaultOpen', value: 'defaultValue' }, ['open']);
+        // Core has no defaultView. Only the machine's initial context gets this seed.
+        const initialView = view !== undefined ? view : defaultView;
+        return {
+            initial: {
+                ...reactive.initial,
+                ...(initialView !== undefined ? { view: initialView } : {}),
+            },
+            context: reactive.context,
+        };
     });
     const [state, send] = useMachine(() => calendar.machine(machineProps.initial), {
         get context() {

package/dist/components/carousel/components/Root.svelte

@@ -13,7 +13,13 @@
   import { CarouselProvider } from '../hooks/use-carousel-context'
   import { createSplitProps } from '../../../utils/create-split-props'
 
-  let { page = $bindable(), ...props }: CarouselRootProps = $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,
+    ...props
+  }: CarouselRootProps = $props()
   const providedId = $props.id()
 
   const [useCarouselProps, localProps] = $derived(
@@ -43,10 +49,10 @@
   const resolvedProps = $derived<UseCarouselProps>({
     ...useCarouselProps,
     id: useCarouselProps.id ?? providedId,
-    page,
+    page: pageProp,
     onPageChange(details) {
       useCarouselProps.onPageChange?.(details)
-      if (page !== undefined) page = details.page
+      page = details.page
     },
   })
 

package/dist/components/checkbox/components/Group.svelte

@@ -13,13 +13,19 @@
   import { splitCheckboxGroupProps } from '../hooks/split-checkbox-group-props.svelte'
   import { useCheckboxGroup } from '../hooks/use-checkbox-group.svelte'
 
-  let { value = $bindable(), ...props }: CheckboxGroupProps = $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
+  }: CheckboxGroupProps = $props()
 
   const [checkboxGroupProps, localProps] = $derived(splitCheckboxGroupProps(props))
 
   const resolvedProps = $derived<UseCheckboxGroupProps>({
     ...checkboxGroupProps,
-    value,
+    value: valueProp,
     onValueChange(newValue) {
       checkboxGroupProps.onValueChange?.(newValue)
       value = newValue

package/dist/components/checkbox/components/Root.svelte

@@ -13,7 +13,13 @@
   import { splitCheckboxProps } from '../hooks/split-checkbox-props.svelte'
   import { useCheckbox } from '../hooks/use-checkbox.svelte'
 
-  let { checked = $bindable(), ...props }: CheckboxRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    checked = $bindable(),
+    checked: checkedProp,
+    ...props
+  }: CheckboxRootProps = $props()
   const providedId = $props.id()
 
   const [useCheckboxProps, localProps] = $derived(splitCheckboxProps(props))
@@ -21,7 +27,7 @@
   const resolvedProps = $derived<UseCheckboxProps>({
     ...useCheckboxProps,
     id: useCheckboxProps.id ?? providedId,
-    checked,
+    checked: checkedProp,
     onCheckedChange(details) {
       useCheckboxProps.onCheckedChange?.(details)
       checked = details.checked

package/dist/components/checkbox/hooks/use-checkbox-group.svelte.d.ts

@@ -44,12 +44,22 @@ export declare function useCheckboxGroup(props?: MaybeFunction<UseCheckboxGroupP
     setValue: (newValue: string[]) => void;
     addValue: (val: string) => void;
     toggleValue: (val: string) => void;
-    getItemProps: (itemProps: CheckboxGroupItemProps) => {
-        checked: boolean | undefined;
-        onCheckedChange(): void;
-        name: string | undefined;
-        disabled: boolean;
-        readOnly: boolean;
-        invalid: boolean;
+    getItemProps: {
+        (itemProps: CheckboxGroupItemProps, inheritedProps: Pick<UseCheckboxGroupProps, "disabled" | "readOnly" | "invalid">): ReturnType<(itemProps: CheckboxGroupItemProps, inheritedProps?: Pick<UseCheckboxGroupProps, "disabled" | "readOnly" | "invalid">) => {
+            checked: boolean | undefined;
+            onCheckedChange(): void;
+            name: string | undefined;
+            disabled: boolean;
+            readOnly: boolean;
+            invalid: boolean;
+        }>;
+        (itemProps: CheckboxGroupItemProps): ReturnType<(itemProps: CheckboxGroupItemProps, inheritedProps?: Pick<UseCheckboxGroupProps, "disabled" | "readOnly" | "invalid">) => {
+            checked: boolean | undefined;
+            onCheckedChange(): void;
+            name: string | undefined;
+            disabled: boolean;
+            readOnly: boolean;
+            invalid: boolean;
+        }>;
     };
 };

package/dist/components/checkbox/hooks/use-checkbox-group.svelte.js

@@ -29,7 +29,7 @@ export function useCheckboxGroup(props = {}) {
     const toggleValue = (val) => {
         isChecked(val) ? removeValue(val) : addValue(val);
     };
-    const getItemProps = (itemProps) => {
+    const getResolvedItemProps = (itemProps, inheritedProps = {}) => {
         return {
             checked: itemProps.value != null ? isChecked(itemProps.value) : undefined,
             onCheckedChange() {
@@ -38,11 +38,14 @@ export function useCheckboxGroup(props = {}) {
                 }
             },
             name: resolvedProps.name,
-            disabled: !!resolvedProps.disabled,
-            readOnly: !!resolvedProps.readOnly,
-            invalid: !!resolvedProps.invalid,
+            disabled: !!(resolvedProps.disabled ?? inheritedProps.disabled ?? false),
+            readOnly: !!(resolvedProps.readOnly ?? inheritedProps.readOnly ?? false),
+            invalid: !!(resolvedProps.invalid ?? inheritedProps.invalid ?? false),
         };
     };
+    function getItemProps(itemProps, inheritedProps = {}) {
+        return getResolvedItemProps(itemProps, typeof inheritedProps === 'object' && inheritedProps !== null ? inheritedProps : {});
+    }
     const api = $derived({
         isChecked,
         value,

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

@@ -3,6 +3,7 @@ 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 { createCheckedSync } from '../../../utils/sync-checked.js';
 import * as checkbox from '@destyler/checkbox';
 import { mergeProps } from '@destyler/svelte';
 import { runIfFn } from '@destyler/utils';
@@ -15,7 +16,11 @@ export function useCheckbox(props) {
     const field = useFieldContext();
     const machineProps = $derived.by(() => {
         const resolvedProps = runIfFn(props);
-        const localProps = mergeProps(checkboxGroup?.()?.getItemProps({ value: resolvedProps.value }) ?? {}, resolvedProps);
+        const localProps = mergeProps(checkboxGroup?.()?.getItemProps({ value: resolvedProps.value }, {
+            disabled: field?.()?.disabled,
+            readOnly: field?.()?.readOnly,
+            invalid: field?.()?.invalid,
+        }) ?? {}, resolvedProps);
         return createMachineProps({
             ids: {
                 label: field?.()?.ids.label,
@@ -35,6 +40,13 @@ export function useCheckbox(props) {
             return machineProps.context;
         },
     });
-    const api = $derived(checkbox.connect(state, send, normalizeProps));
+    const connected = $derived(checkbox.connect(state, send, normalizeProps));
+    const syncChecked = createCheckedSync(() => connected);
+    const api = $derived({
+        ...connected,
+        getHiddenInputProps() {
+            return mergeProps(connected.getHiddenInputProps(), { onclick: syncChecked });
+        },
+    });
     return () => api;
 }

package/dist/components/collapse/components/Root.svelte

@@ -21,7 +21,13 @@
   import { CollapseProvider } from '../hooks/use-collapse-context'
   import { useCollapse } from '../hooks/use-collapse.svelte'
 
-  let { value = $bindable(), ...props }: CollapseRootProps = $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
+  }: CollapseRootProps = $props()
   const providedId = $props.id()
 
   const [renderStrategyProps, collapseProps] = $derived(splitRenderStrategyProps(props))
@@ -43,10 +49,10 @@
   const resolvedProps = $derived<UseCollapseProps>({
     ...useCollapseProps,
     id: useCollapseProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       useCollapseProps.onValueChange?.(details)
-      if (value !== undefined) value = details.value
+      value = details.value
     },
   })
 

package/dist/components/collapsible/components/Root.svelte

@@ -13,7 +13,13 @@
   import { splitCollapsibleProps } from '../hooks/split-collapsible-props.svelte'
   import { useCollapsible } from '../hooks/use-collapsible.svelte'
 
-  let { open = $bindable(), ...props }: CollapsibleRootProps = $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,
+    ...props
+  }: CollapsibleRootProps = $props()
   const providedId = $props.id()
 
   const [useCollapsibleProps, localProps] = $derived(splitCollapsibleProps(props))
@@ -21,10 +27,10 @@
   const resolvedProps = $derived<UseCollapsibleProps>({
     ...useCollapsibleProps,
     id: useCollapsibleProps.id ?? providedId,
-    open,
+    open: openProp,
     onOpenChange(details) {
       useCollapsibleProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
   })
 

package/dist/components/collapsible/hooks/split-collapsible-props.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Optional } from '../../../types.js';
 import type { UseCollapsibleProps } from './use-collapsible.svelte.js';
 type CollapsibleMachineProps = Optional<UseCollapsibleProps, 'id'>;
-export declare function splitCollapsibleProps<T extends CollapsibleMachineProps>(props: T): [CollapsibleMachineProps, Omit<T, "id" | "ids" | "disabled" | "lazyMount" | "unmountOnExit" | "onExitComplete" | "open" | "onOpenChange" | "defaultOpen">];
+export declare function splitCollapsibleProps<T extends CollapsibleMachineProps>(props: T): [CollapsibleMachineProps, Omit<T, "open" | "defaultOpen" | "id" | "ids" | "disabled" | "lazyMount" | "unmountOnExit" | "onExitComplete" | "onOpenChange">];
 export {};

package/dist/components/collapsible/hooks/use-collapsible.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 collapsible from '@destyler/collapsible';
-export interface UseCollapsibleProps extends Omit<collapsible.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UseCollapsibleProps extends Omit<collapsible.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: collapsible.Context['open'];
     /**

package/dist/components/color-picker/anatomy.d.ts

@@ -1 +1 @@
-export declare const colorPickerAnatomy: import("@destyler/anatomy").AnatomyInstance<"area" | "label" | "view" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+export declare const colorPickerAnatomy: import("@destyler/anatomy").AnatomyInstance<"area" | "label" | "view" | "root" | "content" | "control" | "positioner" | "trigger" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;

package/dist/components/color-picker/components/ChannelInput.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
   import { createSplitProps } from '../../../utils/create-split-props'
   import { mergeProps } from '@destyler/svelte'
+  import { createInputValueSync } from '../../../utils/sync-input-value'
   import { UI } from '../../factory'
   import { useColorPickerContext } from '../hooks/use-color-picker-context'
 
@@ -17,7 +18,14 @@
   const [channelProps, localProps] = $derived(createSplitProps<ChannelInputProps>()(props, ['channel', 'orientation']))
 
   const colorPicker = useColorPickerContext()
-  const mergedProps = $derived(mergeProps(colorPicker().getChannelInputProps(channelProps), localProps))
+  const syncInputValue = createInputValueSync(() => colorPicker().getChannelInputProps(channelProps), () => colorPicker().value)
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelInputProps(channelProps), localProps, {
+    onfocusout: syncInputValue,
+    onkeydown(event: KeyboardEvent) {
+      if (event.key === 'Enter' && !event.isComposing)
+        void syncInputValue(event)
+    },
+  }))
 </script>
 
 <UI as="input" {...mergedProps} />

package/dist/components/color-picker/components/Root.svelte

@@ -19,7 +19,15 @@
   import { ColorPickerProvider } from '../hooks/use-color-picker-context'
   import { useColorPicker } from '../hooks/use-color-picker.svelte'
 
-  let { value = $bindable<Color>(), open = $bindable<boolean>(), ...props }: ColorPickerRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable<Color>(),
+    value: valueProp,
+    open = $bindable<boolean>(),
+    open: openProp,
+    ...props
+  }: ColorPickerRootProps = $props()
   const providedId = $props.id()
 
   const [presenceProps, colorPickerProps] = $derived(splitPresenceProps(props))
@@ -28,15 +36,15 @@
   const machineProps = $derived<UseColorPickerProps>({
     ...useColorPickerProps,
     id: useColorPickerProps.id ?? providedId,
-    value,
-    open,
+    value: valueProp,
+    open: openProp,
     onValueChange(details) {
       useColorPickerProps.onValueChange?.(details)
       value = details.value
     },
     onOpenChange(details) {
       useColorPickerProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
   })
 

package/dist/components/color-picker/hooks/split-color-picker-props.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Optional } from '../../../types.js';
 import type { UseColorPickerProps } from './use-color-picker.svelte.js';
 type ColorPickerMachineProps = Optional<UseColorPickerProps, 'id'>;
-export declare function splitColorPickerProps<T extends ColorPickerMachineProps>(props: T): [ColorPickerMachineProps, Omit<T, "value" | "defaultValue" | "name" | "id" | "ids" | "disabled" | "open" | "required" | "readOnly" | "closeOnSelect" | "onValueChange" | "onOpenChange" | "format" | "positioning" | "defaultOpen" | "invalid" | "onValueChangeEnd" | "initialFocusEl" | "onFormatChange" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+export declare function splitColorPickerProps<T extends ColorPickerMachineProps>(props: T): [ColorPickerMachineProps, Omit<T, "value" | "defaultValue" | "name" | "open" | "defaultOpen" | "id" | "ids" | "disabled" | "required" | "readOnly" | "closeOnSelect" | "onValueChange" | "onOpenChange" | "format" | "positioning" | "invalid" | "onValueChangeEnd" | "initialFocusEl" | "onFormatChange" | "openAutoFocus" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
 export {};

package/dist/components/color-picker/hooks/use-color-picker.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 colorPicker from '@destyler/color-picker';
-export interface UseColorPickerProps extends Omit<colorPicker.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UseColorPickerProps extends Omit<colorPicker.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: colorPicker.Context['open'];
     defaultValue?: colorPicker.Context['value'];

package/dist/components/combobox/components/Content.svelte

@@ -12,20 +12,17 @@
   import { useComboboxContext } from '../hooks/use-combobox-context'
   import { usePresenceContext } from '../../presence'
 
-  let { ref = $bindable<Element | null>(), ...props }: ComboboxContentProps = $props()
+  let { ref = $bindable(), ...props }: ComboboxContentProps = $props()
 
   const combobox = useComboboxContext()
   const presence = usePresenceContext()
   const mergedProps = $derived(mergeProps(combobox().getContentProps(), presence().getPresenceProps(), props))
 
-  function setNode(node: HTMLDivElement) {
-    untrack(() => {
-      presence().setNode(node)
-      ref = node
-    })
+  function setNode(node: HTMLElement) {
+    untrack(() => presence().setNode(node))
   }
 </script>
 
 {#if !presence().unmounted}
-  <UI as="div" {...mergedProps} {@attach setNode} />
+  <UI as="div" {...mergedProps} bind:ref={() => ref ?? null, (node) => ref = node} {@attach setNode} />
 {/if}

package/dist/components/combobox/components/Root.svelte

@@ -20,10 +20,15 @@
   import { ComboboxProvider } from '../hooks/use-combobox-context'
   import { useCombobox } from '../hooks/use-combobox.svelte'
 
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
   let {
     open = $bindable<boolean>(),
+    open: openProp,
     value = $bindable<string[]>(),
+    value: valueProp,
     inputValue = $bindable<string>(),
+    inputValue: inputValueProp,
     ...props
   }: ComboboxRootProps<T> = $props()
 
@@ -37,6 +42,7 @@
       'composite',
       'defaultOpen',
       'defaultValue',
+    'defaultInputValue',
       'disabled',
       'disableLayer',
       'form',
@@ -77,20 +83,20 @@
   const machineProps = $derived.by<UseComboboxProps<T>>(() => ({
     ...useComboboxProps,
     id: useComboboxProps.id ?? id,
-    open,
-    value,
-    inputValue,
+    open: openProp,
+    value: valueProp,
+    inputValue: inputValueProp,
     onOpenChange(details) {
       useComboboxProps.onOpenChange?.(details)
-      if (open != null) open = details.open
+      open = details.open
     },
     onValueChange(details) {
       useComboboxProps.onValueChange?.(details)
-      if (value != null) value = details.value
+      value = details.value
     },
     onInputValueChange(details) {
       useComboboxProps.onInputValueChange?.(details)
-      if (inputValue != null) inputValue = details.inputValue
+      inputValue = details.inputValue
     },
   }))
 

package/dist/components/combobox/hooks/use-combobox.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 combobox from '@destyler/combobox';
-export interface UseComboboxProps<T extends CollectionItem> extends Omit<combobox.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'open.controlled' | 'id'> {
+export interface UseComboboxProps<T extends CollectionItem> extends Omit<combobox.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'id'> {
     id: string;
     defaultOpen?: combobox.Context<T>['open'];
     defaultValue?: combobox.Context<T>['value'];

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

@@ -3,7 +3,9 @@ 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 * as combobox from '@destyler/combobox';
+import { mergeProps } from '@destyler/svelte';
 import { runIfFn } from '@destyler/utils';
 import { useFieldContext } from '../../field/index.js';
 export function useCombobox(props) {
@@ -33,6 +35,16 @@ export function useCombobox(props) {
             return machineProps.context;
         },
     });
-    const api = $derived(combobox.connect(state, send, normalizeProps));
+    const connected = $derived(combobox.connect(state, send, normalizeProps));
+    const syncInputValue = createInputValueSync(() => connected.getInputProps(), () => connected.inputValue);
+    const api = $derived({
+        ...connected,
+        getInputProps() {
+            return mergeProps(connected.getInputProps(), {
+                oninput: syncInputValue,
+                oncompositionend: syncInputValue,
+            });
+        },
+    });
     return () => api;
 }