ui-ingredients 0.0.36 → 0.0.38

package/dist/rating-group/create-rating-group.svelte.js

@@ -8,7 +8,8 @@ export function createRatingGroup(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(ratingGroup.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -17,10 +18,22 @@ export function createRatingGroup(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+    })));
+    const [state, send] = useMachine(ratingGroup.machine(context), { context });
+    const api = $derived(reflect(() => {
+        const o = ratingGroup.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => ratingGroup.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/rating-group/hidden-input.svelte

@@ -5,18 +5,16 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {ratingGroupContext} from './context.svelte.js';
+  import {getRatingGroupContext} from './context.svelte.js';
 
   let {...props}: RatingGroupHiddenInputProps = $props();
 
-  let field = getFieldContext();
-  let radioGroup = ratingGroupContext.get();
+  let radioGroup = getRatingGroupContext();
 
   let mergedProps = $derived(
     mergeProps(props, radioGroup.getHiddenInputProps()),
   );
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/rating-group/index.d.ts

@@ -5,3 +5,4 @@ export type { RatingGroupItemProps } from './item.svelte';
 export type { RatingGroupLabelProps } from './label.svelte';
 export type { RatingGroupProps } from './root.svelte';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+export { getRatingGroupContext } from './context.svelte.js';

package/dist/rating-group/index.js

@@ -1,2 +1,3 @@
 export * as RatingGroup from './rating-group.js';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+export { getRatingGroupContext } from './context.svelte.js';

package/dist/rating-group/item.svelte

@@ -12,11 +12,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {ratingGroupContext} from './context.svelte.js';
+  import {getRatingGroupContext} from './context.svelte.js';
 
   let {index, asChild, children, ...props}: RatingGroupItemProps = $props();
 
-  let ratingGroup = ratingGroupContext.get();
+  let ratingGroup = getRatingGroupContext();
 
   let itemState = $derived(ratingGroup.getItemState({index}));
   let mergedProps = $derived(

package/dist/rating-group/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {ratingGroupContext} from './context.svelte.js';
+  import {getRatingGroupContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: RatingGroupLabelProps = $props();
 
-  let ratingGroup = ratingGroupContext.get();
+  let ratingGroup = getRatingGroupContext();
 
   let mergedProps = $derived(mergeProps(props, ratingGroup.getLabelProps()));
 </script>

package/dist/rating-group/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {ratingGroupContext} from './context.svelte.js';
+  import {setRatingGroupContext} from './context.svelte.js';
   import {createRatingGroup} from './create-rating-group.svelte.js';
 
   let {asChild, children, ...props}: RatingGroupProps = $props();
@@ -47,7 +47,7 @@
     mergeProps(otherProps, ratingGroup.getRootProps()),
   );
 
-  ratingGroupContext.set(ratingGroup);
+  setRatingGroupContext(ratingGroup);
 </script>
 
 {#if asChild}

package/dist/segment-group/context.svelte.d.ts

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateSegmentGroupReturn } from './create-segment-group.svelte.js';
-export declare const segmentGroupContext: Context<CreateSegmentGroupReturn>;
-export declare const segmentGroupItemPropsContext: Context<ItemProps>;
+export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => void;
+export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/segment-group/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const segmentGroupContext = new Context('SegmentGroup');
-export const segmentGroupItemPropsContext = new Context('SegmentGroupItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getSegmentGroupContext, setSegmentGroupContext] = createContext('SegmentGroup');
+export const [getSegmentGroupItemPropsContext, setSegmentGroupItemPropsContext,] = createContext('SegmentGroupItem');

package/dist/segment-group/create-segment-group.svelte.js

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createSegmentGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(segmentGroup.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(segmentGroup.machine(context));
     const api = $derived(reflect(() => segmentGroup.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/segment-group/index.d.ts

@@ -7,3 +7,4 @@ export type { SegmentGroupItemProps } from './item.svelte';
 export type { SegmentGroupLabelProps } from './label.svelte';
 export type { SegmentGroupProps } from './root.svelte';
 export { anatomy as segmentGroupAnatomy } from './anatomy.js';
+export { getSegmentGroupContext } from './context.svelte.js';

package/dist/segment-group/index.js

@@ -1,2 +1,3 @@
 export * as SegmentGroup from './segment-group.js';
 export { anatomy as segmentGroupAnatomy } from './anatomy.js';
+export { getSegmentGroupContext } from './context.svelte.js';

package/dist/segment-group/indicator.svelte

@@ -9,11 +9,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
-  import {segmentGroupContext} from './context.svelte.js';
+  import {getSegmentGroupContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupIndicatorProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
+  let segmentGroup = getSegmentGroupContext();
 
   let mergedProps = $derived(
     mergeProps(props, segmentGroup.getIndicatorProps(), parts.indicator.attrs),

package/dist/segment-group/item-control.svelte

@@ -10,14 +10,14 @@
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupItemControlProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
-  let itemProps = segmentGroupItemPropsContext.get();
+  let segmentGroup = getSegmentGroupContext();
+  let itemProps = getSegmentGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/segment-group/item-hidden-input.svelte

@@ -8,14 +8,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {...props}: SegmentGroupItemHiddenInputProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
-  let itemProps = segmentGroupItemPropsContext.get();
+  let segmentGroup = getSegmentGroupContext();
+  let itemProps = getSegmentGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, segmentGroup.getItemHiddenInputProps(itemProps)),

package/dist/segment-group/item-text.svelte

@@ -10,14 +10,14 @@
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupItemTextProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
-  let itemProps = segmentGroupItemPropsContext.get();
+  let segmentGroup = getSegmentGroupContext();
+  let itemProps = getSegmentGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/segment-group/item.svelte

@@ -15,13 +15,13 @@
   import {createSplitProps} from '@zag-js/utils';
   import {parts} from './anatomy.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    setSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {children, asChild, ...props}: SegmentGroupItemProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
+  let segmentGroup = getSegmentGroupContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['value', 'invalid', 'disabled'])(props),
@@ -36,7 +36,7 @@
     ),
   );
 
-  segmentGroupItemPropsContext.set(() => itemProps);
+  setSegmentGroupItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/segment-group/label.svelte

@@ -9,11 +9,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
-  import {segmentGroupContext} from './context.svelte.js';
+  import {getSegmentGroupContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupLabelProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
+  let segmentGroup = getSegmentGroupContext();
 
   let mergedProps = $derived(
     mergeProps(props, segmentGroup.getLabelProps(), parts.label.attrs),

package/dist/segment-group/root.svelte

@@ -21,7 +21,7 @@
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {parts} from './anatomy.js';
-  import {segmentGroupContext} from './context.svelte.js';
+  import {setSegmentGroupContext} from './context.svelte.js';
   import {createSegmentGroup} from './create-segment-group.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupProps = $props();
@@ -46,7 +46,7 @@
     mergeProps(otherProps, segmentGroup.getRootProps(), parts.root.attrs),
   );
 
-  segmentGroupContext.set(segmentGroup);
+  setSegmentGroupContext(segmentGroup);
 </script>
 
 {#if asChild}

package/dist/select/clear-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectClearTriggerProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getClearTriggerProps()));
 </script>

package/dist/select/content.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectContentProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getContentProps()));
 </script>

package/dist/select/context.svelte.d.ts

@@ -1,6 +1,5 @@
-import { Context } from '../context.svelte.js';
 import type { ItemGroupProps, ItemProps } from '@zag-js/select';
 import type { CreateSelectReturn } from './create-select.svelte.js';
-export declare const selectContext: Context<CreateSelectReturn>;
-export declare const selectItemPropsContext: Context<ItemProps<any>>;
-export declare const selectItemGroupPropsContext: Context<ItemGroupProps>;
+export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => void;
+export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
+export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;

package/dist/select/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../context.svelte.js';
-export const selectContext = new Context('Select');
-export const selectItemPropsContext = new Context('SelectItem');
-export const selectItemGroupPropsContext = new Context('SelectItemGroup');
+import { createContext } from '../create-context.svelte.js';
+export const [getSelectContext, setSelectContext] = createContext('Select');
+export const [getSelectItemPropsContext, setSelectItemPropsContext] = createContext('SelectItem');
+export const [getSelectItemGroupPropsContext, setSelectItemGroupPropsContext] = createContext('SelectItemGroup');

package/dist/select/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectControlProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getControlProps()));
 </script>

package/dist/select/create-select.svelte.d.ts

@@ -1,12 +1,10 @@
 import * as select from '@zag-js/select';
-export interface CreateSelectProps<T> extends Omit<select.Context, 'id' | 'dir' | 'getRootNode' | 'collection' | 'open.controlled'> {
+type Omitted = 'id' | 'dir' | 'getRootNode' | 'collection' | 'open.controlled';
+export interface CreateSelectProps<T> extends select.CollectionOptions<T>, Omit<select.Context, Omitted> {
     id?: string | null;
-    items: T[];
-    itemToString?: (item: T) => string;
-    itemToValue?: (item: T) => string;
-    isItemDisabled?: (item: T) => boolean;
     defaultOpen?: boolean;
 }
 export interface CreateSelectReturn extends select.Api {
 }
 export declare function createSelect<T>(props: CreateSelectProps<T>): any;
+export {};

package/dist/select/create-select.svelte.js

@@ -3,18 +3,21 @@ import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as select from '@zag-js/select';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { createSplitProps } from '@zag-js/utils';
 import { uid } from 'uid';
 export function createSelect(props) {
-    const collection = $derived(select.collection({
-        items: props.items,
-        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
-        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
-        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
-    }));
+    const [collectionProps, selectProps] = $derived(createSplitProps([
+        'items',
+        'itemToValue',
+        'itemToString',
+        'isItemDisabled',
+    ])(props));
+    const collection = $derived(select.collection(collectionProps));
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(select.machine({
+    const id = uid();
+    const context = $derived({
         ids: {
             label: field?.ids.label,
             hiddenSelect: field?.ids.control,
@@ -23,17 +26,26 @@ export function createSelect(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
-        id: props.id ?? uid(),
+        ...selectProps,
+        id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
+        'open.controlled': props.open != null,
         getRootNode: environment?.getRootNode,
         collection,
-        'open.controlled': props.open != null,
+    });
+    const [state, send] = useMachine(select.machine(context));
+    const api = $derived(reflect(() => {
+        const o = select.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenSelectProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenSelectProps(),
+                };
+            },
+        };
     }));
-    const api = $derived(reflect(() => ({
-        ...select.connect(state, send, normalizeProps),
-        collection,
-    })));
     return api;
 }

package/dist/select/hidden-select.svelte

@@ -5,18 +5,16 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectHiddenSelectProps = $props();
 
-  let field = getFieldContext();
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getHiddenSelectProps()));
 </script>
 
-<select aria-describedby={field?.['aria-describedby']} {...mergedProps}>
+<select {...mergedProps}>
   {@render children?.()}
 </select>

package/dist/select/index.d.ts

@@ -16,3 +16,4 @@ export type { SelectProps } from './root.svelte';
 export type { SelectTriggerProps } from './trigger.svelte';
 export type { SelectValueTextProps } from './value-text.svelte';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { getSelectContext } from './context.svelte.js';

package/dist/select/index.js

@@ -1,2 +1,3 @@
 export * as Select from './select.js';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { getSelectContext } from './context.svelte.js';

package/dist/select/indicator.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectIndicatorProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getIndicatorProps()));
 </script>

package/dist/select/item-group-label.svelte

@@ -9,14 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    selectContext,
-    selectItemGroupPropsContext,
+    getSelectContext,
+    getSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
 
-  let select = selectContext.get();
-  let itemGroupProps = selectItemGroupPropsContext.get();
+  let select = getSelectContext();
+
+  let itemGroupProps = getSelectItemGroupPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/select/item-group.svelte

@@ -10,13 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {uid} from 'uid';
   import {
-    selectContext,
-    selectItemGroupPropsContext,
+    getSelectContext,
+    setSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
   let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let id_ = uid();
 
@@ -28,7 +28,7 @@
     mergeProps(props, select.getItemGroupProps(itemGroupProps)),
   );
 
-  selectItemGroupPropsContext.set(() => itemGroupProps);
+  setSelectItemGroupPropsContext(() => itemGroupProps);
 </script>
 
 {#if asChild}

package/dist/select/item-indicator.svelte

@@ -8,12 +8,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext, selectItemPropsContext} from './context.svelte.js';
+  import {
+    getSelectContext,
+    getSelectItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemIndicatorProps = $props();
 
-  let select = selectContext.get();
-  let itemProps = selectItemPropsContext.get();
+  let select = getSelectContext();
+  let itemProps = getSelectItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, select.getItemIndicatorProps(itemProps)),

package/dist/select/item-text.svelte

@@ -8,12 +8,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext, selectItemPropsContext} from './context.svelte.js';
+  import {
+    getSelectContext,
+    getSelectItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemTextProps = $props();
 
-  let select = selectContext.get();
-  let itemProps = selectItemPropsContext.get();
+  let select = getSelectContext();
+  let itemProps = getSelectItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, select.getItemTextProps(itemProps)),

package/dist/select/item.svelte

@@ -13,11 +13,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {selectContext, selectItemPropsContext} from './context.svelte.js';
+  import {
+    getSelectContext,
+    setSelectItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
@@ -28,7 +31,7 @@
     mergeProps(otherProps, select.getItemProps(itemProps)),
   );
 
-  selectItemPropsContext.set(() => itemProps);
+  setSelectItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/select/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectLabelProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getLabelProps()));
 </script>

package/dist/select/list.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectListProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getListProps()));
 </script>